diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/settings')
-rw-r--r-- | spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap | 23 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/settings/settings_block_spec.js | 54 |
2 files changed, 57 insertions, 20 deletions
diff --git a/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap b/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap index ed085fb66dc..165caea2751 100644 --- a/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap +++ b/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap @@ -8,12 +8,25 @@ exports[`Settings Block renders the correct markup 1`] = ` class="settings-header" > <h4> - <div - data-testid="title-slot" - /> + <span + aria-controls="settings_content_3" + aria-expanded="false" + class="gl-cursor-pointer" + data-testid="section-title-button" + id="settings_label_2" + role="button" + tabindex="0" + > + <div + data-testid="title-slot" + /> + </span> </h4> <gl-button-stub + aria-controls="settings_content_3" + aria-expanded="false" + aria-label="Expand settings section" buttontextclasses="" category="primary" icon="" @@ -33,7 +46,11 @@ exports[`Settings Block renders the correct markup 1`] = ` </div> <div + aria-labelledby="settings_label_2" class="settings-content" + id="settings_content_3" + role="region" + tabindex="-1" > <div data-testid="default-slot" diff --git a/spec/frontend/vue_shared/components/settings/settings_block_spec.js b/spec/frontend/vue_shared/components/settings/settings_block_spec.js index be5a15631eb..528dfd89690 100644 --- a/spec/frontend/vue_shared/components/settings/settings_block_spec.js +++ b/spec/frontend/vue_shared/components/settings/settings_block_spec.js @@ -1,12 +1,12 @@ import { GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import component from '~/vue_shared/components/settings/settings_block.vue'; +import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue'; describe('Settings Block', () => { let wrapper; const mountComponent = (propsData) => { - wrapper = shallowMount(component, { + wrapper = shallowMount(SettingsBlock, { propsData, slots: { title: '<div data-testid="title-slot"></div>', @@ -18,13 +18,25 @@ describe('Settings Block', () => { afterEach(() => { wrapper.destroy(); - wrapper = null; }); const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]'); const findTitleSlot = () => wrapper.find('[data-testid="title-slot"]'); const findDescriptionSlot = () => wrapper.find('[data-testid="description-slot"]'); - const findExpandButton = () => wrapper.find(GlButton); + const findExpandButton = () => wrapper.findComponent(GlButton); + const findSectionTitleButton = () => wrapper.find('[data-testid="section-title-button"]'); + + const expectExpandedState = ({ expanded = true } = {}) => { + const settingsExpandButton = findExpandButton(); + + expect(wrapper.classes('expanded')).toBe(expanded); + expect(settingsExpandButton.text()).toBe( + expanded ? SettingsBlock.i18n.collapseText : SettingsBlock.i18n.expandText, + ); + expect(settingsExpandButton.attributes('aria-label')).toBe( + expanded ? SettingsBlock.i18n.collapseAriaLabel : SettingsBlock.i18n.expandAriaLabel, + ); + }; it('renders the correct markup', () => { mountComponent(); @@ -75,33 +87,41 @@ describe('Settings Block', () => { it('is collapsed by default', () => { mountComponent(); - expect(wrapper.classes('expanded')).toBe(false); + expectExpandedState({ expanded: false }); }); it('adds expanded class when the expand button is clicked', async () => { mountComponent(); - expect(wrapper.classes('expanded')).toBe(false); - expect(findExpandButton().text()).toBe('Expand'); - await findExpandButton().vm.$emit('click'); - expect(wrapper.classes('expanded')).toBe(true); - expect(findExpandButton().text()).toBe('Collapse'); + expectExpandedState({ expanded: true }); }); - it('is expanded when `defaultExpanded` is true no matter what', async () => { - mountComponent({ defaultExpanded: true }); + it('adds expanded class when the section title is clicked', async () => { + mountComponent(); - expect(wrapper.classes('expanded')).toBe(true); + await findSectionTitleButton().trigger('click'); - await findExpandButton().vm.$emit('click'); + expectExpandedState({ expanded: true }); + }); - expect(wrapper.classes('expanded')).toBe(true); + describe('when `collapsible` is `false`', () => { + beforeEach(() => { + mountComponent({ collapsible: false }); + }); - await findExpandButton().vm.$emit('click'); + it('does not render clickable section title', () => { + expect(findSectionTitleButton().exists()).toBe(false); + }); + + it('contains expanded class', () => { + expect(wrapper.classes('expanded')).toBe(true); + }); - expect(wrapper.classes('expanded')).toBe(true); + it('does not render expand toggle button', () => { + expect(findExpandButton().exists()).toBe(false); + }); }); }); }); |