Add latest changes from gitlab-org/gitlab@master

2 files changed, 120 insertions, 67 deletions

diff --git a/spec/frontend/issues/new/components/title_suggestions_spec.js b/spec/frontend/issues/new/components/title_suggestions_spec.js
index 1cd6576967a..343bdbba301 100644
--- a/spec/frontend/issues/new/components/title_suggestions_spec.js
+++ b/spec/frontend/issues/new/components/title_suggestions_spec.js
@@ -1,106 +1,95 @@
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import TitleSuggestions from '~/issues/new/components/title_suggestions.vue';
 import TitleSuggestionsItem from '~/issues/new/components/title_suggestions_item.vue';
+import getIssueSuggestionsQuery from '~/issues/new/queries/issues.query.graphql';
+import { mockIssueSuggestionResponse } from '../mock_data';
+
+Vue.use(VueApollo);
+
+const MOCK_PROJECT_PATH = 'project';
+const MOCK_ISSUES_COUNT = mockIssueSuggestionResponse.data.project.issues.edges.length;
 
 describe('Issue title suggestions component', () => {
   let wrapper;
+  let mockApollo;
+
+  function createComponent({
+    search = 'search',
+    queryResponse = jest.fn().mockResolvedValue(mockIssueSuggestionResponse),
+  } = {}) {
+    mockApollo = createMockApollo([[getIssueSuggestionsQuery, queryResponse]]);
 
-  function createComponent(search = 'search') {
     wrapper = shallowMount(TitleSuggestions, {
       propsData: {
         search,
-        projectPath: 'project',
+        projectPath: MOCK_PROJECT_PATH,
       },
+      apolloProvider: mockApollo,
     });
   }
 
-  beforeEach(() => {
-    createComponent();
-  });
+  const waitForDebounce = () => {
+    jest.runOnlyPendingTimers();
+    return waitForPromises();
+  };
 
   afterEach(() => {
-    wrapper.destroy();
+    mockApollo = null;
   });
 
   it('does not render with empty search', async () => {
-    wrapper.setProps({ search: '' });
+    createComponent({ search: '' });
+    await waitForDebounce();
 
-    await nextTick();
     expect(wrapper.isVisible()).toBe(false);
   });
 
-  describe('with data', () => {
-    let data;
-
-    beforeEach(() => {
-      data = { issues: [{ id: 1 }, { id: 2 }] };
-    });
-
-    it('renders component', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
-
-      await nextTick();
-      expect(wrapper.findAll('li').length).toBe(data.issues.length);
-    });
+  it('does not render when loading', () => {
+    createComponent();
+    expect(wrapper.isVisible()).toBe(false);
+  });
 
-    it('does not render with empty search', async () => {
-      wrapper.setProps({ search: '' });
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
+  it('does not render with empty issues data', async () => {
+    const emptyIssuesResponse = {
+      data: {
+        project: {
+          id: 'gid://gitlab/Project/1',
+          issues: {
+            edges: [],
+          },
+        },
+      },
+    };
 
-      await nextTick();
-      expect(wrapper.isVisible()).toBe(false);
-    });
+    createComponent({ queryResponse: jest.fn().mockResolvedValue(emptyIssuesResponse) });
+    await waitForDebounce();
 
-    it('does not render when loading', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        ...data,
-        loading: 1,
-      });
+    expect(wrapper.isVisible()).toBe(false);
+  });
 
-      await nextTick();
-      expect(wrapper.isVisible()).toBe(false);
+  describe('with data', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForDebounce();
     });
 
-    it('does not render with empty issues data', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ issues: [] });
-
-      await nextTick();
-      expect(wrapper.isVisible()).toBe(false);
+    it('renders component', () => {
+      expect(wrapper.findAll('li').length).toBe(MOCK_ISSUES_COUNT);
     });
 
-    it('renders list of issues', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
-
-      await nextTick();
-      expect(wrapper.findAllComponents(TitleSuggestionsItem).length).toBe(2);
+    it('renders list of issues', () => {
+      expect(wrapper.findAllComponents(TitleSuggestionsItem).length).toBe(MOCK_ISSUES_COUNT);
     });
 
-    it('adds margin class to first item', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
-
-      await nextTick();
+    it('adds margin class to first item', () => {
       expect(wrapper.findAll('li').at(0).classes()).toContain('gl-mb-3');
     });
 
-    it('does not add margin class to last item', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
-
-      await nextTick();
+    it('does not add margin class to last item', () => {
       expect(wrapper.findAll('li').at(1).classes()).not.toContain('gl-mb-3');
     });
   });
diff --git a/spec/frontend/issues/new/mock_data.js b/spec/frontend/issues/new/mock_data.js
index 74b569d9833..0d2a388cd86 100644
--- a/spec/frontend/issues/new/mock_data.js
+++ b/spec/frontend/issues/new/mock_data.js
@@ -26,3 +26,67 @@ export default () => ({
     webUrl: `${TEST_HOST}/author`,
   },
 });
+
+export const mockIssueSuggestionResponse = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/278964',
+      issues: {
+        edges: [
+          {
+            node: {
+              id: 'gid://gitlab/Issue/123725957',
+              iid: '696',
+              title: 'Remove unused MR widget extension expand success, failed, warning events',
+              confidential: false,
+              userNotesCount: 16,
+              upvotes: 0,
+              webUrl: 'https://gitlab.com/gitlab-org/gitlab/-/issues/696',
+              state: 'opened',
+              closedAt: null,
+              createdAt: '2023-02-15T12:29:59Z',
+              updatedAt: '2023-03-01T19:38:22Z',
+              author: {
+                id: 'gid://gitlab/User/325',
+                name: 'User Name',
+                username: 'user-name',
+                avatarUrl: '/uploads/-/system/user/avatar/325/avatar.png',
+                webUrl: 'https://gitlab.com/user-name',
+                __typename: 'UserCore',
+              },
+              __typename: 'Issue',
+            },
+            __typename: 'IssueEdge',
+          },
+          {
+            node: {
+              id: 'gid://gitlab/Issue/123',
+              iid: '391',
+              title: 'Remove unused MR widget extension expand success, failed, warning events',
+              confidential: false,
+              userNotesCount: 16,
+              upvotes: 0,
+              webUrl: 'https://gitlab.com/gitlab-org/gitlab/-/issues/391',
+              state: 'opened',
+              closedAt: null,
+              createdAt: '2023-02-15T12:29:59Z',
+              updatedAt: '2023-03-01T19:38:22Z',
+              author: {
+                id: 'gid://gitlab/User/2080',
+                name: 'User Name',
+                username: 'user-name',
+                avatarUrl: '/uploads/-/system/user/avatar/2080/avatar.png',
+                webUrl: 'https://gitlab.com/user-name',
+                __typename: 'UserCore',
+              },
+              __typename: 'Issue',
+            },
+            __typename: 'IssueEdge',
+          },
+        ],
+        __typename: 'IssueConnection',
+      },
+      __typename: 'Project',
+    },
+  },
+};