Apply suggestion to spec/frontend/commit/commit_pipeline_status_component_spec.js

2 files changed, 14 insertions, 39 deletions

diff --git a/spec/frontend/commit/__snapshots__/commit_pipeline_status_component_spec.js.snap b/spec/frontend/commit/__snapshots__/commit_pipeline_status_component_spec.js.snap
index b377d2f9775..c8c5b1ada6f 100644
--- a/spec/frontend/commit/__snapshots__/commit_pipeline_status_component_spec.js.snap
+++ b/spec/frontend/commit/__snapshots__/commit_pipeline_status_component_spec.js.snap
@@ -23,13 +23,13 @@ exports[`Commit pipeline status component when polling is successful renders CI
   class="ci-status-link"
 >
   <a
-    href="/root/hello-world/pipelines/1"
+    href="/frontend-fixtures/pipelines-project/pipelines/7"
   >
     <ciicon-stub
-      aria-label="Pipeline: canceled"
+      aria-label="Pipeline: pending"
       cssclasses=""
       data-container="body"
-      data-original-title="Pipeline: canceled"
+      data-original-title="Pipeline: pending"
       size="24"
       status="[object Object]"
       title=""
diff --git a/spec/frontend/commit/commit_pipeline_status_component_spec.js b/spec/frontend/commit/commit_pipeline_status_component_spec.js
index f5d4ff2c05b..b47c405e363 100644
--- a/spec/frontend/commit/commit_pipeline_status_component_spec.js
+++ b/spec/frontend/commit/commit_pipeline_status_component_spec.js
@@ -2,30 +2,25 @@ import Visibility from 'visibilityjs';
 import Poll from '~/lib/utils/poll';
 import flash from '~/flash';
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
-
 import { shallowMount } from '@vue/test-utils';
+import { getJSONFixture } from '../helpers/fixtures';
 
 jest.mock('~/lib/utils/poll');
 jest.mock('visibilityjs');
 jest.mock('~/flash');
+
+const mockFetchData = jest.fn();
 /* eslint-disable-next-line prefer-arrow-callback */
 jest.mock('~/projects/tree/services/commit_pipeline_service', function PipelineService() {
   return jest.fn().mockImplementation(() => ({
-    fetchData: jest.fn().mockReturnValue(Promise.resolve()),
+    fetchData: mockFetchData.mockReturnValue(Promise.resolve()),
   }));
 });
 
 describe('Commit pipeline status component', () => {
   let wrapper;
-  const mockCiStatus = {
-    details_path: '/root/hello-world/pipelines/1',
-    favicon: 'canceled.ico',
-    group: 'canceled',
-    has_details: true,
-    icon: 'status_canceled',
-    label: 'canceled',
-    text: 'canceled',
-  };
+  const { pipelines } = getJSONFixture('pipelines/pipelines.json');
+  const { status: mockCiStatus } = pipelines[0].details;
 
   const defaultProps = {
     endpoint: 'endpoint',
@@ -41,18 +36,9 @@ describe('Commit pipeline status component', () => {
     });
   };
 
-  beforeEach(() => {});
-
   afterEach(() => {
-    jest.clearAllMocks();
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
-  });
-
-  afterAll(() => {
-    jest.restoreAllMocks();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('Visibility management', () => {
@@ -68,8 +54,7 @@ describe('Commit pipeline status component', () => {
       });
 
       it('requests pipeline data', () => {
-        const [pollInstance] = Poll.mock.instances;
-        expect(pollInstance.makeRequest).not.toHaveBeenCalled();
+        expect(mockFetchData).toHaveBeenCalled();
       });
     });
 
@@ -80,19 +65,12 @@ describe('Commit pipeline status component', () => {
       });
 
       it('starts polling', () => {
-        const [pollInstance] = Poll.mock.instances;
+        const [pollInstance] = [...Poll.mock.instances].reverse();
         expect(pollInstance.makeRequest).toHaveBeenCalled();
       });
     });
 
     describe('when component changes its visibility', () => {
-      let visibilityHandler;
-      beforeEach(() => {
-        Visibility.change.mockImplementation(handler => {
-          visibilityHandler = handler;
-        });
-      });
-
       it.each`
         visibility | action
         ${false}   | ${'restart'}
@@ -103,6 +81,7 @@ describe('Commit pipeline status component', () => {
           Visibility.hidden.mockReturnValue(!visibility);
           createComponent();
           Visibility.hidden.mockReturnValue(visibility);
+          const [visibilityHandler] = Visibility.change.mock.calls[0];
           visibilityHandler();
           const [pollInstance] = Poll.mock.instances;
           expect(pollInstance[action]).toHaveBeenCalled();
@@ -128,10 +107,6 @@ describe('Commit pipeline status component', () => {
       createComponent();
     });
 
-    afterEach(() => {
-      Poll.mockReset();
-    });
-
     describe('is successful', () => {
       beforeEach(() => {
         pollConfig.successCallback({