Add latest changes from gitlab-org/gitlab@master

2 files changed, 181 insertions, 1 deletions

diff --git a/spec/frontend/pipeline_editor/components/header/pipeline_editor_header_spec.js b/spec/frontend/pipeline_editor/components/header/pipeline_editor_header_spec.js
index df15a6c8e7f..5eeccd78265 100644
--- a/spec/frontend/pipeline_editor/components/header/pipeline_editor_header_spec.js
+++ b/spec/frontend/pipeline_editor/components/header/pipeline_editor_header_spec.js
@@ -1,14 +1,24 @@
 import { shallowMount } from '@vue/test-utils';
 import PipelineEditorHeader from '~/pipeline_editor/components/header/pipeline_editor_header.vue';
+import PipelineStatus from '~/pipeline_editor/components/header/pipeline_status.vue';
 import ValidationSegment from '~/pipeline_editor/components/header/validation_segment.vue';
 
 import { mockLintResponse } from '../../mock_data';
 
 describe('Pipeline editor header', () => {
   let wrapper;
+  const mockProvide = {
+    glFeatures: {
+      pipelineStatusForPipelineEditor: true,
+    },
+  };
 
-  const createComponent = () => {
+  const createComponent = ({ provide = {} } = {}) => {
     wrapper = shallowMount(PipelineEditorHeader, {
+      provide: {
+        ...mockProvide,
+        ...provide,
+      },
       props: {
         ciConfigData: mockLintResponse,
         isCiConfigDataLoading: false,
@@ -16,6 +26,7 @@ describe('Pipeline editor header', () => {
     });
   };
 
+  const findPipelineStatus = () => wrapper.findComponent(PipelineStatus);
   const findValidationSegment = () => wrapper.findComponent(ValidationSegment);
 
   afterEach(() => {
@@ -27,8 +38,27 @@ describe('Pipeline editor header', () => {
     beforeEach(() => {
       createComponent();
     });
+
+    it('renders the pipeline status', () => {
+      expect(findPipelineStatus().exists()).toBe(true);
+    });
+
     it('renders the validation segment', () => {
       expect(findValidationSegment().exists()).toBe(true);
     });
   });
+
+  describe('with pipeline status feature flag off', () => {
+    beforeEach(() => {
+      createComponent({
+        provide: {
+          glFeatures: { pipelineStatusForPipelineEditor: false },
+        },
+      });
+    });
+
+    it('does not render the pipeline status', () => {
+      expect(findPipelineStatus().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
new file mode 100644
index 00000000000..de6e112866b
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
@@ -0,0 +1,150 @@
+import { GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+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 CiIcon from '~/vue_shared/components/ci_icon.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 createComponent = ({ hasPipeline = true, isQueryLoading = false }) => {
+    const pipeline = hasPipeline
+      ? { loading: isQueryLoading, ...mockProjectPipeline.pipeline }
+      : { loading: isQueryLoading };
+
+    wrapper = shallowMount(PipelineStatus, {
+      provide: mockProvide,
+      stubs: { GlLink, GlSprintf },
+      data: () => (hasPipeline ? { pipeline } : {}),
+      mocks: {
+        $apollo: {
+          queries: {
+            pipeline,
+          },
+        },
+      },
+    });
+  };
+
+  const createComponentWithApollo = () => {
+    const resolvers = {
+      Query: {
+        project: mockPipelineQuery,
+      },
+    };
+    mockApollo = createMockApollo([], resolvers);
+
+    wrapper = shallowMount(PipelineStatus, {
+      localVue,
+      apolloProvider: mockApollo,
+      provide: mockProvide,
+      stubs: { GlLink, GlSprintf },
+      data() {
+        return {
+          commitSha: mockCommitSha,
+        };
+      },
+    });
+  };
+
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  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"]');
+
+  beforeEach(() => {
+    mockPipelineQuery = jest.fn();
+  });
+
+  afterEach(() => {
+    mockPipelineQuery.mockReset();
+
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('while querying', () => {
+    it('renders loading icon', () => {
+      createComponent({ isQueryLoading: true, hasPipeline: false });
+
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findPipelineLoadingMsg().text()).toBe(i18n.fetchLoading);
+    });
+
+    it('does not render loading icon if pipeline data is already set', () => {
+      createComponent({ isQueryLoading: true });
+
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+  });
+
+  describe('when querying data', () => {
+    describe('when data is set', () => {
+      beforeEach(async () => {
+        mockPipelineQuery.mockResolvedValue(mockProjectPipeline);
+
+        createComponentWithApollo();
+        await waitForPromises();
+      });
+
+      it('query is called with correct variables', async () => {
+        expect(mockPipelineQuery).toHaveBeenCalledTimes(1);
+        expect(mockPipelineQuery).toHaveBeenCalledWith(
+          expect.anything(),
+          {
+            fullPath: mockProjectFullPath,
+          },
+          expect.anything(),
+          expect.anything(),
+        );
+      });
+
+      it('does not render error', () => {
+        expect(findIcon().exists()).toBe(false);
+      });
+
+      it('renders pipeline data', () => {
+        const { id } = mockProjectPipeline.pipeline;
+
+        expect(findCiIcon().exists()).toBe(true);
+        expect(findPipelineId().text()).toBe(`#${id.match(/\d+/g)[0]}`);
+        expect(findPipelineCommit().text()).toBe(mockCommitSha);
+      });
+    });
+
+    describe('when data cannot be fetched', () => {
+      beforeEach(async () => {
+        mockPipelineQuery.mockRejectedValue(new Error());
+
+        createComponentWithApollo();
+        await waitForPromises();
+      });
+
+      it('renders error', () => {
+        expect(findIcon().attributes('name')).toBe('warning-solid');
+        expect(findPipelineErrorMsg().text()).toBe(i18n.fetchError);
+      });
+
+      it('does not render pipeline data', () => {
+        expect(findCiIcon().exists()).toBe(false);
+        expect(findPipelineId().exists()).toBe(false);
+        expect(findPipelineCommit().exists()).toBe(false);
+      });
+    });
+  });
+});