diff options
Diffstat (limited to 'spec/frontend/projects/new/components/deployment_target_select_spec.js')
-rw-r--r-- | spec/frontend/projects/new/components/deployment_target_select_spec.js | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/spec/frontend/projects/new/components/deployment_target_select_spec.js b/spec/frontend/projects/new/components/deployment_target_select_spec.js new file mode 100644 index 00000000000..8fe4c5f1230 --- /dev/null +++ b/spec/frontend/projects/new/components/deployment_target_select_spec.js @@ -0,0 +1,82 @@ +import { GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { mockTracking } from 'helpers/tracking_helper'; +import DeploymentTargetSelect from '~/projects/new/components/deployment_target_select.vue'; +import { + DEPLOYMENT_TARGET_SELECTIONS, + DEPLOYMENT_TARGET_LABEL, + DEPLOYMENT_TARGET_EVENT, + NEW_PROJECT_FORM, +} from '~/projects/new/constants'; + +describe('Deployment target select', () => { + let wrapper; + let trackingSpy; + + const findFormGroup = () => wrapper.findComponent(GlFormGroup); + const findSelect = () => wrapper.findComponent(GlFormSelect); + + const createdWrapper = () => { + wrapper = shallowMount(DeploymentTargetSelect, { + stubs: { + GlFormSelect, + }, + }); + }; + + const createForm = () => { + setFixtures(` + <form id="${NEW_PROJECT_FORM}"> + </form> + `); + }; + + beforeEach(() => { + createForm(); + createdWrapper(); + + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders the correct label', () => { + expect(findFormGroup().attributes('label')).toBe('Project deployment target (optional)'); + }); + + it('renders a select with the disabled default option', () => { + expect(findSelect().find('option').text()).toBe('Select the deployment target'); + expect(findSelect().find('option').attributes('disabled')).toBe('disabled'); + }); + + describe.each` + selectedTarget | formSubmitted | eventSent + ${null} | ${true} | ${false} + ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${false} | ${false} + ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${true} | ${true} + `('Snowplow tracking event', ({ selectedTarget, formSubmitted, eventSent }) => { + beforeEach(() => { + findSelect().vm.$emit('input', selectedTarget); + + if (formSubmitted) { + const form = document.getElementById(NEW_PROJECT_FORM); + form.dispatchEvent(new Event('submit')); + } + }); + + if (eventSent) { + it(`is sent, when the the selectedTarget is ${selectedTarget} and the formSubmitted is ${formSubmitted} `, () => { + expect(trackingSpy).toHaveBeenCalledWith(undefined, DEPLOYMENT_TARGET_EVENT, { + label: DEPLOYMENT_TARGET_LABEL, + property: selectedTarget, + }); + }); + } else { + it(`is not sent, when the the selectedTarget is ${selectedTarget} and the formSubmitted is ${formSubmitted} `, () => { + expect(trackingSpy).toHaveBeenCalledTimes(0); + }); + } + }); +}); |