diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-06 15:09:17 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-06 15:09:17 +0300 |
commit | 4ff56b118438f4fa6191b691fd968c75d8e94d5a (patch) | |
tree | 5b1e6ce71ee1c40a755daad006cefc3ff02bcb5e /spec/frontend/alerts_settings | |
parent | 0dce1c285f8d6487daf4b83be1ca9585e3a084e6 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/alerts_settings')
-rw-r--r-- | spec/frontend/alerts_settings/alert_mapping_builder_spec.js | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/spec/frontend/alerts_settings/alert_mapping_builder_spec.js b/spec/frontend/alerts_settings/alert_mapping_builder_spec.js new file mode 100644 index 00000000000..a75422b8c48 --- /dev/null +++ b/spec/frontend/alerts_settings/alert_mapping_builder_spec.js @@ -0,0 +1,88 @@ +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]); + } + }); + }); +}); |