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

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

745 lines
24 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { GlLoadingIcon, GlPagination } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
2020-04-08 14:13:33 +05:30
import MockAdapter from 'axios-mock-adapter';
2020-01-01 13:55:28 +05:30
import Mousetrap from 'mousetrap';
2021-03-11 19:13:27 +05:30
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
2021-10-27 15:23:28 +05:30
import setWindowLocation from 'helpers/set_window_location_helper';
2021-03-11 19:13:27 +05:30
import { TEST_HOST } from 'spec/test_constants';
2018-12-05 23:21:45 +05:30
import App from '~/diffs/components/app.vue';
2019-07-07 11:18:12 +05:30
import CommitWidget from '~/diffs/components/commit_widget.vue';
2021-03-11 19:13:27 +05:30
import CompareVersions from '~/diffs/components/compare_versions.vue';
import DiffFile from '~/diffs/components/diff_file.vue';
import NoChanges from '~/diffs/components/no_changes.vue';
2019-07-07 11:18:12 +05:30
import TreeList from '~/diffs/components/tree_list.vue';
2021-09-30 23:02:18 +05:30
import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
2021-03-11 19:13:27 +05:30
import axios from '~/lib/utils/axios_utils';
2023-04-23 21:23:45 +05:30
import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
2021-03-11 19:13:27 +05:30
import * as urlUtils from '~/lib/utils/url_utility';
2022-08-13 15:12:31 +05:30
import { stubPerformanceWebAPI } from 'helpers/performance';
2021-03-11 19:13:27 +05:30
import createDiffsStore from '../create_diffs_store';
import diffsMockData from '../mock_data/merge_request_diffs';
2021-02-22 17:27:13 +05:30
2019-07-07 11:18:12 +05:30
const mergeRequestDiff = { version_index: 1 };
2020-04-08 14:13:33 +05:30
const TEST_ENDPOINT = `${TEST_HOST}/diff/endpoint`;
2021-02-22 17:27:13 +05:30
const COMMIT_URL = `${TEST_HOST}/COMMIT/OLD`;
const UPDATED_COMMIT_URL = `${TEST_HOST}/COMMIT/NEW`;
2018-12-05 23:21:45 +05:30
2021-03-08 18:12:59 +05:30
Vue.use(Vuex);
2020-11-24 15:15:51 +05:30
function getCollapsedFilesWarning(wrapper) {
2022-10-11 01:57:18 +05:30
return wrapper.findComponent(CollapsedFilesWarning);
2020-11-24 15:15:51 +05:30
}
2018-12-05 23:21:45 +05:30
describe('diffs/components/app', () => {
const oldMrTabs = window.mrTabs;
2019-02-15 15:39:39 +05:30
let store;
2019-07-07 11:18:12 +05:30
let wrapper;
2020-04-08 14:13:33 +05:30
let mock;
2018-12-05 23:21:45 +05:30
2020-05-24 23:13:21 +05:30
function createComponent(props = {}, extendStore = () => {}, provisions = {}) {
const provide = {
...provisions,
glFeatures: {
...(provisions.glFeatures || {}),
},
};
2019-02-15 15:39:39 +05:30
store = createDiffsStore();
2018-12-05 23:21:45 +05:30
store.state.diffs.isLoading = false;
2020-10-24 23:57:45 +05:30
store.state.diffs.isTreeLoaded = true;
2018-12-05 23:21:45 +05:30
2019-02-15 15:39:39 +05:30
extendStore(store);
2021-03-08 18:12:59 +05:30
wrapper = shallowMount(App, {
2019-02-15 15:39:39 +05:30
propsData: {
2020-04-08 14:13:33 +05:30
endpoint: TEST_ENDPOINT,
2020-01-01 13:55:28 +05:30
endpointMetadata: `${TEST_HOST}/diff/endpointMetadata`,
endpointBatch: `${TEST_HOST}/diff/endpointBatch`,
2023-05-27 22:25:52 +05:30
endpointDiffForPath: TEST_ENDPOINT,
2020-04-08 14:13:33 +05:30
endpointCoverage: `${TEST_HOST}/diff/endpointCoverage`,
2021-04-29 21:17:54 +05:30
endpointCodequality: '',
2018-12-05 23:21:45 +05:30
projectPath: 'namespace/project',
currentUser: {},
2019-02-15 15:39:39 +05:30
changesEmptyStateIllustration: '',
2019-09-04 21:01:54 +05:30
dismissEndpoint: '',
showSuggestPopover: true,
2021-02-22 17:27:13 +05:30
fileByFileUserPreference: false,
2019-02-15 15:39:39 +05:30
...props,
2018-12-05 23:21:45 +05:30
},
2020-05-24 23:13:21 +05:30
provide,
2019-02-15 15:39:39 +05:30
store,
2018-12-05 23:21:45 +05:30
});
2019-02-15 15:39:39 +05:30
}
beforeEach(() => {
2022-08-13 15:12:31 +05:30
stubPerformanceWebAPI();
2019-02-15 15:39:39 +05:30
// setup globals (needed for component to mount :/)
2020-04-08 14:13:33 +05:30
window.mrTabs = {
resetViewContainer: jest.fn(),
};
window.mrTabs.expandViewContainer = jest.fn();
mock = new MockAdapter(axios);
2023-04-23 21:23:45 +05:30
mock.onGet(TEST_ENDPOINT).reply(HTTP_STATUS_OK, {});
2018-12-05 23:21:45 +05:30
});
afterEach(() => {
// reset globals
window.mrTabs = oldMrTabs;
// reset component
2020-05-24 23:13:21 +05:30
if (wrapper) {
wrapper.destroy();
wrapper = null;
}
2020-04-08 14:13:33 +05:30
mock.restore();
2019-07-07 11:18:12 +05:30
});
2020-01-01 13:55:28 +05:30
describe('fetch diff methods', () => {
2021-03-08 18:12:59 +05:30
beforeEach(() => {
2020-03-13 15:44:24 +05:30
const fetchResolver = () => {
store.state.diffs.retrievingBatches = false;
2023-03-17 16:20:25 +05:30
store.state.notes.doneFetchingBatchDiscussions = true;
2020-03-13 15:44:24 +05:30
store.state.notes.discussions = 'test';
return Promise.resolve({ real_size: 100 });
};
2021-03-08 18:12:59 +05:30
jest.spyOn(window, 'requestIdleCallback').mockImplementation((fn) => fn());
2020-01-01 13:55:28 +05:30
createComponent();
2020-04-08 14:13:33 +05:30
jest.spyOn(wrapper.vm, 'fetchDiffFilesMeta').mockImplementation(fetchResolver);
jest.spyOn(wrapper.vm, 'fetchDiffFilesBatch').mockImplementation(fetchResolver);
jest.spyOn(wrapper.vm, 'fetchCoverageFiles').mockImplementation(fetchResolver);
jest.spyOn(wrapper.vm, 'setDiscussions').mockImplementation(() => {});
jest.spyOn(wrapper.vm, 'unwatchDiscussions').mockImplementation(() => {});
jest.spyOn(wrapper.vm, 'unwatchRetrievingBatches').mockImplementation(() => {});
2020-03-13 15:44:24 +05:30
store.state.diffs.retrievingBatches = true;
store.state.diffs.diffFiles = [];
2021-03-08 18:12:59 +05:30
return nextTick();
2020-03-13 15:44:24 +05:30
});
2021-03-08 18:12:59 +05:30
it('calls batch methods if diffsBatchLoad is enabled, and not latest version', async () => {
2020-03-13 15:44:24 +05:30
expect(wrapper.vm.diffFilesLength).toEqual(0);
2020-01-01 13:55:28 +05:30
wrapper.vm.fetchData(false);
2021-03-08 18:12:59 +05:30
await nextTick();
expect(wrapper.vm.fetchDiffFilesMeta).toHaveBeenCalled();
expect(wrapper.vm.fetchDiffFilesBatch).toHaveBeenCalled();
expect(wrapper.vm.fetchCoverageFiles).toHaveBeenCalled();
expect(wrapper.vm.unwatchDiscussions).toHaveBeenCalled();
expect(wrapper.vm.diffFilesLength).toBe(100);
expect(wrapper.vm.unwatchRetrievingBatches).toHaveBeenCalled();
2020-01-01 13:55:28 +05:30
});
2021-03-08 18:12:59 +05:30
it('calls batch methods if diffsBatchLoad is enabled, and latest version', async () => {
2020-03-13 15:44:24 +05:30
expect(wrapper.vm.diffFilesLength).toEqual(0);
2020-01-01 13:55:28 +05:30
wrapper.vm.fetchData(false);
2021-03-08 18:12:59 +05:30
await nextTick();
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(wrapper.vm.fetchDiffFilesMeta).toHaveBeenCalled();
expect(wrapper.vm.fetchDiffFilesBatch).toHaveBeenCalled();
expect(wrapper.vm.fetchCoverageFiles).toHaveBeenCalled();
expect(wrapper.vm.unwatchDiscussions).toHaveBeenCalled();
expect(wrapper.vm.diffFilesLength).toBe(100);
expect(wrapper.vm.unwatchRetrievingBatches).toHaveBeenCalled();
2019-07-07 11:18:12 +05:30
});
});
2022-11-25 23:54:43 +05:30
describe('fetch diff with no changes', () => {
beforeEach(() => {
const fetchResolver = () => {
store.state.diffs.retrievingBatches = false;
return Promise.resolve({ real_size: null });
};
createComponent();
jest.spyOn(wrapper.vm, 'fetchDiffFilesMeta').mockImplementation(fetchResolver);
return nextTick();
});
it('diff counter to be 0 after fetch', async () => {
expect(wrapper.vm.diffFilesLength).toEqual(0);
wrapper.vm.fetchData(false);
await nextTick();
expect(wrapper.vm.fetchDiffFilesMeta).toHaveBeenCalled();
expect(wrapper.vm.diffFilesLength).toEqual(0);
});
});
2021-04-29 21:17:54 +05:30
describe('codequality diff', () => {
it('does not fetch code quality data on FOSS', async () => {
createComponent();
jest.spyOn(wrapper.vm, 'fetchCodequality');
wrapper.vm.fetchData(false);
expect(wrapper.vm.fetchCodequality).not.toHaveBeenCalled();
});
});
2019-07-07 11:18:12 +05:30
it('displays loading icon on loading', () => {
createComponent({}, ({ state }) => {
state.diffs.isLoading = true;
2020-01-01 13:55:28 +05:30
});
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
2020-01-01 13:55:28 +05:30
});
it('displays loading icon on batch loading', () => {
createComponent({}, ({ state }) => {
2021-11-11 11:23:49 +05:30
state.diffs.batchLoadingState = 'loading';
2019-07-07 11:18:12 +05:30
});
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
2019-07-07 11:18:12 +05:30
});
it('displays diffs container when not loading', () => {
createComponent();
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
2020-11-24 15:15:51 +05:30
expect(wrapper.find('#diffs').exists()).toBe(true);
2018-12-05 23:21:45 +05:30
});
it('does not show commit info', () => {
2019-02-15 15:39:39 +05:30
createComponent();
2020-11-24 15:15:51 +05:30
expect(wrapper.find('.blob-commit-info').exists()).toBe(false);
2019-07-07 11:18:12 +05:30
});
describe('row highlighting', () => {
beforeEach(() => {
window.location.hash = 'ABC_123';
});
2021-03-08 18:12:59 +05:30
it('sets highlighted row if hash exists in location object', async () => {
2019-07-07 11:18:12 +05:30
createComponent({
shouldShow: true,
});
// Component uses $nextTick so we wait until that has finished
2021-03-08 18:12:59 +05:30
await nextTick();
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(store.state.diffs.highlightedRow).toBe('ABC_123');
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
it('marks current diff file based on currently highlighted row', async () => {
2019-07-07 11:18:12 +05:30
createComponent({
shouldShow: true,
});
// Component uses $nextTick so we wait until that has finished
2021-03-08 18:12:59 +05:30
await nextTick();
expect(store.state.diffs.currentDiffFileId).toBe('ABC');
2019-07-07 11:18:12 +05:30
});
});
describe('resizable', () => {
afterEach(() => {
localStorage.removeItem('mr_tree_list_width');
});
it('sets initial width when no localStorage has been set', () => {
createComponent();
expect(wrapper.vm.treeWidth).toEqual(320);
});
it('sets initial width to localStorage size', () => {
localStorage.setItem('mr_tree_list_width', '200');
createComponent();
expect(wrapper.vm.treeWidth).toEqual(200);
});
it('sets width of tree list', () => {
2021-03-08 18:12:59 +05:30
createComponent({}, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = { 111: { type: 'blob', fileHash: '111', path: '111.js' } };
2021-03-08 18:12:59 +05:30
});
2019-07-07 11:18:12 +05:30
expect(wrapper.find('.js-diff-tree-list').element.style.width).toEqual('320px');
});
2018-12-05 23:21:45 +05:30
});
2021-03-08 18:12:59 +05:30
it('marks current diff file based on currently highlighted row', async () => {
2021-10-27 15:23:28 +05:30
window.location.hash = 'ABC_123';
2019-02-15 15:39:39 +05:30
createComponent({
shouldShow: true,
});
2018-12-05 23:21:45 +05:30
2021-03-08 18:12:59 +05:30
// Component uses nextTick so we wait until that has finished
await nextTick();
2019-01-03 12:48:30 +05:30
2021-03-08 18:12:59 +05:30
expect(store.state.diffs.currentDiffFileId).toBe('ABC');
2019-01-03 12:48:30 +05:30
});
2019-02-15 15:39:39 +05:30
describe('empty state', () => {
it('renders empty state when no diff files exist', () => {
createComponent();
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(NoChanges).exists()).toBe(true);
2019-02-15 15:39:39 +05:30
});
it('does not render empty state when diff files exist', () => {
2019-07-07 11:18:12 +05:30
createComponent({}, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.diffFiles = ['anything'];
state.diffs.treeEntries['1'] = { type: 'blob', id: 1 };
2019-02-15 15:39:39 +05:30
});
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(NoChanges).exists()).toBe(false);
2023-05-27 22:25:52 +05:30
expect(wrapper.findComponent({ name: 'DynamicScroller' }).props('items')).toBe(
store.state.diffs.diffFiles,
);
2019-02-15 15:39:39 +05:30
});
2019-07-07 11:18:12 +05:30
});
describe('keyboard shortcut navigation', () => {
2020-05-24 23:13:21 +05:30
let spies = [];
let moveSpy;
2021-03-08 18:12:59 +05:30
let jumpSpy;
2020-05-24 23:13:21 +05:30
2021-03-08 18:12:59 +05:30
function setup(componentProps) {
createComponent(componentProps, ({ state }) => {
state.diffs.commit = { id: 'SHA123' };
});
2020-05-24 23:13:21 +05:30
moveSpy = jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
2021-03-08 18:12:59 +05:30
jumpSpy = jest.spyOn(wrapper.vm, 'jumpToFile').mockImplementation(() => {});
2020-05-24 23:13:21 +05:30
spies = [jumpSpy, moveSpy];
}
2019-07-07 11:18:12 +05:30
describe('visible app', () => {
2020-05-24 23:13:21 +05:30
it.each`
2021-03-08 18:12:59 +05:30
key | name | spy | args
${'['} | ${'jumpToFile'} | ${0} | ${[-1]}
${'k'} | ${'jumpToFile'} | ${0} | ${[-1]}
${']'} | ${'jumpToFile'} | ${0} | ${[+1]}
${'j'} | ${'jumpToFile'} | ${0} | ${[+1]}
${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'previous' }]}
${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'next' }]}
2020-05-24 23:13:21 +05:30
`(
'calls `$name()` with correct parameters whenever the "$key" key is pressed',
2021-03-08 18:12:59 +05:30
async ({ key, spy, args }) => {
setup({ shouldShow: true });
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
await nextTick();
expect(spies[spy]).not.toHaveBeenCalled();
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
Mousetrap.trigger(key);
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(spies[spy]).toHaveBeenCalledWith(...args);
2020-04-08 14:13:33 +05:30
},
);
2019-07-07 11:18:12 +05:30
2020-05-24 23:13:21 +05:30
it.each`
key | name | spy | allowed
${'d'} | ${'jumpToFile'} | ${0} | ${['[', ']', 'j', 'k']}
${'r'} | ${'moveToNeighboringCommit'} | ${1} | ${['x', 'c']}
`(
`does not call \`$name()\` when a key that is not one of \`$allowed\` is pressed`,
2021-03-08 18:12:59 +05:30
async ({ key, spy }) => {
setup({ shouldShow: true });
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
await nextTick();
Mousetrap.trigger(key);
2020-05-24 23:13:21 +05:30
2021-03-08 18:12:59 +05:30
expect(spies[spy]).not.toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
},
);
2019-07-07 11:18:12 +05:30
});
2020-05-24 23:13:21 +05:30
describe('hidden app', () => {
2021-03-08 18:12:59 +05:30
beforeEach(async () => {
setup({ shouldShow: false });
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
await nextTick();
Mousetrap.reset();
2019-07-07 11:18:12 +05:30
});
2020-05-24 23:13:21 +05:30
it.each`
key | name | spy
${'['} | ${'jumpToFile'} | ${0}
${'k'} | ${'jumpToFile'} | ${0}
${']'} | ${'jumpToFile'} | ${0}
${'j'} | ${'jumpToFile'} | ${0}
${'x'} | ${'moveToNeighboringCommit'} | ${1}
${'c'} | ${'moveToNeighboringCommit'} | ${1}
`('stops calling `$name()` when the app is hidden', ({ key, spy }) => {
Mousetrap.trigger(key);
expect(spies[spy]).not.toHaveBeenCalled();
2019-07-07 11:18:12 +05:30
});
});
});
describe('jumpToFile', () => {
let spy;
beforeEach(() => {
2019-02-15 15:39:39 +05:30
createComponent({}, () => {
2023-05-27 22:25:52 +05:30
store.state.diffs.treeEntries = [
{ type: 'blob', fileHash: '111', path: '111.js' },
{ type: 'blob', fileHash: '222', path: '222.js' },
{ type: 'blob', fileHash: '333', path: '333.js' },
2019-07-07 11:18:12 +05:30
];
});
2021-03-08 18:12:59 +05:30
spy = jest.spyOn(store, 'dispatch');
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
it('jumps to next and previous files in the list', async () => {
await nextTick();
wrapper.vm.jumpToFile(+1);
2019-07-07 11:18:12 +05:30
2021-12-11 22:18:48 +05:30
expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual([
'diffs/scrollToFile',
{ path: '222.js' },
]);
2021-03-08 18:12:59 +05:30
store.state.diffs.currentDiffFileId = '222';
wrapper.vm.jumpToFile(+1);
2019-07-07 11:18:12 +05:30
2021-12-11 22:18:48 +05:30
expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual([
'diffs/scrollToFile',
{ path: '333.js' },
]);
2021-03-08 18:12:59 +05:30
store.state.diffs.currentDiffFileId = '333';
wrapper.vm.jumpToFile(-1);
2019-07-07 11:18:12 +05:30
2021-12-11 22:18:48 +05:30
expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual([
'diffs/scrollToFile',
{ path: '222.js' },
]);
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not jump to previous file from the first one', async () => {
await nextTick();
store.state.diffs.currentDiffFileId = '333';
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(wrapper.vm.currentDiffIndex).toBe(2);
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
wrapper.vm.jumpToFile(+1);
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(wrapper.vm.currentDiffIndex).toBe(2);
expect(spy).not.toHaveBeenCalled();
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not jump to next file from the last one', async () => {
await nextTick();
expect(wrapper.vm.currentDiffIndex).toBe(0);
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
wrapper.vm.jumpToFile(-1);
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(wrapper.vm.currentDiffIndex).toBe(0);
expect(spy).not.toHaveBeenCalled();
2019-07-07 11:18:12 +05:30
});
});
2020-05-24 23:13:21 +05:30
describe('commit watcher', () => {
const spy = () => {
jest.spyOn(wrapper.vm, 'refetchDiffData').mockImplementation(() => {});
jest.spyOn(wrapper.vm, 'adjustView').mockImplementation(() => {});
};
2021-10-27 15:23:28 +05:30
beforeEach(() => {
setWindowLocation(COMMIT_URL);
2020-05-24 23:13:21 +05:30
document.title = 'My Title';
});
beforeEach(() => {
jest.spyOn(urlUtils, 'updateHistory');
});
2021-03-08 18:12:59 +05:30
it('when the commit changes and the app is not loading it should update the history, refetch the diff data, and update the view', async () => {
2020-05-24 23:13:21 +05:30
createComponent({}, ({ state }) => {
state.diffs.commit = { ...state.diffs.commit, id: 'OLD' };
});
spy();
store.state.diffs.commit = { id: 'NEW' };
2021-03-08 18:12:59 +05:30
await nextTick();
expect(urlUtils.updateHistory).toHaveBeenCalledWith({
title: document.title,
url: UPDATED_COMMIT_URL,
2020-05-24 23:13:21 +05:30
});
2021-03-08 18:12:59 +05:30
expect(wrapper.vm.refetchDiffData).toHaveBeenCalled();
expect(wrapper.vm.adjustView).toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
});
it.each`
isLoading | oldSha | newSha
${true} | ${'OLD'} | ${'NEW'}
${false} | ${'NEW'} | ${'NEW'}
`(
'given `{ "isLoading": $isLoading, "oldSha": "$oldSha", "newSha": "$newSha" }`, nothing should happen',
2021-03-08 18:12:59 +05:30
async ({ isLoading, oldSha, newSha }) => {
2020-05-24 23:13:21 +05:30
createComponent({}, ({ state }) => {
state.diffs.isLoading = isLoading;
state.diffs.commit = { ...state.diffs.commit, id: oldSha };
});
spy();
store.state.diffs.commit = { id: newSha };
2021-03-08 18:12:59 +05:30
await nextTick();
expect(urlUtils.updateHistory).not.toHaveBeenCalled();
expect(wrapper.vm.refetchDiffData).not.toHaveBeenCalled();
expect(wrapper.vm.adjustView).not.toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
},
);
});
2019-07-07 11:18:12 +05:30
describe('diffs', () => {
it('should render compare versions component', () => {
createComponent({}, ({ state }) => {
state.diffs.mergeRequestDiffs = diffsMockData;
state.diffs.targetBranchName = 'target-branch';
state.diffs.mergeRequestDiff = mergeRequestDiff;
});
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(CompareVersions).exists()).toBe(true);
expect(wrapper.findComponent(CompareVersions).props()).toEqual(
2020-04-08 14:13:33 +05:30
expect.objectContaining({
2021-03-08 18:12:59 +05:30
diffFilesCountText: null,
2019-07-07 11:18:12 +05:30
}),
);
});
2020-11-24 15:15:51 +05:30
describe('warnings', () => {
describe('hidden files', () => {
it('should render hidden files warning if render overflow warning is present', () => {
createComponent({}, ({ state }) => {
state.diffs.renderOverflowWarning = true;
state.diffs.realSize = '5';
state.diffs.plainDiffPath = 'plain diff path';
state.diffs.emailPatchPath = 'email patch path';
state.diffs.size = 1;
});
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(HiddenFilesWarning).exists()).toBe(true);
expect(wrapper.findComponent(HiddenFilesWarning).props()).toEqual(
2020-11-24 15:15:51 +05:30
expect.objectContaining({
total: '5',
plainDiffPath: 'plain diff path',
emailPatchPath: 'email patch path',
visible: 1,
}),
);
});
2019-02-15 15:39:39 +05:30
});
2020-11-24 15:15:51 +05:30
describe('collapsed files', () => {
2021-01-29 00:20:46 +05:30
it('should render the collapsed files warning if there are any automatically collapsed files', () => {
2020-11-24 15:15:51 +05:30
createComponent({}, ({ state }) => {
2021-01-03 14:25:43 +05:30
state.diffs.diffFiles = [{ viewer: { automaticallyCollapsed: true } }];
2020-11-24 15:15:51 +05:30
});
expect(getCollapsedFilesWarning(wrapper).exists()).toBe(true);
});
2021-01-29 00:20:46 +05:30
it('should not render the collapsed files warning if there are no automatically collapsed files', () => {
2020-11-24 15:15:51 +05:30
createComponent({}, ({ state }) => {
2021-01-29 00:20:46 +05:30
state.diffs.diffFiles = [
{ viewer: { automaticallyCollapsed: false, manuallyCollapsed: true } },
{ viewer: { automaticallyCollapsed: false, manuallyCollapsed: false } },
];
2020-11-24 15:15:51 +05:30
});
expect(getCollapsedFilesWarning(wrapper).exists()).toBe(false);
});
});
2019-07-07 11:18:12 +05:30
});
it('should display commit widget if store has a commit', () => {
createComponent({}, () => {
store.state.diffs.commit = {
author: 'John Doe',
};
});
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(CommitWidget).exists()).toBe(true);
2019-07-07 11:18:12 +05:30
});
it('should display diff file if there are diff files', () => {
createComponent({}, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
state.diffs.treeEntries = {
111: { type: 'blob', fileHash: '111', path: '111.js' },
123: { type: 'blob', fileHash: '123', path: '123.js' },
312: { type: 'blob', fileHash: '312', path: '312.js' },
};
2019-07-07 11:18:12 +05:30
});
2023-05-27 22:25:52 +05:30
expect(wrapper.findComponent({ name: 'DynamicScroller' }).exists()).toBe(true);
expect(wrapper.findComponent({ name: 'DynamicScroller' }).props('items')).toBe(
store.state.diffs.diffFiles,
);
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
it("doesn't render tree list when no changes exist", () => {
2019-07-07 11:18:12 +05:30
createComponent();
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(TreeList).exists()).toBe(false);
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
it('should render tree list', () => {
createComponent({}, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = { 111: { type: 'blob', fileHash: '111', path: '111.js' } };
2021-03-08 18:12:59 +05:30
});
2019-07-07 11:18:12 +05:30
2022-10-11 01:57:18 +05:30
expect(wrapper.findComponent(TreeList).exists()).toBe(true);
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
});
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
describe('setTreeDisplay', () => {
2019-07-07 11:18:12 +05:30
afterEach(() => {
localStorage.removeItem('mr_tree_show');
});
2021-02-22 17:27:13 +05:30
it('calls setShowTreeList when only 1 file', () => {
2019-07-07 11:18:12 +05:30
createComponent({}, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = { 123: { type: 'blob', fileHash: '123' } };
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
jest.spyOn(store, 'dispatch');
2021-02-22 17:27:13 +05:30
wrapper.vm.setTreeDisplay();
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
showTreeList: false,
saving: false,
});
2019-07-07 11:18:12 +05:30
});
2023-05-27 22:25:52 +05:30
it('calls setShowTreeList with true when more than 1 file is in tree entries map', () => {
2019-07-07 11:18:12 +05:30
createComponent({}, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = {
111: { type: 'blob', fileHash: '111', path: '111.js' },
123: { type: 'blob', fileHash: '123', path: '123.js' },
};
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
jest.spyOn(store, 'dispatch');
2019-07-07 11:18:12 +05:30
2021-02-22 17:27:13 +05:30
wrapper.vm.setTreeDisplay();
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
showTreeList: true,
saving: false,
});
2019-07-07 11:18:12 +05:30
});
2021-02-22 17:27:13 +05:30
it.each`
showTreeList
${true}
${false}
`('calls setShowTreeList with localstorage $showTreeList', ({ showTreeList }) => {
localStorage.setItem('mr_tree_show', showTreeList);
2019-07-07 11:18:12 +05:30
createComponent({}, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries['123'] = { sha: '123' };
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
jest.spyOn(store, 'dispatch');
2019-07-07 11:18:12 +05:30
2021-02-22 17:27:13 +05:30
wrapper.vm.setTreeDisplay();
2019-07-07 11:18:12 +05:30
2021-03-08 18:12:59 +05:30
expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
showTreeList,
saving: false,
});
2019-02-15 15:39:39 +05:30
});
2018-12-05 23:21:45 +05:30
});
2020-07-28 23:09:34 +05:30
describe('file-by-file', () => {
2021-02-22 17:27:13 +05:30
it('renders a single diff', async () => {
createComponent({ fileByFileUserPreference: true }, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = {
123: { type: 'blob', fileHash: '123' },
312: { type: 'blob', fileHash: '312' },
};
2020-07-28 23:09:34 +05:30
state.diffs.diffFiles.push({ file_hash: '312' });
});
2021-03-08 18:12:59 +05:30
await nextTick();
2021-02-22 17:27:13 +05:30
2022-10-11 01:57:18 +05:30
expect(wrapper.findAllComponents(DiffFile).length).toBe(1);
2020-07-28 23:09:34 +05:30
});
describe('pagination', () => {
2020-11-24 15:15:51 +05:30
const fileByFileNav = () => wrapper.find('[data-testid="file-by-file-navigation"]');
2022-10-11 01:57:18 +05:30
const paginator = () => fileByFileNav().findComponent(GlPagination);
2020-11-24 15:15:51 +05:30
2021-02-22 17:27:13 +05:30
it('sets previous button as disabled', async () => {
createComponent({ fileByFileUserPreference: true }, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = {
123: { type: 'blob', fileHash: '123' },
312: { type: 'blob', fileHash: '312' },
};
2020-07-28 23:09:34 +05:30
});
2021-03-08 18:12:59 +05:30
await nextTick();
2021-02-22 17:27:13 +05:30
2020-11-24 15:15:51 +05:30
expect(paginator().attributes('prevpage')).toBe(undefined);
expect(paginator().attributes('nextpage')).toBe('2');
2020-07-28 23:09:34 +05:30
});
2021-02-22 17:27:13 +05:30
it('sets next button as disabled', async () => {
createComponent({ fileByFileUserPreference: true }, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = {
123: { type: 'blob', fileHash: '123' },
312: { type: 'blob', fileHash: '312' },
};
2020-07-28 23:09:34 +05:30
state.diffs.currentDiffFileId = '312';
});
2021-03-08 18:12:59 +05:30
await nextTick();
2021-02-22 17:27:13 +05:30
2020-11-24 15:15:51 +05:30
expect(paginator().attributes('prevpage')).toBe('1');
expect(paginator().attributes('nextpage')).toBe(undefined);
});
2021-02-22 17:27:13 +05:30
it("doesn't display when there's fewer than 2 files", async () => {
createComponent({ fileByFileUserPreference: true }, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = { 123: { type: 'blob', fileHash: '123' } };
2020-11-24 15:15:51 +05:30
state.diffs.currentDiffFileId = '123';
});
2021-03-08 18:12:59 +05:30
await nextTick();
2021-02-22 17:27:13 +05:30
2020-11-24 15:15:51 +05:30
expect(fileByFileNav().exists()).toBe(false);
2020-07-28 23:09:34 +05:30
});
it.each`
2020-11-24 15:15:51 +05:30
currentDiffFileId | targetFile
${'123'} | ${2}
${'312'} | ${1}
2020-07-28 23:09:34 +05:30
`(
2022-10-11 01:57:18 +05:30
'calls navigateToDiffFileIndex with $index when $link is clicked',
2020-11-24 15:15:51 +05:30
async ({ currentDiffFileId, targetFile }) => {
2021-02-22 17:27:13 +05:30
createComponent({ fileByFileUserPreference: true }, ({ state }) => {
2023-05-27 22:25:52 +05:30
state.diffs.treeEntries = {
123: { type: 'blob', fileHash: '123' },
312: { type: 'blob', fileHash: '312' },
};
2020-07-28 23:09:34 +05:30
state.diffs.currentDiffFileId = currentDiffFileId;
});
2021-03-08 18:12:59 +05:30
await nextTick();
2021-02-22 17:27:13 +05:30
2020-07-28 23:09:34 +05:30
jest.spyOn(wrapper.vm, 'navigateToDiffFileIndex');
2020-11-24 15:15:51 +05:30
paginator().vm.$emit('input', targetFile);
2020-07-28 23:09:34 +05:30
2021-03-08 18:12:59 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
expect(wrapper.vm.navigateToDiffFileIndex).toHaveBeenCalledWith(targetFile - 1);
2020-07-28 23:09:34 +05:30
},
);
});
});
2018-12-05 23:21:45 +05:30
});