diff options
Diffstat (limited to 'spec/frontend/pipeline_wizard/components/input_spec.js')
-rw-r--r-- | spec/frontend/pipeline_wizard/components/input_spec.js | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/spec/frontend/pipeline_wizard/components/input_spec.js b/spec/frontend/pipeline_wizard/components/input_spec.js new file mode 100644 index 00000000000..ee1f3fe70ff --- /dev/null +++ b/spec/frontend/pipeline_wizard/components/input_spec.js @@ -0,0 +1,79 @@ +import { mount, shallowMount } from '@vue/test-utils'; +import { Document } from 'yaml'; +import InputWrapper from '~/pipeline_wizard/components/input.vue'; +import TextWidget from '~/pipeline_wizard/components/widgets/text.vue'; + +describe('Pipeline Wizard -- Input Wrapper', () => { + let wrapper; + + const createComponent = (props = {}, mountFunc = mount) => { + wrapper = mountFunc(InputWrapper, { + propsData: { + template: new Document({ + template: { + bar: 'baz', + foo: { some: '$TARGET' }, + }, + }).get('template'), + compiled: new Document({ bar: 'baz', foo: { some: '$TARGET' } }), + target: '$TARGET', + widget: 'text', + label: 'some label (required by the text widget)', + ...props, + }, + }); + }; + + describe('API', () => { + const inputValue = 'dslkfjsdlkfjlskdjfn'; + let inputChild; + + beforeEach(() => { + createComponent({}); + inputChild = wrapper.find(TextWidget); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('will replace its value in compiled', async () => { + await inputChild.vm.$emit('input', inputValue); + const expected = new Document({ + bar: 'baz', + foo: { some: inputValue }, + }); + expect(wrapper.emitted()['update:compiled']).toEqual([[expected]]); + }); + + it('will emit a highlight event with the correct path if child emits an input event', async () => { + await inputChild.vm.$emit('input', inputValue); + const expected = ['foo', 'some']; + expect(wrapper.emitted().highlight).toEqual([[expected]]); + }); + }); + + describe('Target Path Discovery', () => { + afterEach(() => { + wrapper.destroy(); + }); + + it.each` + scenario | template | target | expected + ${'simple nested object'} | ${{ foo: { bar: { baz: '$BOO' } } }} | ${'$BOO'} | ${['foo', 'bar', 'baz']} + ${'list, first pos.'} | ${{ foo: ['$BOO'] }} | ${'$BOO'} | ${['foo', 0]} + ${'list, second pos.'} | ${{ foo: ['bar', '$BOO'] }} | ${'$BOO'} | ${['foo', 1]} + ${'lowercase target'} | ${{ foo: { bar: '$jupp' } }} | ${'$jupp'} | ${['foo', 'bar']} + ${'root list'} | ${['$BOO']} | ${'$BOO'} | ${[0]} + `('$scenario', ({ template, target, expected }) => { + createComponent( + { + template: new Document({ template }).get('template'), + target, + }, + shallowMount, + ); + expect(wrapper.vm.path).toEqual(expected); + }); + }); +}); |