@bytesnz

Jack Farley, Computer Engineer

We recently started on building our own json-schema form generator for use in our application. We decided to go down the route of creating our own instead of using one of the various ones already available as we needed our forms to have some custom functionality, including validation warnings and extended descriptions.

One of the things that fell on me to complete was getting the basic functionality around array types working. After reorganising the code logic to be able to work with arrays and getting the basic generation functionality working along with a storybook showing off the functionality, I decided it was about time to write some tests for the components I had created.

Writing Tests

Writing tests for the mixins and the utility functions was nice and simple, but writing tests to ensure that a component is spitting out what it should has always haunted me. Using jest and vue-test-utils I was able to create a wrapped shallow instance of the component under test. I then looked into ways to testing if it was what I expected, but there wasn't any great methods that I could see. Using the wrapper.html() function returned very unhelpful results (example below) that hid all the information I was wanting to check, like the values of the passed props. Digging into the vm or the vnode of the instance was just going to be too painful on some of the more complex components. So I decided to create my own utility function.

Output of wrapper.html() function

<container-stub formid="form-generator-2/" schema="[object Object]" config="[object Object]" fieldconfigs="[object Object]" value="hello" required="true" path=""></container-stub>

instanceComponentObject()

The functionality I wanted was something I have used in previous tests. In those, I called render functions with a custom createElement/h function that simply returned an Object with the tag of the component, the props passed to the component, and the children given to the component.

result = {
  tag: 'container-stub',
  props: {
    formId: 'form-generator-2',
    schema: {
      type: 'string',
      title: 'A String'
    }
    config: {}
    fieldConfigs: {}
    value: 'hello',
    required: true,
    path: []
  },
  children: []
}

To do this. I ended up recursively going through the instance's vnodes and children and returning Objects to represent them. I initially did it using the vm, but found that it squashed a lot of the elements down into single children and the results were again not very handy.

/**
 * Convert an vnode into a Object representation of it with its tag,
 * props and children
 *
 * @prop vnode VNode to convert to an Object representation
 *
 * @returns An Object representation with tag, props and children values
 */
export const componentObject = (vnode) => {
  return (
    vnode.text || {
      tag: vnode.componentOptions?.tag || vnode.tag,
      props: vnode.data?.props,
      children:
        (vnode.children &&
          vnode.children.map((child) => componentObject(child))) ||
        []
    }
  );
};

/**
 * Convert the wrapper instance into to an Object representation of
 * the vnode including tag, props and children
 *
 * @prop instance Instance to convert
 *
 * @returns An Object representation of the vnode
 */
export const instanceComponentObject = (instance) => {
  return instance.vnode && componentObject(instance.vnode);
};

(for those who haven't seen the interesting sytax before, the ?. is the new optional chaining)

Capturing Snapshots

Once I had the helper function in hand, I was able to easily create an instance of a component (using another helper function to create a shallow mounted instance) and compare the output of my function against the Jest snapshot

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuetify from 'vuetify';
import Vue from 'vue';

import FormGenerator from '~/src/form/components/FormGenerator';
import { instanceComponentObject, createInstance } from '~/tests/helpers/vue';

Vue.use(Vuetify);

/**
 * Shallow mount a component to create an instance of the component
 *
 * @prop component Component to create a shallow instance of
 * @prop props Props to pass to the component
 * @prop options Options to pass to shallowMount
 */
const createInstance = (component, props, options) => {
  const localVue = createLocalVue();
  const vuetify = new Vuetify();
  return shallowMount(component, {
    localVue,
    vuetify,
    propsData: props || {},
    ...options
  });
};

test('it gives config, fieldConfigs, formId and require to Container', () => {
  const fieldConfigs = {
    field: {},
    'sub/field/deep': {}
  };
  const wrapper = createInstance(FormGenerator, {
    schema: {
      type: 'object',
      properties: {
        field: {},
        sub: {
          type: 'object',
          properties: {
            field: {}
          }
        }
      }
    },
    config: {
      fields: fieldConfigs
    }
  });

  expect(instanceComponentObject(wrapper)).toMatchSnapshot();
});

Pesky Asynchronous Components

All was well after creating tests for two of the components and reviewing the created snapshots carefully to ensure they were correct. However, the third component, the container for array types, returned some strange results - everything was there except for the actual fields.

The snapshot from before the fix without the fields

exports[`render simple array with a current value 1`] = `
Object {
  "children": Array [
    ...,
    Object {
      "children": Array [
        Object {
          "children": Array [
            Object {
              "children": Array [],
              "props": Object {
                "icon": true,
              },
              "tag": "v-btn",
            },
          ],
          "props": undefined,
          "tag": "v-col-stub",
        },
      ],
      "props": undefined,
      "tag": "div",
    },
    Object {
      "children": Array [
        Object {
          "children": Array [
            Object {
              "children": Array [],
              "props": Object {
                "icon": true,
              },
              "tag": "v-btn",
            },
          ],
          "props": undefined,
          "tag": "v-col-stub",
        },
      ],
      "props": undefined,
      "tag": "div",
    },
    ...,
  ],
  "props": undefined,
  "tag": "div",
}  
`;

After a little digging, I realised that this was because the component dynamically imports a higher level container component. This is because it is the same container component that creates the array container component, so it is set as undefined in the array container. To get around this, I was able to force vue-test-utils to stub the component so that it produced the output as expected.

The test with the forced stub.

test('with a current value', () => {
  const wrapper = createInstance(                            
    ArrayContainer,                    
    {                  
      schema: {                                              
        type: 'array',          
        title: 'Title',
        description: 'Some description',
        items: {                                                                          
          type: 'string',
          title: 'String'
        }
      },
      formId: 'test',
      value: ['one', 'two']
    },
    {
      stubs: {
        Container: true
      }
    }
  );

  expect(instanceComponentObject(wrapper)).toMatchSnapshot();
});

The snapshot with the stub forced, now happily with the fields/container component showing.

exports[`render simple array with a current value 1`] = `
Object {
  "children": Array [
    ...,
    Object {
      "children": Array [
        Object {
          "children": Array [],
          "props": Object {
            "config": Object {},
            "fieldConfig": undefined,
            "fieldConfigs": undefined,
            "formId": "test",
            "path": Array [
              0,
            ],
            "required": true,
            "schema": Object {
              "title": "String",
              "type": "string",
            },
            "value": "one",
          },
          "tag": "container",
        },
        Object {
          "children": Array [
            Object {
              "children": Array [],
              "props": Object {
                "icon": true,
              },
              "tag": "v-btn",
            },
          ],
          "props": undefined,
          "tag": "v-col-stub",
        },
      ],
      "props": undefined,
      "tag": "div",
    },
    Object {
      "children": Array [
        Object {
          "children": Array [],
          "props": Object {
            "config": Object {},
            "fieldConfig": undefined,
            "fieldConfigs": undefined,
            "formId": "test",
            "path": Array [
              1,
            ],
            "required": true,
            "schema": Object {
              "title": "String",
              "type": "string",
            },
            "value": "two",
          },
          "tag": "container",
        },
        Object {
          "children": Array [
            Object {
              "children": Array [],
              "props": Object {
                "icon": true,
              },
              "tag": "v-btn",
            },
          ],
          "props": undefined,
          "tag": "v-col-stub",
        },
      ],
      "props": undefined,
      "tag": "div",
    },
    ...,
  ],
  "props": undefined,
  "tag": "div",
}  
`;

Hooray.