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

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

80 lines
2.9 KiB
JavaScript
Raw Normal View History

2022-08-13 15:12:31 +05:30
import { mountExtended } from 'helpers/vue_test_utils_helper';
import ToggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
2018-12-13 13:39:08 +05:30
import { note } from '../mock_data';
describe('toggle replies widget for notes', () => {
2022-08-13 15:12:31 +05:30
let wrapper;
const deepCloneObject = (obj) => JSON.parse(JSON.stringify(obj));
2018-12-13 13:39:08 +05:30
const noteFromOtherUser = deepCloneObject(note);
noteFromOtherUser.author.username = 'fatihacet';
const noteFromAnotherUser = deepCloneObject(note);
noteFromAnotherUser.author.username = 'mgreiling';
noteFromAnotherUser.author.name = 'Mike Greiling';
const replies = [note, note, note, noteFromOtherUser, noteFromAnotherUser];
2022-08-13 15:12:31 +05:30
const findCollapseToggleButton = () =>
wrapper.findByRole('button', { text: ToggleRepliesWidget.i18n.collapseReplies });
const findExpandToggleButton = () =>
wrapper.findByRole('button', { text: ToggleRepliesWidget.i18n.expandReplies });
const findRepliesButton = () => wrapper.findByRole('button', { text: '5 replies' });
const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
const findUserAvatarLink = () => wrapper.findAllComponents(UserAvatarLink);
const findUserLink = () => wrapper.findByRole('link', { text: noteFromAnotherUser.author.name });
const mountComponent = ({ collapsed = false }) =>
mountExtended(ToggleRepliesWidget, { propsData: { replies, collapsed } });
2018-12-13 13:39:08 +05:30
afterEach(() => {
2022-08-13 15:12:31 +05:30
wrapper.destroy();
2018-12-13 13:39:08 +05:30
});
describe('collapsed state', () => {
beforeEach(() => {
2022-08-13 15:12:31 +05:30
wrapper = mountComponent({ collapsed: true });
2018-12-13 13:39:08 +05:30
});
2022-08-13 15:12:31 +05:30
it('renders collapsed state elements', () => {
expect(findExpandToggleButton().exists()).toBe(true);
expect(findUserAvatarLink()).toHaveLength(3);
expect(findRepliesButton().exists()).toBe(true);
expect(wrapper.text()).toContain('Last reply by');
expect(findUserLink().exists()).toBe(true);
expect(findTimeAgoTooltip().exists()).toBe(true);
2018-12-13 13:39:08 +05:30
});
2022-08-13 15:12:31 +05:30
it('emits "toggle" event when expand toggle button is clicked', () => {
findExpandToggleButton().trigger('click');
expect(wrapper.emitted('toggle')).toEqual([[]]);
});
2018-12-13 13:39:08 +05:30
2022-08-13 15:12:31 +05:30
it('emits "toggle" event when replies button is clicked', () => {
findRepliesButton().trigger('click');
2018-12-13 13:39:08 +05:30
2022-08-13 15:12:31 +05:30
expect(wrapper.emitted('toggle')).toEqual([[]]);
2018-12-13 13:39:08 +05:30
});
});
describe('expanded state', () => {
beforeEach(() => {
2022-08-13 15:12:31 +05:30
wrapper = mountComponent({ collapsed: false });
2018-12-13 13:39:08 +05:30
});
2022-08-13 15:12:31 +05:30
it('renders expanded state elements', () => {
expect(findCollapseToggleButton().exists()).toBe(true);
2018-12-13 13:39:08 +05:30
});
2022-08-13 15:12:31 +05:30
it('emits "toggle" event when collapse toggle button is clicked', () => {
findCollapseToggleButton().trigger('click');
2018-12-13 13:39:08 +05:30
2022-08-13 15:12:31 +05:30
expect(wrapper.emitted('toggle')).toEqual([[]]);
2018-12-13 13:39:08 +05:30
});
});
});