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

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

208 lines
5.5 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { GlAlert } from '@gitlab/ui';
2021-09-30 23:02:18 +05:30
import { shallowMount } from '@vue/test-utils';
2023-01-13 00:05:48 +05:30
import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
2021-02-22 17:27:13 +05:30
import Draggable from 'vuedraggable';
2021-03-11 19:13:27 +05:30
import Vuex from 'vuex';
2023-01-13 00:05:48 +05:30
import waitForPromises from 'helpers/wait_for_promises';
import createMockApollo from 'helpers/mock_apollo_helper';
2020-11-24 15:15:51 +05:30
import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
import getters from 'ee_else_ce/boards/stores/getters';
2023-01-13 00:05:48 +05:30
import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
2021-11-11 11:23:49 +05:30
import BoardColumn from '~/boards/components/board_column.vue';
2020-11-24 15:15:51 +05:30
import BoardContent from '~/boards/components/board_content.vue';
2021-11-11 11:23:49 +05:30
import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
2023-01-13 00:05:48 +05:30
import { mockLists, boardListsQueryResponse } from '../mock_data';
2020-11-24 15:15:51 +05:30
2023-01-13 00:05:48 +05:30
Vue.use(VueApollo);
2021-09-30 23:02:18 +05:30
Vue.use(Vuex);
2020-11-24 15:15:51 +05:30
2021-02-22 17:27:13 +05:30
const actions = {
moveList: jest.fn(),
};
2020-11-24 15:15:51 +05:30
describe('BoardContent', () => {
let wrapper;
2023-01-13 00:05:48 +05:30
let fakeApollo;
2021-03-08 18:12:59 +05:30
window.gon = {};
2020-11-24 15:15:51 +05:30
const defaultState = {
isShowingEpicsSwimlanes: false,
2021-02-22 17:27:13 +05:30
boardLists: mockLists,
2020-11-24 15:15:51 +05:30
error: undefined,
2021-11-11 11:23:49 +05:30
issuableType: 'issue',
2020-11-24 15:15:51 +05:30
};
const createStore = (state = defaultState) => {
return new Vuex.Store({
2021-02-22 17:27:13 +05:30
actions,
2020-11-24 15:15:51 +05:30
getters,
state,
});
};
2023-01-13 00:05:48 +05:30
const createComponent = ({
state,
props = {},
canAdminList = true,
isApolloBoard = false,
issuableType = 'issue',
isIssueBoard = true,
isEpicBoard = false,
boardListQueryHandler = jest.fn().mockResolvedValue(boardListsQueryResponse),
} = {}) => {
fakeApollo = createMockApollo([[boardListsQuery, boardListQueryHandler]]);
2020-11-24 15:15:51 +05:30
const store = createStore({
...defaultState,
...state,
});
wrapper = shallowMount(BoardContent, {
2023-01-13 00:05:48 +05:30
apolloProvider: fakeApollo,
2020-11-24 15:15:51 +05:30
propsData: {
2023-01-13 00:05:48 +05:30
boardId: 'gid://gitlab/Board/1',
2021-02-22 17:27:13 +05:30
...props,
},
provide: {
2021-04-29 21:17:54 +05:30
canAdminList,
2023-01-13 00:05:48 +05:30
boardType: 'group',
fullPath: 'gitlab-org/gitlab',
issuableType,
isIssueBoard,
isEpicBoard,
2023-03-17 16:20:25 +05:30
isGroupBoard: true,
disabled: false,
2023-01-13 00:05:48 +05:30
isApolloBoard,
2020-11-24 15:15:51 +05:30
},
store,
});
};
2023-01-13 00:05:48 +05:30
beforeAll(() => {
global.ResizeObserver = class MockResizeObserver {
constructor(callback) {
this.callback = callback;
this.entries = [];
}
observe(entry) {
this.entries.push(entry);
}
disconnect() {
this.entries = [];
this.callback = null;
}
trigger() {
this.callback(this.entries);
}
};
});
2020-11-24 15:15:51 +05:30
afterEach(() => {
wrapper.destroy();
2023-01-13 00:05:48 +05:30
fakeApollo = null;
2020-11-24 15:15:51 +05:30
});
2021-11-11 11:23:49 +05:30
describe('default', () => {
beforeEach(() => {
createComponent();
});
2021-02-22 17:27:13 +05:30
2021-11-11 11:23:49 +05:30
it('renders a BoardColumn component per list', () => {
expect(wrapper.findAllComponents(BoardColumn)).toHaveLength(mockLists.length);
});
2020-11-24 15:15:51 +05:30
2021-11-11 11:23:49 +05:30
it('renders BoardContentSidebar', () => {
2022-08-27 11:52:29 +05:30
expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(true);
2021-11-11 11:23:49 +05:30
});
2021-02-22 17:27:13 +05:30
2021-11-11 11:23:49 +05:30
it('does not display EpicsSwimlanes component', () => {
2022-08-27 11:52:29 +05:30
expect(wrapper.findComponent(EpicsSwimlanes).exists()).toBe(false);
expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
2021-11-11 11:23:49 +05:30
});
2023-01-13 00:05:48 +05:30
2023-03-04 22:38:38 +05:30
it('on small screens, sets board container height to full height', async () => {
2023-01-13 00:05:48 +05:30
window.innerHeight = 1000;
2023-03-04 22:38:38 +05:30
window.innerWidth = 767;
2023-01-13 00:05:48 +05:30
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ top: 100 });
wrapper.vm.resizeObserver.trigger();
await nextTick();
2023-03-04 22:38:38 +05:30
const style = wrapper.findComponent({ ref: 'list' }).attributes('style');
expect(style).toBe('height: 1000px;');
});
it('on large screens, sets board container height fill area below filters', async () => {
window.innerHeight = 1000;
window.innerWidth = 768;
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ top: 100 });
wrapper.vm.resizeObserver.trigger();
await nextTick();
const style = wrapper.findComponent({ ref: 'list' }).attributes('style');
expect(style).toBe('height: 900px;');
});
it('sets delay and delayOnTouchOnly attributes on board list', () => {
const listEl = wrapper.findComponent({ ref: 'list' });
expect(listEl.attributes('delay')).toBe('100');
expect(listEl.attributes('delayontouchonly')).toBe('true');
2023-01-13 00:05:48 +05:30
});
2020-11-24 15:15:51 +05:30
});
2021-02-22 17:27:13 +05:30
2021-11-11 11:23:49 +05:30
describe('when issuableType is not issue', () => {
2021-03-08 18:12:59 +05:30
beforeEach(() => {
2023-01-13 00:05:48 +05:30
createComponent({ issuableType: 'foo', isIssueBoard: false });
2021-03-08 18:12:59 +05:30
});
2021-11-11 11:23:49 +05:30
it('does not render BoardContentSidebar', () => {
2022-08-27 11:52:29 +05:30
expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(false);
2021-02-22 17:27:13 +05:30
});
2021-11-11 11:23:49 +05:30
});
2021-02-22 17:27:13 +05:30
2021-11-11 11:23:49 +05:30
describe('can admin list', () => {
beforeEach(() => {
createComponent({ canAdminList: true });
});
2021-02-22 17:27:13 +05:30
2021-11-11 11:23:49 +05:30
it('renders draggable component', () => {
2022-08-27 11:52:29 +05:30
expect(wrapper.findComponent(Draggable).exists()).toBe(true);
2021-02-22 17:27:13 +05:30
});
});
2021-11-11 11:23:49 +05:30
describe('can not admin list', () => {
2021-02-22 17:27:13 +05:30
beforeEach(() => {
2021-11-11 11:23:49 +05:30
createComponent({ canAdminList: false });
2021-02-22 17:27:13 +05:30
});
it('does not render draggable component', () => {
2022-08-27 11:52:29 +05:30
expect(wrapper.findComponent(Draggable).exists()).toBe(false);
2021-02-22 17:27:13 +05:30
});
});
2023-01-13 00:05:48 +05:30
describe('when Apollo boards FF is on', () => {
beforeEach(async () => {
createComponent({ isApolloBoard: true });
await waitForPromises();
});
it('renders a BoardColumn component per list', () => {
expect(wrapper.findAllComponents(BoardColumn)).toHaveLength(mockLists.length);
});
it('renders BoardContentSidebar', () => {
expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(true);
});
});
2020-11-24 15:15:51 +05:30
});