Add latest changes from gitlab-org/gitlab@master

1 files changed, 54 insertions, 143 deletions

diff --git a/spec/frontend/sidebar/components/participants/participants_spec.js b/spec/frontend/sidebar/components/participants/participants_spec.js
index f7a626a189c..72d83ebeca4 100644
--- a/spec/frontend/sidebar/components/participants/participants_spec.js
+++ b/spec/frontend/sidebar/components/participants/participants_spec.js
@@ -1,203 +1,114 @@
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 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', () => {
+describe('Participants component', () => {
   let wrapper;
 
-  const getMoreParticipantsButton = () => wrapper.find('[data-testid="more-participants"]');
-  const getCollapsedParticipantsCount = () => wrapper.find('[data-testid="collapsed-count"]');
+  const participant = {
+    id: 1,
+    state: 'active',
+    username: 'marcene',
+    name: 'Allie Will',
+    web_url: 'foo.com',
+    avatar_url: 'gravatar.com/avatar/xxx',
+  };
 
-  const mountComponent = (propsData) =>
-    shallowMount(Participants, {
-      propsData,
-    });
+  const participants = [participant, { ...participant, id: 2 }, { ...participant, id: 3 }];
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findMoreParticipantsButton = () => wrapper.findComponent(GlButton);
+  const findCollapsedIcon = () => wrapper.find('.sidebar-collapsed-icon');
+  const findParticipantsAuthor = () => wrapper.findAll('.participants-author');
+
+  const mountComponent = (propsData) => shallowMount(Participants, { propsData });
 
   describe('collapsed sidebar state', () => {
     it('shows loading spinner when loading', () => {
-      wrapper = mountComponent({
-        loading: true,
-      });
+      wrapper = mountComponent({ loading: true });
 
-      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+      expect(findLoadingIcon().exists()).toBe(true);
     });
 
-    it('does not show loading spinner not loading', () => {
-      wrapper = mountComponent({
-        loading: false,
-      });
+    it('does not show loading spinner when not loading', () => {
+      wrapper = mountComponent({ loading: false });
 
-      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
+      expect(findLoadingIcon().exists()).toBe(false);
     });
 
     it('shows participant count when given', () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-      });
+      wrapper = mountComponent({ participants });
 
-      expect(getCollapsedParticipantsCount().text()).toBe(`${PARTICIPANT_LIST.length}`);
+      expect(findCollapsedIcon().text()).toBe(participants.length.toString());
     });
 
     it('shows full participant count when there are hidden participants', () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 1,
-      });
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 1 });
 
-      expect(getCollapsedParticipantsCount().text()).toBe(`${PARTICIPANT_LIST.length}`);
+      expect(findCollapsedIcon().text()).toBe(participants.length.toString());
     });
   });
 
   describe('expanded sidebar state', () => {
     it('shows loading spinner when loading', () => {
-      wrapper = mountComponent({
-        loading: true,
-      });
+      wrapper = mountComponent({ loading: true });
 
-      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+      expect(findLoadingIcon().exists()).toBe(true);
     });
 
-    it('when only showing visible participants, shows an avatar only for each participant under the limit', async () => {
+    it('when only showing visible participants, shows an avatar only for each participant under the limit', () => {
       const numberOfLessParticipants = 2;
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants,
-      });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        isShowingMoreParticipants: false,
-      });
-
-      await nextTick();
-      expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
+      wrapper = mountComponent({ participants, numberOfLessParticipants });
+
+      expect(findParticipantsAuthor()).toHaveLength(numberOfLessParticipants);
     });
 
     it('when only showing all participants, each has an avatar', async () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        isShowingMoreParticipants: true,
-      });
-
-      await nextTick();
-      expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 2 });
+
+      await findMoreParticipantsButton().vm.$emit('click');
+
+      expect(findParticipantsAuthor()).toHaveLength(participants.length);
     });
 
     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);
-    });
+      wrapper = mountComponent({ participants, numberOfLessParticipants });
 
-    it('when too many participants, has more participants link to show more', async () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        isShowingMoreParticipants: false,
-      });
-
-      await nextTick();
-      expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
+      expect(participants.length).toBeLessThan(numberOfLessParticipants);
+      expect(findMoreParticipantsButton().exists()).toBe(false);
     });
 
-    it('when too many participants and already showing them, has more participants link to show less', async () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        isShowingMoreParticipants: true,
-      });
-
-      await nextTick();
-      expect(getMoreParticipantsButton().text()).toBe('- show less');
-    });
+    it('when too many participants, has more participants link to show more', () => {
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 2 });
 
-    it('clicking more participants link emits event', () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
+      expect(findMoreParticipantsButton().text()).toBe('+ 1 more');
+    });
 
-      expect(wrapper.vm.isShowingMoreParticipants).toBe(false);
+    it('when too many participants and already showing them, has more participants link to show less', async () => {
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 2 });
 
-      getMoreParticipantsButton().vm.$emit('click');
+      await findMoreParticipantsButton().vm.$emit('click');
 
-      expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
+      expect(findMoreParticipantsButton().text()).toBe('- show less');
     });
 
-    it('clicking on participants icon emits `toggleSidebar` event', async () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
-
-      const spy = jest.spyOn(wrapper.vm, '$emit');
+    it('clicking on participants icon emits `toggleSidebar` event', () => {
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 2 });
 
-      wrapper.find('.sidebar-collapsed-icon').trigger('click');
+      findCollapsedIcon().trigger('click');
 
-      await nextTick();
-      expect(spy).toHaveBeenCalledWith('toggleSidebar');
-      spy.mockRestore();
+      expect(wrapper.emitted('toggleSidebar')).toEqual([[]]);
     });
   });
 
   describe('when not showing participants label', () => {
     beforeEach(() => {
-      wrapper = mountComponent({
-        participants: PARTICIPANT_LIST,
-        showParticipantLabel: false,
-      });
+      wrapper = mountComponent({ participants, showParticipantLabel: false });
     });
 
     it('does not show sidebar collapsed icon', () => {
-      expect(wrapper.find('.sidebar-collapsed-icon').exists()).toBe(false);
+      expect(findCollapsedIcon().exists()).toBe(false);
     });
 
     it('does not show participants label title', () => {