2021-06-08 01:23:25 +05:30
|
|
|
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 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 createComponent = () => {
|
|
|
|
wrapper = shallowMount(PipelineEditorDrawer, {
|
|
|
|
stubs: { LocalStorageSync },
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
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');
|
|
|
|
|
2021-12-11 22:18:48 +05:30
|
|
|
const originalObjects = [];
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
originalObjects.push(window.gon, window.gl);
|
|
|
|
});
|
|
|
|
|
2021-06-08 01:23:25 +05:30
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
localStorage.clear();
|
2021-12-11 22:18:48 +05:30
|
|
|
[window.gon, window.gl] = originalObjects;
|
2021-06-08 01:23:25 +05:30
|
|
|
});
|
|
|
|
|
2021-12-11 22:18:48 +05:30
|
|
|
describe('default expanded state', () => {
|
2022-05-07 20:08:51 +05:30
|
|
|
it('sets the drawer to be closed by default', async () => {
|
|
|
|
createComponent();
|
|
|
|
expect(findDrawerContent().exists()).toBe(false);
|
2021-12-11 22:18:48 +05:30
|
|
|
});
|
2021-06-08 01:23:25 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
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();
|
2022-05-07 20:08:51 +05:30
|
|
|
await clickToggleBtn();
|
2021-06-08 01:23:25 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
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('loads the drawer expanded when local storage is set to `true`, ', async () => {
|
|
|
|
localStorage.setItem(DRAWER_EXPANDED_KEY, true);
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
await nextTick();
|
|
|
|
|
|
|
|
expect(findDrawerContent().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|