Add latest changes from gitlab-org/gitlab@master

3 files changed, 275 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap b/spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap
new file mode 100644
index 00000000000..16094a42668
--- /dev/null
+++ b/spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Package code instruction multiline to match the snapshot 1`] = `
+<div>
+  <pre
+    class="gl-font-monospace"
+    data-testid="multiline-instruction"
+  >
+    this is some
+multiline text
+  </pre>
+</div>
+`;
+
+exports[`Package code instruction single line to match the default snapshot 1`] = `
+<div
+  class="gl-mb-3"
+>
+  <label
+    for="instruction-input_2"
+  >
+    foo_label
+  </label>
+   
+  <div
+    class="input-group gl-mb-3"
+  >
+    <input
+      class="form-control gl-font-monospace"
+      data-testid="instruction-input"
+      id="instruction-input_2"
+      readonly="readonly"
+      type="text"
+    />
+     
+    <span
+      class="input-group-append"
+      data-testid="instruction-button"
+    >
+      <button
+        class="btn input-group-text btn-secondary btn-md btn-default"
+        data-clipboard-text="npm i @my-package"
+        title="Copy npm install command"
+        type="button"
+      >
+        <!---->
+         
+        <svg
+          class="gl-icon s16"
+          data-testid="copy-to-clipboard-icon"
+        >
+          <use
+            href="#copy-to-clipboard"
+          />
+        </svg>
+      </button>
+    </span>
+  </div>
+</div>
+`;
diff --git a/spec/frontend/vue_shared/components/registry/code_instruction_spec.js b/spec/frontend/vue_shared/components/registry/code_instruction_spec.js
new file mode 100644
index 00000000000..84c738764a3
--- /dev/null
+++ b/spec/frontend/vue_shared/components/registry/code_instruction_spec.js
@@ -0,0 +1,117 @@
+import { mount } from '@vue/test-utils';
+import Tracking from '~/tracking';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+describe('Package code instruction', () => {
+  let wrapper;
+
+  const defaultProps = {
+    instruction: 'npm i @my-package',
+    copyText: 'Copy npm install command',
+  };
+
+  function createComponent(props = {}) {
+    wrapper = mount(CodeInstruction, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  }
+
+  const findCopyButton = () => wrapper.find(ClipboardButton);
+  const findInputElement = () => wrapper.find('[data-testid="instruction-input"]');
+  const findMultilineInstruction = () => wrapper.find('[data-testid="multiline-instruction"]');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('single line', () => {
+    beforeEach(() =>
+      createComponent({
+        label: 'foo_label',
+      }),
+    );
+
+    it('to match the default snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('multiline', () => {
+    beforeEach(() =>
+      createComponent({
+        instruction: 'this is some\nmultiline text',
+        copyText: 'Copy the command',
+        label: 'foo_label',
+        multiline: true,
+      }),
+    );
+
+    it('to match the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('tracking', () => {
+    let eventSpy;
+    const trackingAction = 'test_action';
+    const trackingLabel = 'foo_label';
+
+    beforeEach(() => {
+      eventSpy = jest.spyOn(Tracking, 'event');
+    });
+
+    it('should not track when no trackingAction is provided', () => {
+      createComponent();
+      findCopyButton().trigger('click');
+
+      expect(eventSpy).toHaveBeenCalledTimes(0);
+    });
+
+    describe('when trackingAction is provided for single line', () => {
+      beforeEach(() =>
+        createComponent({
+          trackingAction,
+          trackingLabel,
+        }),
+      );
+
+      it('should track when copying from the input', () => {
+        findInputElement().trigger('copy');
+
+        expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
+          label: trackingLabel,
+        });
+      });
+
+      it('should track when the copy button is pressed', () => {
+        findCopyButton().trigger('click');
+
+        expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
+          label: trackingLabel,
+        });
+      });
+    });
+
+    describe('when trackingAction is provided for multiline', () => {
+      beforeEach(() =>
+        createComponent({
+          trackingAction,
+          trackingLabel,
+          multiline: true,
+        }),
+      );
+
+      it('should track when copying from the multiline pre element', () => {
+        findMultilineInstruction().trigger('copy');
+
+        expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
+          label: trackingLabel,
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/registry/title_area_spec.js b/spec/frontend/vue_shared/components/registry/title_area_spec.js
new file mode 100644
index 00000000000..6740d6097a4
--- /dev/null
+++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js
@@ -0,0 +1,98 @@
+import { GlAvatar } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import component from '~/vue_shared/components/registry/title_area.vue';
+
+describe('title area', () => {
+  let wrapper;
+
+  const findSubHeaderSlot = () => wrapper.find('[data-testid="sub-header"]');
+  const findRightActionsSlot = () => wrapper.find('[data-testid="right-actions"]');
+  const findMetadataSlot = name => wrapper.find(`[data-testid="${name}"]`);
+  const findTitle = () => wrapper.find('[data-testid="title"]');
+  const findAvatar = () => wrapper.find(GlAvatar);
+
+  const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => {
+    wrapper = shallowMount(component, {
+      propsData,
+      slots: {
+        'sub-header': '<div data-testid="sub-header" />',
+        'right-actions': '<div data-testid="right-actions" />',
+        ...slots,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('title', () => {
+    it('if slot is not present defaults to prop', () => {
+      mountComponent();
+
+      expect(findTitle().text()).toBe('foo');
+    });
+    it('if slot is present uses slot', () => {
+      mountComponent({
+        slots: {
+          title: 'slot_title',
+        },
+      });
+      expect(findTitle().text()).toBe('slot_title');
+    });
+  });
+
+  describe('avatar', () => {
+    it('is shown if avatar props exist', () => {
+      mountComponent({ propsData: { title: 'foo', avatar: 'baz' } });
+
+      expect(findAvatar().props('src')).toBe('baz');
+    });
+
+    it('is hidden if avatar props does not exist', () => {
+      mountComponent();
+
+      expect(findAvatar().exists()).toBe(false);
+    });
+  });
+
+  describe.each`
+    slotName           | finderFunction
+    ${'sub-header'}    | ${findSubHeaderSlot}
+    ${'right-actions'} | ${findRightActionsSlot}
+  `('$slotName slot', ({ finderFunction, slotName }) => {
+    it('exist when the slot is filled', () => {
+      mountComponent();
+
+      expect(finderFunction().exists()).toBe(true);
+    });
+
+    it('does not exist when the slot is empty', () => {
+      mountComponent({ slots: { [slotName]: '' } });
+
+      expect(finderFunction().exists()).toBe(false);
+    });
+  });
+
+  describe.each`
+    slotNames
+    ${['metadata_foo']}
+    ${['metadata_foo', 'metadata_bar']}
+    ${['metadata_foo', 'metadata_bar', 'metadata_baz']}
+  `('$slotNames metadata slots', ({ slotNames }) => {
+    const slotMocks = slotNames.reduce((acc, current) => {
+      acc[current] = `<div data-testid="${current}" />`;
+      return acc;
+    }, {});
+
+    it('exist when the slot is present', async () => {
+      mountComponent({ slots: slotMocks });
+
+      await wrapper.vm.$nextTick();
+      slotNames.forEach(name => {
+        expect(findMetadataSlot(name).exists()).toBe(true);
+      });
+    });
+  });
+});