summaryrefslogtreecommitdiff
path: root/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js
blob: e9c6ed608607c0a0187e2442da65e2890fc74624 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
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);
    });
  });
});