2018-10-23 09:49:45 +00:00
|
|
|
import Vue from 'vue';
|
|
|
|
import createStore from '~/notes/stores';
|
|
|
|
import DiscussionFilter from '~/notes/components/discussion_filter.vue';
|
2019-02-26 14:04:15 +00:00
|
|
|
import { DISCUSSION_FILTERS_DEFAULT_VALUE, DISCUSSION_FILTER_TYPES } from '~/notes/constants';
|
2018-10-23 09:49:45 +00:00
|
|
|
import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper';
|
|
|
|
import { discussionFiltersMock, discussionMock } from '../mock_data';
|
|
|
|
|
|
|
|
describe('DiscussionFilter component', () => {
|
|
|
|
let vm;
|
|
|
|
let store;
|
2019-01-02 04:42:31 +00:00
|
|
|
let eventHub;
|
2018-10-23 09:49:45 +00:00
|
|
|
|
2019-01-02 04:42:31 +00:00
|
|
|
const mountComponent = () => {
|
2018-10-23 09:49:45 +00:00
|
|
|
store = createStore();
|
|
|
|
|
2018-10-30 20:28:31 +00:00
|
|
|
const discussions = [
|
|
|
|
{
|
|
|
|
...discussionMock,
|
|
|
|
id: discussionMock.id,
|
|
|
|
notes: [{ ...discussionMock.notes[0], resolvable: true, resolved: true }],
|
|
|
|
},
|
|
|
|
];
|
2018-10-23 09:49:45 +00:00
|
|
|
const Component = Vue.extend(DiscussionFilter);
|
2019-01-10 14:00:36 +00:00
|
|
|
const selectedValue = DISCUSSION_FILTERS_DEFAULT_VALUE;
|
|
|
|
const props = { filters: discussionFiltersMock, selectedValue };
|
2018-10-23 09:49:45 +00:00
|
|
|
|
|
|
|
store.state.discussions = discussions;
|
2019-01-02 04:42:31 +00:00
|
|
|
return mountComponentWithStore(Component, {
|
2018-10-23 09:49:45 +00:00
|
|
|
el: null,
|
|
|
|
store,
|
2019-01-10 14:00:36 +00:00
|
|
|
props,
|
2018-10-23 09:49:45 +00:00
|
|
|
});
|
2019-01-02 04:42:31 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
window.mrTabs = undefined;
|
|
|
|
vm = mountComponent();
|
2018-10-23 09:49:45 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
vm.$destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the all filters', () => {
|
2018-10-30 20:28:31 +00:00
|
|
|
expect(vm.$el.querySelectorAll('.dropdown-menu li').length).toEqual(
|
|
|
|
discussionFiltersMock.length,
|
|
|
|
);
|
2018-10-23 09:49:45 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the default selected item', () => {
|
2018-10-30 20:28:31 +00:00
|
|
|
expect(vm.$el.querySelector('#discussion-filter-dropdown').textContent.trim()).toEqual(
|
|
|
|
discussionFiltersMock[0].title,
|
|
|
|
);
|
2018-10-23 09:49:45 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('updates to the selected item', () => {
|
2019-02-26 14:04:15 +00:00
|
|
|
const filterItem = vm.$el.querySelector(
|
|
|
|
`.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.HISTORY}"] button`,
|
|
|
|
);
|
2018-10-23 09:49:45 +00:00
|
|
|
filterItem.click();
|
|
|
|
|
|
|
|
expect(vm.currentFilter.title).toEqual(filterItem.textContent.trim());
|
|
|
|
});
|
|
|
|
|
|
|
|
it('only updates when selected filter changes', () => {
|
2019-02-26 14:04:15 +00:00
|
|
|
const filterItem = vm.$el.querySelector(
|
|
|
|
`.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"] button`,
|
|
|
|
);
|
2018-10-23 09:49:45 +00:00
|
|
|
|
|
|
|
spyOn(vm, 'filterDiscussion');
|
|
|
|
filterItem.click();
|
|
|
|
|
|
|
|
expect(vm.filterDiscussion).not.toHaveBeenCalled();
|
|
|
|
});
|
2018-11-05 12:30:14 +00:00
|
|
|
|
|
|
|
it('disables commenting when "Show history only" filter is applied', () => {
|
2019-02-26 14:04:15 +00:00
|
|
|
const filterItem = vm.$el.querySelector(
|
|
|
|
`.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.HISTORY}"] button`,
|
|
|
|
);
|
2018-11-05 12:30:14 +00:00
|
|
|
filterItem.click();
|
|
|
|
|
|
|
|
expect(vm.$store.state.commentsDisabled).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('enables commenting when "Show history only" filter is not applied', () => {
|
2019-02-26 14:04:15 +00:00
|
|
|
const filterItem = vm.$el.querySelector(
|
|
|
|
`.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"] button`,
|
|
|
|
);
|
2018-11-05 12:30:14 +00:00
|
|
|
filterItem.click();
|
|
|
|
|
|
|
|
expect(vm.$store.state.commentsDisabled).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders a dropdown divider for the default filter', () => {
|
2019-02-26 14:04:15 +00:00
|
|
|
const defaultFilter = vm.$el.querySelector(
|
|
|
|
`.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"]`,
|
|
|
|
);
|
2018-11-05 12:30:14 +00:00
|
|
|
|
|
|
|
expect(defaultFilter.lastChild.classList).toContain('dropdown-divider');
|
|
|
|
});
|
2019-01-02 04:42:31 +00:00
|
|
|
|
|
|
|
describe('Merge request tabs', () => {
|
|
|
|
eventHub = new Vue();
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
window.mrTabs = {
|
|
|
|
eventHub,
|
|
|
|
currentTab: 'show',
|
|
|
|
};
|
|
|
|
|
|
|
|
vm = mountComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
window.mrTabs = undefined;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('only renders when discussion tab is active', done => {
|
|
|
|
eventHub.$emit('MergeRequestTabChange', 'commit');
|
|
|
|
|
|
|
|
vm.$nextTick(() => {
|
|
|
|
expect(vm.$el.querySelector).toBeUndefined();
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2019-01-10 14:00:36 +00:00
|
|
|
|
|
|
|
describe('URL with Links to notes', () => {
|
|
|
|
afterEach(() => {
|
|
|
|
window.location.hash = '';
|
|
|
|
});
|
|
|
|
|
|
|
|
it('updates the filter when the URL links to a note', done => {
|
|
|
|
window.location.hash = `note_${discussionMock.notes[0].id}`;
|
|
|
|
vm.currentValue = discussionFiltersMock[2].value;
|
|
|
|
vm.handleLocationHash();
|
|
|
|
|
|
|
|
vm.$nextTick(() => {
|
|
|
|
expect(vm.currentValue).toEqual(DISCUSSION_FILTERS_DEFAULT_VALUE);
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not update the filter when the current filter is "Show all activity"', done => {
|
|
|
|
window.location.hash = `note_${discussionMock.notes[0].id}`;
|
|
|
|
vm.handleLocationHash();
|
|
|
|
|
|
|
|
vm.$nextTick(() => {
|
|
|
|
expect(vm.currentValue).toEqual(DISCUSSION_FILTERS_DEFAULT_VALUE);
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('only updates filter when the URL links to a note', done => {
|
|
|
|
window.location.hash = `testing123`;
|
|
|
|
vm.handleLocationHash();
|
|
|
|
|
|
|
|
vm.$nextTick(() => {
|
|
|
|
expect(vm.currentValue).toEqual(DISCUSSION_FILTERS_DEFAULT_VALUE);
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
2019-10-11 00:06:24 +00:00
|
|
|
|
|
|
|
it('fetches discussions when there is a hash', done => {
|
|
|
|
window.location.hash = `note_${discussionMock.notes[0].id}`;
|
|
|
|
vm.currentValue = discussionFiltersMock[2].value;
|
|
|
|
spyOn(vm, 'selectFilter');
|
|
|
|
vm.handleLocationHash();
|
|
|
|
|
|
|
|
vm.$nextTick(() => {
|
|
|
|
expect(vm.selectFilter).toHaveBeenCalled();
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not fetch discussions when there is no hash', done => {
|
|
|
|
window.location.hash = '';
|
|
|
|
spyOn(vm, 'selectFilter');
|
|
|
|
vm.handleLocationHash();
|
|
|
|
|
|
|
|
vm.$nextTick(() => {
|
|
|
|
expect(vm.selectFilter).not.toHaveBeenCalled();
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
2019-01-10 14:00:36 +00:00
|
|
|
});
|
2018-10-23 09:49:45 +00:00
|
|
|
});
|