Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

4 files changed, 309 insertions, 7 deletions

diff --git a/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js b/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js
new file mode 100644
index 00000000000..ae2a9e5065d
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js
@@ -0,0 +1,116 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { GlFormInput, GlFormTextarea } from '@gitlab/ui';
+
+import CommitForm from '~/pipeline_editor/components/commit/commit_form.vue';
+
+import { mockCommitMessage, mockDefaultBranch } from '../../mock_data';
+
+describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
+  let wrapper;
+
+  const createComponent = ({ props = {} } = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(CommitForm, {
+      propsData: {
+        defaultMessage: mockCommitMessage,
+        defaultBranch: mockDefaultBranch,
+        ...props,
+      },
+
+      // attachToDocument is required for input/submit events
+      attachToDocument: mountFn === mount,
+    });
+  };
+
+  const findCommitTextarea = () => wrapper.find(GlFormTextarea);
+  const findBranchInput = () => wrapper.find(GlFormInput);
+  const findNewMrCheckbox = () => wrapper.find('[data-testid="new-mr-checkbox"]');
+  const findSubmitBtn = () => wrapper.find('[type="submit"]');
+  const findCancelBtn = () => wrapper.find('[type="reset"]');
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when the form is displayed', () => {
+    beforeEach(async () => {
+      createComponent();
+    });
+
+    it('shows a default commit message', () => {
+      expect(findCommitTextarea().attributes('value')).toBe(mockCommitMessage);
+    });
+
+    it('shows a default branch', () => {
+      expect(findBranchInput().attributes('value')).toBe(mockDefaultBranch);
+    });
+
+    it('shows buttons', () => {
+      expect(findSubmitBtn().exists()).toBe(true);
+      expect(findCancelBtn().exists()).toBe(true);
+    });
+
+    it('does not show a new MR checkbox by default', () => {
+      expect(findNewMrCheckbox().exists()).toBe(false);
+    });
+  });
+
+  describe('when buttons are clicked', () => {
+    beforeEach(async () => {
+      createComponent({}, mount);
+    });
+
+    it('emits an event when the form submits', () => {
+      findSubmitBtn().trigger('click');
+
+      expect(wrapper.emitted('submit')[0]).toEqual([
+        {
+          message: mockCommitMessage,
+          branch: mockDefaultBranch,
+          openMergeRequest: false,
+        },
+      ]);
+    });
+
+    it('emits an event when the form resets', () => {
+      findCancelBtn().trigger('click');
+
+      expect(wrapper.emitted('cancel')).toHaveLength(1);
+    });
+  });
+
+  describe('when user inputs values', () => {
+    const anotherMessage = 'Another commit message';
+    const anotherBranch = 'my-branch';
+
+    beforeEach(() => {
+      createComponent({}, mount);
+
+      findCommitTextarea().setValue(anotherMessage);
+      findBranchInput().setValue(anotherBranch);
+    });
+
+    it('shows a new MR checkbox', () => {
+      expect(findNewMrCheckbox().exists()).toBe(true);
+    });
+
+    it('emits an event with values', async () => {
+      await findNewMrCheckbox().setChecked();
+      await findSubmitBtn().trigger('click');
+
+      expect(wrapper.emitted('submit')[0]).toEqual([
+        {
+          message: anotherMessage,
+          branch: anotherBranch,
+          openMergeRequest: true,
+        },
+      ]);
+    });
+
+    it('when the commit message is empty, submit button is disabled', async () => {
+      await findCommitTextarea().setValue('');
+
+      expect(findSubmitBtn().attributes('disabled')).toBe('disabled');
+    });
+  });
+});
diff --git a/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js b/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js
new file mode 100644
index 00000000000..e9c6ed60860
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js
@@ -0,0 +1,129 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { GlTable, GlLink } from '@gitlab/ui';
+import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+import { mockJobs, mockErrors, mockWarnings } from '../../mock_data';
+
+describe('CI Lint Results', () => {
+  let wrapper;
+  const defaultProps = {
+    valid: true,
+    jobs: mockJobs,
+    errors: [],
+    warnings: [],
+    dryRun: false,
+    lintHelpPagePath: '/help',
+  };
+
+  const createComponent = (props = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(CiLintResults, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  const findTable = () => wrapper.find(GlTable);
+  const findByTestId = selector => () => wrapper.find(`[data-testid="ci-lint-${selector}"]`);
+  const findAllByTestId = selector => () => wrapper.findAll(`[data-testid="ci-lint-${selector}"]`);
+  const findLinkToDoc = () => wrapper.find(GlLink);
+  const findErrors = findByTestId('errors');
+  const findWarnings = findByTestId('warnings');
+  const findStatus = findByTestId('status');
+  const findOnlyExcept = findByTestId('only-except');
+  const findLintParameters = findAllByTestId('parameter');
+  const findBeforeScripts = findAllByTestId('before-script');
+  const findScripts = findAllByTestId('script');
+  const findAfterScripts = findAllByTestId('after-script');
+  const filterEmptyScripts = property => mockJobs.filter(job => job[property].length !== 0);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('Invalid results', () => {
+    beforeEach(() => {
+      createComponent({ valid: false, errors: mockErrors, warnings: mockWarnings }, mount);
+    });
+
+    it('does not display the table', () => {
+      expect(findTable().exists()).toBe(false);
+    });
+
+    it('displays the invalid status', () => {
+      expect(findStatus().text()).toContain(`Status: ${wrapper.vm.$options.incorrect.text}`);
+      expect(findStatus().props('variant')).toBe(wrapper.vm.$options.incorrect.variant);
+    });
+
+    it('contains the link to documentation', () => {
+      expect(findLinkToDoc().text()).toBe('More information');
+      expect(findLinkToDoc().attributes('href')).toBe(defaultProps.lintHelpPagePath);
+    });
+
+    it('displays the error message', () => {
+      const [expectedError] = mockErrors;
+
+      expect(findErrors().text()).toBe(expectedError);
+    });
+
+    it('displays the warning message', () => {
+      const [expectedWarning] = mockWarnings;
+
+      expect(findWarnings().exists()).toBe(true);
+      expect(findWarnings().text()).toContain(expectedWarning);
+    });
+  });
+
+  describe('Valid results with dry run', () => {
+    beforeEach(() => {
+      createComponent({ dryRun: true }, mount);
+    });
+
+    it('displays table', () => {
+      expect(findTable().exists()).toBe(true);
+    });
+
+    it('displays the valid status', () => {
+      expect(findStatus().text()).toContain(wrapper.vm.$options.correct.text);
+      expect(findStatus().props('variant')).toBe(wrapper.vm.$options.correct.variant);
+    });
+
+    it('does not display only/expect values with dry run', () => {
+      expect(findOnlyExcept().exists()).toBe(false);
+    });
+
+    it('contains the link to documentation', () => {
+      expect(findLinkToDoc().text()).toBe('More information');
+      expect(findLinkToDoc().attributes('href')).toBe(defaultProps.lintHelpPagePath);
+    });
+  });
+
+  describe('Lint results', () => {
+    beforeEach(() => {
+      createComponent({}, mount);
+    });
+
+    it('formats parameter value', () => {
+      findLintParameters().wrappers.forEach((job, index) => {
+        const { stage } = mockJobs[index];
+        const { name } = mockJobs[index];
+
+        expect(job.text()).toBe(`${capitalizeFirstCharacter(stage)} Job - ${name}`);
+      });
+    });
+
+    it('only shows before scripts when data is present', () => {
+      expect(findBeforeScripts()).toHaveLength(filterEmptyScripts('beforeScript').length);
+    });
+
+    it('only shows script when data is present', () => {
+      expect(findScripts()).toHaveLength(filterEmptyScripts('script').length);
+    });
+
+    it('only shows after script when data is present', () => {
+      expect(findAfterScripts()).toHaveLength(filterEmptyScripts('afterScript').length);
+    });
+  });
+});
diff --git a/spec/frontend/pipeline_editor/components/lint/ci_lint_warnings_spec.js b/spec/frontend/pipeline_editor/components/lint/ci_lint_warnings_spec.js
new file mode 100644
index 00000000000..b441d26c146
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/lint/ci_lint_warnings_spec.js
@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import { trimText } from 'helpers/text_helper';
+import CiLintWarnings from '~/pipeline_editor/components/lint/ci_lint_warnings.vue';
+
+const warnings = ['warning 1', 'warning 2', 'warning 3'];
+
+describe('CI lint warnings', () => {
+  let wrapper;
+
+  const createComponent = (limit = 25) => {
+    wrapper = mount(CiLintWarnings, {
+      propsData: {
+        warnings,
+        maxWarnings: limit,
+      },
+    });
+  };
+
+  const findWarningAlert = () => wrapper.find(GlAlert);
+  const findWarnings = () => wrapper.findAll('[data-testid="ci-lint-warning"]');
+  const findWarningMessage = () => trimText(wrapper.find(GlSprintf).text());
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('displays the warning alert', () => {
+    createComponent();
+
+    expect(findWarningAlert().exists()).toBe(true);
+  });
+
+  it('displays all the warnings', () => {
+    createComponent();
+
+    expect(findWarnings()).toHaveLength(warnings.length);
+  });
+
+  it('shows the correct message when the limit is not passed', () => {
+    createComponent();
+
+    expect(findWarningMessage()).toBe(`${warnings.length} warnings found:`);
+  });
+
+  it('shows the correct message when the limit is passed', () => {
+    const limit = 2;
+
+    createComponent(limit);
+
+    expect(findWarningMessage()).toBe(`${warnings.length} warnings found: showing first ${limit}`);
+  });
+});
diff --git a/spec/frontend/pipeline_editor/components/text_editor_spec.js b/spec/frontend/pipeline_editor/components/text_editor_spec.js
index 39d205839f4..18f71ebc95c 100644
--- a/spec/frontend/pipeline_editor/components/text_editor_spec.js
+++ b/spec/frontend/pipeline_editor/components/text_editor_spec.js
@@ -6,12 +6,16 @@ import TextEditor from '~/pipeline_editor/components/text_editor.vue';
 
 describe('~/pipeline_editor/components/text_editor.vue', () => {
   let wrapper;
+  const editorReadyListener = jest.fn();
 
-  const createComponent = (props = {}, mountFn = shallowMount) => {
+  const createComponent = (attrs = {}, mountFn = shallowMount) => {
     wrapper = mountFn(TextEditor, {
-      propsData: {
+      attrs: {
         value: mockCiYml,
-        ...props,
+        ...attrs,
+      },
+      listeners: {
+        'editor-ready': editorReadyListener,
       },
     });
   };
@@ -28,14 +32,13 @@ describe('~/pipeline_editor/components/text_editor.vue', () => {
     expect(findEditor().props('value')).toBe(mockCiYml);
   });
 
-  it('editor is readony and configured for .yml', () => {
-    expect(findEditor().props('editorOptions')).toEqual({ readOnly: true });
+  it('editor is configured for .yml', () => {
     expect(findEditor().props('fileName')).toBe('*.yml');
   });
 
-  it('bubbles up editor-ready event', () => {
+  it('bubbles up events', () => {
     findEditor().vm.$emit('editor-ready');
 
-    expect(wrapper.emitted('editor-ready')).toHaveLength(1);
+    expect(editorReadyListener).toHaveBeenCalled();
   });
 });