Add latest changes from gitlab-org/gitlab@master

3 files changed, 68 insertions, 116 deletions

diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
deleted file mode 100644
index 0d0e45b64b2..00000000000
--- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
+++ /dev/null
@@ -1,100 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
-<gl-disclosure-dropdown-stub
-  autoclose="true"
-  category="primary"
-  icon=""
-  items=""
-  placement="right"
-  positioningstrategy="absolute"
-  size="medium"
-  toggleid="dropdown-toggle-btn-2"
-  toggletext="Clone"
-  variant="confirm"
->
-  <gl-disclosure-dropdown-item-stub>
-    <gl-form-group-stub
-      class="gl-px-3 gl-my-3"
-      label="Clone with SSH"
-      labeldescription=""
-      optionaltext="(optional)"
-    >
-      <b-input-group-stub
-        readonly=""
-        tag="div"
-      >
-        <!---->
-         
-        <b-form-input-stub
-          class="gl-form-input"
-          debounce="0"
-          formatter="[Function]"
-          readonly="true"
-          type="text"
-          value="ssh://foo.bar"
-        />
-         
-        <b-input-group-append-stub
-          tag="div"
-        >
-          <gl-button-stub
-            aria-label="Copy URL"
-            buttontextclasses=""
-            category="primary"
-            class="gl-display-inline-flex"
-            data-clipboard-text="ssh://foo.bar"
-            data-qa-selector="copy_ssh_url_button"
-            icon="copy-to-clipboard"
-            size="medium"
-            title="Copy URL"
-            variant="default"
-          />
-        </b-input-group-append-stub>
-      </b-input-group-stub>
-    </gl-form-group-stub>
-  </gl-disclosure-dropdown-item-stub>
-   
-  <gl-disclosure-dropdown-item-stub>
-    <gl-form-group-stub
-      class="gl-px-3 gl-mb-3"
-      label="Clone with HTTP"
-      labeldescription=""
-      optionaltext="(optional)"
-    >
-      <b-input-group-stub
-        readonly=""
-        tag="div"
-      >
-        <!---->
-         
-        <b-form-input-stub
-          class="gl-form-input"
-          debounce="0"
-          formatter="[Function]"
-          readonly="true"
-          type="text"
-          value="http://foo.bar"
-        />
-         
-        <b-input-group-append-stub
-          tag="div"
-        >
-          <gl-button-stub
-            aria-label="Copy URL"
-            buttontextclasses=""
-            category="primary"
-            class="gl-display-inline-flex"
-            data-clipboard-text="http://foo.bar"
-            data-qa-selector="copy_http_url_button"
-            icon="copy-to-clipboard"
-            size="medium"
-            title="Copy URL"
-            variant="default"
-          />
-        </b-input-group-append-stub>
-      </b-input-group-stub>
-    </gl-form-group-stub>
-  </gl-disclosure-dropdown-item-stub>
-</gl-disclosure-dropdown-stub>
-`;
diff --git a/spec/frontend/vue_shared/components/clone_dropdown/clone_dropdown_item_spec.js b/spec/frontend/vue_shared/components/clone_dropdown/clone_dropdown_item_spec.js
new file mode 100644
index 00000000000..e0dfa084f3e
--- /dev/null
+++ b/spec/frontend/vue_shared/components/clone_dropdown/clone_dropdown_item_spec.js
@@ -0,0 +1,52 @@
+import { GlButton, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import CloneDropdownItem from '~/vue_shared/components/clone_dropdown/clone_dropdown_item.vue';
+
+describe('Clone Dropdown Button', () => {
+  let wrapper;
+  const link = 'ssh://foo.bar';
+  const label = 'SSH';
+  const qaSelector = 'some-selector';
+  const defaultPropsData = {
+    link,
+    label,
+    qaSelector,
+  };
+
+  const findCopyButton = () => wrapper.findComponent(GlButton);
+
+  const createComponent = (propsData = defaultPropsData) => {
+    wrapper = shallowMount(CloneDropdownItem, {
+      propsData,
+      stubs: {
+        GlFormInputGroup,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('default', () => {
+    it('sets form group label', () => {
+      expect(wrapper.findComponent(GlFormGroup).attributes('label')).toBe(label);
+    });
+
+    it('sets form input group link', () => {
+      expect(wrapper.findComponent(GlFormInputGroup).props('value')).toBe(link);
+    });
+
+    it('sets the copy tooltip text', () => {
+      expect(findCopyButton().attributes('title')).toBe('Copy URL');
+    });
+
+    it('sets the copy tooltip link', () => {
+      expect(findCopyButton().attributes('data-clipboard-text')).toBe(link);
+    });
+
+    it('sets the qa selector', () => {
+      expect(findCopyButton().attributes('data-qa-selector')).toBe(qaSelector);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/clone_dropdown_spec.js b/spec/frontend/vue_shared/components/clone_dropdown/clone_dropdown_spec.js
index bcc1a4352d8..48c158d6fa2 100644
--- a/spec/frontend/vue_shared/components/clone_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/clone_dropdown/clone_dropdown_spec.js
@@ -1,6 +1,7 @@
-import { GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import { GlFormInputGroup } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import CloneDropdown from '~/vue_shared/components/clone_dropdown.vue';
+import CloneDropdown from '~/vue_shared/components/clone_dropdown/clone_dropdown.vue';
+import CloneDropdownItem from '~/vue_shared/components/clone_dropdown/clone_dropdown_item.vue';
 
 describe('Clone Dropdown Button', () => {
   let wrapper;
@@ -12,30 +13,28 @@ describe('Clone Dropdown Button', () => {
     httpLink,
   };
 
+  const findCloneDropdownItems = () => wrapper.findAllComponents(CloneDropdownItem);
+  const findCloneDropdownItemAtIndex = (index) => findCloneDropdownItems().at(index);
+
   const createComponent = (propsData = defaultPropsData) => {
     wrapper = shallowMount(CloneDropdown, {
       propsData,
       stubs: {
-        'gl-form-input-group': GlFormInputGroup,
+        GlFormInputGroup,
       },
     });
   };
 
   describe('rendering', () => {
-    it('matches the snapshot', () => {
-      createComponent();
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
     it.each`
-      name      | index | value
+      name      | index | link
       ${'SSH'}  | ${0}  | ${sshLink}
       ${'HTTP'} | ${1}  | ${httpLink}
-    `('renders correct link and a copy-button for $name', ({ index, value }) => {
+    `('renders correct link and a copy-button for $name', ({ index, link }) => {
       createComponent();
-      const group = wrapper.findAllComponents(GlFormInputGroup).at(index);
-      expect(group.props('value')).toBe(value);
-      expect(group.findComponent(GlFormInputGroup).exists()).toBe(true);
+
+      const group = findCloneDropdownItemAtIndex(index);
+      expect(group.props('link')).toBe(link);
     });
 
     it.each`
@@ -45,7 +44,7 @@ describe('Clone Dropdown Button', () => {
     `('does not fail if only $name is set', ({ name, value }) => {
       createComponent({ [name]: value });
 
-      expect(wrapper.findComponent(GlFormInputGroup).props('value')).toBe(value);
+      expect(findCloneDropdownItemAtIndex(0).props('link')).toBe(value);
     });
   });
 
@@ -57,12 +56,13 @@ describe('Clone Dropdown Button', () => {
     `('allows null values for the props', ({ name, value }) => {
       createComponent({ ...defaultPropsData, [name]: value });
 
-      expect(wrapper.findAllComponents(GlFormGroup).length).toBe(1);
+      expect(findCloneDropdownItems().length).toBe(1);
     });
 
     it('correctly calculates httpLabel for HTTPS protocol', () => {
       createComponent({ httpLink: httpsLink });
-      expect(wrapper.findComponent(GlFormGroup).attributes('label')).toContain('HTTPS');
+
+      expect(findCloneDropdownItemAtIndex(0).attributes('label')).toContain('HTTPS');
     });
   });
 });