debian-mirror-gitlab/spec/frontend/notes/mixins/discussion_navigation_spec.js

265 lines
7.4 KiB
JavaScript
Raw Normal View History

2022-04-04 11:22:00 +05:30
import { shallowMount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
2021-03-11 19:13:27 +05:30
import Vuex from 'vuex';
2020-10-24 23:57:45 +05:30
import { setHTMLFixture } from 'helpers/fixtures';
2021-03-11 19:13:27 +05:30
import createEventHub from '~/helpers/event_hub_factory';
2020-04-08 14:13:33 +05:30
import * as utils from '~/lib/utils/common_utils';
import eventHub from '~/notes/event_hub';
2021-03-11 19:13:27 +05:30
import discussionNavigation from '~/notes/mixins/discussion_navigation';
2020-04-08 14:13:33 +05:30
import notesModule from '~/notes/stores/modules';
2021-12-11 22:18:48 +05:30
let scrollToFile;
2020-04-08 14:13:33 +05:30
const discussion = (id, index) => ({
id,
resolvable: index % 2 === 0,
active: true,
notes: [{}],
diff_discussion: true,
2021-12-11 22:18:48 +05:30
position: { new_line: 1, old_line: 1 },
diff_file: { file_path: 'test.js' },
2020-04-08 14:13:33 +05:30
});
const createDiscussions = () => [...'abcde'].map(discussion);
const createComponent = () => ({
mixins: [discussionNavigation],
render() {
return this.$slots.default;
},
});
describe('Discussion navigation mixin', () => {
2022-04-04 11:22:00 +05:30
Vue.use(Vuex);
2020-04-08 14:13:33 +05:30
let wrapper;
let store;
let expandDiscussion;
beforeEach(() => {
setHTMLFixture(
[...'abcde']
.map(
2021-03-08 18:12:59 +05:30
(id) =>
2020-04-08 14:13:33 +05:30
`<ul class="notes" data-discussion-id="${id}"></ul>
<div class="discussion" data-discussion-id="${id}"></div>`,
)
.join(''),
);
2020-06-23 00:09:42 +05:30
jest.spyOn(utils, 'scrollToElementWithContext');
2021-02-22 17:27:13 +05:30
jest.spyOn(utils, 'scrollToElement');
2020-04-08 14:13:33 +05:30
expandDiscussion = jest.fn();
2021-12-11 22:18:48 +05:30
scrollToFile = jest.fn();
2020-04-08 14:13:33 +05:30
const { actions, ...notesRest } = notesModule();
store = new Vuex.Store({
modules: {
notes: {
...notesRest,
actions: { ...actions, expandDiscussion },
},
2021-12-11 22:18:48 +05:30
diffs: {
namespaced: true,
actions: { scrollToFile },
},
2020-04-08 14:13:33 +05:30
},
});
store.state.notes.discussions = createDiscussions();
2022-04-04 11:22:00 +05:30
wrapper = shallowMount(createComponent(), { store });
2020-04-08 14:13:33 +05:30
});
afterEach(() => {
wrapper.vm.$destroy();
jest.clearAllMocks();
});
const findDiscussion = (selector, id) =>
document.querySelector(`${selector}[data-discussion-id="${id}"]`);
2020-10-24 23:57:45 +05:30
describe('jumpToFirstUnresolvedDiscussion method', () => {
let vm;
beforeEach(() => {
createComponent();
({ vm } = wrapper);
jest.spyOn(store, 'dispatch');
jest.spyOn(vm, 'jumpToNextDiscussion');
});
it('triggers the setCurrentDiscussionId action with null as the value', () => {
vm.jumpToFirstUnresolvedDiscussion();
expect(store.dispatch).toHaveBeenCalledWith('setCurrentDiscussionId', null);
});
2022-04-04 11:22:00 +05:30
it('triggers the jumpToNextDiscussion action when the previous store action succeeds', async () => {
2020-10-24 23:57:45 +05:30
store.dispatch.mockResolvedValue();
vm.jumpToFirstUnresolvedDiscussion();
2022-04-04 11:22:00 +05:30
await nextTick();
expect(vm.jumpToNextDiscussion).toHaveBeenCalled();
2020-10-24 23:57:45 +05:30
});
});
2020-04-08 14:13:33 +05:30
describe('cycle through discussions', () => {
beforeEach(() => {
2020-05-24 23:13:21 +05:30
window.mrTabs = { eventHub: createEventHub(), tabShown: jest.fn() };
2020-04-08 14:13:33 +05:30
});
describe.each`
fn | args | currentId | expected
${'jumpToNextDiscussion'} | ${[]} | ${null} | ${'a'}
${'jumpToNextDiscussion'} | ${[]} | ${'a'} | ${'c'}
${'jumpToNextDiscussion'} | ${[]} | ${'e'} | ${'a'}
${'jumpToPreviousDiscussion'} | ${[]} | ${null} | ${'e'}
${'jumpToPreviousDiscussion'} | ${[]} | ${'e'} | ${'c'}
${'jumpToPreviousDiscussion'} | ${[]} | ${'c'} | ${'a'}
${'jumpToNextRelativeDiscussion'} | ${[null]} | ${null} | ${'a'}
${'jumpToNextRelativeDiscussion'} | ${['a']} | ${null} | ${'c'}
${'jumpToNextRelativeDiscussion'} | ${['e']} | ${'c'} | ${'a'}
`('$fn (args = $args, currentId = $currentId)', ({ fn, args, currentId, expected }) => {
beforeEach(() => {
store.state.notes.currentDiscussionId = currentId;
});
describe('on `show` active tab', () => {
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2020-04-08 14:13:33 +05:30
window.mrTabs.currentAction = 'show';
wrapper.vm[fn](...args);
2020-07-28 23:09:34 +05:30
2022-04-04 11:22:00 +05:30
await nextTick();
2020-04-08 14:13:33 +05:30
});
it('sets current discussion', () => {
expect(store.state.notes.currentDiscussionId).toEqual(expected);
});
it('expands discussion', () => {
expect(expandDiscussion).toHaveBeenCalled();
});
it('scrolls to element', () => {
2021-02-22 17:27:13 +05:30
expect(utils.scrollToElement).toHaveBeenCalledWith(
2020-04-08 14:13:33 +05:30
findDiscussion('div.discussion', expected),
2022-04-04 11:22:00 +05:30
{ behavior: 'auto' },
2020-04-08 14:13:33 +05:30
);
});
});
describe('on `diffs` active tab', () => {
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2020-04-08 14:13:33 +05:30
window.mrTabs.currentAction = 'diffs';
wrapper.vm[fn](...args);
2020-07-28 23:09:34 +05:30
2022-04-04 11:22:00 +05:30
await nextTick();
2020-04-08 14:13:33 +05:30
});
it('sets current discussion', () => {
expect(store.state.notes.currentDiscussionId).toEqual(expected);
});
it('expands discussion', () => {
expect(expandDiscussion).toHaveBeenCalled();
});
it('scrolls when scrollToDiscussion is emitted', () => {
2020-06-23 00:09:42 +05:30
expect(utils.scrollToElementWithContext).not.toHaveBeenCalled();
2020-04-08 14:13:33 +05:30
eventHub.$emit('scrollToDiscussion');
2020-06-23 00:09:42 +05:30
expect(utils.scrollToElementWithContext).toHaveBeenCalledWith(
findDiscussion('ul.notes', expected),
2022-04-04 11:22:00 +05:30
{ behavior: 'auto' },
2020-06-23 00:09:42 +05:30
);
2020-04-08 14:13:33 +05:30
});
});
describe('on `other` active tab', () => {
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2020-04-08 14:13:33 +05:30
window.mrTabs.currentAction = 'other';
wrapper.vm[fn](...args);
2020-07-28 23:09:34 +05:30
2022-04-04 11:22:00 +05:30
await nextTick();
2020-04-08 14:13:33 +05:30
});
it('sets current discussion', () => {
expect(store.state.notes.currentDiscussionId).toEqual(expected);
});
it('does not expand discussion yet', () => {
expect(expandDiscussion).not.toHaveBeenCalled();
});
it('shows mrTabs', () => {
expect(window.mrTabs.tabShown).toHaveBeenCalledWith('show');
});
describe('when tab is changed', () => {
beforeEach(() => {
window.mrTabs.eventHub.$emit('MergeRequestTabChange');
jest.runAllTimers();
});
it('expands discussion', () => {
2020-11-24 15:15:51 +05:30
expect(expandDiscussion).toHaveBeenCalledWith(expect.anything(), {
discussionId: expected,
});
2020-04-08 14:13:33 +05:30
});
it('scrolls to discussion', () => {
2021-02-22 17:27:13 +05:30
expect(utils.scrollToElement).toHaveBeenCalledWith(
2020-04-08 14:13:33 +05:30
findDiscussion('div.discussion', expected),
2022-04-04 11:22:00 +05:30
{ behavior: 'auto' },
2020-04-08 14:13:33 +05:30
);
});
});
});
});
2021-12-11 22:18:48 +05:30
2022-04-04 11:22:00 +05:30
describe('virtual scrolling feature', () => {
2021-12-11 22:18:48 +05:30
beforeEach(() => {
jest.spyOn(store, 'dispatch');
store.state.notes.currentDiscussionId = 'a';
window.location.hash = 'test';
});
afterEach(() => {
window.gon = {};
window.location.hash = '';
});
2022-04-04 11:22:00 +05:30
it('resets location hash', async () => {
2021-12-11 22:18:48 +05:30
wrapper.vm.jumpToNextDiscussion();
await nextTick();
2022-04-04 11:22:00 +05:30
expect(window.location.hash).toBe('');
2021-12-11 22:18:48 +05:30
});
it.each`
2022-04-04 11:22:00 +05:30
tabValue
${'diffs'}
${'show'}
${'other'}
2021-12-11 22:18:48 +05:30
`(
'calls scrollToFile with setHash as $hashValue when the tab is $tabValue',
2022-04-04 11:22:00 +05:30
async ({ tabValue }) => {
2021-12-11 22:18:48 +05:30
window.mrTabs.currentAction = tabValue;
wrapper.vm.jumpToNextDiscussion();
await nextTick();
expect(store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', {
path: 'test.js',
});
},
);
});
2020-04-08 14:13:33 +05:30
});
});