2020-10-24 23:57:45 +05:30
|
|
|
import '~/boards/models/list';
|
2021-03-11 19:13:27 +05:30
|
|
|
import { GlDrawer, GlLabel } from '@gitlab/ui';
|
|
|
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
2020-10-24 23:57:45 +05:30
|
|
|
import axios from 'axios';
|
2021-03-11 19:13:27 +05:30
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
2020-10-24 23:57:45 +05:30
|
|
|
import Vuex from 'vuex';
|
2021-04-29 21:17:54 +05:30
|
|
|
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
|
2020-10-24 23:57:45 +05:30
|
|
|
import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
|
2021-03-11 19:13:27 +05:30
|
|
|
import { inactiveId, LIST } from '~/boards/constants';
|
2020-11-24 15:15:51 +05:30
|
|
|
import { createStore } from '~/boards/stores';
|
2021-03-11 19:13:27 +05:30
|
|
|
import boardsStore from '~/boards/stores/boards_store';
|
2020-10-24 23:57:45 +05:30
|
|
|
import sidebarEventHub from '~/sidebar/event_hub';
|
|
|
|
|
|
|
|
const localVue = createLocalVue();
|
|
|
|
|
|
|
|
localVue.use(Vuex);
|
|
|
|
|
|
|
|
describe('BoardSettingsSidebar', () => {
|
|
|
|
let wrapper;
|
|
|
|
let mock;
|
2020-11-24 15:15:51 +05:30
|
|
|
let store;
|
2020-10-24 23:57:45 +05:30
|
|
|
const labelTitle = 'test';
|
|
|
|
const labelColor = '#FFFF';
|
|
|
|
const listId = 1;
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
const findRemoveButton = () => wrapper.findByTestId('remove-list');
|
|
|
|
|
|
|
|
const createComponent = ({ canAdminList = false } = {}) => {
|
|
|
|
wrapper = extendedWrapper(
|
|
|
|
shallowMount(BoardSettingsSidebar, {
|
|
|
|
store,
|
|
|
|
localVue,
|
|
|
|
provide: {
|
|
|
|
canAdminList,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
2020-10-24 23:57:45 +05:30
|
|
|
};
|
|
|
|
const findLabel = () => wrapper.find(GlLabel);
|
|
|
|
const findDrawer = () => wrapper.find(GlDrawer);
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2020-11-24 15:15:51 +05:30
|
|
|
store = createStore();
|
|
|
|
store.state.activeId = inactiveId;
|
|
|
|
store.state.sidebarType = LIST;
|
2020-10-24 23:57:45 +05:30
|
|
|
boardsStore.create();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
jest.restoreAllMocks();
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
describe('when sidebarType is "list"', () => {
|
|
|
|
it('finds a GlDrawer component', () => {
|
|
|
|
createComponent();
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(findDrawer().exists()).toBe(true);
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
describe('on close', () => {
|
|
|
|
it('closes the sidebar', async () => {
|
|
|
|
createComponent();
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
findDrawer().vm.$emit('close');
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
await wrapper.vm.$nextTick();
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(wrapper.find(GlDrawer).exists()).toBe(false);
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
it('closes the sidebar when emitting the correct event', async () => {
|
|
|
|
createComponent();
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
sidebarEventHub.$emit('sidebar.closeAll');
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
await wrapper.vm.$nextTick();
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(wrapper.find(GlDrawer).exists()).toBe(false);
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
describe('when activeId is zero', () => {
|
|
|
|
it('renders GlDrawer with open false', () => {
|
|
|
|
createComponent();
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(findDrawer().props('open')).toBe(false);
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
describe('when activeId is greater than zero', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mock = new MockAdapter(axios);
|
|
|
|
|
|
|
|
boardsStore.addList({
|
|
|
|
id: listId,
|
|
|
|
label: { title: labelTitle, color: labelColor },
|
|
|
|
list_type: 'label',
|
|
|
|
});
|
|
|
|
store.state.activeId = 1;
|
|
|
|
store.state.sidebarType = LIST;
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
afterEach(() => {
|
|
|
|
boardsStore.removeList(listId);
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
it('renders GlDrawer with open false', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(findDrawer().props('open')).toBe(true);
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
describe('when activeId is in boardsStore', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mock = new MockAdapter(axios);
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
boardsStore.addList({
|
|
|
|
id: listId,
|
|
|
|
label: { title: labelTitle, color: labelColor },
|
|
|
|
list_type: 'label',
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
store.state.activeId = listId;
|
|
|
|
store.state.sidebarType = LIST;
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent();
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
afterEach(() => {
|
|
|
|
mock.restore();
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
it('renders label title', () => {
|
|
|
|
expect(findLabel().props('title')).toBe(labelTitle);
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
it('renders label background color', () => {
|
|
|
|
expect(findLabel().props('backgroundColor')).toBe(labelColor);
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
describe('when activeId is not in boardsStore', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mock = new MockAdapter(axios);
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
boardsStore.addList({ id: listId, label: { title: labelTitle, color: labelColor } });
|
|
|
|
|
|
|
|
store.state.activeId = inactiveId;
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
mock.restore();
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
it('does not render GlLabel', () => {
|
|
|
|
expect(findLabel().exists()).toBe(false);
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
2020-11-24 15:15:51 +05:30
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
describe('when sidebarType is not List', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
store.state.sidebarType = '';
|
|
|
|
createComponent();
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
it('does not render GlDrawer', () => {
|
|
|
|
expect(findDrawer().exists()).toBe(false);
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
});
|
2021-04-29 21:17:54 +05:30
|
|
|
|
|
|
|
it('does not render "Remove list" when user cannot admin the boards list', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(findRemoveButton().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when user can admin the boards list', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
store.state.activeId = listId;
|
|
|
|
store.state.sidebarType = LIST;
|
|
|
|
|
|
|
|
boardsStore.addList({
|
|
|
|
id: listId,
|
|
|
|
label: { title: labelTitle, color: labelColor },
|
|
|
|
list_type: 'label',
|
|
|
|
});
|
|
|
|
|
|
|
|
createComponent({ canAdminList: true });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders "Remove list" button', () => {
|
|
|
|
expect(findRemoveButton().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|