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

423 lines
14 KiB
JavaScript
Raw Normal View History

2021-01-29 00:20:46 +05:30
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import createDiffsStore from '~/diffs/store/modules';
import createNotesStore from '~/notes/stores/modules';
2019-12-26 22:10:19 +05:30
import diffFileMockDataReadable from '../mock_data/diff_file';
import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
import DiffFileComponent from '~/diffs/components/diff_file.vue';
import DiffFileHeaderComponent from '~/diffs/components/diff_file_header.vue';
import DiffContentComponent from '~/diffs/components/diff_content.vue';
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
import eventHub from '~/diffs/event_hub';
import {
EVT_EXPAND_ALL_FILES,
EVT_PERF_MARK_DIFF_FILES_END,
EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN,
} from '~/diffs/constants';
import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
function changeViewer(store, index, { automaticallyCollapsed, manuallyCollapsed, name }) {
const file = store.state.diffs.diffFiles[index];
const newViewer = {
...file.viewer,
};
if (automaticallyCollapsed !== undefined) {
newViewer.automaticallyCollapsed = automaticallyCollapsed;
}
if (manuallyCollapsed !== undefined) {
newViewer.manuallyCollapsed = manuallyCollapsed;
}
if (name !== undefined) {
newViewer.name = name;
}
Object.assign(file, {
viewer: newViewer,
});
}
function forceHasDiff({ store, index = 0, inlineLines, parallelLines, readableText }) {
const file = store.state.diffs.diffFiles[index];
Object.assign(file, {
highlighted_diff_lines: inlineLines,
parallel_diff_lines: parallelLines,
blob: {
...file.blob,
readable_text: readableText,
},
});
}
function markFileToBeRendered(store, index = 0) {
const file = store.state.diffs.diffFiles[index];
Object.assign(file, {
renderIt: true,
});
}
function createComponent({ file, first = false, last = false }) {
const localVue = createLocalVue();
localVue.use(Vuex);
const store = new Vuex.Store({
...createNotesStore(),
modules: {
diffs: createDiffsStore(),
},
});
store.state.diffs.diffFiles = [file];
const wrapper = shallowMount(DiffFileComponent, {
store,
localVue,
propsData: {
file,
2018-11-08 19:23:39 +05:30
canCurrentUserFork: false,
2020-07-28 23:09:34 +05:30
viewDiffsFileByFile: false,
2021-01-29 00:20:46 +05:30
isFirstFile: first,
isLastFile: last,
},
});
return {
localVue,
wrapper,
store,
};
}
const findDiffHeader = wrapper => wrapper.find(DiffFileHeaderComponent);
const findDiffContentArea = wrapper => wrapper.find('[data-testid="content-area"]');
const findLoader = wrapper => wrapper.find('[data-testid="loader-icon"]');
const findToggleButton = wrapper => wrapper.find('[data-testid="expand-button"]');
const toggleFile = wrapper => findDiffHeader(wrapper).vm.$emit('toggleFile');
const isDisplayNone = element => element.style.display === 'none';
const getReadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataReadable));
const getUnreadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataUnreadable));
const makeFileAutomaticallyCollapsed = (store, index = 0) =>
changeViewer(store, index, { automaticallyCollapsed: true, manuallyCollapsed: null });
const makeFileOpenByDefault = (store, index = 0) =>
changeViewer(store, index, { automaticallyCollapsed: false, manuallyCollapsed: null });
const makeFileManuallyCollapsed = (store, index = 0) =>
changeViewer(store, index, { automaticallyCollapsed: false, manuallyCollapsed: true });
const changeViewerType = (store, newType, index = 0) =>
changeViewer(store, index, { name: diffViewerModes[newType] });
describe('DiffFile', () => {
let wrapper;
let store;
beforeEach(() => {
({ wrapper, store } = createComponent({ file: getReadableFile() }));
2018-11-08 19:23:39 +05:30
});
2019-10-12 21:52:04 +05:30
afterEach(() => {
2021-01-29 00:20:46 +05:30
wrapper.destroy();
wrapper = null;
2019-10-12 21:52:04 +05:30
});
2021-01-29 00:20:46 +05:30
describe('bus events', () => {
beforeEach(() => {
jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
});
describe('during mount', () => {
it.each`
first | last | events | file
${false} | ${false} | ${[]} | ${{ inlineLines: [], parallelLines: [], readableText: true }}
${true} | ${true} | ${[]} | ${{ inlineLines: [], parallelLines: [], readableText: true }}
${true} | ${false} | ${[EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN]} | ${false}
${false} | ${true} | ${[EVT_PERF_MARK_DIFF_FILES_END]} | ${false}
${true} | ${true} | ${[EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN, EVT_PERF_MARK_DIFF_FILES_END]} | ${false}
`(
'emits the events $events based on the file and its position ({ first: $first, last: $last }) among all files',
async ({ file, first, last, events }) => {
if (file) {
forceHasDiff({ store, ...file });
}
({ wrapper, store } = createComponent({
file: store.state.diffs.diffFiles[0],
first,
last,
}));
await wrapper.vm.$nextTick();
expect(eventHub.$emit).toHaveBeenCalledTimes(events.length);
events.forEach(event => {
expect(eventHub.$emit).toHaveBeenCalledWith(event);
});
},
);
});
describe('after loading the diff', () => {
it('indicates that it loaded the file', async () => {
forceHasDiff({ store, inlineLines: [], parallelLines: [], readableText: true });
({ wrapper, store } = createComponent({
file: store.state.diffs.diffFiles[0],
first: true,
last: true,
}));
jest.spyOn(wrapper.vm, 'loadCollapsedDiff').mockResolvedValue(getReadableFile());
jest.spyOn(window, 'requestIdleCallback').mockImplementation(fn => fn());
makeFileAutomaticallyCollapsed(store);
await wrapper.vm.$nextTick(); // Wait for store updates to flow into the component
toggleFile(wrapper);
await wrapper.vm.$nextTick(); // Wait for the load to resolve
await wrapper.vm.$nextTick(); // Wait for the idleCallback
await wrapper.vm.$nextTick(); // Wait for nextTick inside postRender
expect(eventHub.$emit).toHaveBeenCalledTimes(2);
expect(eventHub.$emit).toHaveBeenCalledWith(EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN);
expect(eventHub.$emit).toHaveBeenCalledWith(EVT_PERF_MARK_DIFF_FILES_END);
});
});
});
2020-04-08 14:13:33 +05:30
2018-11-08 19:23:39 +05:30
describe('template', () => {
2021-01-29 00:20:46 +05:30
it('should render component with file header, file content components', async () => {
const el = wrapper.vm.$el;
const { file_hash } = wrapper.vm.file;
2018-11-08 19:23:39 +05:30
2019-02-15 15:39:39 +05:30
expect(el.id).toEqual(file_hash);
2018-11-08 19:23:39 +05:30
expect(el.classList.contains('diff-file')).toEqual(true);
2018-11-20 20:47:30 +05:30
2018-11-08 19:23:39 +05:30
expect(el.querySelectorAll('.diff-content.hidden').length).toEqual(0);
expect(el.querySelector('.js-file-title')).toBeDefined();
2021-01-29 00:20:46 +05:30
expect(wrapper.find(DiffFileHeaderComponent).exists()).toBe(true);
2018-11-08 19:23:39 +05:30
expect(el.querySelector('.js-syntax-highlight')).toBeDefined();
2018-11-20 20:47:30 +05:30
2021-01-29 00:20:46 +05:30
markFileToBeRendered(store);
await wrapper.vm.$nextTick();
2018-11-20 20:47:30 +05:30
2021-01-29 00:20:46 +05:30
expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
2020-03-13 15:44:24 +05:30
});
2021-01-29 00:20:46 +05:30
});
2020-03-13 15:44:24 +05:30
2021-01-29 00:20:46 +05:30
describe('collapsing', () => {
describe(`\`${EVT_EXPAND_ALL_FILES}\` event`, () => {
beforeEach(() => {
jest.spyOn(wrapper.vm, 'handleToggle').mockImplementation(() => {});
});
2020-03-13 15:44:24 +05:30
2021-01-29 00:20:46 +05:30
it('performs the normal file toggle when the file is collapsed', async () => {
makeFileAutomaticallyCollapsed(store);
2020-03-13 15:44:24 +05:30
2021-01-29 00:20:46 +05:30
await wrapper.vm.$nextTick();
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
eventHub.$emit(EVT_EXPAND_ALL_FILES);
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.handleToggle).toHaveBeenCalledTimes(1);
2018-11-08 19:23:39 +05:30
});
2021-01-29 00:20:46 +05:30
it('does nothing when the file is not collapsed', async () => {
eventHub.$emit(EVT_EXPAND_ALL_FILES);
2018-11-20 20:47:30 +05:30
2021-01-29 00:20:46 +05:30
await wrapper.vm.$nextTick();
2018-11-20 20:47:30 +05:30
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.handleToggle).not.toHaveBeenCalled();
2018-11-20 20:47:30 +05:30
});
2021-01-29 00:20:46 +05:30
});
2018-11-20 20:47:30 +05:30
2021-01-29 00:20:46 +05:30
describe('user collapsed', () => {
beforeEach(() => {
makeFileManuallyCollapsed(store);
});
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
it('should not have any content at all', async () => {
await wrapper.vm.$nextTick();
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
Array.from(findDiffContentArea(wrapper).element.children).forEach(child => {
expect(isDisplayNone(child)).toBe(true);
2018-11-08 19:23:39 +05:30
});
});
2021-01-29 00:20:46 +05:30
it('should not have the class `has-body` to present the header differently', () => {
expect(wrapper.classes('has-body')).toBe(false);
});
});
2019-12-26 22:10:19 +05:30
2021-01-29 00:20:46 +05:30
describe('automatically collapsed', () => {
beforeEach(() => {
makeFileAutomaticallyCollapsed(store);
});
2019-12-26 22:10:19 +05:30
2021-01-29 00:20:46 +05:30
it('should show the collapsed file warning with expansion button', () => {
expect(findDiffContentArea(wrapper).html()).toContain(
'Files with large changes are collapsed by default.',
);
expect(findToggleButton(wrapper).exists()).toBe(true);
});
2019-12-26 22:10:19 +05:30
2021-01-29 00:20:46 +05:30
it('should style the component so that it `.has-body` for layout purposes', () => {
expect(wrapper.classes('has-body')).toBe(true);
2019-12-26 22:10:19 +05:30
});
2021-01-29 00:20:46 +05:30
});
2019-12-26 22:10:19 +05:30
2021-01-29 00:20:46 +05:30
describe('not collapsed', () => {
beforeEach(() => {
makeFileOpenByDefault(store);
markFileToBeRendered(store);
});
2019-02-15 15:39:39 +05:30
2021-01-29 00:20:46 +05:30
it('should have the file content', async () => {
expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
});
2019-02-15 15:39:39 +05:30
2021-01-29 00:20:46 +05:30
it('should style the component so that it `.has-body` for layout purposes', () => {
expect(wrapper.classes('has-body')).toBe(true);
2019-02-15 15:39:39 +05:30
});
2021-01-29 00:20:46 +05:30
});
2019-02-15 15:39:39 +05:30
2021-01-29 00:20:46 +05:30
describe('toggle', () => {
it('should update store state', async () => {
jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation(() => {});
2019-02-15 15:39:39 +05:30
2021-01-29 00:20:46 +05:30
toggleFile(wrapper);
2019-02-15 15:39:39 +05:30
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/setFileCollapsedByUser', {
filePath: wrapper.vm.file.file_path,
collapsed: true,
2019-02-15 15:39:39 +05:30
});
});
2021-01-29 00:20:46 +05:30
describe('fetch collapsed diff', () => {
const prepFile = async (inlineLines, parallelLines, readableText) => {
forceHasDiff({
store,
inlineLines,
parallelLines,
readableText,
});
await wrapper.vm.$nextTick();
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
toggleFile(wrapper);
};
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
beforeEach(() => {
jest.spyOn(wrapper.vm, 'requestDiff').mockImplementation(() => {});
makeFileAutomaticallyCollapsed(store);
2018-11-08 19:23:39 +05:30
});
2019-07-07 11:18:12 +05:30
2021-01-29 00:20:46 +05:30
it.each`
inlineLines | parallelLines | readableText
${[1]} | ${[1]} | ${true}
${[]} | ${[1]} | ${true}
${[1]} | ${[]} | ${true}
${[1]} | ${[1]} | ${false}
${[]} | ${[]} | ${false}
`(
'does not make a request to fetch the diff for a diff file like { inline: $inlineLines, parallel: $parallelLines, readableText: $readableText }',
async ({ inlineLines, parallelLines, readableText }) => {
await prepFile(inlineLines, parallelLines, readableText);
expect(wrapper.vm.requestDiff).not.toHaveBeenCalled();
},
);
2019-07-07 11:18:12 +05:30
2021-01-29 00:20:46 +05:30
it.each`
inlineLines | parallelLines | readableText
${[]} | ${[]} | ${true}
`(
'makes a request to fetch the diff for a diff file like { inline: $inlineLines, parallel: $parallelLines, readableText: $readableText }',
async ({ inlineLines, parallelLines, readableText }) => {
await prepFile(inlineLines, parallelLines, readableText);
2019-07-07 11:18:12 +05:30
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.requestDiff).toHaveBeenCalled();
},
);
});
});
2019-07-07 11:18:12 +05:30
2021-01-29 00:20:46 +05:30
describe('loading', () => {
it('should have loading icon while loading a collapsed diffs', async () => {
makeFileAutomaticallyCollapsed(store);
wrapper.vm.isLoadingCollapsedDiff = true;
await wrapper.vm.$nextTick();
expect(findLoader(wrapper).exists()).toBe(true);
2019-07-07 11:18:12 +05:30
});
2021-01-29 00:20:46 +05:30
});
2019-07-07 11:18:12 +05:30
2021-01-29 00:20:46 +05:30
describe('general (other) collapsed', () => {
it('should be expandable for unreadable files', async () => {
({ wrapper, store } = createComponent({ file: getUnreadableFile() }));
makeFileAutomaticallyCollapsed(store);
2019-07-07 11:18:12 +05:30
2021-01-29 00:20:46 +05:30
await wrapper.vm.$nextTick();
2019-07-07 11:18:12 +05:30
2021-01-29 00:20:46 +05:30
expect(findDiffContentArea(wrapper).html()).toContain(
'Files with large changes are collapsed by default.',
);
expect(findToggleButton(wrapper).exists()).toBe(true);
2019-07-07 11:18:12 +05:30
});
2021-01-29 00:20:46 +05:30
it.each`
mode
${'renamed'}
${'mode_changed'}
`(
'should render the DiffContent component for files whose mode is $mode',
async ({ mode }) => {
makeFileOpenByDefault(store);
markFileToBeRendered(store);
changeViewerType(store, mode);
await wrapper.vm.$nextTick();
expect(wrapper.classes('has-body')).toBe(true);
expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
expect(wrapper.find(DiffContentComponent).isVisible()).toBe(true);
},
);
2018-11-08 19:23:39 +05:30
});
});
describe('too large diff', () => {
2021-01-29 00:20:46 +05:30
it('should have too large warning and blob link', async () => {
const file = store.state.diffs.diffFiles[0];
2018-11-08 19:23:39 +05:30
const BLOB_LINK = '/file/view/path';
2018-12-13 13:39:08 +05:30
2021-01-29 00:20:46 +05:30
Object.assign(store.state.diffs.diffFiles[0], {
...file,
view_path: BLOB_LINK,
renderIt: true,
viewer: {
...file.viewer,
error: diffViewerErrors.too_large,
error_message: 'This source diff could not be displayed because it is too large',
},
2018-11-08 19:23:39 +05:30
});
2018-12-13 13:39:08 +05:30
2021-01-29 00:20:46 +05:30
await wrapper.vm.$nextTick();
2019-12-26 22:10:19 +05:30
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.$el.innerText).toContain(
'This source diff could not be displayed because it is too large',
);
2019-12-26 22:10:19 +05:30
});
2018-12-13 13:39:08 +05:30
});
2018-11-08 19:23:39 +05:30
});