diff options
Diffstat (limited to 'spec/frontend/pipeline_editor/components/drawer')
-rw-r--r-- | spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js | 137 |
1 files changed, 9 insertions, 128 deletions
diff --git a/spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js b/spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js index ba06f113120..33b53bf6a56 100644 --- a/spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js +++ b/spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js @@ -1,146 +1,27 @@ -import { GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import { nextTick } from 'vue'; -import { useLocalStorageSpy } from 'helpers/local_storage_helper'; -import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue'; -import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue'; -import PipelineConfigReferenceCard from '~/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue'; -import VisualizeAndLintCard from '~/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue'; +import { GlDrawer } from '@gitlab/ui'; import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_editor_drawer.vue'; -import { DRAWER_EXPANDED_KEY } from '~/pipeline_editor/constants'; -import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; describe('Pipeline editor drawer', () => { - useLocalStorageSpy(); - let wrapper; + const findDrawer = () => wrapper.findComponent(GlDrawer); + const createComponent = () => { - wrapper = shallowMount(PipelineEditorDrawer, { - stubs: { LocalStorageSync }, - }); + wrapper = shallowMount(PipelineEditorDrawer); }; - const findFirstPipelineCard = () => wrapper.findComponent(FirstPipelineCard); - const findGettingStartedCard = () => wrapper.findComponent(GettingStartedCard); - const findPipelineConfigReferenceCard = () => wrapper.findComponent(PipelineConfigReferenceCard); - const findToggleBtn = () => wrapper.findComponent(GlButton); - const findVisualizeAndLintCard = () => wrapper.findComponent(VisualizeAndLintCard); - - const findArrowIcon = () => wrapper.find('[data-testid="toggle-icon"]'); - const findCollapseText = () => wrapper.find('[data-testid="collapse-text"]'); - const findDrawerContent = () => wrapper.find('[data-testid="drawer-content"]'); - - const clickToggleBtn = async () => findToggleBtn().vm.$emit('click'); - - const originalObjects = []; - - beforeEach(() => { - originalObjects.push(window.gon, window.gl); - }); - afterEach(() => { wrapper.destroy(); - localStorage.clear(); - [window.gon, window.gl] = originalObjects; - }); - - describe('default expanded state', () => { - it('sets the drawer to be closed by default', async () => { - createComponent(); - expect(findDrawerContent().exists()).toBe(false); - }); - }); - - describe('when the drawer is collapsed', () => { - beforeEach(async () => { - createComponent(); - }); - - it('shows the left facing arrow icon', () => { - expect(findArrowIcon().props('name')).toBe('chevron-double-lg-left'); - }); - - it('does not show the collapse text', () => { - expect(findCollapseText().exists()).toBe(false); - }); - - it('does not show the drawer content', () => { - expect(findDrawerContent().exists()).toBe(false); - }); - - it('can open the drawer by clicking on the toggle button', async () => { - expect(findDrawerContent().exists()).toBe(false); - - await clickToggleBtn(); - - expect(findDrawerContent().exists()).toBe(true); - }); - }); - - describe('when the drawer is expanded', () => { - beforeEach(async () => { - createComponent(); - await clickToggleBtn(); - }); - - it('shows the right facing arrow icon', () => { - expect(findArrowIcon().props('name')).toBe('chevron-double-lg-right'); - }); - - it('shows the collapse text', () => { - expect(findCollapseText().exists()).toBe(true); - }); - - it('shows the drawer content', () => { - expect(findDrawerContent().exists()).toBe(true); - }); - - it('shows all the introduction cards', () => { - expect(findFirstPipelineCard().exists()).toBe(true); - expect(findGettingStartedCard().exists()).toBe(true); - expect(findPipelineConfigReferenceCard().exists()).toBe(true); - expect(findVisualizeAndLintCard().exists()).toBe(true); - }); - - it('can close the drawer by clicking on the toggle button', async () => { - expect(findDrawerContent().exists()).toBe(true); - - await clickToggleBtn(); - - expect(findDrawerContent().exists()).toBe(false); - }); }); - describe('local storage', () => { - it('saves the drawer expanded value to local storage', async () => { - localStorage.setItem(DRAWER_EXPANDED_KEY, 'false'); - - createComponent(); - await clickToggleBtn(); - - expect(localStorage.setItem.mock.calls).toEqual([ - [DRAWER_EXPANDED_KEY, 'false'], - [DRAWER_EXPANDED_KEY, 'true'], - ]); - }); - - it('loads the drawer collapsed when local storage is set to `false`, ', async () => { - localStorage.setItem(DRAWER_EXPANDED_KEY, false); - createComponent(); - - await nextTick(); - - expect(findDrawerContent().exists()).toBe(false); - }); + it('emits close event when closing the drawer', () => { + createComponent(); - it('loads the drawer expanded when local storage is set to `true`, ', async () => { - localStorage.setItem(DRAWER_EXPANDED_KEY, true); - createComponent(); + expect(wrapper.emitted('close-drawer')).toBeUndefined(); - await nextTick(); + findDrawer().vm.$emit('close'); - expect(findDrawerContent().exists()).toBe(true); - }); + expect(wrapper.emitted('close-drawer')).toHaveLength(1); }); }); |