diff options
Diffstat (limited to 'spec/javascripts/sidebar/participants_spec.js')
| -rw-r--r-- | spec/javascripts/sidebar/participants_spec.js | 202 |
1 files changed, 0 insertions, 202 deletions
diff --git a/spec/javascripts/sidebar/participants_spec.js b/spec/javascripts/sidebar/participants_spec.js deleted file mode 100644 index 7e80e86f8ca..00000000000 --- a/spec/javascripts/sidebar/participants_spec.js +++ /dev/null @@ -1,202 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -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', function() { - 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(); - }); - - it('when only showing visible participants, shows an avatar only for each participant under the limit', done => { - 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); - }); - - it('when only showing all participants, each has an avatar', done => { - 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(); - }); - - it('when too many participants, has more participants link to show more', done => { - 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); - }); - - it('when too many participants and already showing them, has more participants link to show less', done => { - 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); - }); - - 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(); - - expect(vm.$emit).toHaveBeenCalledWith('toggleSidebar'); - }); - }); - - describe('when not showing participants label', () => { - beforeEach(() => { - vm = mountComponent(Participants, { - participants: PARTICIPANT_LIST, - showParticipantLabel: false, - }); - }); - - it('does not show sidebar collapsed icon', () => { - expect(vm.$el.querySelector('.sidebar-collapsed-icon')).not.toBeTruthy(); - }); - - it('does not show participants label title', () => { - expect(vm.$el.querySelector('.title')).not.toBeTruthy(); - }); - }); -}); |