2 files changed, 66 insertions, 10 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
index 8fe4c5f1230..1c443879dc3 100644
--- a/spec/frontend/projects/new/components/deployment_target_select_spec.js
+++ b/spec/frontend/projects/new/components/deployment_target_select_spec.js
@@ -1,4 +1,5 @@
-import { GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { GlFormGroup, GlFormSelect, GlFormText, GlLink, GlSprintf } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { mockTracking } from 'helpers/tracking_helper';
 import DeploymentTargetSelect from '~/projects/new/components/deployment_target_select.vue';
@@ -6,7 +7,9 @@ import {
   DEPLOYMENT_TARGET_SELECTIONS,
   DEPLOYMENT_TARGET_LABEL,
   DEPLOYMENT_TARGET_EVENT,
+  VISIT_DOCS_EVENT,
   NEW_PROJECT_FORM,
+  K8S_OPTION,
 } from '~/projects/new/constants';
 
 describe('Deployment target select', () => {
@@ -15,11 +18,15 @@ describe('Deployment target select', () => {
 
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
   const findSelect = () => wrapper.findComponent(GlFormSelect);
+  const findText = () => wrapper.findComponent(GlFormText);
+  const findLink = () => wrapper.findComponent(GlLink);
 
   const createdWrapper = () => {
     wrapper = shallowMount(DeploymentTargetSelect, {
       stubs: {
         GlFormSelect,
+        GlFormText,
+        GlSprintf,
       },
     });
   };
@@ -79,4 +86,34 @@ describe('Deployment target select', () => {
       });
     }
   });
+
+  describe.each`
+    selectedTarget                     | isTextShown
+    ${null}                            | ${false}
+    ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${true}
+    ${DEPLOYMENT_TARGET_SELECTIONS[1]} | ${false}
+  `('K8s education text', ({ selectedTarget, isTextShown }) => {
+    beforeEach(() => {
+      findSelect().vm.$emit('input', selectedTarget);
+    });
+
+    it(`is ${!isTextShown ? 'not ' : ''}shown when selected option is ${selectedTarget}`, () => {
+      expect(findText().exists()).toBe(isTextShown);
+    });
+  });
+
+  describe('when user clicks on the docs link', () => {
+    beforeEach(async () => {
+      findSelect().vm.$emit('input', K8S_OPTION);
+      await nextTick();
+
+      findLink().trigger('click');
+    });
+
+    it('sends the snowplow tracking event', () => {
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', VISIT_DOCS_EVENT, {
+        label: DEPLOYMENT_TARGET_LABEL,
+      });
+    });
+  });
 });
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 921f5b74278..ba22622e1f7 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
@@ -15,6 +15,7 @@ import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import eventHub from '~/projects/new/event_hub';
 import NewProjectUrlSelect from '~/projects/new/components/new_project_url_select.vue';
 import searchQuery from '~/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql';
+import { s__ } from '~/locale';
 
 describe('NewProjectUrlSelect component', () => {
   let wrapper;
@@ -61,7 +62,6 @@ describe('NewProjectUrlSelect component', () => {
     namespaceId: '28',
     rootUrl: 'https://gitlab.com/',
     trackLabel: 'blank_project',
-    userNamespaceFullPath: 'root',
     userNamespaceId: '1',
   };
 
@@ -91,7 +91,10 @@ describe('NewProjectUrlSelect component', () => {
   const findButtonLabel = () => wrapper.findComponent(GlButton);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findInput = () => wrapper.findComponent(GlSearchBoxByType);
-  const findHiddenInput = () => wrapper.find('[name="project[namespace_id]"]');
+  const findHiddenNamespaceInput = () => wrapper.find('[name="project[namespace_id]"]');
+
+  const findHiddenSelectedNamespaceInput = () =>
+    wrapper.find('[name="project[selected_namespace_id]"]');
 
   const clickDropdownItem = async () => {
     wrapper.findComponent(GlDropdownItem).vm.$emit('click');
@@ -122,11 +125,20 @@ describe('NewProjectUrlSelect component', () => {
     });
 
     it('renders a dropdown with the given namespace full path as the text', () => {
-      expect(findDropdown().props('text')).toBe(defaultProvide.namespaceFullPath);
+      const dropdownProps = findDropdown().props();
+
+      expect(dropdownProps.text).toBe(defaultProvide.namespaceFullPath);
+      expect(dropdownProps.toggleClass).not.toContain('gl-text-gray-500!');
+    });
+
+    it('renders a hidden input with the given namespace id', () => {
+      expect(findHiddenNamespaceInput().attributes('value')).toBe(defaultProvide.namespaceId);
     });
 
-    it('renders a dropdown with the given namespace id in the hidden input', () => {
-      expect(findHiddenInput().attributes('value')).toBe(defaultProvide.namespaceId);
+    it('renders a hidden input with the selected namespace id', () => {
+      expect(findHiddenSelectedNamespaceInput().attributes('value')).toBe(
+        defaultProvide.namespaceId,
+      );
     });
   });
 
@@ -142,11 +154,18 @@ describe('NewProjectUrlSelect component', () => {
     });
 
     it("renders a dropdown with the user's namespace full path as the text", () => {
-      expect(findDropdown().props('text')).toBe(defaultProvide.userNamespaceFullPath);
+      const dropdownProps = findDropdown().props();
+
+      expect(dropdownProps.text).toBe(s__('ProjectsNew|Pick a group or namespace'));
+      expect(dropdownProps.toggleClass).toContain('gl-text-gray-500!');
+    });
+
+    it("renders a hidden input with the user's namespace id", () => {
+      expect(findHiddenNamespaceInput().attributes('value')).toBe(defaultProvide.userNamespaceId);
     });
 
-    it("renders a dropdown with the user's namespace id in the hidden input", () => {
-      expect(findHiddenInput().attributes('value')).toBe(defaultProvide.userNamespaceId);
+    it('renders a hidden input with the selected namespace id', () => {
+      expect(findHiddenSelectedNamespaceInput().attributes('value')).toBe(undefined);
     });
   });
 
@@ -270,7 +289,7 @@ describe('NewProjectUrlSelect component', () => {
 
     await clickDropdownItem();
 
-    expect(findHiddenInput().attributes('value')).toBe(
+    expect(findHiddenNamespaceInput().attributes('value')).toBe(
       getIdFromGraphQLId(data.currentUser.groups.nodes[0].id).toString(),
     );
   });