Add latest changes from gitlab-org/gitlab@master

2 files changed, 189 insertions, 0 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
new file mode 100644
index 00000000000..d837c793784
--- /dev/null
+++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
+<gl-new-dropdown-stub
+  category="primary"
+  headertext=""
+  size="medium"
+  text="Clone"
+  variant="info"
+>
+  <div
+    class="pb-2 mx-1"
+  >
+    <gl-new-dropdown-header-stub>
+      Clone with SSH
+    </gl-new-dropdown-header-stub>
+     
+    <div
+      class="mx-3"
+    >
+      <div
+        readonly="readonly"
+      >
+        <b-input-group-stub
+          tag="div"
+        >
+          <b-input-group-prepend-stub
+            tag="div"
+          >
+             
+            <!---->
+          </b-input-group-prepend-stub>
+           
+          <b-form-input-stub
+            class="gl-form-input"
+            debounce="0"
+            readonly="true"
+            type="text"
+            value="ssh://foo.bar"
+          />
+           
+          <b-input-group-append-stub
+            tag="div"
+          >
+            <gl-new-button-stub
+              category="tertiary"
+              data-clipboard-text="ssh://foo.bar"
+              icon=""
+              size="medium"
+              title="Copy URL"
+              variant="default"
+            >
+              <gl-icon-stub
+                name="copy-to-clipboard"
+                size="16"
+                title="Copy URL"
+              />
+            </gl-new-button-stub>
+          </b-input-group-append-stub>
+        </b-input-group-stub>
+      </div>
+    </div>
+     
+    <gl-new-dropdown-header-stub>
+      Clone with HTTP
+    </gl-new-dropdown-header-stub>
+     
+    <div
+      class="mx-3"
+    >
+      <div
+        readonly="readonly"
+      >
+        <b-input-group-stub
+          tag="div"
+        >
+          <b-input-group-prepend-stub
+            tag="div"
+          >
+             
+            <!---->
+          </b-input-group-prepend-stub>
+           
+          <b-form-input-stub
+            class="gl-form-input"
+            debounce="0"
+            readonly="true"
+            type="text"
+            value="http://foo.bar"
+          />
+           
+          <b-input-group-append-stub
+            tag="div"
+          >
+            <gl-new-button-stub
+              category="tertiary"
+              data-clipboard-text="http://foo.bar"
+              icon=""
+              size="medium"
+              title="Copy URL"
+              variant="default"
+            >
+              <gl-icon-stub
+                name="copy-to-clipboard"
+                size="16"
+                title="Copy URL"
+              />
+            </gl-new-button-stub>
+          </b-input-group-append-stub>
+        </b-input-group-stub>
+      </div>
+    </div>
+  </div>
+</gl-new-dropdown-stub>
+`;
diff --git a/spec/frontend/vue_shared/components/clone_dropdown_spec.js b/spec/frontend/vue_shared/components/clone_dropdown_spec.js
new file mode 100644
index 00000000000..38e0cadfe83
--- /dev/null
+++ b/spec/frontend/vue_shared/components/clone_dropdown_spec.js
@@ -0,0 +1,74 @@
+import CloneDropdown from '~/vue_shared/components/clone_dropdown.vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlFormInputGroup, GlNewDropdownHeader } from '@gitlab/ui';
+
+describe('Clone Dropdown Button', () => {
+  let wrapper;
+  const sshLink = 'ssh://foo.bar';
+  const httpLink = 'http://foo.bar';
+  const httpsLink = 'https://foo.bar';
+  const defaultPropsData = {
+    sshLink,
+    httpLink,
+  };
+
+  const createComponent = (propsData = defaultPropsData) => {
+    wrapper = shallowMount(CloneDropdown, {
+      propsData,
+      stubs: {
+        'gl-form-input-group': GlFormInputGroup,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      createComponent();
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it.each`
+      name      | index | value
+      ${'SSH'}  | ${0}  | ${sshLink}
+      ${'HTTP'} | ${1}  | ${httpLink}
+    `('renders correct link and a copy-button for $name', ({ index, value }) => {
+      createComponent();
+      const group = wrapper.findAll(GlFormInputGroup).at(index);
+      expect(group.props('value')).toBe(value);
+      expect(group.contains(GlFormInputGroup)).toBe(true);
+    });
+
+    it.each`
+      name          | value
+      ${'sshLink'}  | ${sshLink}
+      ${'httpLink'} | ${httpLink}
+    `('does not fail if only $name is set', ({ name, value }) => {
+      createComponent({ [name]: value });
+
+      expect(wrapper.find(GlFormInputGroup).props('value')).toBe(value);
+      expect(wrapper.findAll(GlNewDropdownHeader).length).toBe(1);
+    });
+  });
+
+  describe('functionality', () => {
+    it.each`
+      name          | value
+      ${'sshLink'}  | ${null}
+      ${'httpLink'} | ${null}
+    `('allows null values for the props', ({ name, value }) => {
+      createComponent({ ...defaultPropsData, [name]: value });
+
+      expect(wrapper.findAll(GlNewDropdownHeader).length).toBe(1);
+    });
+
+    it('correctly calculates httpLabel for HTTPS protocol', () => {
+      createComponent({ httpLink: httpsLink });
+      expect(wrapper.find(GlNewDropdownHeader).text()).toContain('HTTPS');
+    });
+  });
+});