debian-mirror-gitlab/spec/frontend/notes/components/discussion_counter_spec.js

145 lines
4.6 KiB
JavaScript
Raw Normal View History

2021-01-03 14:25:43 +05:30
import { GlButton } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
2020-04-08 14:13:33 +05:30
import DiscussionCounter from '~/notes/components/discussion_counter.vue';
2021-03-11 19:13:27 +05:30
import notesModule from '~/notes/stores/modules';
2020-04-08 14:13:33 +05:30
import * as types from '~/notes/stores/mutation_types';
2021-03-11 19:13:27 +05:30
import { noteableDataMock, discussionMock, notesDataMock, userDataMock } from '../mock_data';
2020-04-08 14:13:33 +05:30
describe('DiscussionCounter component', () => {
let store;
let wrapper;
2021-01-03 14:25:43 +05:30
let setExpandDiscussionsFn;
2020-04-08 14:13:33 +05:30
const localVue = createLocalVue();
localVue.use(Vuex);
beforeEach(() => {
window.mrTabs = {};
const { state, getters, mutations, actions } = notesModule();
2021-01-03 14:25:43 +05:30
setExpandDiscussionsFn = jest.fn().mockImplementation(actions.setExpandDiscussions);
2020-04-08 14:13:33 +05:30
store = new Vuex.Store({
state: {
...state,
userData: userDataMock,
},
getters,
mutations,
2021-01-03 14:25:43 +05:30
actions: {
...actions,
setExpandDiscussions: setExpandDiscussionsFn,
},
2020-04-08 14:13:33 +05:30
});
store.dispatch('setNoteableData', {
...noteableDataMock,
create_issue_to_resolve_discussions_path: '/test',
});
store.dispatch('setNotesData', notesDataMock);
});
afterEach(() => {
wrapper.vm.$destroy();
wrapper = null;
});
describe('has no discussions', () => {
it('does not render', () => {
wrapper = shallowMount(DiscussionCounter, { store, localVue });
expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(false);
});
});
describe('has no resolvable discussions', () => {
it('does not render', () => {
2021-12-11 22:18:48 +05:30
store.commit(types.ADD_OR_UPDATE_DISCUSSIONS, [{ ...discussionMock, resolvable: false }]);
2020-04-08 14:13:33 +05:30
store.dispatch('updateResolvableDiscussionsCounts');
wrapper = shallowMount(DiscussionCounter, { store, localVue });
expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(false);
});
});
describe('has resolvable discussions', () => {
const updateStore = (note = {}) => {
discussionMock.notes[0] = { ...discussionMock.notes[0], ...note };
2021-12-11 22:18:48 +05:30
store.commit(types.ADD_OR_UPDATE_DISCUSSIONS, [discussionMock]);
2020-04-08 14:13:33 +05:30
store.dispatch('updateResolvableDiscussionsCounts');
};
afterEach(() => {
delete discussionMock.notes[0].resolvable;
delete discussionMock.notes[0].resolved;
});
it('renders', () => {
updateStore();
wrapper = shallowMount(DiscussionCounter, { store, localVue });
expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(true);
});
it.each`
2020-05-24 23:13:21 +05:30
title | resolved | isActive | groupLength
${'not allResolved'} | ${false} | ${false} | ${3}
${'allResolved'} | ${true} | ${true} | ${1}
`('renders correctly if $title', ({ resolved, isActive, groupLength }) => {
2020-04-08 14:13:33 +05:30
updateStore({ resolvable: true, resolved });
wrapper = shallowMount(DiscussionCounter, { store, localVue });
expect(wrapper.find(`.is-active`).exists()).toBe(isActive);
2021-01-03 14:25:43 +05:30
expect(wrapper.findAll(GlButton)).toHaveLength(groupLength);
2020-04-08 14:13:33 +05:30
});
});
2020-04-22 19:07:51 +05:30
describe('toggle all threads button', () => {
let toggleAllButton;
2021-03-08 18:12:59 +05:30
const updateStoreWithExpanded = (expanded) => {
2020-04-22 19:07:51 +05:30
const discussion = { ...discussionMock, expanded };
2021-12-11 22:18:48 +05:30
store.commit(types.ADD_OR_UPDATE_DISCUSSIONS, [discussion]);
2020-04-22 19:07:51 +05:30
store.dispatch('updateResolvableDiscussionsCounts');
wrapper = shallowMount(DiscussionCounter, { store, localVue });
toggleAllButton = wrapper.find('.toggle-all-discussions-btn');
};
afterEach(() => wrapper.destroy());
it('calls button handler when clicked', () => {
updateStoreWithExpanded(true);
2021-01-03 14:25:43 +05:30
toggleAllButton.vm.$emit('click');
2020-04-22 19:07:51 +05:30
2021-01-03 14:25:43 +05:30
expect(setExpandDiscussionsFn).toHaveBeenCalledTimes(1);
2020-04-22 19:07:51 +05:30
});
it('collapses all discussions if expanded', () => {
updateStoreWithExpanded(true);
expect(wrapper.vm.allExpanded).toBe(true);
2021-01-03 14:25:43 +05:30
expect(toggleAllButton.props('icon')).toBe('angle-up');
2020-04-22 19:07:51 +05:30
2021-01-03 14:25:43 +05:30
toggleAllButton.vm.$emit('click');
2020-04-22 19:07:51 +05:30
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.allExpanded).toBe(false);
2021-01-03 14:25:43 +05:30
expect(toggleAllButton.props('icon')).toBe('angle-down');
2020-04-22 19:07:51 +05:30
});
});
it('expands all discussions if collapsed', () => {
updateStoreWithExpanded(false);
expect(wrapper.vm.allExpanded).toBe(false);
2021-01-03 14:25:43 +05:30
expect(toggleAllButton.props('icon')).toBe('angle-down');
2020-04-22 19:07:51 +05:30
2021-01-03 14:25:43 +05:30
toggleAllButton.vm.$emit('click');
2020-04-22 19:07:51 +05:30
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.allExpanded).toBe(true);
2021-01-03 14:25:43 +05:30
expect(toggleAllButton.props('icon')).toBe('angle-up');
2020-04-22 19:07:51 +05:30
});
});
});
2020-04-08 14:13:33 +05:30
});