2 files changed, 87 insertions, 4 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);
+      });
+    }
+  });
+});
diff --git a/spec/frontend/projects/new/components/new_project_url_select_spec.js b/spec/frontend/projects/new/components/new_project_url_select_spec.js
index 258fa7636d4..921f5b74278 100644
--- a/spec/frontend/projects/new/components/new_project_url_select_spec.js
+++ b/spec/frontend/projects/new/components/new_project_url_select_spec.js
@@ -6,9 +6,10 @@ import {
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import eventHub from '~/projects/new/event_hub';
@@ -94,13 +95,14 @@ describe('NewProjectUrlSelect component', () => {
 
   const clickDropdownItem = async () => {
     wrapper.findComponent(GlDropdownItem).vm.$emit('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const showDropdown = async () => {
     findDropdown().vm.$emit('shown');
     await wrapper.vm.$apollo.queries.currentUser.refetch();
     jest.runOnlyPendingTimers();
+    await waitForPromises();
   };
 
   afterEach(() => {
@@ -235,8 +237,7 @@ describe('NewProjectUrlSelect component', () => {
     };
 
     wrapper = mountComponent({ search: 'no matches', queryResponse, mountFn: mount });
-    jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
+    await waitForPromises();
 
     expect(wrapper.find('li').text()).toBe('No matches found');
   });