spec/frontend/ci_lint/components/ci_lint_warnings_spec.js


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

import { mount } from '@vue/test-utils';
import { GlAlert, GlSprintf } from '@gitlab/ui';
import { trimText } from 'helpers/text_helper';
import CiLintWarnings from '~/ci_lint/components/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}`);
  });
});