debian-mirror-gitlab/spec/frontend/diffs/components/settings_dropdown_spec.js

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

191 lines
5.7 KiB
JavaScript
Raw Normal View History

2021-04-17 20:07:23 +05:30
import { mount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
2019-03-02 22:35:43 +05:30
import SettingsDropdown from '~/diffs/components/settings_dropdown.vue';
2021-04-17 20:07:23 +05:30
import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
2021-02-22 17:27:13 +05:30
import eventHub from '~/diffs/event_hub';
2019-03-02 22:35:43 +05:30
2021-04-17 20:07:23 +05:30
import createDiffsStore from '../create_diffs_store';
2020-01-01 13:55:28 +05:30
2020-11-24 15:15:51 +05:30
describe('Diff settings dropdown component', () => {
2021-02-22 17:27:13 +05:30
let wrapper;
2021-04-17 20:07:23 +05:30
let store;
2019-03-02 22:35:43 +05:30
function createComponent(extendStore = () => {}) {
2021-04-17 20:07:23 +05:30
store = createDiffsStore();
2019-03-02 22:35:43 +05:30
extendStore(store);
2021-04-17 20:07:23 +05:30
wrapper = extendedWrapper(
mount(SettingsDropdown, {
store,
}),
);
2021-02-22 17:27:13 +05:30
}
function getFileByFileCheckbox(vueWrapper) {
2021-04-17 20:07:23 +05:30
return vueWrapper.findByTestId('file-by-file');
}
function setup({ storeUpdater } = {}) {
createComponent(storeUpdater);
jest.spyOn(store, 'dispatch').mockImplementation(() => {});
2019-03-02 22:35:43 +05:30
}
beforeEach(() => {
2021-04-17 20:07:23 +05:30
setup();
2019-03-02 22:35:43 +05:30
});
afterEach(() => {
2021-04-17 20:07:23 +05:30
store.dispatch.mockRestore();
2021-02-22 17:27:13 +05:30
wrapper.destroy();
2019-03-02 22:35:43 +05:30
});
describe('tree view buttons', () => {
it('list view button dispatches setRenderTreeList with false', () => {
2021-02-22 17:27:13 +05:30
wrapper.find('.js-list-view').trigger('click');
2019-03-02 22:35:43 +05:30
2021-10-27 15:23:28 +05:30
expect(store.dispatch).toHaveBeenCalledWith('diffs/setRenderTreeList', {
renderTreeList: false,
});
2019-03-02 22:35:43 +05:30
});
it('tree view button dispatches setRenderTreeList with true', () => {
2021-02-22 17:27:13 +05:30
wrapper.find('.js-tree-view').trigger('click');
2019-03-02 22:35:43 +05:30
2021-10-27 15:23:28 +05:30
expect(store.dispatch).toHaveBeenCalledWith('diffs/setRenderTreeList', {
renderTreeList: true,
});
2019-03-02 22:35:43 +05:30
});
2020-11-24 15:15:51 +05:30
it('sets list button as selected when renderTreeList is false', () => {
2021-04-17 20:07:23 +05:30
setup({
storeUpdater: (origStore) =>
Object.assign(origStore.state.diffs, { renderTreeList: false }),
2019-03-02 22:35:43 +05:30
});
2021-02-22 17:27:13 +05:30
expect(wrapper.find('.js-list-view').classes('selected')).toBe(true);
expect(wrapper.find('.js-tree-view').classes('selected')).toBe(false);
2019-03-02 22:35:43 +05:30
});
2020-11-24 15:15:51 +05:30
it('sets tree button as selected when renderTreeList is true', () => {
2021-04-17 20:07:23 +05:30
setup({
storeUpdater: (origStore) => Object.assign(origStore.state.diffs, { renderTreeList: true }),
2019-03-02 22:35:43 +05:30
});
2021-02-22 17:27:13 +05:30
expect(wrapper.find('.js-list-view').classes('selected')).toBe(false);
expect(wrapper.find('.js-tree-view').classes('selected')).toBe(true);
2019-03-02 22:35:43 +05:30
});
});
describe('compare changes', () => {
2020-11-24 15:15:51 +05:30
it('sets inline button as selected', () => {
2021-04-17 20:07:23 +05:30
setup({
storeUpdater: (origStore) =>
Object.assign(origStore.state.diffs, { diffViewType: INLINE_DIFF_VIEW_TYPE }),
2019-03-02 22:35:43 +05:30
});
2021-02-22 17:27:13 +05:30
expect(wrapper.find('.js-inline-diff-button').classes('selected')).toBe(true);
expect(wrapper.find('.js-parallel-diff-button').classes('selected')).toBe(false);
2019-03-02 22:35:43 +05:30
});
2020-11-24 15:15:51 +05:30
it('sets parallel button as selected', () => {
2021-04-17 20:07:23 +05:30
setup({
storeUpdater: (origStore) =>
Object.assign(origStore.state.diffs, { diffViewType: PARALLEL_DIFF_VIEW_TYPE }),
2019-03-02 22:35:43 +05:30
});
2021-02-22 17:27:13 +05:30
expect(wrapper.find('.js-inline-diff-button').classes('selected')).toBe(false);
expect(wrapper.find('.js-parallel-diff-button').classes('selected')).toBe(true);
2019-03-02 22:35:43 +05:30
});
it('calls setInlineDiffViewType when clicking inline button', () => {
2021-02-22 17:27:13 +05:30
wrapper.find('.js-inline-diff-button').trigger('click');
2019-03-02 22:35:43 +05:30
2021-04-17 20:07:23 +05:30
expect(store.dispatch).toHaveBeenCalledWith('diffs/setInlineDiffViewType', expect.anything());
2019-03-02 22:35:43 +05:30
});
it('calls setParallelDiffViewType when clicking parallel button', () => {
2021-02-22 17:27:13 +05:30
wrapper.find('.js-parallel-diff-button').trigger('click');
2019-03-02 22:35:43 +05:30
2021-04-17 20:07:23 +05:30
expect(store.dispatch).toHaveBeenCalledWith(
'diffs/setParallelDiffViewType',
expect.anything(),
);
2019-03-02 22:35:43 +05:30
});
});
describe('whitespace toggle', () => {
it('does not set as checked when showWhitespace is false', () => {
2021-04-17 20:07:23 +05:30
setup({
storeUpdater: (origStore) =>
Object.assign(origStore.state.diffs, { showWhitespace: false }),
2019-03-02 22:35:43 +05:30
});
2021-04-17 20:07:23 +05:30
expect(wrapper.findByTestId('show-whitespace').element.checked).toBe(false);
2019-03-02 22:35:43 +05:30
});
it('sets as checked when showWhitespace is true', () => {
2021-04-17 20:07:23 +05:30
setup({
storeUpdater: (origStore) => Object.assign(origStore.state.diffs, { showWhitespace: true }),
2019-03-02 22:35:43 +05:30
});
2021-04-17 20:07:23 +05:30
expect(wrapper.findByTestId('show-whitespace').element.checked).toBe(true);
2019-03-02 22:35:43 +05:30
});
2021-04-17 20:07:23 +05:30
it('calls setShowWhitespace on change', async () => {
const checkbox = wrapper.findByTestId('show-whitespace');
const { checked } = checkbox.element;
2019-03-02 22:35:43 +05:30
2022-08-13 15:12:31 +05:30
await checkbox.setChecked(false);
2019-03-02 22:35:43 +05:30
2021-04-17 20:07:23 +05:30
expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowWhitespace', {
showWhitespace: !checked,
2020-11-24 15:15:51 +05:30
});
2019-03-02 22:35:43 +05:30
});
});
2021-02-22 17:27:13 +05:30
describe('file-by-file toggle', () => {
beforeEach(() => {
jest.spyOn(eventHub, '$emit');
});
it.each`
fileByFile | checked
${true} | ${true}
${false} | ${false}
`(
'sets the checkbox to { checked: $checked } if the fileByFile setting is $fileByFile',
2021-04-17 20:07:23 +05:30
({ fileByFile, checked }) => {
setup({
storeUpdater: (origStore) =>
Object.assign(origStore.state.diffs, { viewDiffsFileByFile: fileByFile }),
2021-02-22 17:27:13 +05:30
});
expect(getFileByFileCheckbox(wrapper).element.checked).toBe(checked);
},
);
it.each`
2021-04-17 20:07:23 +05:30
start | setting
2021-02-22 17:27:13 +05:30
${true} | ${false}
${false} | ${true}
`(
2021-04-17 20:07:23 +05:30
'when the file by file setting starts as $start, toggling the checkbox should call setFileByFile with $setting',
async ({ start, setting }) => {
setup({
storeUpdater: (origStore) =>
Object.assign(origStore.state.diffs, { viewDiffsFileByFile: start }),
2021-02-22 17:27:13 +05:30
});
2022-08-13 15:12:31 +05:30
await getFileByFileCheckbox(wrapper).setChecked(setting);
2021-02-22 17:27:13 +05:30
2021-04-17 20:07:23 +05:30
expect(store.dispatch).toHaveBeenCalledWith('diffs/setFileByFile', {
fileByFile: setting,
});
2021-02-22 17:27:13 +05:30
},
);
});
2019-03-02 22:35:43 +05:30
});