Add latest changes from gitlab-org/gitlab@master

3 files changed, 83 insertions, 65 deletions

diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
index b5a69b28a88..934bda570d4 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
@@ -7,7 +7,7 @@ exports[`Design management pagination component renders navigation buttons 1`] =
   class="gl-display-flex gl-align-items-center"
 >
   
-  0 of 2
+  0 of 3
   
   <gl-button-group-stub
     class="gl-mx-5"
diff --git a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
index 8427d83ceee..46eb4c16af8 100644
--- a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
+++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
@@ -1,9 +1,15 @@
 /* global Mousetrap */
 import 'mousetrap';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlButtonGroup } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue';
 import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
+import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { designListQueryResponse, designListQueryResponseNodes } from '../../mock_data/apollo_mock';
 
 const push = jest.fn();
 const $router = {
@@ -18,11 +24,24 @@ const $route = {
 describe('Design management pagination component', () => {
   let wrapper;
 
-  function createComponent() {
+  const buildMockHandler = (nodes = designListQueryResponseNodes) => {
+    designListQueryResponse.data.project.issue.designCollection.designs.nodes = nodes;
+    return jest.fn().mockResolvedValue(designListQueryResponse);
+  };
+
+  const createMockApolloProvider = (handler) => {
+    Vue.use(VueApollo);
+
+    return createMockApollo([[getDesignListQuery, handler]]);
+  };
+
+  function createComponent({ propsData = {}, handler = buildMockHandler() } = {}) {
     wrapper = shallowMount(DesignNavigation, {
       propsData: {
         id: '2',
+        ...propsData,
       },
+      apolloProvider: createMockApolloProvider(handler),
       mocks: {
         $router,
         $route,
@@ -30,48 +49,45 @@ describe('Design management pagination component', () => {
     });
   }
 
-  beforeEach(() => {
-    createComponent();
-  });
+  const findGlButtonGroup = () => wrapper.findComponent(GlButtonGroup);
+
+  it('hides components when designs are empty', async () => {
+    createComponent({ handler: buildMockHandler([]) });
+    await waitForPromises();
 
-  it('hides components when designs are empty', () => {
+    expect(findGlButtonGroup().exists()).toBe(false);
     expect(wrapper.element).toMatchSnapshot();
   });
 
   it('renders navigation buttons', 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({
-      designCollection: { designs: [{ id: '1' }, { id: '2' }] },
-    });
+    createComponent({ handler: buildMockHandler() });
+    await waitForPromises();
 
-    await nextTick();
+    expect(findGlButtonGroup().exists()).toBe(true);
     expect(wrapper.element).toMatchSnapshot();
   });
 
   describe('keyboard buttons navigation', () => {
-    beforeEach(() => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        designCollection: { designs: [{ filename: '1' }, { filename: '2' }, { filename: '3' }] },
-      });
-    });
+    it('routes to previous design on Left button', async () => {
+      createComponent({ propsData: { id: designListQueryResponseNodes[1].filename } });
+      await waitForPromises();
 
-    it('routes to previous design on Left button', () => {
       Mousetrap.trigger('left');
       expect(push).toHaveBeenCalledWith({
         name: DESIGN_ROUTE_NAME,
-        params: { id: '1' },
+        params: { id: designListQueryResponseNodes[0].filename },
         query: {},
       });
     });
 
-    it('routes to next design on Right button', () => {
+    it('routes to next design on Right button', async () => {
+      createComponent({ propsData: { id: designListQueryResponseNodes[1].filename } });
+      await waitForPromises();
+
       Mousetrap.trigger('right');
       expect(push).toHaveBeenCalledWith({
         name: DESIGN_ROUTE_NAME,
-        params: { id: '3' },
+        params: { id: designListQueryResponseNodes[2].filename },
         query: {},
       });
     });
diff --git a/spec/frontend/design_management/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js
index 2b99dcf14da..a7355719141 100644
--- a/spec/frontend/design_management/mock_data/apollo_mock.js
+++ b/spec/frontend/design_management/mock_data/apollo_mock.js
@@ -1,3 +1,45 @@
+export const designListQueryResponseNodes = [
+  {
+    __typename: 'Design',
+    id: '1',
+    event: 'NONE',
+    filename: 'fox_1.jpg',
+    notesCount: 3,
+    image: 'image-1',
+    imageV432x230: 'image-1',
+    currentUserTodos: {
+      __typename: 'ToDo',
+      nodes: [],
+    },
+  },
+  {
+    __typename: 'Design',
+    id: '2',
+    event: 'NONE',
+    filename: 'fox_2.jpg',
+    notesCount: 2,
+    image: 'image-2',
+    imageV432x230: 'image-2',
+    currentUserTodos: {
+      __typename: 'ToDo',
+      nodes: [],
+    },
+  },
+  {
+    __typename: 'Design',
+    id: '3',
+    event: 'NONE',
+    filename: 'fox_3.jpg',
+    notesCount: 1,
+    image: 'image-3',
+    imageV432x230: 'image-3',
+    currentUserTodos: {
+      __typename: 'ToDo',
+      nodes: [],
+    },
+  },
+];
+
 export const designListQueryResponse = {
   data: {
     project: {
@@ -11,47 +53,7 @@ export const designListQueryResponse = {
           copyState: 'READY',
           designs: {
             __typename: 'DesignConnection',
-            nodes: [
-              {
-                __typename: 'Design',
-                id: '1',
-                event: 'NONE',
-                filename: 'fox_1.jpg',
-                notesCount: 3,
-                image: 'image-1',
-                imageV432x230: 'image-1',
-                currentUserTodos: {
-                  __typename: 'ToDo',
-                  nodes: [],
-                },
-              },
-              {
-                __typename: 'Design',
-                id: '2',
-                event: 'NONE',
-                filename: 'fox_2.jpg',
-                notesCount: 2,
-                image: 'image-2',
-                imageV432x230: 'image-2',
-                currentUserTodos: {
-                  __typename: 'ToDo',
-                  nodes: [],
-                },
-              },
-              {
-                __typename: 'Design',
-                id: '3',
-                event: 'NONE',
-                filename: 'fox_3.jpg',
-                notesCount: 1,
-                image: 'image-3',
-                imageV432x230: 'image-3',
-                currentUserTodos: {
-                  __typename: 'ToDo',
-                  nodes: [],
-                },
-              },
-            ],
+            nodes: designListQueryResponseNodes,
           },
           versions: {
             __typename: 'DesignVersion',