debian-mirror-gitlab/spec/frontend/sidebar/participants_spec.js

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

208 lines
6.2 KiB
JavaScript
Raw Normal View History

2020-05-24 23:13:21 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2020-05-24 23:13:21 +05:30
import Participants from '~/sidebar/components/participants/participants.vue';
const PARTICIPANT = {
id: 1,
state: 'active',
username: 'marcene',
name: 'Allie Will',
web_url: 'foo.com',
avatar_url: 'gravatar.com/avatar/xxx',
};
const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPANT, id: 3 }];
describe('Participants', () => {
let wrapper;
2022-06-21 17:19:12 +05:30
const getMoreParticipantsButton = () => wrapper.find('[data-testid="more-participants"]');
2020-05-24 23:13:21 +05:30
const getCollapsedParticipantsCount = () => wrapper.find('[data-testid="collapsed-count"]');
2021-03-08 18:12:59 +05:30
const mountComponent = (propsData) =>
2020-05-24 23:13:21 +05:30
shallowMount(Participants, {
propsData,
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('collapsed sidebar state', () => {
it('shows loading spinner when loading', () => {
wrapper = mountComponent({
loading: true,
});
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
2020-05-24 23:13:21 +05:30
});
it('does not show loading spinner not loading', () => {
wrapper = mountComponent({
loading: false,
});
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
2020-05-24 23:13:21 +05:30
});
it('shows participant count when given', () => {
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
});
expect(getCollapsedParticipantsCount().text()).toBe(`${PARTICIPANT_LIST.length}`);
});
it('shows full participant count when there are hidden participants', () => {
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
numberOfLessParticipants: 1,
});
expect(getCollapsedParticipantsCount().text()).toBe(`${PARTICIPANT_LIST.length}`);
});
});
describe('expanded sidebar state', () => {
it('shows loading spinner when loading', () => {
wrapper = mountComponent({
loading: true,
});
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
2020-05-24 23:13:21 +05:30
});
2022-04-04 11:22:00 +05:30
it('when only showing visible participants, shows an avatar only for each participant under the limit', async () => {
2020-05-24 23:13:21 +05:30
const numberOfLessParticipants = 2;
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
numberOfLessParticipants,
});
2022-03-02 08:16:31 +05:30
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
2020-05-24 23:13:21 +05:30
wrapper.setData({
isShowingMoreParticipants: false,
});
2022-04-04 11:22:00 +05:30
await nextTick();
expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
2020-05-24 23:13:21 +05:30
});
2022-04-04 11:22:00 +05:30
it('when only showing all participants, each has an avatar', async () => {
2020-05-24 23:13:21 +05:30
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
numberOfLessParticipants: 2,
});
2022-03-02 08:16:31 +05:30
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
2020-05-24 23:13:21 +05:30
wrapper.setData({
isShowingMoreParticipants: true,
});
2022-04-04 11:22:00 +05:30
await nextTick();
expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
2020-05-24 23:13:21 +05:30
});
it('does not have more participants link when they can all be shown', () => {
const numberOfLessParticipants = 100;
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
numberOfLessParticipants,
});
expect(PARTICIPANT_LIST.length).toBeLessThan(numberOfLessParticipants);
expect(getMoreParticipantsButton().exists()).toBe(false);
});
2022-04-04 11:22:00 +05:30
it('when too many participants, has more participants link to show more', async () => {
2020-05-24 23:13:21 +05:30
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
numberOfLessParticipants: 2,
});
2022-03-02 08:16:31 +05:30
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
2020-05-24 23:13:21 +05:30
wrapper.setData({
isShowingMoreParticipants: false,
});
2022-04-04 11:22:00 +05:30
await nextTick();
expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
2020-05-24 23:13:21 +05:30
});
2022-04-04 11:22:00 +05:30
it('when too many participants and already showing them, has more participants link to show less', async () => {
2020-05-24 23:13:21 +05:30
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
numberOfLessParticipants: 2,
});
2022-03-02 08:16:31 +05:30
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
2020-05-24 23:13:21 +05:30
wrapper.setData({
isShowingMoreParticipants: true,
});
2022-04-04 11:22:00 +05:30
await nextTick();
expect(getMoreParticipantsButton().text()).toBe('- show less');
2020-05-24 23:13:21 +05:30
});
it('clicking more participants link emits event', () => {
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
numberOfLessParticipants: 2,
});
expect(wrapper.vm.isShowingMoreParticipants).toBe(false);
2022-06-21 17:19:12 +05:30
getMoreParticipantsButton().vm.$emit('click');
2020-05-24 23:13:21 +05:30
expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
});
2022-04-04 11:22:00 +05:30
it('clicking on participants icon emits `toggleSidebar` event', async () => {
2020-05-24 23:13:21 +05:30
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
numberOfLessParticipants: 2,
});
const spy = jest.spyOn(wrapper.vm, '$emit');
wrapper.find('.sidebar-collapsed-icon').trigger('click');
2022-04-04 11:22:00 +05:30
await nextTick();
expect(spy).toHaveBeenCalledWith('toggleSidebar');
spy.mockRestore();
2020-05-24 23:13:21 +05:30
});
});
describe('when not showing participants label', () => {
beforeEach(() => {
wrapper = mountComponent({
participants: PARTICIPANT_LIST,
showParticipantLabel: false,
});
});
it('does not show sidebar collapsed icon', () => {
2020-11-24 15:15:51 +05:30
expect(wrapper.find('.sidebar-collapsed-icon').exists()).toBe(false);
2020-05-24 23:13:21 +05:30
});
it('does not show participants label title', () => {
2020-11-24 15:15:51 +05:30
expect(wrapper.find('.title').exists()).toBe(false);
2020-05-24 23:13:21 +05:30
});
});
});