debian-mirror-gitlab/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js

132 lines
3.4 KiB
JavaScript
Raw Normal View History

2022-04-04 11:22:00 +05:30
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
2020-10-24 23:57:45 +05:30
import Vuex from 'vuex';
2021-03-11 19:13:27 +05:30
import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue';
import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue';
2020-03-13 15:44:24 +05:30
import { createStore } from '~/ide/stores';
import paneModule from '~/ide/stores/modules/pane';
2022-04-04 11:22:00 +05:30
Vue.use(Vuex);
2020-03-13 15:44:24 +05:30
describe('ide/components/panes/collapsible_sidebar.vue', () => {
let wrapper;
let store;
const width = 350;
const fakeComponentName = 'fake-component';
2021-03-08 18:12:59 +05:30
const createComponent = (props) => {
2020-03-13 15:44:24 +05:30
wrapper = shallowMount(CollapsibleSidebar, {
store,
propsData: {
extensionTabs: [],
side: 'right',
width,
...props,
},
});
};
2020-06-23 00:09:42 +05:30
const findSidebarNav = () => wrapper.find(IdeSidebarNav);
2020-03-13 15:44:24 +05:30
beforeEach(() => {
store = createStore();
store.registerModule('leftPane', paneModule());
2020-06-23 00:09:42 +05:30
jest.spyOn(store, 'dispatch').mockImplementation();
2020-03-13 15:44:24 +05:30
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('with a tab', () => {
let fakeView;
let extensionTabs;
beforeEach(() => {
2022-04-04 11:22:00 +05:30
const FakeComponent = Vue.component(fakeComponentName, {
2021-03-08 18:12:59 +05:30
render: () => null,
2020-03-13 15:44:24 +05:30
});
fakeView = {
name: fakeComponentName,
keepAlive: true,
component: FakeComponent,
};
extensionTabs = [
{
show: true,
title: fakeComponentName,
views: [fakeView],
icon: 'text-description',
buttonClasses: ['button-class-1', 'button-class-2'],
},
];
});
describe.each`
side
${'left'}
${'right'}
`('when side=$side', ({ side }) => {
2020-06-23 00:09:42 +05:30
beforeEach(() => {
2020-03-13 15:44:24 +05:30
createComponent({ extensionTabs, side });
});
2020-06-23 00:09:42 +05:30
it('correctly renders side specific attributes', () => {
expect(wrapper.classes()).toContain('multi-file-commit-panel');
expect(wrapper.classes()).toContain(`ide-${side}-sidebar`);
expect(wrapper.find('.multi-file-commit-panel-inner')).not.toBe(null);
expect(wrapper.find(`.ide-${side}-sidebar-${fakeComponentName}`)).not.toBe(null);
expect(findSidebarNav().props('side')).toBe(side);
2020-03-13 15:44:24 +05:30
});
2020-06-23 00:09:42 +05:30
it('nothing is dispatched', () => {
expect(store.dispatch).not.toHaveBeenCalled();
2020-03-13 15:44:24 +05:30
});
2020-06-23 00:09:42 +05:30
it('when sidebar emits open, dispatch open', () => {
const view = 'lorem-view';
2020-03-13 15:44:24 +05:30
2020-06-23 00:09:42 +05:30
findSidebarNav().vm.$emit('open', view);
2020-03-13 15:44:24 +05:30
2020-06-23 00:09:42 +05:30
expect(store.dispatch).toHaveBeenCalledWith(`${side}Pane/open`, view);
2020-03-13 15:44:24 +05:30
});
2020-06-23 00:09:42 +05:30
it('when sidebar emits close, dispatch toggleOpen', () => {
findSidebarNav().vm.$emit('close');
2020-03-13 15:44:24 +05:30
2020-06-23 00:09:42 +05:30
expect(store.dispatch).toHaveBeenCalledWith(`${side}Pane/toggleOpen`);
2020-03-13 15:44:24 +05:30
});
2020-06-23 00:09:42 +05:30
});
2020-03-13 15:44:24 +05:30
2020-06-23 00:09:42 +05:30
describe.each`
isOpen
${true}
${false}
`('when isOpen=$isOpen', ({ isOpen }) => {
beforeEach(() => {
store.state.rightPane.isOpen = isOpen;
store.state.rightPane.currentView = fakeComponentName;
createComponent({ extensionTabs });
2020-03-13 15:44:24 +05:30
});
2020-06-23 00:09:42 +05:30
it(`tab view is shown=${isOpen}`, () => {
expect(wrapper.find('.js-tab-view').exists()).toBe(isOpen);
2020-03-13 15:44:24 +05:30
});
2020-06-23 00:09:42 +05:30
it('renders sidebar nav', () => {
expect(findSidebarNav().props()).toEqual({
tabs: extensionTabs,
side: 'right',
currentView: fakeComponentName,
isOpen,
});
2020-03-13 15:44:24 +05:30
});
});
});
});