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

222 lines
5.9 KiB
JavaScript
Raw Normal View History

2019-03-02 22:35:43 +05:30
import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import diffModule from '~/diffs/store/modules';
import SettingsDropdown from '~/diffs/components/settings_dropdown.vue';
2021-02-22 17:27:13 +05:30
import {
EVT_VIEW_FILE_BY_FILE,
PARALLEL_DIFF_VIEW_TYPE,
INLINE_DIFF_VIEW_TYPE,
} from '~/diffs/constants';
import eventHub from '~/diffs/event_hub';
2019-03-02 22:35:43 +05:30
2020-01-01 13:55:28 +05:30
const localVue = createLocalVue();
localVue.use(Vuex);
2020-11-24 15:15:51 +05:30
describe('Diff settings dropdown component', () => {
2021-02-22 17:27:13 +05:30
let wrapper;
2019-03-02 22:35:43 +05:30
let vm;
let actions;
function createComponent(extendStore = () => {}) {
const store = new Vuex.Store({
modules: {
diffs: {
namespaced: true,
actions,
state: diffModule().state,
getters: diffModule().getters,
},
},
});
extendStore(store);
2021-02-22 17:27:13 +05:30
wrapper = mount(SettingsDropdown, {
2019-03-02 22:35:43 +05:30
localVue,
store,
});
2021-02-22 17:27:13 +05:30
vm = wrapper.vm;
}
function getFileByFileCheckbox(vueWrapper) {
return vueWrapper.find('[data-testid="file-by-file"]');
2019-03-02 22:35:43 +05:30
}
beforeEach(() => {
actions = {
2020-03-13 15:44:24 +05:30
setInlineDiffViewType: jest.fn(),
setParallelDiffViewType: jest.fn(),
setRenderTreeList: jest.fn(),
setShowWhitespace: jest.fn(),
2019-03-02 22:35:43 +05:30
};
});
afterEach(() => {
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', () => {
createComponent();
2021-02-22 17:27:13 +05:30
wrapper.find('.js-list-view').trigger('click');
2019-03-02 22:35:43 +05:30
2020-11-24 15:15:51 +05:30
expect(actions.setRenderTreeList).toHaveBeenCalledWith(expect.anything(), false);
2019-03-02 22:35:43 +05:30
});
it('tree view button dispatches setRenderTreeList with true', () => {
createComponent();
2021-02-22 17:27:13 +05:30
wrapper.find('.js-tree-view').trigger('click');
2019-03-02 22:35:43 +05:30
2020-11-24 15:15:51 +05:30
expect(actions.setRenderTreeList).toHaveBeenCalledWith(expect.anything(), 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', () => {
2019-03-02 22:35:43 +05:30
createComponent(store => {
Object.assign(store.state.diffs, {
renderTreeList: false,
});
});
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', () => {
2019-03-02 22:35:43 +05:30
createComponent(store => {
Object.assign(store.state.diffs, {
renderTreeList: true,
});
});
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', () => {
2019-03-02 22:35:43 +05:30
createComponent(store => {
Object.assign(store.state.diffs, {
diffViewType: INLINE_DIFF_VIEW_TYPE,
});
});
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', () => {
2019-03-02 22:35:43 +05:30
createComponent(store => {
Object.assign(store.state.diffs, {
diffViewType: PARALLEL_DIFF_VIEW_TYPE,
});
});
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', () => {
createComponent();
2021-02-22 17:27:13 +05:30
wrapper.find('.js-inline-diff-button').trigger('click');
2019-03-02 22:35:43 +05:30
expect(actions.setInlineDiffViewType).toHaveBeenCalled();
});
it('calls setParallelDiffViewType when clicking parallel button', () => {
createComponent();
2021-02-22 17:27:13 +05:30
wrapper.find('.js-parallel-diff-button').trigger('click');
2019-03-02 22:35:43 +05:30
expect(actions.setParallelDiffViewType).toHaveBeenCalled();
});
});
describe('whitespace toggle', () => {
it('does not set as checked when showWhitespace is false', () => {
createComponent(store => {
Object.assign(store.state.diffs, {
showWhitespace: false,
});
});
2021-02-22 17:27:13 +05:30
expect(wrapper.find('#show-whitespace').element.checked).toBe(false);
2019-03-02 22:35:43 +05:30
});
it('sets as checked when showWhitespace is true', () => {
createComponent(store => {
Object.assign(store.state.diffs, {
showWhitespace: true,
});
});
2021-02-22 17:27:13 +05:30
expect(wrapper.find('#show-whitespace').element.checked).toBe(true);
2019-03-02 22:35:43 +05:30
});
it('calls setShowWhitespace on change', () => {
createComponent();
2021-02-22 17:27:13 +05:30
const checkbox = wrapper.find('#show-whitespace');
2019-03-02 22:35:43 +05:30
checkbox.element.checked = true;
checkbox.trigger('change');
2020-11-24 15:15:51 +05:30
expect(actions.setShowWhitespace).toHaveBeenCalledWith(expect.anything(), {
showWhitespace: true,
pushState: true,
});
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',
async ({ fileByFile, checked }) => {
createComponent(store => {
Object.assign(store.state.diffs, {
viewDiffsFileByFile: fileByFile,
});
});
await vm.$nextTick();
expect(getFileByFileCheckbox(wrapper).element.checked).toBe(checked);
},
);
it.each`
start | emit
${true} | ${false}
${false} | ${true}
`(
'when the file by file setting starts as $start, toggling the checkbox should emit an event set to $emit',
async ({ start, emit }) => {
createComponent(store => {
Object.assign(store.state.diffs, {
viewDiffsFileByFile: start,
});
});
await vm.$nextTick();
getFileByFileCheckbox(wrapper).trigger('click');
await vm.$nextTick();
expect(eventHub.$emit).toHaveBeenCalledWith(EVT_VIEW_FILE_BY_FILE, { setting: emit });
},
);
});
2019-03-02 22:35:43 +05:30
});