Add latest changes from gitlab-org/gitlab@master

3 files changed, 127 insertions, 13 deletions

diff --git a/spec/frontend/pipeline_editor/components/info/validation_segment_spec.js b/spec/frontend/pipeline_editor/components/info/validation_segment_spec.js
new file mode 100644
index 00000000000..a1dd343fb82
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/info/validation_segment_spec.js
@@ -0,0 +1,113 @@
+import { escape } from 'lodash';
+import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
+import { extendedWrapper } from 'jest/helpers/vue_test_utils_helper';
+import { sprintf } from '~/locale';
+import ValidationSegment, { i18n } from '~/pipeline_editor/components/info/validation_segment.vue';
+import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
+import { mockYmlHelpPagePath, mergeUnwrappedCiConfig } from '../../mock_data';
+
+describe('~/pipeline_editor/components/info/validation_segment.vue', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(ValidationSegment, {
+        provide: {
+          ymlHelpPagePath: mockYmlHelpPagePath,
+        },
+        propsData: {
+          ciConfig: mergeUnwrappedCiConfig(),
+          loading: false,
+          ...props,
+        },
+      }),
+    );
+  };
+
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findLearnMoreLink = () => wrapper.findByTestId('learnMoreLink');
+  const findValidationMsg = () => wrapper.findByTestId('validationMsg');
+
+  it('shows the loading state', () => {
+    createComponent({ loading: true });
+
+    expect(wrapper.text()).toBe(i18n.loading);
+  });
+
+  describe('when config is valid', () => {
+    beforeEach(() => {
+      createComponent({});
+    });
+
+    it('has check icon', () => {
+      expect(findIcon().props('name')).toBe('check');
+    });
+
+    it('shows a message for valid state', () => {
+      expect(findValidationMsg().text()).toContain(i18n.valid);
+    });
+
+    it('shows the learn more link', () => {
+      expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
+      expect(findLearnMoreLink().text()).toBe(i18n.learnMore);
+    });
+  });
+
+  describe('when config is not valid', () => {
+    beforeEach(() => {
+      createComponent({
+        ciConfig: mergeUnwrappedCiConfig({
+          status: CI_CONFIG_STATUS_INVALID,
+        }),
+      });
+    });
+
+    it('has warning icon', () => {
+      expect(findIcon().props('name')).toBe('warning-solid');
+    });
+
+    it('has message for invalid state', () => {
+      expect(findValidationMsg().text()).toBe(i18n.invalid);
+    });
+
+    it('shows an invalid state with an error', () => {
+      const firstError = 'First Error';
+      const secondError = 'Second Error';
+
+      createComponent({
+        ciConfig: mergeUnwrappedCiConfig({
+          status: CI_CONFIG_STATUS_INVALID,
+          errors: [firstError, secondError],
+        }),
+      });
+
+      // 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', () => {
+      const evilError = '<script>evil();</script>';
+
+      createComponent({
+        ciConfig: mergeUnwrappedCiConfig({
+          status: CI_CONFIG_STATUS_INVALID,
+          errors: [evilError],
+        }),
+      });
+
+      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');
+    });
+  });
+});
diff --git a/spec/frontend/pipeline_editor/components/lint/ci_lint_spec.js b/spec/frontend/pipeline_editor/components/lint/ci_lint_spec.js
index 145a729cb54..f2d33bd2ad5 100644
--- a/spec/frontend/pipeline_editor/components/lint/ci_lint_spec.js
+++ b/spec/frontend/pipeline_editor/components/lint/ci_lint_spec.js
@@ -2,17 +2,7 @@ import { shallowMount, mount } from '@vue/test-utils';
 import { GlAlert, GlLink } from '@gitlab/ui';
 import CiLint from '~/pipeline_editor/components/lint/ci_lint.vue';
 import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
-import { mockCiConfigQueryResponse, mockLintHelpPagePath } from '../../mock_data';
-import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
-
-const getCiConfig = (mergedConfig) => {
-  const { ciConfig } = mockCiConfigQueryResponse.data;
-  return {
-    ...ciConfig,
-    stages: unwrapStagesWithNeeds(ciConfig.stages.nodes),
-    ...mergedConfig,
-  };
-};
+import { mergeUnwrappedCiConfig, mockLintHelpPagePath } from '../../mock_data';
 
 describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
   let wrapper;
@@ -23,7 +13,7 @@ describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
         lintHelpPagePath: mockLintHelpPagePath,
       },
       propsData: {
-        ciConfig: getCiConfig(),
+        ciConfig: mergeUnwrappedCiConfig(),
         ...props,
       },
     });
@@ -63,7 +53,7 @@ describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
     it('displays invalid results', () => {
       createComponent(
         {
-          ciConfig: getCiConfig({
+          ciConfig: mergeUnwrappedCiConfig({
             status: CI_CONFIG_STATUS_INVALID,
           }),
         },
diff --git a/spec/frontend/pipeline_editor/mock_data.js b/spec/frontend/pipeline_editor/mock_data.js
index e02c94e6558..ac23ee9a2bc 100644
--- a/spec/frontend/pipeline_editor/mock_data.js
+++ b/spec/frontend/pipeline_editor/mock_data.js
@@ -1,4 +1,5 @@
 import { CI_CONFIG_STATUS_VALID } from '~/pipeline_editor/constants';
+import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
 
 export const mockNamespace = 'user1';
 export const mockProjectName = 'project1';
@@ -8,6 +9,7 @@ export const mockNewMergeRequestPath = '/-/merge_requests/new';
 export const mockCommitSha = 'aabbccdd';
 export const mockCommitNextSha = 'eeffgghh';
 export const mockLintHelpPagePath = '/-/lint-help';
+export const mockYmlHelpPagePath = '/-/yml-help';
 export const mockCommitMessage = 'My commit message';
 
 export const mockCiConfigPath = '.gitlab-ci.yml';
@@ -111,6 +113,15 @@ export const mockCiConfigQueryResponse = {
   },
 };
 
+export const mergeUnwrappedCiConfig = (mergedConfig) => {
+  const { ciConfig } = mockCiConfigQueryResponse.data;
+  return {
+    ...ciConfig,
+    stages: unwrapStagesWithNeeds(ciConfig.stages.nodes),
+    ...mergedConfig,
+  };
+};
+
 export const mockLintResponse = {
   valid: true,
   errors: [],