text: 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 { mergeUnwrappedCiConfig, mockLintHelpPagePath } from '../../mock_data';
  
  describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
    let wrapper;
  
    const createComponent = (props = {}, mountFn = shallowMount) => {
      wrapper = mountFn(CiLint, {
        provide: {
          lintHelpPagePath: mockLintHelpPagePath,
        },
        propsData: {
          ciConfig: mergeUnwrappedCiConfig(),
          ...props,
        },
      });
    };
  
    const findAllByTestId = (selector) => wrapper.findAll(`[data-testid="${selector}"]`);
    const findAlert = () => wrapper.find(GlAlert);
    const findLintParameters = () => findAllByTestId('ci-lint-parameter');
    const findLintParameterAt = (i) => findLintParameters().at(i);
    const findLintValueAt = (i) => findAllByTestId('ci-lint-value').at(i);
  
    afterEach(() => {
      wrapper.destroy();
      wrapper = null;
    });
  
    describe('Valid Results', () => {
      beforeEach(() => {
        createComponent({}, mount);
      });
  
      it('displays valid results', () => {
        expect(findAlert().text()).toMatch('Status: Syntax is correct.');
      });
  
      it('displays link to the right help page', () => {
        expect(findAlert().find(GlLink).attributes('href')).toBe(mockLintHelpPagePath);
      });
  
      it('displays jobs', () => {
        expect(findLintParameters()).toHaveLength(3);
  
        expect(findLintParameterAt(0).text()).toBe('Test Job - job_test_1');
        expect(findLintParameterAt(1).text()).toBe('Test Job - job_test_2');
        expect(findLintParameterAt(2).text()).toBe('Build Job - job_build');
      });
  
      it('displays jobs details', () => {
        expect(findLintParameters()).toHaveLength(3);
  
        expect(findLintValueAt(0).text()).toMatchInterpolatedText(
          'echo "test 1" Only policy: branches, tags When: on_success',
        );
        expect(findLintValueAt(1).text()).toMatchInterpolatedText(
          'echo "test 2" Only policy: branches, tags When: on_success',
        );
        expect(findLintValueAt(2).text()).toMatchInterpolatedText(
          'echo "build" Only policy: branches, tags When: on_success',
        );
      });
  
      it('displays invalid results', () => {
        createComponent(
          {
            ciConfig: mergeUnwrappedCiConfig({
              status: CI_CONFIG_STATUS_INVALID,
            }),
          },
          mount,
        );
  
        expect(findAlert().text()).toMatch('Status: Syntax is incorrect.');
      });
    });
  });
  