Add latest changes from gitlab-org/gitlab@master

6 files changed, 74 insertions, 17 deletions

diff --git a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js
index de0e5063e49..88312a780d1 100644
--- a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js
+++ b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js
@@ -9,7 +9,7 @@ import renderMermaid, {
 
 describe('Mermaid diagrams renderer', () => {
   // Finders
-  const findMermaidIframes = () => document.querySelectorAll('iframe[src="/-/sandbox/mermaid"]');
+  const findMermaidIframes = () => document.querySelectorAll('iframe[src*="/-/sandbox/mermaid"]');
   const findDangerousMermaidAlert = () =>
     createWrapper(document.querySelector('[data-testid="alert-warning"]'));
 
diff --git a/spec/frontend/issuable/components/status_box_spec.js b/spec/frontend/issuable/components/status_box_spec.js
index d26f287d90c..0d47595c9e6 100644
--- a/spec/frontend/issuable/components/status_box_spec.js
+++ b/spec/frontend/issuable/components/status_box_spec.js
@@ -18,6 +18,8 @@ describe('Merge request status box component', () => {
     ${'merge_request'} | ${'Merged'} | ${'merged'}  | ${'issuable-status-badge-merged'} | ${'info'}    | ${'merge'}
     ${'issue'}         | ${'Open'}   | ${'opened'}  | ${'issuable-status-badge-open'}   | ${'success'} | ${'issues'}
     ${'issue'}         | ${'Closed'} | ${'closed'}  | ${'issuable-status-badge-closed'} | ${'info'}    | ${'issue-closed'}
+    ${'epic'}          | ${'Open'}   | ${'opened'}  | ${'issuable-status-badge-open'}   | ${'success'} | ${'epic'}
+    ${'epic'}          | ${'Closed'} | ${'closed'}  | ${'issuable-status-badge-closed'} | ${'info'}    | ${'epic-closed'}
   `(
     'with issuableType set to "$issuableType" and state set to "$initialState"',
     ({ issuableType, badgeText, initialState, badgeClass, badgeVariant, badgeIcon }) => {
diff --git a/spec/frontend/issuable/popover/components/issue_popover_spec.js b/spec/frontend/issuable/popover/components/issue_popover_spec.js
index a7605016039..0596433ce9a 100644
--- a/spec/frontend/issuable/popover/components/issue_popover_spec.js
+++ b/spec/frontend/issuable/popover/components/issue_popover_spec.js
@@ -26,7 +26,7 @@ describe('Issue Popover', () => {
       apolloProvider: createMockApollo([[issueQuery, queryResponse]]),
       propsData: {
         target: document.createElement('a'),
-        projectPath: 'foo/bar',
+        namespacePath: 'foo/bar',
         iid: '1',
         cachedTitle: 'Cached title',
       },
diff --git a/spec/frontend/issuable/popover/components/mr_popover_spec.js b/spec/frontend/issuable/popover/components/mr_popover_spec.js
index 5b29ecfc0ba..4ed783da853 100644
--- a/spec/frontend/issuable/popover/components/mr_popover_spec.js
+++ b/spec/frontend/issuable/popover/components/mr_popover_spec.js
@@ -64,7 +64,7 @@ describe('MR Popover', () => {
       apolloProvider: createMockApollo([[mergeRequestQuery, queryResponse]]),
       propsData: {
         target: document.createElement('a'),
-        projectPath: 'foo/bar',
+        namespacePath: 'foo/bar',
         iid: '1',
         cachedTitle: 'Cached Title',
       },
diff --git a/spec/frontend/issuable/popover/index_spec.js b/spec/frontend/issuable/popover/index_spec.js
index b1aa7f0f0b0..bf9dce4867f 100644
--- a/spec/frontend/issuable/popover/index_spec.js
+++ b/spec/frontend/issuable/popover/index_spec.js
@@ -1,6 +1,6 @@
 import { setHTMLFixture } from 'helpers/fixtures';
 import * as createDefaultClient from '~/lib/graphql';
-import initIssuablePopovers from '~/issuable/popover/index';
+import initIssuablePopovers, * as popover from '~/issuable/popover/index';
 
 createDefaultClient.default = jest.fn();
 
@@ -9,6 +9,7 @@ describe('initIssuablePopovers', () => {
   let mr2;
   let mr3;
   let issue1;
+  let workItem1;
 
   beforeEach(() => {
     setHTMLFixture(`
@@ -24,30 +25,69 @@ describe('initIssuablePopovers', () => {
       <div id="four" class="gfm-issue" title="title" data-iid="1" data-project-path="group/project" data-reference-type="issue">
         MR3
       </div>
+      <div id="five" class="gfm-work_item" title="title" data-iid="1" data-project-path="group/project" data-reference-type="work_item">
+        MR3
+      </div>
     `);
 
     mr1 = document.querySelector('#one');
     mr2 = document.querySelector('#two');
     mr3 = document.querySelector('#three');
     issue1 = document.querySelector('#four');
-
-    mr1.addEventListener = jest.fn();
-    mr2.addEventListener = jest.fn();
-    mr3.addEventListener = jest.fn();
-    issue1.addEventListener = jest.fn();
+    workItem1 = document.querySelector('#five');
   });
 
-  it('does not add the same event listener twice', () => {
-    initIssuablePopovers([mr1, mr1, mr2, issue1]);
+  describe('init function', () => {
+    beforeEach(() => {
+      mr1.addEventListener = jest.fn();
+      mr2.addEventListener = jest.fn();
+      mr3.addEventListener = jest.fn();
+      issue1.addEventListener = jest.fn();
+      workItem1.addEventListener = jest.fn();
+    });
+
+    it('does not add the same event listener twice', () => {
+      initIssuablePopovers([mr1, mr1, mr2, issue1, workItem1]);
+
+      expect(mr1.addEventListener).toHaveBeenCalledTimes(1);
+      expect(mr2.addEventListener).toHaveBeenCalledTimes(1);
+      expect(issue1.addEventListener).toHaveBeenCalledTimes(1);
+      expect(workItem1.addEventListener).toHaveBeenCalledTimes(1);
+    });
 
-    expect(mr1.addEventListener).toHaveBeenCalledTimes(1);
-    expect(mr2.addEventListener).toHaveBeenCalledTimes(1);
-    expect(issue1.addEventListener).toHaveBeenCalledTimes(1);
+    it('does not add listener if it does not have the necessary data attributes', () => {
+      initIssuablePopovers([mr1, mr2, mr3]);
+
+      expect(mr3.addEventListener).not.toHaveBeenCalled();
+    });
   });
 
-  it('does not add listener if it does not have the necessary data attributes', () => {
-    initIssuablePopovers([mr1, mr2, mr3]);
+  describe('mount function', () => {
+    const expectedMountObject = {
+      apolloProvider: expect.anything(),
+      iid: '1',
+      namespacePath: 'group/project',
+      title: 'title',
+    };
+
+    beforeEach(() => {
+      jest.spyOn(popover, 'handleIssuablePopoverMount').mockImplementation(jest.fn());
+    });
+
+    it('calls popover mount function with components for Issue, MR, and Work Item', () => {
+      initIssuablePopovers([mr1, issue1, workItem1], popover.handleIssuablePopoverMount);
+
+      [mr1, issue1, workItem1].forEach(async (el) => {
+        await el.dispatchEvent(new Event('mouseenter', { target: el }));
 
-    expect(mr3.addEventListener).not.toHaveBeenCalled();
+        expect(popover.handleIssuablePopoverMount).toHaveBeenCalledWith(
+          expect.objectContaining({
+            ...expectedMountObject,
+            referenceType: el.dataset.referenceType,
+            target: el,
+          }),
+        );
+      });
+    });
   });
 });
diff --git a/spec/frontend/lib/utils/datetime/date_format_utility_spec.js b/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
index e7a6367eeac..65018fe1625 100644
--- a/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
+++ b/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
@@ -152,3 +152,18 @@ describe('formatUtcOffset', () => {
     expect(utils.formatUtcOffset(offset)).toEqual(expected);
   });
 });
+
+describe('humanTimeframe', () => {
+  it.each`
+    startDate     | dueDate        | returnValue
+    ${'2021-1-1'} | ${'2021-2-28'} | ${'Jan 1 – Feb 28, 2021'}
+    ${'2021-1-1'} | ${'2022-2-28'} | ${'Jan 1, 2021 – Feb 28, 2022'}
+    ${'2021-1-1'} | ${null}        | ${'Jan 1, 2021 – No due date'}
+    ${null}       | ${'2021-2-28'} | ${'No start date – Feb 28, 2021'}
+  `(
+    'returns string "$returnValue" when startDate is $startDate and dueDate is $dueDate',
+    ({ startDate, dueDate, returnValue }) => {
+      expect(utils.humanTimeframe(startDate, dueDate)).toBe(returnValue);
+    },
+  );
+});