debian-mirror-gitlab/spec/frontend/boards/components/board_settings_sidebar_spec.js

201 lines
4.9 KiB
JavaScript
Raw Normal View History

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
});