1 files changed, 55 insertions, 38 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 274c2d1b8da..fd8a100bb2c 100644
--- a/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js
+++ b/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js
@@ -6,13 +6,19 @@ import { sprintf } from '~/locale';
 import ValidationSegment, {
   i18n,
 } from '~/pipeline_editor/components/header/validation_segment.vue';
-import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
+import {
+  CI_CONFIG_STATUS_INVALID,
+  EDITOR_APP_STATUS_EMPTY,
+  EDITOR_APP_STATUS_INVALID,
+  EDITOR_APP_STATUS_LOADING,
+  EDITOR_APP_STATUS_VALID,
+} from '~/pipeline_editor/constants';
 import { mockYmlHelpPagePath, mergeUnwrappedCiConfig, mockCiYml } from '../../mock_data';
 
 describe('Validation segment component', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
+  const createComponent = ({ props = {}, appStatus }) => {
     wrapper = extendedWrapper(
       shallowMount(ValidationSegment, {
         provide: {
@@ -21,9 +27,14 @@ describe('Validation segment component', () => {
         propsData: {
           ciConfig: mergeUnwrappedCiConfig(),
           ciFileContent: mockCiYml,
-          loading: false,
           ...props,
         },
+        // Simulate graphQL client query result
+        data() {
+          return {
+            appStatus,
+          };
+        },
       }),
     );
   };
@@ -34,18 +45,17 @@ describe('Validation segment component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('shows the loading state', () => {
-    createComponent({ loading: true });
+    createComponent({ appStatus: EDITOR_APP_STATUS_LOADING });
 
     expect(wrapper.text()).toBe(i18n.loading);
   });
 
   describe('when config is empty', () => {
     beforeEach(() => {
-      createComponent({ ciFileContent: '' });
+      createComponent({ appStatus: EDITOR_APP_STATUS_EMPTY });
     });
 
     it('has check icon', () => {
@@ -59,7 +69,7 @@ describe('Validation segment component', () => {
 
   describe('when config is valid', () => {
     beforeEach(() => {
-      createComponent({});
+      createComponent({ appStatus: EDITOR_APP_STATUS_VALID });
     });
 
     it('has check icon', () => {
@@ -79,12 +89,9 @@ describe('Validation segment component', () => {
   describe('when config is invalid', () => {
     beforeEach(() => {
       createComponent({
-        ciConfig: mergeUnwrappedCiConfig({
-          status: CI_CONFIG_STATUS_INVALID,
-        }),
+        appStatus: EDITOR_APP_STATUS_INVALID,
       });
     });
-
     it('has warning icon', () => {
       expect(findIcon().props('name')).toBe('warning-solid');
     });
@@ -93,43 +100,53 @@ describe('Validation segment component', () => {
       expect(findValidationMsg().text()).toBe(i18n.invalid);
     });
 
-    it('shows an invalid state with an error', () => {
+    it('shows the learn more link', () => {
+      expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
+      expect(findLearnMoreLink().text()).toBe('Learn more');
+    });
+
+    describe('with multiple errors', () => {
       const firstError = 'First Error';
       const secondError = 'Second Error';
 
-      createComponent({
-        ciConfig: mergeUnwrappedCiConfig({
-          status: CI_CONFIG_STATUS_INVALID,
-          errors: [firstError, secondError],
-        }),
+      beforeEach(() => {
+        createComponent({
+          props: {
+            ciConfig: mergeUnwrappedCiConfig({
+              status: CI_CONFIG_STATUS_INVALID,
+              errors: [firstError, secondError],
+            }),
+          },
+        });
+      });
+      it('shows an invalid state with an error', () => {
+        // Test the error is shown _and_ the string matches
+        expect(findValidationMsg().text()).toContain(firstError);
+        expect(findValidationMsg().text()).toBe(
+          sprintf(i18n.invalidWithReason, { reason: firstError }),
+        );
       });
-
-      // Test the error is shown _and_ the string matches
-      expect(findValidationMsg().text()).toContain(firstError);
-      expect(findValidationMsg().text()).toBe(
-        sprintf(i18n.invalidWithReason, { reason: firstError }),
-      );
     });
 
-    it('shows an invalid state with an error while preventing XSS', () => {
+    describe('with XSS inside the error', () => {
       const evilError = '<script>evil();</script>';
 
-      createComponent({
-        ciConfig: mergeUnwrappedCiConfig({
-          status: CI_CONFIG_STATUS_INVALID,
-          errors: [evilError],
-        }),
+      beforeEach(() => {
+        createComponent({
+          props: {
+            ciConfig: mergeUnwrappedCiConfig({
+              status: CI_CONFIG_STATUS_INVALID,
+              errors: [evilError],
+            }),
+          },
+        });
       });
+      it('shows an invalid state with an error while preventing XSS', () => {
+        const { innerHTML } = findValidationMsg().element;
 
-      const { innerHTML } = findValidationMsg().element;
-
-      expect(innerHTML).not.toContain(evilError);
-      expect(innerHTML).toContain(escape(evilError));
-    });
-
-    it('shows the learn more link', () => {
-      expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
-      expect(findLearnMoreLink().text()).toBe('Learn more');
+        expect(innerHTML).not.toContain(evilError);
+        expect(innerHTML).toContain(escape(evilError));
+      });
     });
   });
 });