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);
+      });
+    }
+  });
+});