debian-mirror-gitlab/spec/frontend/diffs/components/diff_file_spec.js
2022-04-04 11:22:00 +05:30

558 lines
17 KiB
JavaScript

import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import DiffContentComponent from 'jh_else_ce/diffs/components/diff_content.vue';
import DiffFileComponent from '~/diffs/components/diff_file.vue';
import DiffFileHeaderComponent from '~/diffs/components/diff_file_header.vue';
import {
EVT_EXPAND_ALL_FILES,
EVT_PERF_MARK_DIFF_FILES_END,
EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN,
} from '~/diffs/constants';
import eventHub from '~/diffs/event_hub';
import createDiffsStore from '~/diffs/store/modules';
import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
import axios from '~/lib/utils/axios_utils';
import { scrollToElement } from '~/lib/utils/common_utils';
import httpStatus from '~/lib/utils/http_status';
import createNotesStore from '~/notes/stores/modules';
import diffFileMockDataReadable from '../mock_data/diff_file';
import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
jest.mock('~/lib/utils/common_utils');
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, options = {}, props = {} }) {
Vue.use(Vuex);
const store = new Vuex.Store({
...createNotesStore(),
modules: {
diffs: createDiffsStore(),
},
});
store.state.diffs.diffFiles = [file];
const wrapper = shallowMount(DiffFileComponent, {
store,
propsData: {
file,
canCurrentUserFork: false,
viewDiffsFileByFile: false,
isFirstFile: first,
isLastFile: last,
...props,
},
...options,
});
return {
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 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;
let axiosMock;
beforeEach(() => {
axiosMock = new MockAdapter(axios);
({ wrapper, store } = createComponent({ file: getReadableFile() }));
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
axiosMock.restore();
});
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 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 nextTick(); // Wait for store updates to flow into the component
toggleFile(wrapper);
await nextTick(); // Wait for the load to resolve
await nextTick(); // Wait for the idleCallback
await 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);
});
});
});
describe('template', () => {
it('should render component with file header, file content components', async () => {
const el = wrapper.vm.$el;
const { file_hash } = wrapper.vm.file;
expect(el.id).toEqual(file_hash);
expect(el.classList.contains('diff-file')).toEqual(true);
expect(el.querySelectorAll('.diff-content.hidden').length).toEqual(0);
expect(el.querySelector('.js-file-title')).toBeDefined();
expect(wrapper.find(DiffFileHeaderComponent).exists()).toBe(true);
expect(el.querySelector('.js-syntax-highlight')).toBeDefined();
markFileToBeRendered(store);
await nextTick();
expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
});
});
describe('computed', () => {
describe('showLocalFileReviews', () => {
let gon;
function setLoggedIn(bool) {
window.gon.current_user_id = bool;
}
beforeAll(() => {
gon = window.gon;
window.gon = {};
});
afterEach(() => {
window.gon = gon;
});
it.each`
loggedIn | bool
${true} | ${true}
${false} | ${false}
`('should be $bool when { userIsLoggedIn: $loggedIn }', ({ loggedIn, bool }) => {
setLoggedIn(loggedIn);
({ wrapper } = createComponent({
props: {
file: store.state.diffs.diffFiles[0],
},
}));
expect(wrapper.vm.showLocalFileReviews).toBe(bool);
});
});
});
describe('collapsing', () => {
describe(`\`${EVT_EXPAND_ALL_FILES}\` event`, () => {
beforeEach(() => {
jest.spyOn(wrapper.vm, 'handleToggle').mockImplementation(() => {});
});
it('performs the normal file toggle when the file is collapsed', async () => {
makeFileAutomaticallyCollapsed(store);
await nextTick();
eventHub.$emit(EVT_EXPAND_ALL_FILES);
expect(wrapper.vm.handleToggle).toHaveBeenCalledTimes(1);
});
it('does nothing when the file is not collapsed', async () => {
eventHub.$emit(EVT_EXPAND_ALL_FILES);
await nextTick();
expect(wrapper.vm.handleToggle).not.toHaveBeenCalled();
});
});
describe('user collapsed', () => {
beforeEach(() => {
makeFileManuallyCollapsed(store);
});
it('should not have any content at all', async () => {
await nextTick();
expect(findDiffContentArea(wrapper).element.children.length).toBe(0);
});
it('should not have the class `has-body` to present the header differently', () => {
expect(wrapper.classes('has-body')).toBe(false);
});
});
describe('automatically collapsed', () => {
beforeEach(() => {
makeFileAutomaticallyCollapsed(store);
});
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);
});
it('should style the component so that it `.has-body` for layout purposes', () => {
expect(wrapper.classes('has-body')).toBe(true);
});
});
describe('not collapsed', () => {
beforeEach(() => {
makeFileOpenByDefault(store);
markFileToBeRendered(store);
});
it('should have the file content', async () => {
expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
});
it('should style the component so that it `.has-body` for layout purposes', () => {
expect(wrapper.classes('has-body')).toBe(true);
});
});
describe('toggle', () => {
it('should update store state', async () => {
jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation(() => {});
toggleFile(wrapper);
expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/setFileCollapsedByUser', {
filePath: wrapper.vm.file.file_path,
collapsed: true,
});
});
describe('scoll-to-top of file after collapse', () => {
beforeEach(() => {
jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation(() => {});
});
it("scrolls to the top when the file is open, the users initiates the collapse, and there's a content block to scroll to", async () => {
makeFileOpenByDefault(store);
await nextTick();
toggleFile(wrapper);
expect(scrollToElement).toHaveBeenCalled();
});
it('does not scroll when the content block is missing', async () => {
makeFileOpenByDefault(store);
await nextTick();
findDiffContentArea(wrapper).element.remove();
toggleFile(wrapper);
expect(scrollToElement).not.toHaveBeenCalled();
});
it("does not scroll if the user doesn't initiate the file collapse", async () => {
makeFileOpenByDefault(store);
await nextTick();
wrapper.vm.handleToggle();
expect(scrollToElement).not.toHaveBeenCalled();
});
it('does not scroll if the file is already collapsed', async () => {
makeFileManuallyCollapsed(store);
await nextTick();
toggleFile(wrapper);
expect(scrollToElement).not.toHaveBeenCalled();
});
});
describe('fetch collapsed diff', () => {
const prepFile = async (inlineLines, parallelLines, readableText) => {
forceHasDiff({
store,
inlineLines,
parallelLines,
readableText,
});
await nextTick();
toggleFile(wrapper);
};
beforeEach(() => {
jest.spyOn(wrapper.vm, 'requestDiff').mockImplementation(() => {});
makeFileAutomaticallyCollapsed(store);
});
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();
},
);
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);
expect(wrapper.vm.requestDiff).toHaveBeenCalled();
},
);
});
});
describe('loading', () => {
it('should have loading icon while loading a collapsed diffs', async () => {
const { load_collapsed_diff_url } = store.state.diffs.diffFiles[0];
axiosMock.onGet(load_collapsed_diff_url).reply(httpStatus.OK, getReadableFile());
makeFileAutomaticallyCollapsed(store);
wrapper.vm.requestDiff();
await nextTick();
expect(findLoader(wrapper).exists()).toBe(true);
});
});
describe('general (other) collapsed', () => {
it('should be expandable for unreadable files', async () => {
({ wrapper, store } = createComponent({ file: getUnreadableFile() }));
makeFileAutomaticallyCollapsed(store);
await nextTick();
expect(findDiffContentArea(wrapper).html()).toContain(
'Files with large changes are collapsed by default.',
);
expect(findToggleButton(wrapper).exists()).toBe(true);
});
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 nextTick();
expect(wrapper.classes('has-body')).toBe(true);
expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
expect(wrapper.find(DiffContentComponent).isVisible()).toBe(true);
},
);
});
});
describe('too large diff', () => {
it('should have too large warning and blob link', async () => {
const file = store.state.diffs.diffFiles[0];
const BLOB_LINK = '/file/view/path';
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',
},
});
await nextTick();
const button = wrapper.find('[data-testid="blob-button"]');
expect(wrapper.text()).toContain('Changes are too large to be shown.');
expect(button.html()).toContain('View file @');
expect(button.attributes('href')).toBe('/file/view/path');
});
});
it('loads collapsed file on mounted when single file mode is enabled', async () => {
wrapper.destroy();
const file = {
...getReadableFile(),
load_collapsed_diff_url: '/diff_for_path',
highlighted_diff_lines: [],
parallel_diff_lines: [],
viewer: { name: 'collapsed', automaticallyCollapsed: true },
};
axiosMock.onGet(file.load_collapsed_diff_url).reply(httpStatus.OK, getReadableFile());
({ wrapper, store } = createComponent({ file, props: { viewDiffsFileByFile: true } }));
await nextTick();
expect(findLoader(wrapper).exists()).toBe(true);
});
describe('merge conflicts', () => {
beforeEach(() => {
wrapper.destroy();
});
it('does not render conflict alert', () => {
const file = {
...getReadableFile(),
conflict_type: null,
renderIt: true,
};
({ wrapper, store } = createComponent({ file }));
expect(wrapper.find('[data-testid="conflictsAlert"]').exists()).toBe(false);
});
it('renders conflict alert when conflict_type is present', () => {
const file = {
...getReadableFile(),
conflict_type: 'both_modified',
renderIt: true,
};
({ wrapper, store } = createComponent({ file }));
expect(wrapper.find('[data-testid="conflictsAlert"]').exists()).toBe(true);
});
});
});