147 lines
4.7 KiB
JavaScript
147 lines
4.7 KiB
JavaScript
import { GlLabel } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
|
import { labels as TEST_LABELS, mockIssue as TEST_ISSUE } from 'jest/boards/mock_data';
|
|
import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
|
|
import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue';
|
|
import { createStore } from '~/boards/stores';
|
|
import createFlash from '~/flash';
|
|
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
|
|
|
|
jest.mock('~/flash');
|
|
|
|
const TEST_LABELS_PAYLOAD = TEST_LABELS.map((label) => ({ ...label, set: true }));
|
|
const TEST_LABELS_TITLES = TEST_LABELS.map((label) => label.title);
|
|
|
|
describe('~/boards/components/sidebar/board_sidebar_labels_select.vue', () => {
|
|
let wrapper;
|
|
let store;
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
store = null;
|
|
wrapper = null;
|
|
});
|
|
|
|
const createWrapper = ({ labels = [] } = {}) => {
|
|
store = createStore();
|
|
store.state.boardItems = { [TEST_ISSUE.id]: { ...TEST_ISSUE, labels } };
|
|
store.state.activeId = TEST_ISSUE.id;
|
|
|
|
wrapper = shallowMount(BoardSidebarLabelsSelect, {
|
|
store,
|
|
provide: {
|
|
canUpdate: true,
|
|
labelsFetchPath: TEST_HOST,
|
|
labelsManagePath: TEST_HOST,
|
|
labelsFilterBasePath: TEST_HOST,
|
|
},
|
|
stubs: {
|
|
BoardEditableItem,
|
|
LabelsSelect: true,
|
|
},
|
|
});
|
|
};
|
|
|
|
const findLabelsSelect = () => wrapper.find({ ref: 'labelsSelect' });
|
|
const findLabelsTitles = () =>
|
|
wrapper.findAll(GlLabel).wrappers.map((item) => item.props('title'));
|
|
const findCollapsed = () => wrapper.find('[data-testid="collapsed-content"]');
|
|
|
|
it('renders "None" when no labels are selected', () => {
|
|
createWrapper();
|
|
|
|
expect(findCollapsed().text()).toBe('None');
|
|
});
|
|
|
|
it('renders labels when set', () => {
|
|
createWrapper({ labels: TEST_LABELS });
|
|
|
|
expect(findLabelsTitles()).toEqual(TEST_LABELS_TITLES);
|
|
});
|
|
|
|
describe('when labels are submitted', () => {
|
|
beforeEach(async () => {
|
|
createWrapper();
|
|
|
|
jest.spyOn(wrapper.vm, 'setActiveIssueLabels').mockImplementation(() => TEST_LABELS);
|
|
findLabelsSelect().vm.$emit('updateSelectedLabels', TEST_LABELS_PAYLOAD);
|
|
store.state.boardItems[TEST_ISSUE.id].labels = TEST_LABELS;
|
|
await wrapper.vm.$nextTick();
|
|
});
|
|
|
|
it('collapses sidebar and renders labels', () => {
|
|
expect(findCollapsed().isVisible()).toBe(true);
|
|
expect(findLabelsTitles()).toEqual(TEST_LABELS_TITLES);
|
|
});
|
|
|
|
it('commits change to the server', () => {
|
|
expect(wrapper.vm.setActiveIssueLabels).toHaveBeenCalledWith({
|
|
addLabelIds: TEST_LABELS.map((label) => label.id),
|
|
projectPath: 'gitlab-org/test-subgroup/gitlab-test',
|
|
removeLabelIds: [],
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when labels are updated over existing labels', () => {
|
|
const testLabelsPayload = [
|
|
{ id: 5, set: true },
|
|
{ id: 7, set: true },
|
|
];
|
|
const expectedLabels = [{ id: 5 }, { id: 7 }];
|
|
|
|
beforeEach(async () => {
|
|
createWrapper({ labels: TEST_LABELS });
|
|
|
|
jest.spyOn(wrapper.vm, 'setActiveIssueLabels').mockImplementation(() => expectedLabels);
|
|
findLabelsSelect().vm.$emit('updateSelectedLabels', testLabelsPayload);
|
|
await wrapper.vm.$nextTick();
|
|
});
|
|
|
|
it('commits change to the server', () => {
|
|
expect(wrapper.vm.setActiveIssueLabels).toHaveBeenCalledWith({
|
|
addLabelIds: [5, 7],
|
|
removeLabelIds: [6],
|
|
projectPath: 'gitlab-org/test-subgroup/gitlab-test',
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when removing individual labels', () => {
|
|
const testLabel = TEST_LABELS[0];
|
|
|
|
beforeEach(async () => {
|
|
createWrapper({ labels: [testLabel] });
|
|
|
|
jest.spyOn(wrapper.vm, 'setActiveIssueLabels').mockImplementation(() => {});
|
|
});
|
|
|
|
it('commits change to the server', () => {
|
|
wrapper.find(GlLabel).vm.$emit('close', testLabel);
|
|
|
|
expect(wrapper.vm.setActiveIssueLabels).toHaveBeenCalledWith({
|
|
removeLabelIds: [getIdFromGraphQLId(testLabel.id)],
|
|
projectPath: 'gitlab-org/test-subgroup/gitlab-test',
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when the mutation fails', () => {
|
|
beforeEach(async () => {
|
|
createWrapper({ labels: TEST_LABELS });
|
|
|
|
jest.spyOn(wrapper.vm, 'setActiveIssueLabels').mockImplementation(() => {
|
|
throw new Error(['failed mutation']);
|
|
});
|
|
findLabelsSelect().vm.$emit('updateSelectedLabels', [{ id: '?' }]);
|
|
await wrapper.vm.$nextTick();
|
|
});
|
|
|
|
it('collapses sidebar and renders former issue weight', () => {
|
|
expect(findCollapsed().isVisible()).toBe(true);
|
|
expect(findLabelsTitles()).toEqual(TEST_LABELS_TITLES);
|
|
expect(createFlash).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|