1 files changed, 55 insertions, 9 deletions

diff --git a/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js b/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js
index fd8a100bb2c..570323826d1 100644
--- a/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js
+++ b/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js
@@ -1,40 +1,61 @@
+import VueApollo from 'vue-apollo';
 import { GlIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { escape } from 'lodash';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { sprintf } from '~/locale';
 import ValidationSegment, {
   i18n,
 } from '~/pipeline_editor/components/header/validation_segment.vue';
+import getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.query.graphql';
 import {
   CI_CONFIG_STATUS_INVALID,
   EDITOR_APP_STATUS_EMPTY,
   EDITOR_APP_STATUS_INVALID,
   EDITOR_APP_STATUS_LOADING,
+  EDITOR_APP_STATUS_LINT_UNAVAILABLE,
   EDITOR_APP_STATUS_VALID,
 } from '~/pipeline_editor/constants';
-import { mockYmlHelpPagePath, mergeUnwrappedCiConfig, mockCiYml } from '../../mock_data';
+import {
+  mergeUnwrappedCiConfig,
+  mockCiYml,
+  mockLintUnavailableHelpPagePath,
+  mockYmlHelpPagePath,
+} from '../../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
 describe('Validation segment component', () => {
   let wrapper;
 
-  const createComponent = ({ props = {}, appStatus }) => {
+  const mockApollo = createMockApollo();
+
+  const createComponent = ({ props = {}, appStatus = EDITOR_APP_STATUS_INVALID }) => {
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: getAppStatus,
+      data: {
+        app: {
+          __typename: 'PipelineEditorApp',
+          status: appStatus,
+        },
+      },
+    });
+
     wrapper = extendedWrapper(
       shallowMount(ValidationSegment, {
+        localVue,
+        apolloProvider: mockApollo,
         provide: {
           ymlHelpPagePath: mockYmlHelpPagePath,
+          lintUnavailableHelpPagePath: mockLintUnavailableHelpPagePath,
         },
         propsData: {
           ciConfig: mergeUnwrappedCiConfig(),
           ciFileContent: mockCiYml,
           ...props,
         },
-        // Simulate graphQL client query result
-        data() {
-          return {
-            appStatus,
-          };
-        },
       }),
     );
   };
@@ -92,6 +113,7 @@ describe('Validation segment component', () => {
         appStatus: EDITOR_APP_STATUS_INVALID,
       });
     });
+
     it('has warning icon', () => {
       expect(findIcon().props('name')).toBe('warning-solid');
     });
@@ -149,4 +171,28 @@ describe('Validation segment component', () => {
       });
     });
   });
+
+  describe('when the lint service is unavailable', () => {
+    beforeEach(() => {
+      createComponent({
+        appStatus: EDITOR_APP_STATUS_LINT_UNAVAILABLE,
+        props: {
+          ciConfig: {},
+        },
+      });
+    });
+
+    it('show a message that the service is unavailable', () => {
+      expect(findValidationMsg().text()).toBe(i18n.unavailableValidation);
+    });
+
+    it('shows the time-out icon', () => {
+      expect(findIcon().props('name')).toBe('time-out');
+    });
+
+    it('shows the learn more link', () => {
+      expect(findLearnMoreLink().attributes('href')).toBe(mockLintUnavailableHelpPagePath);
+      expect(findLearnMoreLink().text()).toBe(i18n.learnMore);
+    });
+  });
 });