diff --git a/packages/vue-vanilla/src/complex/EnumArrayRenderer.vue b/packages/vue-vanilla/src/complex/EnumArrayRenderer.vue new file mode 100644 index 000000000..a0e0edcad --- /dev/null +++ b/packages/vue-vanilla/src/complex/EnumArrayRenderer.vue @@ -0,0 +1,95 @@ + + + \ No newline at end of file diff --git a/packages/vue-vanilla/src/complex/index.ts b/packages/vue-vanilla/src/complex/index.ts index f03ad574a..418e816cb 100644 --- a/packages/vue-vanilla/src/complex/index.ts +++ b/packages/vue-vanilla/src/complex/index.ts @@ -1,7 +1,13 @@ export { default as ObjectRenderer } from './ObjectRenderer.vue'; export { default as OneOfRenderer } from './OneOfRenderer.vue'; +export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue'; import { entry as objectRendererEntry } from './ObjectRenderer.vue'; import { entry as oneOfRendererEntry } from './OneOfRenderer.vue'; +import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.vue'; -export const complexRenderers = [objectRendererEntry, oneOfRendererEntry]; +export const complexRenderers = [ + objectRendererEntry, + oneOfRendererEntry, + enumArrayRendererEntry, +]; diff --git a/packages/vue-vanilla/tests/unit/complex/EnumArrayRenderer.spec.ts b/packages/vue-vanilla/tests/unit/complex/EnumArrayRenderer.spec.ts new file mode 100644 index 000000000..e78976d42 --- /dev/null +++ b/packages/vue-vanilla/tests/unit/complex/EnumArrayRenderer.spec.ts @@ -0,0 +1,117 @@ +import { expect } from 'chai'; +import { mountJsonForms } from '../util'; + +const schemaOneOfMultiEnum = { + properties: { + oneOfMultiEnum: { + type: 'array', + uniqueItems: true, + items: { + oneOf: [ + { + const: 'foo', + title: 'Foo', + }, + { + const: 'bar', + title: 'Bar', + }, + { + const: 'foobar', + title: 'FooBar', + }, + ], + }, + }, + }, +}; + +const schemaMultiEnum = { + properties: { + multiEnum: { + type: 'array', + uniqueItems: true, + items: { + type: 'string', + enum: ['foo', 'bar', 'foobar'], + }, + }, + }, +}; + +const uischema = { + type: 'Control', + scope: '#', +}; + +describe('EnumArrayRenderer.vue oneOfMultiEnum', () => { + it('renders checkboxes', () => { + const wrapper = mountJsonForms( + { oneOfMultiEnum: ['foo', 'bar'] }, + schemaOneOfMultiEnum, + uischema + ); + const checkboxes = wrapper.findAll('input[type="checkbox"]'); + expect(checkboxes.length).to.equal(3); + }); + + it('emits a data remove change', async () => { + const wrapper = mountJsonForms( + { oneOfMultiEnum: ['foo', 'bar'] }, + schemaOneOfMultiEnum, + uischema + ); + const input = wrapper.find('input[value="foo"]'); + await input.trigger('click'); + expect(wrapper.vm.data).to.eql({ oneOfMultiEnum: ['bar'] }); + }); + + it('emits a data add change', async () => { + const wrapper = mountJsonForms( + { oneOfMultiEnum: ['foo', 'bar'] }, + schemaOneOfMultiEnum, + uischema + ); + const input = wrapper.find('input[value="foobar"]'); + await input.trigger('click'); + expect(wrapper.vm.data).to.eql({ + oneOfMultiEnum: ['foo', 'bar', 'foobar'], + }); + }); +}); + +describe('EnumArrayRenderer.vue multiEnum', () => { + it('renders checkboxes', () => { + const wrapper = mountJsonForms( + { multiEnum: ['foo', 'bar'] }, + schemaMultiEnum, + uischema + ); + const checkboxes = wrapper.findAll('input[type="checkbox"]'); + expect(checkboxes.length).to.equal(3); + }); + + it('emits a data remove change', async () => { + const wrapper = mountJsonForms( + { multiEnum: ['foo', 'bar'] }, + schemaMultiEnum, + uischema + ); + const input = wrapper.find('input[value="foo"]'); + await input.trigger('click'); + expect(wrapper.vm.data).to.eql({ multiEnum: ['bar'] }); + }); + + it('emits a data add change', async () => { + const wrapper = mountJsonForms( + { multiEnum: ['foo', 'bar'] }, + schemaMultiEnum, + uischema + ); + const input = wrapper.find('input[value="foobar"]'); + await input.trigger('click'); + expect(wrapper.vm.data).to.eql({ + multiEnum: ['foo', 'bar', 'foobar'], + }); + }); +});