1 files changed, 34 insertions, 17 deletions

diff --git a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
index 753682d438b..44656b2b67d 100644
--- a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
+++ b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
@@ -5,22 +5,18 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import PipelineStatus, { i18n } from '~/pipeline_editor/components/header/pipeline_status.vue';
 import getPipelineQuery from '~/pipeline_editor/graphql/queries/client/pipeline.graphql';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue';
 import { mockCommitSha, mockProjectPipeline, mockProjectFullPath } from '../../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-const mockProvide = {
-  projectFullPath: mockProjectFullPath,
-};
-
 describe('Pipeline Status', () => {
   let wrapper;
   let mockApollo;
   let mockPipelineQuery;
 
-  const createComponentWithApollo = () => {
+  const createComponentWithApollo = (glFeatures = {}) => {
     const handlers = [[getPipelineQuery, mockPipelineQuery]];
     mockApollo = createMockApollo(handlers);
 
@@ -30,19 +26,23 @@ describe('Pipeline Status', () => {
       propsData: {
         commitSha: mockCommitSha,
       },
-      provide: mockProvide,
+      provide: {
+        glFeatures,
+        projectFullPath: mockProjectFullPath,
+      },
       stubs: { GlLink, GlSprintf },
     });
   };
 
   const findIcon = () => wrapper.findComponent(GlIcon);
-  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findPipelineEditorMiniGraph = () => wrapper.findComponent(PipelineEditorMiniGraph);
   const findPipelineId = () => wrapper.find('[data-testid="pipeline-id"]');
   const findPipelineCommit = () => wrapper.find('[data-testid="pipeline-commit"]');
   const findPipelineErrorMsg = () => wrapper.find('[data-testid="pipeline-error-msg"]');
   const findPipelineLoadingMsg = () => wrapper.find('[data-testid="pipeline-loading-msg"]');
   const findPipelineViewBtn = () => wrapper.find('[data-testid="pipeline-view-btn"]');
+  const findStatusIcon = () => wrapper.find('[data-testid="pipeline-status-icon"]');
 
   beforeEach(() => {
     mockPipelineQuery = jest.fn();
@@ -50,9 +50,7 @@ describe('Pipeline Status', () => {
 
   afterEach(() => {
     mockPipelineQuery.mockReset();
-
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('loading icon', () => {
@@ -73,13 +71,13 @@ describe('Pipeline Status', () => {
 
   describe('when querying data', () => {
     describe('when data is set', () => {
-      beforeEach(async () => {
+      beforeEach(() => {
         mockPipelineQuery.mockResolvedValue({
-          data: { project: mockProjectPipeline },
+          data: { project: mockProjectPipeline() },
         });
 
         createComponentWithApollo();
-        await waitForPromises();
+        waitForPromises();
       });
 
       it('query is called with correct variables', async () => {
@@ -91,20 +89,24 @@ describe('Pipeline Status', () => {
       });
 
       it('does not render error', () => {
-        expect(findIcon().exists()).toBe(false);
+        expect(findPipelineErrorMsg().exists()).toBe(false);
       });
 
       it('renders pipeline data', () => {
         const {
           id,
           detailedStatus: { detailsPath },
-        } = mockProjectPipeline.pipeline;
+        } = mockProjectPipeline().pipeline;
 
-        expect(findCiIcon().exists()).toBe(true);
+        expect(findStatusIcon().exists()).toBe(true);
         expect(findPipelineId().text()).toBe(`#${id.match(/\d+/g)[0]}`);
         expect(findPipelineCommit().text()).toBe(mockCommitSha);
         expect(findPipelineViewBtn().attributes('href')).toBe(detailsPath);
       });
+
+      it('does not render the pipeline mini graph', () => {
+        expect(findPipelineEditorMiniGraph().exists()).toBe(false);
+      });
     });
 
     describe('when data cannot be fetched', () => {
@@ -121,11 +123,26 @@ describe('Pipeline Status', () => {
       });
 
       it('does not render pipeline data', () => {
-        expect(findCiIcon().exists()).toBe(false);
+        expect(findStatusIcon().exists()).toBe(false);
         expect(findPipelineId().exists()).toBe(false);
         expect(findPipelineCommit().exists()).toBe(false);
         expect(findPipelineViewBtn().exists()).toBe(false);
       });
     });
   });
+
+  describe('when feature flag for pipeline mini graph is enabled', () => {
+    beforeEach(() => {
+      mockPipelineQuery.mockResolvedValue({
+        data: { project: mockProjectPipeline() },
+      });
+
+      createComponentWithApollo({ pipelineEditorMiniGraph: true });
+      waitForPromises();
+    });
+
+    it('renders the pipeline mini graph', () => {
+      expect(findPipelineEditorMiniGraph().exists()).toBe(true);
+    });
+  });
 });