Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

3 files changed, 299 insertions, 4 deletions

diff --git a/spec/frontend/vue_shared/issuable/__snapshots__/issuable_blocked_icon_spec.js.snap b/spec/frontend/vue_shared/issuable/__snapshots__/issuable_blocked_icon_spec.js.snap
new file mode 100644
index 00000000000..dd011b9d84e
--- /dev/null
+++ b/spec/frontend/vue_shared/issuable/__snapshots__/issuable_blocked_icon_spec.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IssuableBlockedIcon on mouseenter on blocked icon with more than three blocking issues matches the snapshot 1`] = `
+"<div class=\\"gl-display-inline\\"><svg data-testid=\\"issuable-blocked-icon\\" role=\\"img\\" aria-hidden=\\"true\\" class=\\"issuable-blocked-icon gl-mr-2 gl-cursor-pointer gl-text-red-500 gl-icon s16\\" id=\\"blocked-icon-uniqueId\\">
+    <use href=\\"#issue-block\\"></use>
+  </svg>
+  <div class=\\"gl-popover\\">
+    <ul class=\\"gl-list-style-none gl-p-0 gl-mb-0\\">
+      <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/6\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#6</a>
+        <p data-testid=\\"issuable-title\\" class=\\"gl-display-block! gl-mb-3\\">
+          blocking issue title 1
+        </p>
+      </li>
+      <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/5\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#5</a>
+        <p data-testid=\\"issuable-title\\" class=\\"gl-display-block! gl-mb-3\\">
+          blocking issue title 2 + blocking issue title 2 + blocking issue title 2 + bloc…
+        </p>
+      </li>
+      <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/4\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#4</a>
+        <p data-testid=\\"issuable-title\\" class=\\"gl-display-block! gl-mb-0\\">
+          blocking issue title 3
+        </p>
+      </li>
+    </ul>
+    <div class=\\"gl-mt-4\\">
+      <p data-testid=\\"hidden-blocking-count\\" class=\\"gl-mb-3\\">+ 1 more issue</p> <a data-testid=\\"view-all-issues\\" href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/0#related-issues\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">View all blocking issues</a>
+    </div><span data-testid=\\"popover-title\\">Blocked by 4 issues</span>
+  </div>
+</div>"
+`;
diff --git a/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js b/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js
new file mode 100644
index 00000000000..d59cbce6633
--- /dev/null
+++ b/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js
@@ -0,0 +1,265 @@
+import { GlIcon, GlLink, GlPopover, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount, mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import IssuableBlockedIcon from '~/vue_shared/components/issuable_blocked_icon/issuable_blocked_icon.vue';
+import { blockingIssuablesQueries } from '~/vue_shared/components/issuable_blocked_icon/constants';
+import { issuableTypes } from '~/boards/constants';
+import { truncate } from '~/lib/utils/text_utility';
+import {
+  mockIssue,
+  mockEpic,
+  mockBlockingIssue1,
+  mockBlockingIssue2,
+  mockBlockingEpic1,
+  mockBlockingIssuablesResponse1,
+  mockBlockingIssuablesResponse2,
+  mockBlockingIssuablesResponse3,
+  mockBlockedIssue1,
+  mockBlockedIssue2,
+  mockBlockedEpic1,
+  mockBlockingEpicIssuablesResponse1,
+} from '../../boards/mock_data';
+
+describe('IssuableBlockedIcon', () => {
+  let wrapper;
+  let mockApollo;
+
+  const findGlIcon = () => wrapper.findComponent(GlIcon);
+  const findGlPopover = () => wrapper.findComponent(GlPopover);
+  const findGlLink = () => wrapper.findComponent(GlLink);
+  const findPopoverTitle = () => wrapper.findByTestId('popover-title');
+  const findIssuableTitle = () => wrapper.findByTestId('issuable-title');
+  const findHiddenBlockingCount = () => wrapper.findByTestId('hidden-blocking-count');
+  const findViewAllIssuableLink = () => wrapper.findByTestId('view-all-issues');
+
+  const waitForApollo = async () => {
+    jest.runOnlyPendingTimers();
+    await waitForPromises();
+  };
+
+  const mouseenter = async () => {
+    findGlIcon().vm.$emit('mouseenter');
+
+    await nextTick();
+    await waitForApollo();
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createWrapperWithApollo = ({
+    item = mockBlockedIssue1,
+    blockingIssuablesSpy = jest.fn().mockResolvedValue(mockBlockingIssuablesResponse1),
+    issuableItem = mockIssue,
+    issuableType = issuableTypes.issue,
+  } = {}) => {
+    mockApollo = createMockApollo([
+      [blockingIssuablesQueries[issuableType].query, blockingIssuablesSpy],
+    ]);
+
+    Vue.use(VueApollo);
+    wrapper = extendedWrapper(
+      mount(IssuableBlockedIcon, {
+        apolloProvider: mockApollo,
+        propsData: {
+          item: {
+            ...issuableItem,
+            ...item,
+          },
+          uniqueId: 'uniqueId',
+          issuableType,
+        },
+        attachTo: document.body,
+      }),
+    );
+  };
+
+  const createWrapper = ({
+    item = {},
+    queries = {},
+    data = {},
+    loading = false,
+    mockIssuable = mockIssue,
+    issuableType = issuableTypes.issue,
+  } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(IssuableBlockedIcon, {
+        propsData: {
+          item: {
+            ...mockIssuable,
+            ...item,
+          },
+          uniqueId: 'uniqueid',
+          issuableType,
+        },
+        data() {
+          return {
+            ...data,
+          };
+        },
+        mocks: {
+          $apollo: {
+            queries: {
+              blockingIssuables: { loading },
+              ...queries,
+            },
+          },
+        },
+        stubs: {
+          GlPopover,
+        },
+        attachTo: document.body,
+      }),
+    );
+  };
+
+  it.each`
+    mockIssuable | issuableType           | expectedIcon
+    ${mockIssue} | ${issuableTypes.issue} | ${'issue-block'}
+    ${mockEpic}  | ${issuableTypes.epic}  | ${'entity-blocked'}
+  `(
+    'should render blocked icon for $issuableType',
+    ({ mockIssuable, issuableType, expectedIcon }) => {
+      createWrapper({
+        mockIssuable,
+        issuableType,
+      });
+
+      expect(findGlIcon().exists()).toBe(true);
+      const icon = findGlIcon();
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('name')).toBe(expectedIcon);
+    },
+  );
+
+  it('should display a loading spinner while loading', () => {
+    createWrapper({ loading: true });
+
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+  });
+
+  it('should not query for blocking issuables by default', async () => {
+    createWrapperWithApollo();
+
+    expect(findGlPopover().text()).not.toContain(mockBlockingIssue1.title);
+  });
+
+  describe('on mouseenter on blocked icon', () => {
+    it.each`
+      item                 | issuableType           | mockBlockingIssuable  | issuableItem | blockingIssuablesSpy
+      ${mockBlockedIssue1} | ${issuableTypes.issue} | ${mockBlockingIssue1} | ${mockIssue} | ${jest.fn().mockResolvedValue(mockBlockingIssuablesResponse1)}
+      ${mockBlockedEpic1}  | ${issuableTypes.epic}  | ${mockBlockingEpic1}  | ${mockEpic}  | ${jest.fn().mockResolvedValue(mockBlockingEpicIssuablesResponse1)}
+    `(
+      'should query for blocking issuables and render the result for $issuableType',
+      async ({ item, issuableType, issuableItem, mockBlockingIssuable, blockingIssuablesSpy }) => {
+        createWrapperWithApollo({
+          item,
+          issuableType,
+          issuableItem,
+          blockingIssuablesSpy,
+        });
+
+        expect(findGlPopover().text()).not.toContain(mockBlockingIssuable.title);
+
+        await mouseenter();
+
+        expect(findGlPopover().exists()).toBe(true);
+        expect(findIssuableTitle().text()).toContain(mockBlockingIssuable.title);
+        expect(wrapper.vm.skip).toBe(true);
+      },
+    );
+
+    it('should emit "blocking-issuables-error" event on query error', async () => {
+      const mockError = new Error('mayday');
+      createWrapperWithApollo({ blockingIssuablesSpy: jest.fn().mockRejectedValue(mockError) });
+
+      await mouseenter();
+
+      const [
+        [
+          {
+            message,
+            error: { networkError },
+          },
+        ],
+      ] = wrapper.emitted('blocking-issuables-error');
+      expect(message).toBe('Failed to fetch blocking issues');
+      expect(networkError).toBe(mockError);
+    });
+
+    describe('with a single blocking issue', () => {
+      beforeEach(async () => {
+        createWrapperWithApollo();
+
+        await mouseenter();
+      });
+
+      it('should render a title of the issuable', async () => {
+        expect(findIssuableTitle().text()).toBe(mockBlockingIssue1.title);
+      });
+
+      it('should render issuable reference and link to the issuable', async () => {
+        const formattedRef = mockBlockingIssue1.reference.split('/')[1];
+
+        expect(findGlLink().text()).toBe(formattedRef);
+        expect(findGlLink().attributes('href')).toBe(mockBlockingIssue1.webUrl);
+      });
+
+      it('should render popover title with correct blocking issuable count', async () => {
+        expect(findPopoverTitle().text()).toBe('Blocked by 1 issue');
+      });
+    });
+
+    describe('when issue has a long title', () => {
+      it('should render a truncated title', async () => {
+        createWrapperWithApollo({
+          blockingIssuablesSpy: jest.fn().mockResolvedValue(mockBlockingIssuablesResponse2),
+        });
+
+        await mouseenter();
+
+        const truncatedTitle = truncate(
+          mockBlockingIssue2.title,
+          wrapper.vm.$options.textTruncateWidth,
+        );
+        expect(findIssuableTitle().text()).toBe(truncatedTitle);
+      });
+    });
+
+    describe('with more than three blocking issues', () => {
+      beforeEach(async () => {
+        createWrapperWithApollo({
+          item: mockBlockedIssue2,
+          blockingIssuablesSpy: jest.fn().mockResolvedValue(mockBlockingIssuablesResponse3),
+        });
+
+        await mouseenter();
+      });
+
+      it('matches the snapshot', () => {
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      it('should render popover title with correct blocking issuable count', async () => {
+        expect(findPopoverTitle().text()).toBe('Blocked by 4 issues');
+      });
+
+      it('should render the number of hidden blocking issuables', () => {
+        expect(findHiddenBlockingCount().text()).toBe('+ 1 more issue');
+      });
+
+      it('should link to the blocked issue page at the related issue anchor', async () => {
+        expect(findViewAllIssuableLink().text()).toBe('View all blocking issues');
+        expect(findViewAllIssuableLink().attributes('href')).toBe(
+          `${mockBlockedIssue2.webUrl}#related-issues`,
+        );
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js
index 39a76a51191..6b20f0c77a3 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js
@@ -138,7 +138,7 @@ describe('IssuableBody', () => {
 
         wrapper.vm.handleTaskListUpdateSuccess(updatedIssuable);
 
-        expect(wrapper.emitted('task-list-update-success')).toBeTruthy();
+        expect(wrapper.emitted('task-list-update-success')).toHaveLength(1);
         expect(wrapper.emitted('task-list-update-success')[0]).toEqual([updatedIssuable]);
       });
     });
@@ -147,7 +147,7 @@ describe('IssuableBody', () => {
       it('emits `task-list-update-failure` event on component', () => {
         wrapper.vm.handleTaskListUpdateFailure();
 
-        expect(wrapper.emitted('task-list-update-failure')).toBeTruthy();
+        expect(wrapper.emitted('task-list-update-failure')).toHaveLength(1);
       });
     });
   });
@@ -202,7 +202,7 @@ describe('IssuableBody', () => {
 
         issuableTitle.vm.$emit('edit-issuable');
 
-        expect(wrapper.emitted('edit-issuable')).toBeTruthy();
+        expect(wrapper.emitted('edit-issuable')).toHaveLength(1);
       });
 
       it.each(['keydown-title', 'keydown-description'])(
@@ -227,7 +227,7 @@ describe('IssuableBody', () => {
 
           issuableEditForm.vm.$emit(eventName, eventObj, issuableMeta);
 
-          expect(wrapper.emitted(eventName)).toBeTruthy();
+          expect(wrapper.emitted(eventName)).toHaveLength(1);
           expect(wrapper.emitted(eventName)[0]).toMatchObject([eventObj, issuableMeta]);
         },
       );