diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 13:34:06 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 13:34:06 +0300 |
commit | 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 (patch) | |
tree | d7f2700abe6b4ffcb2dcfc80631b2d87d0609239 /spec/frontend/vue_shared/components/settings/settings_block_spec.js | |
parent | 446d496a6d000c73a304be52587cd9bbc7493136 (diff) |
Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42
Diffstat (limited to 'spec/frontend/vue_shared/components/settings/settings_block_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/settings/settings_block_spec.js | 86 |
1 files changed, 86 insertions, 0 deletions
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); + }); + }); +}); |