Add latest changes from gitlab-org/gitlab@master

5 files changed, 127 insertions, 93 deletions

diff --git a/spec/frontend/contributors/component/contributors_spec.js b/spec/frontend/contributors/component/contributors_spec.js
index 03b1e977548..9f5c7e11644 100644
--- a/spec/frontend/contributors/component/contributors_spec.js
+++ b/spec/frontend/contributors/component/contributors_spec.js
@@ -1,5 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ContributorsCharts from '~/contributors/components/contributors.vue';
 import { createStore } from '~/contributors/stores';
@@ -16,7 +16,6 @@ jest.mock('~/lib/utils/url_utility', () => ({
 let wrapper;
 let mock;
 let store;
-const Component = Vue.extend(ContributorsCharts);
 const endpoint = 'contributors/-/graphs';
 const branch = 'main';
 const chartData = [
@@ -32,7 +31,7 @@ function factory() {
   mock.onGet().reply(HTTP_STATUS_OK, chartData);
   store = createStore();
 
-  wrapper = mountExtended(Component, {
+  wrapper = mountExtended(ContributorsCharts, {
     propsData: {
       endpoint,
       branch,
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',
+    },
+  },
+};
diff --git a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
index 012e2e9c3e2..96b228fd3b2 100644
--- a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
+++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
@@ -1,6 +1,5 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import DropdownField from '~/monitoring/components/variables/dropdown_field.vue';
 
 describe('Custom variable component', () => {
@@ -56,11 +55,8 @@ describe('Custom variable component', () => {
 
   it('changing dropdown items triggers update', async () => {
     createShallowWrapper();
-    jest.spyOn(wrapper.vm, '$emit');
-
     findDropdownItems().at(1).vm.$emit('click');
 
-    await nextTick();
-    expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary');
+    expect(wrapper.emitted('input')).toEqual([['canary']]);
   });
 });
diff --git a/spec/frontend/repository/components/blob_viewers/notebook_viewer_spec.js b/spec/frontend/repository/components/blob_viewers/notebook_viewer_spec.js
index 51f3d31ec72..5d37692bf90 100644
--- a/spec/frontend/repository/components/blob_viewers/notebook_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_viewers/notebook_viewer_spec.js
@@ -1,7 +1,6 @@
-import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NotebookViewer from '~/repository/components/blob_viewers/notebook_viewer.vue';
-import notebookLoader from '~/blob/notebook';
+import Notebook from '~/blob/notebook/notebook_viewer.vue';
 
 jest.mock('~/blob/notebook');
 
@@ -17,24 +16,11 @@ describe('Notebook Viewer', () => {
     });
   };
 
-  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findNotebookWrapper = () => wrapper.findByTestId('notebook');
+  const findNotebook = () => wrapper.findComponent(Notebook);
 
   beforeEach(() => createComponent());
 
-  it('calls the notebook loader', () => {
-    expect(notebookLoader).toHaveBeenCalledWith({
-      el: wrapper.vm.$refs.viewer,
-      relativeRawPath: ROOT_RELATIVE_PATH,
-    });
-  });
-
-  it('renders a loading icon component', () => {
-    expect(findLoadingIcon().props('size')).toBe('lg');
-  });
-
-  it('renders the notebook wrapper', () => {
-    expect(findNotebookWrapper().exists()).toBe(true);
-    expect(findNotebookWrapper().attributes('data-endpoint')).toBe(DEFAULT_BLOB_DATA.rawPath);
+  it('renders a Notebook component', () => {
+    expect(findNotebook().props('endpoint')).toBe(DEFAULT_BLOB_DATA.rawPath);
   });
 });