1 files changed, 49 insertions, 47 deletions

diff --git a/spec/frontend/organizations/shared/components/projects_view_spec.js b/spec/frontend/organizations/shared/components/projects_view_spec.js
index 3cc71927bfa..c406ba2cd47 100644
--- a/spec/frontend/organizations/shared/components/projects_view_spec.js
+++ b/spec/frontend/organizations/shared/components/projects_view_spec.js
@@ -2,19 +2,18 @@ import VueApollo from 'vue-apollo';
 import Vue from 'vue';
 import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
 import ProjectsView from '~/organizations/shared/components/projects_view.vue';
+import projectsQuery from '~/organizations/shared/graphql/queries/projects.query.graphql';
 import { formatProjects } from '~/organizations/shared/utils';
-import resolvers from '~/organizations/shared/graphql/resolvers';
 import ProjectsList from '~/vue_shared/components/projects_list/projects_list.vue';
 import { createAlert } from '~/alert';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { organizationProjects } from '~/organizations/mock_data';
+import { organizationProjects as nodes, pageInfo, pageInfoEmpty } from '~/organizations/mock_data';
 
 jest.mock('~/alert');
 
 Vue.use(VueApollo);
-jest.useFakeTimers();
 
 describe('ProjectsView', () => {
   let wrapper;
@@ -23,14 +22,29 @@ describe('ProjectsView', () => {
   const defaultProvide = {
     projectsEmptyStateSvgPath: 'illustrations/empty-state/empty-projects-md.svg',
     newProjectPath: '/projects/new',
+    organizationGid: 'gid://gitlab/Organizations::Organization/1',
   };
 
   const defaultPropsData = {
     listItemClass: 'gl-px-5',
   };
 
-  const createComponent = ({ mockResolvers = resolvers, propsData = {} } = {}) => {
-    mockApollo = createMockApollo([], mockResolvers);
+  const projects = {
+    nodes,
+    pageInfo,
+  };
+
+  const successHandler = jest.fn().mockResolvedValue({
+    data: {
+      organization: {
+        id: defaultProvide.organizationGid,
+        projects,
+      },
+    },
+  });
+
+  const createComponent = ({ handler = successHandler, propsData = {} } = {}) => {
+    mockApollo = createMockApollo([[projectsQuery, handler]]);
 
     wrapper = shallowMountExtended(ProjectsView, {
       apolloProvider: mockApollo,
@@ -42,45 +56,45 @@ describe('ProjectsView', () => {
     });
   };
 
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findProjectsList = () => wrapper.findComponent(ProjectsList);
+
   afterEach(() => {
     mockApollo = null;
   });
 
   describe('when API call is loading', () => {
-    beforeEach(() => {
-      const mockResolvers = {
-        Query: {
-          organization: jest.fn().mockReturnValueOnce(new Promise(() => {})),
-        },
-      };
-
-      createComponent({ mockResolvers });
-    });
-
     it('renders loading icon', () => {
-      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+      createComponent();
+
+      expect(findLoadingIcon().exists()).toBe(true);
     });
   });
 
   describe('when API call is successful', () => {
     describe('when there are no projects', () => {
-      it('renders empty state without buttons by default', async () => {
-        const mockResolvers = {
-          Query: {
-            organization: jest.fn().mockResolvedValueOnce({
-              projects: { nodes: [] },
-            }),
+      const emptyHandler = jest.fn().mockResolvedValue({
+        data: {
+          organization: {
+            id: defaultProvide.organizationGid,
+            projects: {
+              nodes: [],
+              pageInfo: pageInfoEmpty,
+            },
           },
-        };
-        createComponent({ mockResolvers });
+        },
+      });
+
+      it('renders empty state without buttons by default', async () => {
+        createComponent({ handler: emptyHandler });
 
-        jest.runAllTimers();
         await waitForPromises();
 
-        expect(wrapper.findComponent(GlEmptyState).props()).toMatchObject({
+        expect(findEmptyState().props()).toMatchObject({
           title: "You don't have any projects yet.",
           description:
-            'Projects are where you can store your code, access issues, wiki, and other features of Gitlab.',
+            'Projects are where you can store your code, access issues, wiki, and other features of GitLab.',
           svgHeight: 144,
           svgPath: defaultProvide.projectsEmptyStateSvgPath,
           primaryButtonLink: null,
@@ -90,19 +104,14 @@ describe('ProjectsView', () => {
 
       describe('when `shouldShowEmptyStateButtons` is `true` and `projectsEmptyStateSvgPath` is set', () => {
         it('renders empty state with buttons', async () => {
-          const mockResolvers = {
-            Query: {
-              organization: jest.fn().mockResolvedValueOnce({
-                projects: { nodes: [] },
-              }),
-            },
-          };
-          createComponent({ mockResolvers, propsData: { shouldShowEmptyStateButtons: true } });
+          createComponent({
+            handler: emptyHandler,
+            propsData: { shouldShowEmptyStateButtons: true },
+          });
 
-          jest.runAllTimers();
           await waitForPromises();
 
-          expect(wrapper.findComponent(GlEmptyState).props()).toMatchObject({
+          expect(findEmptyState().props()).toMatchObject({
             primaryButtonLink: defaultProvide.newProjectPath,
             primaryButtonText: 'New project',
           });
@@ -116,11 +125,10 @@ describe('ProjectsView', () => {
       });
 
       it('renders `ProjectsList` component and passes correct props', async () => {
-        jest.runAllTimers();
         await waitForPromises();
 
-        expect(wrapper.findComponent(ProjectsList).props()).toEqual({
-          projects: formatProjects(organizationProjects.nodes),
+        expect(findProjectsList().props()).toMatchObject({
+          projects: formatProjects(nodes),
           showProjectIcon: true,
           listItemClass: defaultPropsData.listItemClass,
         });
@@ -132,13 +140,7 @@ describe('ProjectsView', () => {
     const error = new Error();
 
     beforeEach(() => {
-      const mockResolvers = {
-        Query: {
-          organization: jest.fn().mockRejectedValueOnce(error),
-        },
-      };
-
-      createComponent({ mockResolvers });
+      createComponent({ handler: jest.fn().mockRejectedValue(error) });
     });
 
     it('displays error alert', async () => {