diff options
Diffstat (limited to 'spec/frontend/integrations/edit/components/sections/connection_spec.js')
-rw-r--r-- | spec/frontend/integrations/edit/components/sections/connection_spec.js | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/spec/frontend/integrations/edit/components/sections/connection_spec.js b/spec/frontend/integrations/edit/components/sections/connection_spec.js new file mode 100644 index 00000000000..1eb92e80723 --- /dev/null +++ b/spec/frontend/integrations/edit/components/sections/connection_spec.js @@ -0,0 +1,77 @@ +import { shallowMount } from '@vue/test-utils'; + +import IntegrationSectionConnection from '~/integrations/edit/components/sections/connection.vue'; +import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue'; +import DynamicField from '~/integrations/edit/components/dynamic_field.vue'; +import { createStore } from '~/integrations/edit/store'; + +import { mockIntegrationProps } from '../../mock_data'; + +describe('IntegrationSectionConnection', () => { + let wrapper; + + const createComponent = ({ customStateProps = {}, props = {} } = {}) => { + const store = createStore({ + customState: { ...mockIntegrationProps, ...customStateProps }, + }); + wrapper = shallowMount(IntegrationSectionConnection, { + propsData: { ...props }, + store, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const findActiveCheckbox = () => wrapper.findComponent(ActiveCheckbox); + const findAllDynamicFields = () => wrapper.findAllComponents(DynamicField); + + describe('template', () => { + describe('ActiveCheckbox', () => { + describe.each` + showActive + ${true} + ${false} + `('when `showActive` is $showActive', ({ showActive }) => { + it(`${showActive ? 'renders' : 'does not render'} ActiveCheckbox`, () => { + createComponent({ + customStateProps: { + showActive, + }, + }); + + expect(findActiveCheckbox().exists()).toBe(showActive); + }); + }); + }); + + describe('DynamicField', () => { + it('renders DynamicField for each field', () => { + const fields = [ + { name: 'username', type: 'text' }, + { name: 'API token', type: 'password' }, + ]; + + createComponent({ + props: { + fields, + }, + }); + + const dynamicFields = findAllDynamicFields(); + + expect(dynamicFields).toHaveLength(2); + dynamicFields.wrappers.forEach((field, index) => { + expect(field.props()).toMatchObject(fields[index]); + }); + }); + + it('does not render DynamicField when field is empty', () => { + createComponent(); + + expect(findAllDynamicFields()).toHaveLength(0); + }); + }); + }); +}); |