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 | 43 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/settings/settings_block_spec.js | 86 |
2 files changed, 129 insertions, 0 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 new file mode 100644 index 00000000000..51b8aa162bc --- /dev/null +++ b/spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Settings Block renders the correct markup 1`] = ` +<section + class="settings no-animate" +> + <div + class="settings-header" + > + <h4> + <div + data-testid="title-slot" + /> + </h4> + + <gl-button-stub + buttontextclasses="" + category="primary" + icon="" + size="medium" + variant="default" + > + + Expand + + </gl-button-stub> + + <p> + <div + data-testid="description-slot" + /> + </p> + </div> + + <div + class="settings-content" + > + <div + data-testid="default-slot" + /> + </div> +</section> +`; diff --git a/spec/frontend/vue_shared/components/settings/settings_block_spec.js b/spec/frontend/vue_shared/components/settings/settings_block_spec.js new file mode 100644 index 00000000000..2db0b001b5b --- /dev/null +++ b/spec/frontend/vue_shared/components/settings/settings_block_spec.js @@ -0,0 +1,86 @@ +import { GlButton } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import component from '~/vue_shared/components/settings/settings_block.vue'; + +describe('Settings Block', () => { + let wrapper; + + const mountComponent = (propsData) => { + wrapper = shallowMount(component, { + propsData, + slots: { + title: '<div data-testid="title-slot"></div>', + description: '<div data-testid="description-slot"></div>', + default: '<div data-testid="default-slot"></div>', + }, + }); + }; + + 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); + + it('renders the correct markup', () => { + mountComponent(); + + expect(wrapper.element).toMatchSnapshot(); + }); + + it('has a default slot', () => { + mountComponent(); + + expect(findDefaultSlot().exists()).toBe(true); + }); + + it('has a title slot', () => { + mountComponent(); + + expect(findTitleSlot().exists()).toBe(true); + }); + + it('has a description slot', () => { + mountComponent(); + + expect(findDescriptionSlot().exists()).toBe(true); + }); + + describe('expanded behaviour', () => { + it('is collapsed by default', () => { + mountComponent(); + + expect(wrapper.classes('expanded')).toBe(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'); + }); + + it('is expanded when `defaultExpanded` is true no matter what', async () => { + mountComponent({ defaultExpanded: true }); + + expect(wrapper.classes('expanded')).toBe(true); + + await findExpandButton().vm.$emit('click'); + + expect(wrapper.classes('expanded')).toBe(true); + + await findExpandButton().vm.$emit('click'); + + expect(wrapper.classes('expanded')).toBe(true); + }); + }); +}); |