2017-10-31 16:15:03 +00:00
|
|
|
import Vue from 'vue';
|
|
|
|
import participants from '~/sidebar/components/participants/participants.vue';
|
2018-02-26 19:43:34 +00:00
|
|
|
import mountComponent from 'spec/helpers/vue_mount_component_helper';
|
2017-10-31 16:15:03 +00:00
|
|
|
|
|
|
|
const PARTICIPANT = {
|
|
|
|
id: 1,
|
|
|
|
state: 'active',
|
|
|
|
username: 'marcene',
|
|
|
|
name: 'Allie Will',
|
|
|
|
web_url: 'foo.com',
|
|
|
|
avatar_url: 'gravatar.com/avatar/xxx',
|
|
|
|
};
|
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPANT, id: 3 }];
|
2017-10-31 16:15:03 +00:00
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
describe('Participants', function() {
|
2017-10-31 16:15:03 +00:00
|
|
|
let vm;
|
|
|
|
let Participants;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
Participants = Vue.extend(participants);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
vm.$destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('collapsed sidebar state', () => {
|
|
|
|
it('shows loading spinner when loading', () => {
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(vm.$el.querySelector('.js-participants-collapsed-loading-icon')).toBeDefined();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows participant count when given', () => {
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
});
|
|
|
|
const countEl = vm.$el.querySelector('.js-participants-collapsed-count');
|
|
|
|
|
|
|
|
expect(countEl.textContent.trim()).toBe(`${PARTICIPANT_LIST.length}`);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows full participant count when there are hidden participants', () => {
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
numberOfLessParticipants: 1,
|
|
|
|
});
|
|
|
|
const countEl = vm.$el.querySelector('.js-participants-collapsed-count');
|
|
|
|
|
|
|
|
expect(countEl.textContent.trim()).toBe(`${PARTICIPANT_LIST.length}`);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('expanded sidebar state', () => {
|
|
|
|
it('shows loading spinner when loading', () => {
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(vm.$el.querySelector('.js-participants-expanded-loading-icon')).toBeDefined();
|
|
|
|
});
|
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
it('when only showing visible participants, shows an avatar only for each participant under the limit', done => {
|
2017-10-31 16:15:03 +00:00
|
|
|
const numberOfLessParticipants = 2;
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
numberOfLessParticipants,
|
|
|
|
});
|
|
|
|
vm.isShowingMoreParticipants = false;
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
const participantEls = vm.$el.querySelectorAll('.js-participants-author');
|
|
|
|
|
|
|
|
expect(participantEls.length).toBe(numberOfLessParticipants);
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
it('when only showing all participants, each has an avatar', done => {
|
2017-10-31 16:15:03 +00:00
|
|
|
const numberOfLessParticipants = 2;
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
numberOfLessParticipants,
|
|
|
|
});
|
|
|
|
vm.isShowingMoreParticipants = true;
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
const participantEls = vm.$el.querySelectorAll('.js-participants-author');
|
|
|
|
|
|
|
|
expect(participantEls.length).toBe(PARTICIPANT_LIST.length);
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not have more participants link when they can all be shown', () => {
|
|
|
|
const numberOfLessParticipants = 100;
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
numberOfLessParticipants,
|
|
|
|
});
|
|
|
|
const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');
|
|
|
|
|
|
|
|
expect(PARTICIPANT_LIST.length).toBeLessThan(numberOfLessParticipants);
|
|
|
|
expect(moreParticipantLink).toBeNull();
|
|
|
|
});
|
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
it('when too many participants, has more participants link to show more', done => {
|
2017-10-31 16:15:03 +00:00
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
numberOfLessParticipants: 2,
|
|
|
|
});
|
|
|
|
vm.isShowingMoreParticipants = false;
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');
|
|
|
|
|
|
|
|
expect(moreParticipantLink.textContent.trim()).toBe('+ 1 more');
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
it('when too many participants and already showing them, has more participants link to show less', done => {
|
2017-10-31 16:15:03 +00:00
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
numberOfLessParticipants: 2,
|
|
|
|
});
|
|
|
|
vm.isShowingMoreParticipants = true;
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');
|
|
|
|
|
|
|
|
expect(moreParticipantLink.textContent.trim()).toBe('- show less');
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('clicking more participants link emits event', () => {
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
numberOfLessParticipants: 2,
|
|
|
|
});
|
|
|
|
const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');
|
|
|
|
|
|
|
|
expect(vm.isShowingMoreParticipants).toBe(false);
|
|
|
|
|
|
|
|
moreParticipantLink.click();
|
|
|
|
|
|
|
|
expect(vm.isShowingMoreParticipants).toBe(true);
|
|
|
|
});
|
2018-05-03 09:35:17 +00:00
|
|
|
|
|
|
|
it('clicking on participants icon emits `toggleSidebar` event', () => {
|
|
|
|
vm = mountComponent(Participants, {
|
|
|
|
loading: false,
|
|
|
|
participants: PARTICIPANT_LIST,
|
|
|
|
numberOfLessParticipants: 2,
|
|
|
|
});
|
|
|
|
spyOn(vm, '$emit');
|
|
|
|
|
|
|
|
const participantsIconEl = vm.$el.querySelector('.sidebar-collapsed-icon');
|
|
|
|
|
|
|
|
participantsIconEl.click();
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2018-05-03 09:35:17 +00:00
|
|
|
expect(vm.$emit).toHaveBeenCalledWith('toggleSidebar');
|
|
|
|
});
|
2017-10-31 16:15:03 +00:00
|
|
|
});
|
|
|
|
});
|