2020-12-11 15:10:04 +00:00
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2020-03-24 03:09:28 +00:00
|
|
|
|
2020-08-17 21:09:56 +00:00
|
|
|
import { TEST_HOST } from 'jest/helpers/test_constants';
|
2020-12-07 09:09:42 +00:00
|
|
|
import { GlModal } from '@gitlab/ui';
|
2020-12-11 15:10:04 +00:00
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
|
|
|
|
|
|
import { visitUrl } from '~/lib/utils/url_utility';
|
2020-03-24 03:09:28 +00:00
|
|
|
import boardsStore from '~/boards/stores/boards_store';
|
2020-12-11 15:10:04 +00:00
|
|
|
import BoardForm from '~/boards/components/board_form.vue';
|
2020-12-23 15:09:54 +00:00
|
|
|
import updateBoardMutation from '~/boards/graphql/board_update.mutation.graphql';
|
|
|
|
import createBoardMutation from '~/boards/graphql/board_create.mutation.graphql';
|
2020-03-24 03:09:28 +00:00
|
|
|
|
2020-12-11 15:10:04 +00:00
|
|
|
jest.mock('~/lib/utils/url_utility', () => ({
|
|
|
|
visitUrl: jest.fn().mockName('visitUrlMock'),
|
2020-12-23 15:09:54 +00:00
|
|
|
stripFinalUrlSegment: jest.requireActual('~/lib/utils/url_utility').stripFinalUrlSegment,
|
2020-12-11 15:10:04 +00:00
|
|
|
}));
|
2020-03-24 03:09:28 +00:00
|
|
|
|
2020-12-11 15:10:04 +00:00
|
|
|
const currentBoard = {
|
|
|
|
id: 1,
|
|
|
|
name: 'test',
|
|
|
|
labels: [],
|
|
|
|
milestone_id: undefined,
|
|
|
|
assignee: {},
|
|
|
|
assignee_id: undefined,
|
|
|
|
weight: null,
|
|
|
|
hide_backlog_list: false,
|
|
|
|
hide_closed_list: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
const defaultProps = {
|
|
|
|
canAdminBoard: false,
|
|
|
|
labelsPath: `${TEST_HOST}/labels/path`,
|
|
|
|
labelsWebUrl: `${TEST_HOST}/-/labels`,
|
|
|
|
currentBoard,
|
|
|
|
};
|
|
|
|
|
|
|
|
const endpoints = {
|
|
|
|
boardsEndpoint: 'test-endpoint',
|
|
|
|
};
|
|
|
|
|
2020-12-23 15:09:54 +00:00
|
|
|
const mutate = jest.fn().mockResolvedValue({
|
|
|
|
data: {
|
|
|
|
createBoard: { board: { id: 'gid://gitlab/Board/123' } },
|
|
|
|
updateBoard: { board: { id: 'gid://gitlab/Board/321' } },
|
|
|
|
},
|
|
|
|
});
|
2020-12-11 15:10:04 +00:00
|
|
|
|
|
|
|
describe('BoardForm', () => {
|
|
|
|
let wrapper;
|
2020-03-24 03:09:28 +00:00
|
|
|
|
2020-12-07 09:09:42 +00:00
|
|
|
const findModal = () => wrapper.find(GlModal);
|
2020-12-11 15:10:04 +00:00
|
|
|
const findModalActionPrimary = () => findModal().props('actionPrimary');
|
|
|
|
const findForm = () => wrapper.find('[data-testid="board-form"]');
|
|
|
|
const findFormWrapper = () => wrapper.find('[data-testid="board-form-wrapper"]');
|
|
|
|
const findDeleteConfirmation = () => wrapper.find('[data-testid="delete-confirmation-message"]');
|
|
|
|
const findInput = () => wrapper.find('#board-new-name');
|
|
|
|
|
|
|
|
const createComponent = (props, data) => {
|
|
|
|
wrapper = shallowMount(BoardForm, {
|
|
|
|
propsData: { ...defaultProps, ...props },
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
...data,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
provide: {
|
|
|
|
endpoints,
|
|
|
|
},
|
|
|
|
mocks: {
|
|
|
|
$apollo: {
|
|
|
|
mutate,
|
|
|
|
},
|
|
|
|
},
|
2020-12-25 18:10:00 +00:00
|
|
|
attachTo: document.body,
|
2020-12-11 15:10:04 +00:00
|
|
|
});
|
|
|
|
};
|
2020-03-24 03:09:28 +00:00
|
|
|
|
|
|
|
beforeEach(() => {
|
2020-12-23 15:09:54 +00:00
|
|
|
delete window.location;
|
2020-03-24 03:09:28 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
2020-12-11 15:10:04 +00:00
|
|
|
boardsStore.state.currentPage = null;
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when user can not admin the board', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
boardsStore.state.currentPage = 'new';
|
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('hides modal footer when user is not a board admin', () => {
|
|
|
|
expect(findModal().attributes('hide-footer')).toBeDefined();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays board scope title', () => {
|
|
|
|
expect(findModal().attributes('title')).toBe('Board scope');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display a form', () => {
|
|
|
|
expect(findForm().exists()).toBe(false);
|
|
|
|
});
|
2020-03-24 03:09:28 +00:00
|
|
|
});
|
|
|
|
|
2020-12-11 15:10:04 +00:00
|
|
|
describe('when user can admin the board', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
boardsStore.state.currentPage = 'new';
|
|
|
|
createComponent({ canAdminBoard: true });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows modal footer when user is a board admin', () => {
|
|
|
|
expect(findModal().attributes('hide-footer')).toBeUndefined();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays a form', () => {
|
|
|
|
expect(findForm().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('focuses an input field', async () => {
|
|
|
|
expect(document.activeElement).toBe(wrapper.vm.$refs.name);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when creating a new board', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
boardsStore.state.currentPage = 'new';
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('on non-scoped-board', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ canAdminBoard: true });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('clears the form', () => {
|
2020-12-23 15:09:54 +00:00
|
|
|
expect(findInput().element.value).toBe('');
|
2020-12-11 15:10:04 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('shows a correct title about creating a board', () => {
|
|
|
|
expect(findModal().attributes('title')).toBe('Create new board');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('passes correct primary action text and variant', () => {
|
|
|
|
expect(findModalActionPrimary().text).toBe('Create board');
|
|
|
|
expect(findModalActionPrimary().attributes[0].variant).toBe('success');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render delete confirmation message', () => {
|
|
|
|
expect(findDeleteConfirmation().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders form wrapper', () => {
|
|
|
|
expect(findFormWrapper().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when submitting a create event', () => {
|
|
|
|
it('does not call API if board name is empty', async () => {
|
|
|
|
createComponent({ canAdminBoard: true });
|
|
|
|
findInput().trigger('keyup.enter', { metaKey: true });
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(mutate).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2020-12-23 15:09:54 +00:00
|
|
|
it('calls a correct GraphQL mutation and redirects to correct page from existing board', async () => {
|
|
|
|
window.location = new URL('https://test/boards/1');
|
2020-12-11 15:10:04 +00:00
|
|
|
createComponent({ canAdminBoard: true });
|
|
|
|
|
|
|
|
findInput().value = 'Test name';
|
|
|
|
findInput().trigger('input');
|
|
|
|
findInput().trigger('keyup.enter', { metaKey: true });
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
|
2020-12-23 15:09:54 +00:00
|
|
|
expect(mutate).toHaveBeenCalledWith({
|
|
|
|
mutation: createBoardMutation,
|
|
|
|
variables: {
|
|
|
|
input: expect.objectContaining({
|
|
|
|
name: 'test',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
expect(visitUrl).toHaveBeenCalledWith('123');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('calls a correct GraphQL mutation and redirects to correct page from boards list', async () => {
|
|
|
|
window.location = new URL('https://test/boards');
|
|
|
|
createComponent({ canAdminBoard: true });
|
|
|
|
|
|
|
|
findInput().value = 'Test name';
|
|
|
|
findInput().trigger('input');
|
|
|
|
findInput().trigger('keyup.enter', { metaKey: true });
|
|
|
|
|
|
|
|
await waitForPromises();
|
2020-12-11 15:10:04 +00:00
|
|
|
|
|
|
|
expect(mutate).toHaveBeenCalledWith({
|
|
|
|
mutation: createBoardMutation,
|
|
|
|
variables: {
|
2020-12-23 15:09:54 +00:00
|
|
|
input: expect.objectContaining({
|
|
|
|
name: 'test',
|
|
|
|
}),
|
2020-12-11 15:10:04 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
await waitForPromises();
|
2020-12-23 15:09:54 +00:00
|
|
|
expect(visitUrl).toHaveBeenCalledWith('boards/123');
|
2020-03-24 03:09:28 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-12-11 15:10:04 +00:00
|
|
|
describe('when editing a board', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
boardsStore.state.currentPage = 'edit';
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('on non-scoped-board', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ canAdminBoard: true });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('clears the form', () => {
|
2020-12-23 15:09:54 +00:00
|
|
|
expect(findInput().element.value).toEqual(currentBoard.name);
|
2020-12-11 15:10:04 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('shows a correct title about creating a board', () => {
|
|
|
|
expect(findModal().attributes('title')).toBe('Edit board');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('passes correct primary action text and variant', () => {
|
|
|
|
expect(findModalActionPrimary().text).toBe('Save changes');
|
|
|
|
expect(findModalActionPrimary().attributes[0].variant).toBe('info');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render delete confirmation message', () => {
|
|
|
|
expect(findDeleteConfirmation().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders form wrapper', () => {
|
|
|
|
expect(findFormWrapper().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when submitting an update event', () => {
|
|
|
|
it('calls REST and GraphQL API with correct parameters', async () => {
|
2020-12-23 15:09:54 +00:00
|
|
|
window.location = new URL('https://test/boards/1');
|
2020-12-11 15:10:04 +00:00
|
|
|
createComponent({ canAdminBoard: true });
|
|
|
|
|
|
|
|
findInput().trigger('keyup.enter', { metaKey: true });
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(mutate).toHaveBeenCalledWith({
|
2020-12-23 15:09:54 +00:00
|
|
|
mutation: updateBoardMutation,
|
2020-12-11 15:10:04 +00:00
|
|
|
variables: {
|
2020-12-23 15:09:54 +00:00
|
|
|
input: expect.objectContaining({
|
|
|
|
id: `gid://gitlab/Board/${currentBoard.id}`,
|
|
|
|
}),
|
2020-12-11 15:10:04 +00:00
|
|
|
},
|
|
|
|
});
|
2020-12-23 15:09:54 +00:00
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
expect(visitUrl).toHaveBeenCalledWith('321');
|
2020-03-24 03:09:28 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|