1 files changed, 42 insertions, 15 deletions

diff --git a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
index 1a2e188e7ae..b1c8ba48475 100644
--- a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
+++ b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
@@ -1,7 +1,18 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { shallowMount } from '@vue/test-utils';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
 import CommitBoxPipelineMiniGraph from '~/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue';
-import { mockStages } from './mock_data';
+import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql';
+import getPipelineStagesQuery from '~/projects/commit_box/info/graphql/queries/get_pipeline_stages.query.graphql';
+import { mockPipelineStagesQueryResponse, mockStages } from './mock_data';
+
+jest.mock('~/flash');
+
+Vue.use(VueApollo);
 
 describe('Commit box pipeline mini graph', () => {
   let wrapper;
@@ -10,34 +21,36 @@ describe('Commit box pipeline mini graph', () => {
   const findUpstream = () => wrapper.findByTestId('commit-box-mini-graph-upstream');
   const findDownstream = () => wrapper.findByTestId('commit-box-mini-graph-downstream');
 
-  const createComponent = () => {
+  const stagesHandler = jest.fn().mockResolvedValue(mockPipelineStagesQueryResponse);
+
+  const createComponent = ({ props = {} } = {}) => {
+    const handlers = [
+      [getLinkedPipelinesQuery, {}],
+      [getPipelineStagesQuery, stagesHandler],
+    ];
+
     wrapper = extendedWrapper(
       shallowMount(CommitBoxPipelineMiniGraph, {
         propsData: {
           stages: mockStages,
+          ...props,
         },
-        mocks: {
-          $apollo: {
-            queries: {
-              pipeline: {
-                loading: false,
-              },
-            },
-          },
-        },
+        apolloProvider: createMockApollo(handlers),
       }),
     );
-  };
 
-  beforeEach(() => {
-    createComponent();
-  });
+    return waitForPromises();
+  };
 
   afterEach(() => {
     wrapper.destroy();
   });
 
   describe('linked pipelines', () => {
+    beforeEach(async () => {
+      await createComponent();
+    });
+
     it('should display the mini pipeine graph', () => {
       expect(findMiniGraph().exists()).toBe(true);
     });
@@ -47,4 +60,18 @@ describe('Commit box pipeline mini graph', () => {
       expect(findDownstream().exists()).toBe(false);
     });
   });
+
+  describe('when data is mismatched', () => {
+    beforeEach(async () => {
+      await createComponent({ props: { stages: [] } });
+    });
+
+    it('calls create flash with expected arguments', () => {
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was a problem handling the pipeline data.',
+        captureError: true,
+        error: new Error('Rest stages and graphQl stages must be the same length'),
+      });
+    });
+  });
 });