89 lines
3.1 KiB
JavaScript
89 lines
3.1 KiB
JavaScript
|
import { GlIcon, GlFormInput, GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
|
||
|
import { shallowMount } from '@vue/test-utils';
|
||
|
import AlertMappingBuilder, { i18n } from '~/alerts_settings/components/alert_mapping_builder.vue';
|
||
|
import gitlabFields from '~/alerts_settings/components/mocks/gitlabFields.json';
|
||
|
import parsedMapping from '~/alerts_settings/components/mocks/parsedMapping.json';
|
||
|
|
||
|
describe('AlertMappingBuilder', () => {
|
||
|
let wrapper;
|
||
|
|
||
|
function mountComponent() {
|
||
|
wrapper = shallowMount(AlertMappingBuilder);
|
||
|
}
|
||
|
|
||
|
afterEach(() => {
|
||
|
if (wrapper) {
|
||
|
wrapper.destroy();
|
||
|
wrapper = null;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
beforeEach(() => {
|
||
|
mountComponent();
|
||
|
});
|
||
|
|
||
|
const findColumnInRow = (row, column) =>
|
||
|
wrapper
|
||
|
.findAll('.gl-display-table-row')
|
||
|
.at(row)
|
||
|
.findAll('.gl-display-table-cell ')
|
||
|
.at(column);
|
||
|
|
||
|
const fieldsByTypeCount = parsedMapping.reduce((acc, { type }) => {
|
||
|
acc[type] = (acc[type] || 0) + 1;
|
||
|
return acc;
|
||
|
}, {});
|
||
|
|
||
|
it('renders column captions', () => {
|
||
|
expect(findColumnInRow(0, 0).text()).toContain(i18n.columns.gitlabKeyTitle);
|
||
|
expect(findColumnInRow(0, 2).text()).toContain(i18n.columns.payloadKeyTitle);
|
||
|
expect(findColumnInRow(0, 3).text()).toContain(i18n.columns.fallbackKeyTitle);
|
||
|
|
||
|
const fallbackColumnIcon = findColumnInRow(0, 3).find(GlIcon);
|
||
|
expect(fallbackColumnIcon.exists()).toBe(true);
|
||
|
expect(fallbackColumnIcon.attributes('name')).toBe('question');
|
||
|
expect(fallbackColumnIcon.attributes('title')).toBe(i18n.fallbackTooltip);
|
||
|
});
|
||
|
|
||
|
it('renders disabled form input for each mapped field', () => {
|
||
|
gitlabFields.forEach((field, index) => {
|
||
|
const input = findColumnInRow(index + 1, 0).find(GlFormInput);
|
||
|
expect(input.attributes('value')).toBe(`${field.label} (${field.type})`);
|
||
|
expect(input.attributes('disabled')).toBe('');
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it('renders right arrow next to each input', () => {
|
||
|
gitlabFields.forEach((field, index) => {
|
||
|
const arrow = findColumnInRow(index + 1, 1).find('.right-arrow');
|
||
|
expect(arrow.exists()).toBe(true);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it('renders mapping dropdown for each field', () => {
|
||
|
gitlabFields.forEach(({ type }, index) => {
|
||
|
const dropdown = findColumnInRow(index + 1, 2).find(GlDropdown);
|
||
|
const searchBox = dropdown.find(GlSearchBoxByType);
|
||
|
const dropdownItems = dropdown.findAll(GlDropdownItem);
|
||
|
|
||
|
expect(dropdown.exists()).toBe(true);
|
||
|
expect(searchBox.exists()).toBe(true);
|
||
|
expect(dropdownItems.length).toBe(fieldsByTypeCount[type]);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it('renders fallback dropdown only for the fields that have fallback', () => {
|
||
|
gitlabFields.forEach(({ type, hasFallback }, index) => {
|
||
|
const dropdown = findColumnInRow(index + 1, 3).find(GlDropdown);
|
||
|
expect(dropdown.exists()).toBe(Boolean(hasFallback));
|
||
|
|
||
|
if (hasFallback) {
|
||
|
const searchBox = dropdown.find(GlSearchBoxByType);
|
||
|
const dropdownItems = dropdown.findAll(GlDropdownItem);
|
||
|
expect(searchBox.exists()).toBe(hasFallback);
|
||
|
expect(dropdownItems.length).toBe(fieldsByTypeCount[type]);
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
});
|