Add latest changes from gitlab-org/gitlab@master

6 files changed, 77 insertions, 12 deletions

diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
index 6dfd57906d8..3c4aa0f4d3c 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
@@ -56,7 +56,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     buttonclass=""
     buttonicon="archive"
     buttonsize="medium"
-    buttonvariant="warning"
+    buttonvariant="default"
     class="gl-ml-3"
     hasselecteddesigns="true"
     title="Archive design"
diff --git a/spec/frontend/mr_popover/__snapshots__/mr_popover_spec.js.snap b/spec/frontend/issuable/popover/__snapshots__/mr_popover_spec.js.snap
index a03d8bf5bf4..a03d8bf5bf4 100644
--- a/spec/frontend/mr_popover/__snapshots__/mr_popover_spec.js.snap
+++ b/spec/frontend/issuable/popover/__snapshots__/mr_popover_spec.js.snap
diff --git a/spec/frontend/mr_popover/index_spec.js b/spec/frontend/issuable/popover/index_spec.js
index fd8ced17aea..d782b2558cf 100644
--- a/spec/frontend/mr_popover/index_spec.js
+++ b/spec/frontend/issuable/popover/index_spec.js
@@ -1,10 +1,10 @@
 import { setHTMLFixture } from 'helpers/fixtures';
 import * as createDefaultClient from '~/lib/graphql';
-import initMRPopovers from '~/mr_popover/index';
+import initIssuablePopovers from '~/issuable/popover/index';
 
 createDefaultClient.default = jest.fn();
 
-describe('initMRPopovers', () => {
+describe('initIssuablePopovers', () => {
   let mr1;
   let mr2;
   let mr3;
@@ -14,7 +14,7 @@ describe('initMRPopovers', () => {
       <div id="one" class="gfm-merge_request" data-mr-title="title" data-iid="1" data-project-path="group/project">
         MR1
       </div>
-      <div id="two" class="gfm-merge_request" data-mr-title="title" data-iid="1" data-project-path="group/project">
+      <div id="two" class="gfm-merge_request" title="title" data-iid="1" data-project-path="group/project">
         MR2
       </div>
       <div id="three" class="gfm-merge_request">
@@ -32,14 +32,14 @@ describe('initMRPopovers', () => {
   });
 
   it('does not add the same event listener twice', () => {
-    initMRPopovers([mr1, mr1, mr2]);
+    initIssuablePopovers([mr1, mr1, mr2]);
 
     expect(mr1.addEventListener).toHaveBeenCalledTimes(1);
     expect(mr2.addEventListener).toHaveBeenCalledTimes(1);
   });
 
   it('does not add listener if it does not have the necessary data attributes', () => {
-    initMRPopovers([mr1, mr2, mr3]);
+    initIssuablePopovers([mr1, mr2, mr3]);
 
     expect(mr3.addEventListener).not.toHaveBeenCalled();
   });
diff --git a/spec/frontend/mr_popover/mr_popover_spec.js b/spec/frontend/issuable/popover/mr_popover_spec.js
index 23f97073e9e..653666b0395 100644
--- a/spec/frontend/mr_popover/mr_popover_spec.js
+++ b/spec/frontend/issuable/popover/mr_popover_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import MRPopover from '~/mr_popover/components/mr_popover.vue';
+import MRPopover from '~/issuable/popover/components/mr_popover.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 describe('MR Popover', () => {
diff --git a/spec/frontend/vue_shared/components/notes/system_note_spec.js b/spec/frontend/vue_shared/components/notes/system_note_spec.js
index 65f79bab005..98b04ede943 100644
--- a/spec/frontend/vue_shared/components/notes/system_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/system_note_spec.js
@@ -1,13 +1,11 @@
 import MockAdapter from 'axios-mock-adapter';
 import { mount } from '@vue/test-utils';
+import $ from 'jquery';
 import waitForPromises from 'helpers/wait_for_promises';
-import initMRPopovers from '~/mr_popover/index';
 import createStore from '~/notes/stores';
 import IssueSystemNote from '~/vue_shared/components/notes/system_note.vue';
 import axios from '~/lib/utils/axios_utils';
 
-jest.mock('~/mr_popover/index', () => jest.fn());
-
 describe('system note component', () => {
   let vm;
   let props;
@@ -76,10 +74,12 @@ describe('system note component', () => {
     expect(vm.find('.system-note-message').html()).toContain('<span>closed</span>');
   });
 
-  it('should initMRPopovers onMount', () => {
+  it('should renderGFM onMount', () => {
+    const renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
+
     createComponent(props);
 
-    expect(initMRPopovers).toHaveBeenCalled();
+    expect(renderGFMSpy).toHaveBeenCalled();
   });
 
   it('renders outdated code lines', async () => {
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
new file mode 100644
index 00000000000..ee5937ab7e7
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
@@ -0,0 +1,65 @@
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WorkItemLinks from '~/work_items/components/work_item_links/work_item_links.vue';
+
+describe('WorkItemLinks', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(WorkItemLinks, { propsData: { workItemId: '123' } });
+  };
+
+  const findToggleButton = () => wrapper.findByTestId('toggle-links');
+  const findLinksBody = () => wrapper.findByTestId('links-body');
+  const findEmptyState = () => wrapper.findByTestId('links-empty');
+  const findToggleAddFormButton = () => wrapper.findByTestId('toggle-add-form');
+  const findAddLinksForm = () => wrapper.findByTestId('add-links-form');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('is collapsed by default', () => {
+    expect(findToggleButton().props('icon')).toBe('angle-down');
+    expect(findLinksBody().exists()).toBe(false);
+  });
+
+  it('expands on click toggle button', async () => {
+    findToggleButton().vm.$emit('click');
+    await nextTick();
+
+    expect(findToggleButton().props('icon')).toBe('angle-up');
+    expect(findLinksBody().exists()).toBe(true);
+  });
+
+  it('displays empty state if there are no links', async () => {
+    findToggleButton().vm.$emit('click');
+    await nextTick();
+
+    expect(findEmptyState().exists()).toBe(true);
+    expect(findToggleAddFormButton().exists()).toBe(true);
+  });
+
+  describe('add link form', () => {
+    it('displays form on click add button and hides form on cancel', async () => {
+      findToggleButton().vm.$emit('click');
+      await nextTick();
+
+      expect(findEmptyState().exists()).toBe(true);
+
+      findToggleAddFormButton().vm.$emit('click');
+      await nextTick();
+
+      expect(findAddLinksForm().exists()).toBe(true);
+
+      findAddLinksForm().vm.$emit('cancel');
+      await nextTick();
+
+      expect(findAddLinksForm().exists()).toBe(false);
+    });
+  });
+});