debian-mirror-gitlab/spec/frontend/pipelines/pipelines_ci_templates_spec.js

207 lines
7 KiB
JavaScript
Raw Normal View History

2021-09-30 23:02:18 +05:30
import '~/commons';
2022-05-07 20:08:51 +05:30
import { GlButton, GlSprintf } from '@gitlab/ui';
import { sprintf } from '~/locale';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
2021-09-30 23:02:18 +05:30
import { mockTracking } from 'helpers/tracking_helper';
2022-05-07 20:08:51 +05:30
import { stubExperiments } from 'helpers/experimentation_helper';
import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
import ExperimentTracking from '~/experimentation/experiment_tracking';
2021-04-29 21:17:54 +05:30
import PipelinesCiTemplate from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
2022-05-07 20:08:51 +05:30
import {
RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME,
RUNNERS_SETTINGS_LINK_CLICKED_EVENT,
RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT,
RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT,
I18N,
} from '~/pipeline_editor/constants';
2021-04-29 21:17:54 +05:30
2021-09-30 23:02:18 +05:30
const pipelineEditorPath = '/-/ci/editor';
2021-04-29 21:17:54 +05:30
const suggestedCiTemplates = [
{ name: 'Android', logo: '/assets/illustrations/logos/android.svg' },
{ name: 'Bash', logo: '/assets/illustrations/logos/bash.svg' },
{ name: 'C++', logo: '/assets/illustrations/logos/c_plus_plus.svg' },
];
2022-05-07 20:08:51 +05:30
jest.mock('~/experimentation/experiment_tracking');
2021-04-29 21:17:54 +05:30
describe('Pipelines CI Templates', () => {
let wrapper;
2021-09-30 23:02:18 +05:30
let trackingSpy;
2021-04-29 21:17:54 +05:30
2022-05-07 20:08:51 +05:30
const createWrapper = (propsData = {}, stubs = {}) => {
return shallowMountExtended(PipelinesCiTemplate, {
2021-04-29 21:17:54 +05:30
provide: {
2021-09-30 23:02:18 +05:30
pipelineEditorPath,
2021-04-29 21:17:54 +05:30
suggestedCiTemplates,
},
2022-05-07 20:08:51 +05:30
propsData,
stubs,
2021-04-29 21:17:54 +05:30
});
};
const findTestTemplateLinks = () => wrapper.findAll('[data-testid="test-template-link"]');
const findTemplateDescriptions = () => wrapper.findAll('[data-testid="template-description"]');
const findTemplateLinks = () => wrapper.findAll('[data-testid="template-link"]');
const findTemplateNames = () => wrapper.findAll('[data-testid="template-name"]');
const findTemplateLogos = () => wrapper.findAll('[data-testid="template-logo"]');
2022-05-07 20:08:51 +05:30
const findSettingsLink = () => wrapper.findByTestId('settings-link');
const findDocumentationLink = () => wrapper.findByTestId('documentation-link');
const findSettingsButton = () => wrapper.findByTestId('settings-button');
2021-04-29 21:17:54 +05:30
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('renders test template', () => {
beforeEach(() => {
wrapper = createWrapper();
});
2021-09-30 23:02:18 +05:30
it('links to the getting started template', () => {
2021-04-29 21:17:54 +05:30
expect(findTestTemplateLinks().at(0).attributes('href')).toBe(
2021-09-30 23:02:18 +05:30
pipelineEditorPath.concat('?template=Getting-Started'),
2021-04-29 21:17:54 +05:30
);
});
});
describe('renders template list', () => {
beforeEach(() => {
wrapper = createWrapper();
});
it('renders all suggested templates', () => {
const content = wrapper.text();
expect(content).toContain('Android', 'Bash', 'C++');
});
it('has the correct template name', () => {
expect(findTemplateNames().at(0).text()).toBe('Android');
});
it('links to the correct template', () => {
expect(findTemplateLinks().at(0).attributes('href')).toBe(
2021-09-30 23:02:18 +05:30
pipelineEditorPath.concat('?template=Android'),
2021-04-29 21:17:54 +05:30
);
});
it('has the description of the template', () => {
expect(findTemplateDescriptions().at(0).text()).toBe(
2022-05-07 20:08:51 +05:30
sprintf(I18N.templates.description, { name: 'Android' }),
2021-04-29 21:17:54 +05:30
);
});
it('has the right logo of the template', () => {
expect(findTemplateLogos().at(0).attributes('src')).toBe(
'/assets/illustrations/logos/android.svg',
);
});
});
describe('tracking', () => {
beforeEach(() => {
wrapper = createWrapper();
2021-09-30 23:02:18 +05:30
trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
2021-04-29 21:17:54 +05:30
});
it('sends an event when template is clicked', () => {
findTemplateLinks().at(0).vm.$emit('click');
2021-09-30 23:02:18 +05:30
expect(trackingSpy).toHaveBeenCalledTimes(1);
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'template_clicked', {
2021-04-29 21:17:54 +05:30
label: 'Android',
});
});
2021-09-30 23:02:18 +05:30
it('sends an event when Getting-Started template is clicked', () => {
2021-04-29 21:17:54 +05:30
findTestTemplateLinks().at(0).vm.$emit('click');
2021-09-30 23:02:18 +05:30
expect(trackingSpy).toHaveBeenCalledTimes(1);
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'template_clicked', {
label: 'Getting-Started',
2021-04-29 21:17:54 +05:30
});
});
});
2022-05-07 20:08:51 +05:30
describe('when the runners_availability_section experiment is active', () => {
beforeEach(() => {
stubExperiments({ runners_availability_section: 'candidate' });
});
describe('when runners are available', () => {
beforeEach(() => {
wrapper = createWrapper({ anyRunnersAvailable: true }, { GitlabExperiment, GlSprintf });
});
it('show the runners available section', () => {
expect(wrapper.text()).toContain(I18N.runners.title);
});
it('tracks an event when clicking the settings link', () => {
findSettingsLink().vm.$emit('click');
expect(ExperimentTracking).toHaveBeenCalledWith(
RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME,
);
expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(
RUNNERS_SETTINGS_LINK_CLICKED_EVENT,
);
});
it('tracks an event when clicking the documentation link', () => {
findDocumentationLink().vm.$emit('click');
expect(ExperimentTracking).toHaveBeenCalledWith(
RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME,
);
expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(
RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT,
);
});
});
describe('when runners are not available', () => {
beforeEach(() => {
wrapper = createWrapper({ anyRunnersAvailable: false }, { GitlabExperiment, GlButton });
});
it('show the no runners available section', () => {
expect(wrapper.text()).toContain(I18N.noRunners.title);
});
it('tracks an event when clicking the settings button', () => {
findSettingsButton().trigger('click');
expect(ExperimentTracking).toHaveBeenCalledWith(
RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME,
);
expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(
RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT,
);
});
});
});
describe.each`
experimentVariant | anyRunnersAvailable | templatesRendered
${'control'} | ${true} | ${true}
${'control'} | ${false} | ${true}
${'candidate'} | ${true} | ${true}
${'candidate'} | ${false} | ${false}
`(
'when the runners_availability_section experiment variant is $experimentVariant and runners are available: $anyRunnersAvailable',
({ experimentVariant, anyRunnersAvailable, templatesRendered }) => {
beforeEach(() => {
stubExperiments({ runners_availability_section: experimentVariant });
wrapper = createWrapper({ anyRunnersAvailable });
});
it(`renders the templates: ${templatesRendered}`, () => {
expect(findTestTemplateLinks().exists()).toBe(templatesRendered);
expect(findTemplateLinks().exists()).toBe(templatesRendered);
});
},
);
2021-04-29 21:17:54 +05:30
});