Merge branch 'master' into production

Author: kevinkosterr

__tests__/components/fields/FieldButton.spec.js

@@ -1,11 +1,15 @@
 import { mountFormGenerator, generatePropsSingleField } from '@test/_resources/utils.js'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeAll } from 'vitest'
 import { mount, config } from '@vue/test-utils'
 
 import FieldButton from '@/fields/core/FieldButton.vue'
 import FieldPassword from '@/fields/core/FieldPassword.vue'
 import FieldCheckbox from '@/fields/core/FieldCheckbox.vue'
 
+beforeAll(() => {
+  config.global.components = { FieldButton }
+})
+
 const form = {
   model: {
     password: '',
@@ -49,16 +53,14 @@ describe('FieldButton', () => {
   })
 
   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 }
+    config.global.components = { ...config.global.components, FieldPassword, FieldCheckbox }
 
     const formWrapper = mountFormGenerator(form.schema, form.model)
     expect(formWrapper.find('input[type=password]').exists()).toBe(true)

__tests__/components/fields/FieldCheckbox.spec.js

@@ -1,5 +1,5 @@
 import { generatePropsSingleField, generateSchemaSingleField, mountFormGenerator } from '@test/_resources/utils.js'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeAll } from 'vitest'
 import { mount, config } from '@vue/test-utils'
 
 import FieldCheckbox from '@/fields/core/FieldCheckbox.vue'
@@ -15,6 +15,10 @@ const form = generateSchemaSingleField(
 
 const props = generatePropsSingleField(form)
 
+beforeAll(() => {
+  config.global.components = { FieldCheckbox }
+})
+
 describe('FieldCheckbox', () => {
 
   it('Should render correctly', async () => {
@@ -29,7 +33,6 @@ describe('FieldCheckbox', () => {
   })
 
   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)
@@ -81,11 +84,8 @@ describe('FieldCheckbox', () => {
   })
 
   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)
 

__tests__/components/fields/FieldChecklist.spec.js

@@ -0,0 +1,124 @@
+import { mountFormGenerator, generatePropsSingleField, generateSchemaSingleField } from '@test/_resources/utils.js'
+import { it, describe, expect, beforeAll } from 'vitest'
+import { config, mount } from '@vue/test-utils'
+
+import FieldChecklist from '@/fields/core/FieldChecklist.vue'
+
+const form = generateSchemaSingleField(
+  'checklistTest',
+  'checklistModel',
+  'checklist',
+  null,
+  'Test label',
+  [],
+  {
+    options: [
+      { name: 'Test 1', value: 'test1' },
+      { name: 'Test 2', value: 'test2' },
+      { name: 'Test 3', value: 'test3' },
+      { name: 'Test 4', value: 'test4' }
+    ]
+  }
+)
+
+const props = generatePropsSingleField(form)
+
+beforeAll(() => {
+  config.global.components = { FieldChecklist }
+})
+
+describe('FieldChecklist', () => {
+
+  it('Should render correctly', () => {
+    const wrapper = mount(FieldChecklist, { props })
+    const checkBoxes = wrapper.findAll('input[type=checkbox]')
+    expect(checkBoxes.length).toBe(4)
+
+    const labels = wrapper.findAll('label')
+    expect(labels.length).toBe(4)
+
+    // Ensure each label has the checkbox that belongs to them
+    labels.forEach((label, idx) => {
+      expect(label.text()).toBe('Test ' + (idx + 1))
+      const checkbox = label.find('input[type=checkbox]')
+      expect(checkbox.attributes().value).toBe('test' + (idx + 1))
+    })
+
+  })
+
+  it('Should render correctly inside form generator', () => {
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    // The first label should be the label that's specified inside the field's schema.
+    expect(formWrapper.find('label').text()).toContain('Test label')
+
+    const checklistField = formWrapper.findComponent(FieldChecklist)
+    expect(checklistField.exists()).toBe(true)
+
+    const labels = checklistField.findAll('label')
+    expect(labels.length).toBe(4)
+  })
+
+  it('Should emit onInput event', () => {
+    const wrapper = mount(FieldChecklist, { props })
+    wrapper.find('input[type=checkbox]').trigger('change')
+    expect(wrapper.emitted()).toHaveProperty('onInput')
+  })
+
+  it('Should update model value', async () => {
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    const checklistField = formWrapper.findComponent(FieldChecklist)
+    expect(checklistField.exists()).toBe(true)
+
+    const triggerChange = (value) => formWrapper.find(`input[type=checkbox][value=${value}]`).trigger('change')
+
+    triggerChange('test2')
+    expect(formWrapper.vm.model.checklistModel).toContain('test2')
+    triggerChange('test3')
+    expect(formWrapper.vm.model.checklistModel).toContain('test3')
+
+    // Value should be removed, since it is already present in the model
+    triggerChange('test2')
+    expect(formWrapper.vm.model.checklistModel).not.toContain('test2')
+  })
+
+  it('Should update checked state properly', async () => {
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    const checklistField = formWrapper.findComponent(FieldChecklist)
+    expect(checklistField.exists()).toBe(true)
+
+    const test1Checkbox = () => formWrapper.find('input[type=checkbox][value=test1]')
+    const test4Checkbox = () => formWrapper.find('input[type=checkbox][value=test4')
+
+    // Value shouldn't be checked by default.
+    expect(test1Checkbox().attributes()).not.toHaveProperty('checked')
+    test1Checkbox().trigger('change')
+    await checklistField.vm.$nextTick()
+    expect(checklistField.find('input[type=checkbox][value=test1]').attributes()).toHaveProperty('checked')
+
+    // Value shouldn't be checked by default.
+    expect(test4Checkbox().attributes()).not.toHaveProperty('checked')
+    test4Checkbox().trigger('change')
+    await checklistField.vm.$nextTick()
+    expect(checklistField.find('input[type=checkbox][value=test4]').attributes()).toHaveProperty('checked')
+  })
+
+  it('Should render values present by default, as checked', async () => {
+    const model = { checklistModel: [ 'test2', 'test4' ] }
+    const formWrapper = mountFormGenerator(form.schema, model)
+
+    // Values should be set inside the model of the form generator
+    expect(formWrapper.vm.model.checklistModel).toContain('test2')
+    expect(formWrapper.vm.model.checklistModel).toContain('test4')
+    expect(formWrapper.vm.model.checklistModel).toHaveLength(2)
+
+    const checklistField = formWrapper.findComponent(FieldChecklist)
+    expect(checklistField.exists()).toBe(true)
+    // These values should now be checked, since they are in the model by default
+    expect(checklistField.find('input[type=checkbox][value=test2').attributes()).toHaveProperty('checked')
+    expect(checklistField.find('input[type=checkbox][value=test4').attributes()).toHaveProperty('checked')
+    // These shouldn't be checked, since they are not in the default values
+    expect(checklistField.find('input[type=checkbox][value=test1').attributes()).not.toHaveProperty('checked')
+    expect(checklistField.find('input[type=checkbox][value=test3').attributes()).not.toHaveProperty('checked')
+  })
+
+})

__tests__/components/fields/FieldColor.spec.js

@@ -1,6 +1,6 @@
 import { mountFormGenerator, generatePropsSingleField, generateSchemaSingleField } from '@test/_resources/utils.js'
 import { mount, config } from '@vue/test-utils'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeAll } from 'vitest'
 
 import FieldColor from '@/fields/core/FieldColor.vue'
 
@@ -16,6 +16,10 @@ const form = generateSchemaSingleField(
 
 const props = generatePropsSingleField(form)
 
+beforeAll(() => {
+  config.global.components = { FieldColor }
+})
+
 describe('FieldColor', () => {
 
   it('Should render correctly', async () => {
@@ -24,16 +28,12 @@ describe('FieldColor', () => {
   })
 
   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 render correctly, with input', async () => {
-    config.global.components = { FieldColor }
-
     const schema = { ...form.schema }
     schema.fields[0].withInput = true
     const formWrapper = mountFormGenerator(schema, form.model)
@@ -50,8 +50,6 @@ describe('FieldColor', () => {
   })
 
   it('Should update model value', async () => {
-    config.global.components = { FieldColor }
-
     const formWrapper = mountFormGenerator(form.schema, form.model)
 
     const wrapper = formWrapper.findComponent(FieldColor)
@@ -61,8 +59,6 @@ describe('FieldColor', () => {
   })
 
   it ('Should update model value and sync values', async () => {
-    config.global.components = { FieldColor }
-
     const schema = { ...form.schema }
     schema.fields[0].withInput = true
     const formWrapper = mountFormGenerator(schema, form.model)

__tests__/components/fields/FieldMask.spec.js

@@ -1,6 +1,6 @@
 import { mountFormGenerator, generatePropsSingleField, generateSchemaSingleField } from '@test/_resources/utils'
 import { mount, config } from '@vue/test-utils'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeAll } from 'vitest'
 
 import FieldMask from '@/fields/core/FieldMask.vue'
 
@@ -22,6 +22,9 @@ const form = generateSchemaSingleField(
 
 const props = generatePropsSingleField(form)
 
+beforeAll(() => {
+  config.global.components = { FieldMask }
+})
 
 describe('FieldMask', () => {
 
@@ -35,7 +38,6 @@ describe('FieldMask', () => {
   })
 
   it('Should render correctly inside form generator', async () => {
-    config.global.components = { FieldMask }
     const formWrapper = mountFormGenerator(form.schema, form.model)
 
     expect(formWrapper.findComponent(FieldMask).exists()).toBe(true)
@@ -48,8 +50,6 @@ describe('FieldMask', () => {
   })
 
   it('Should update model value, masked', async () => {
-    config.global.components = { FieldMask }
-
     const formWrapper = mountFormGenerator(form.schema, form.model)
 
     const textField = formWrapper.findComponent(FieldMask)
@@ -59,8 +59,6 @@ describe('FieldMask', () => {
   })
 
   it('Should update model value, unmasked', async () => {
-    config.global.components = { FieldMask }
-
     form.schema.fields[0].maskOptions.unmasked = true
     const formWrapper = mountFormGenerator(form.schema, form.model)
 

__tests__/components/fields/FieldNumber.spec.js

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeAll } from 'vitest'
 import { mountFormGenerator, generatePropsSingleField, generateSchemaSingleField } from '@test/_resources/utils.js'
 import { mount, config } from '@vue/test-utils'
 
@@ -19,6 +19,10 @@ const form = generateSchemaSingleField(
 
 const props = generatePropsSingleField(form)
 
+beforeAll(() => {
+  config.global.components = { FieldNumber }
+})
+
 describe('FieldNumber', () => {
 
   it('Should render correctly', async () => {
@@ -27,7 +31,6 @@ describe('FieldNumber', () => {
   })
 
   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()
 
@@ -44,8 +47,6 @@ describe('FieldNumber', () => {
   })
 
   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()

__tests__/components/fields/FieldPassword.spec.js

@@ -1,5 +1,5 @@
 import { mountFormGenerator, generateSchemaSingleField, generatePropsSingleField } from '@test/_resources/utils.js'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeAll } from 'vitest'
 import { mount, config } from '@vue/test-utils'
 import validators from '@/validators'
 
@@ -21,6 +21,10 @@ const propsWithIndicator = {
   field: { ...props.field, indicator: true }
 }
 
+beforeAll(() => {
+  config.global.components = { FieldPassword }
+})
+
 describe('FieldPassword', () => {
 
   it('Should render correctly', async () => {
@@ -29,8 +33,6 @@ describe('FieldPassword', () => {
   })
 
   it('Should render correctly inside form generator', async () => {
-    config.global.components = { FieldPassword }
-
     const formWrapper = mountFormGenerator(form.schema, form.model)
 
 
@@ -85,8 +87,6 @@ describe('FieldPassword', () => {
   })
 
   it('Should update model value', async () => {
-    config.global.components = { FieldPassword }
-
     const formWrapper = mountFormGenerator(form.schema, form.model)