Merge pull request #12 from kevinkosterr/8-tests

Add tests, tests scripts and apply fixes

Author: kevinkosterr

__tests__/_resources/utils.js

@@ -0,0 +1,61 @@
+import { mount } from '@vue/test-utils'
+
+import FormGenerator from '@/FormGenerator.vue'
+
+/**
+ * Mount the form generator component
+ * @param schema - schema object to pass as prop
+ * @param {Object} model - model object to pass as prop
+ * @returns {VueWrapper<FormGenerator>}
+ */
+export function mountFormGenerator (schema, model) {
+  return mount(FormGenerator, { props: { schema, model } })
+}
+
+/**
+ * Generate a form schema for a single field component
+ * @param {String} name - name of the field
+ * @param {String} model - model key of the field
+ * @param {String} type - field type
+ * @param {String} inputType - field input type, required if `type === 'input'`
+ * @param {String} label - field label
+ * @param {any} initialValue - initial model value
+ * @param {Object} extraFieldProperties - extra field properties to add
+ * @returns {{schema: {fields: [{name, model, inputType, label, type}]}, model: {}}}
+ */
+export function generateSchemaSingleField (
+  name,
+  model,
+  type,
+  inputType,
+  label,
+  initialValue,
+  extraFieldProperties
+) {
+  return {
+    model: {
+      [model]: initialValue
+    },
+    schema: {
+      fields: [
+        {
+          name, model, type, inputType, label, ...extraFieldProperties
+        }
+      ]
+    }
+  }
+}
+
+/**
+ * Generate props for a single field component
+ * @param {Object} formSchema - entire form schema object
+ * @returns {{field: *, model, id: string, formGenerator: {}}}
+ */
+export function generatePropsSingleField (formSchema) {
+  return {
+    id: formSchema.name + '_test_id',
+    formGenerator: {},
+    field: { ...formSchema.schema.fields[0] },
+    model: { ...formSchema.model }
+  }
+}

__tests__/components/fields/FieldButton.spec.js

@@ -0,0 +1,78 @@
+import { mountFormGenerator, generatePropsSingleField } from '@test/_resources/utils.js'
+import { describe, it, expect } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+
+import FieldButton from '@/fields/buttons/FieldButton.vue'
+import FieldPassword from '@/fields/input/FieldPassword.vue'
+import FieldCheckbox from '@/fields/input/FieldCheckbox.vue'
+
+const form = {
+  model: {
+    password: '',
+    checkboxTestModel: false
+  },
+  schema: {
+    fields: [
+      {
+        type: 'button',
+        buttonText: 'Reset password field',
+        onClick: (model, _field) => {
+          model.password = ''
+        }
+      },
+      {
+        name: 'checkboxTestName',
+        model: 'checkboxTestModel',
+        label: 'Checkbox Test',
+        type: 'checkbox'
+      },
+      {
+        name: 'passwordTest',
+        model: 'password',
+        label: 'Password',
+        type: 'input',
+        inputType: 'password'
+      }
+    ]
+  }
+}
+
+const props = generatePropsSingleField(form)
+
+
+describe('Test FieldButton', () => {
+
+  it('Should render correctly', () => {
+    const wrapper = mount(FieldButton, { props })
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.find('button').element.innerHTML).toContain(props.field.buttonText)
+  })
+
+  it('Should render correctly inside form generator', async () => {
+    config.global.components = { FieldButton }
+
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    const buttonField = formWrapper.findComponent(FieldButton)
+    expect(buttonField.exists()).toBeTruthy()
+    expect(buttonField.find('button').element.innerHTML).toContain(props.field.buttonText)
+  })
+
+  it('Should update model values', async () => {
+    config.global.components = { FieldPassword, FieldButton, FieldCheckbox }
+
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    expect(formWrapper.find('input[type=password]').exists()).toBe(true)
+    expect(formWrapper.find('input[type=checkbox]').exists()).toBe(true)
+    expect(formWrapper.find('button').exists()).toBe(true)
+
+    await formWrapper.find('input[type=password]').setValue('password')
+    expect(formWrapper.vm.model.password).toBe('password')
+
+    const buttonField = formWrapper.findComponent(FieldButton)
+    expect(buttonField.exists()).toBe(true)
+
+    await buttonField.find('button').trigger('click.prevent')
+    expect(formWrapper.vm.model.password).toBe('')
+  })
+
+})

__tests__/components/fields/FieldCheckbox.spec.js

@@ -0,0 +1,107 @@
+import { generatePropsSingleField, generateSchemaSingleField, mountFormGenerator } from '@test/_resources/utils.js'
+import { describe, it, expect } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+
+import FieldCheckbox from '@/fields/input/FieldCheckbox.vue'
+
+const form = generateSchemaSingleField(
+  'checkboxTestName',
+  'checkboxTestModel',
+  'input',
+  'checkbox',
+  'Checkbox Test',
+  false
+)
+
+const props = generatePropsSingleField(form)
+
+describe('Test FieldCheckbox', () => {
+
+  it('Should render correctly', async () => {
+    const wrapper = mount(FieldCheckbox, { props })
+    // Checkbox should be rendered.
+    expect(wrapper.find('input[type=checkbox]').exists()).toBe(true)
+    // Label should be rendered and have the correct text.
+    expect(wrapper.find('label').text()).toContain(props.field.label)
+    await wrapper.vm.$nextTick()
+    // Checked attribute should be false, since the default value is set to false inside the model.
+    expect(wrapper.find('input[type=checkbox]').element.checked).toBe(false)
+  })
+
+  it('Should render correctly inside form generator', async() => {
+    config.global.components = { FieldCheckbox }
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+
+    expect(formWrapper.findComponent(FieldCheckbox).exists()).toBe(true)
+    expect(formWrapper.find('input[type=checkbox]').exists()).toBe(true)
+  })
+
+  it('Should be disabled, when specified with a conditional function', async () => {
+    const model = { ...form.model, otherTestProperty: false }
+    const disabled = (model, _field) => model.otherTestProperty === false
+    const field = { ...form.schema.fields[0], disabled }
+
+    expect(disabled(model)).toBe(true)
+
+    const wrapper = mount(FieldCheckbox, { props: { ...props, model, field  } })
+    expect(wrapper.find('input[type=checkbox]').exists()).toBe(true)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isDisabled).toBe(true)
+    expect(wrapper.find('input[type=checkbox]').element.disabled).toBe(true)
+  })
+
+  it('Should be disabled, when specified with boolean', async () => {
+    const field = { ...props.field, disabled: true }
+    const wrapper = mount(FieldCheckbox, { props: { ...props, field } })
+
+    const checkbox = wrapper.find('input[type=checkbox]')
+
+    expect(checkbox.exists()).toBe(true)
+    expect(wrapper.vm.isDisabled).toBe(true)
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('input[type=checkbox]').element.disabled).toBe(true)
+  })
+
+  it('Checked state should be the same as default value', async () => {
+    const model = { checkboxTestModel: true }
+    const wrapper = mount(FieldCheckbox, { props: { ...props, model }  })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('input[type=checkbox]').element.checked).toBe(model.checkboxTestModel)
+  })
+
+  it('Should emit onInput event', async () => {
+    const wrapper = mount(FieldCheckbox, { props })
+    await wrapper.find('input[type=checkbox]').trigger('change' )
+    expect(wrapper.emitted()).toHaveProperty('onInput')
+  })
+
+  it('Should update model value', async () => {
+    config.global.components = { FieldCheckbox }
+
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+
+
+    const wrapper = formWrapper.findComponent(FieldCheckbox)
+    expect(wrapper.exists()).toBe(true)
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input').element.checked).toBe(false)
+
+    await wrapper.find('input').trigger('click')
+    expect(wrapper.find('input').element.checked).toBe(true)
+
+    await wrapper.find('input').trigger('change')
+    expect(wrapper.emitted()).toHaveProperty('onInput', [ [ true ] ])
+    await wrapper.vm.$nextTick()
+
+    expect(formWrapper.vm.model.checkboxTestModel).toBe(true)
+    // Model value of wrapper should be updated as well, since this gets passed down from the Form Generator.
+    expect(wrapper.vm.model.checkboxTestModel).toBe(true)
+  })
+
+})

__tests__/components/fields/FieldColor.spec.js

@@ -0,0 +1,50 @@
+import { mountFormGenerator, generatePropsSingleField, generateSchemaSingleField } from '@test/_resources/utils.js'
+import { mount, config } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+import FieldColor from '@/fields/input/FieldColor.vue'
+
+const form = generateSchemaSingleField(
+  'testColor',
+  'colorModel',
+  'input',
+  'color',
+  'Pick a color',
+  ''
+)
+
+const props = generatePropsSingleField(form)
+
+describe('Test FieldColor', () => {
+
+  it('Should render correctly', async () => {
+    const wrapper = mount(FieldColor, { props })
+    expect(wrapper.find('input[type=color]').exists()).toBe(true)
+  })
+
+  it('Should render correctly inside form generator', async () => {
+    config.global.components = { FieldColor }
+
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    expect(formWrapper.findComponent(FieldColor).exists()).toBe(true)
+    expect(formWrapper.find('input[type=color]').exists()).toBe(true)
+  })
+
+  it('Should emit onInput event', async () => {
+    const wrapper = mount(FieldColor, { props })
+    await wrapper.find('input[type=color]').trigger('change')
+    expect(wrapper.emitted()).toHaveProperty('onInput')
+  })
+
+  it('Should update model value', async () => {
+    config.global.components = { FieldColor }
+
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+
+    const wrapper = formWrapper.findComponent(FieldColor)
+    await wrapper.find('input[type=color]').setValue('#efefef')
+    expect(wrapper.emitted()).toHaveProperty('onInput', [ [ '#efefef' ] ])
+    expect(formWrapper.vm.model.colorModel).toBe('#efefef')
+  })
+
+})

__tests__/components/fields/FieldNumber.spec.js

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { mountFormGenerator, generatePropsSingleField, generateSchemaSingleField } from '@test/_resources/utils.js'
+import { mount, config } from '@vue/test-utils'
+
+import FieldNumber from '@/fields/input/FieldNumber.vue'
+
+const form = generateSchemaSingleField(
+  'testNumber',
+  'numberModel',
+  'input',
+  'number',
+  'Number input',
+  0,
+  {
+    max: 5,
+    min: 2
+  }
+)
+
+const props = generatePropsSingleField(form)
+
+describe('Test FieldNumber', () => {
+
+  it('Should render correctly', async () => {
+    const wrapper = mount(FieldNumber, { props })
+    expect(wrapper.find('input[type=number]').exists()).toBeTruthy()
+  })
+
+  it('Should render correctly inside form generator', async () => {
+    config.global.components = { FieldNumber }
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    expect(formWrapper.find('input[type=number]').exists()).toBeTruthy()
+
+    const wrapper = formWrapper.findComponent(FieldNumber)
+    expect(wrapper.exists()).toBeTruthy()
+    expect(wrapper.attributes().min).toBe('2')
+    expect(wrapper.attributes().max).toBe('5')
+  })
+
+  it('Should emit onInput event', async () => {
+    const wrapper = mount(FieldNumber, { props })
+    await wrapper.find('input').trigger('input')
+    expect(wrapper.emitted()).toHaveProperty('onInput')
+  })
+
+  it('Should update model value', async () => {
+    config.global.components = { FieldNumber }
+
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    const numberField = formWrapper.findComponent(FieldNumber)
+    expect(numberField.exists()).toBeTruthy()
+
+    await numberField.find('input').setValue(4)
+    expect(formWrapper.vm.model.numberModel).toBe(4)
+  })
+})