1 files changed, 67 insertions, 3 deletions

diff --git a/spec/frontend/boards/components/board_assignee_dropdown_spec.js b/spec/frontend/boards/components/board_assignee_dropdown_spec.js
index e185a6d5419..5ddd00f7fd4 100644
--- a/spec/frontend/boards/components/board_assignee_dropdown_spec.js
+++ b/spec/frontend/boards/components/board_assignee_dropdown_spec.js
@@ -1,5 +1,11 @@
 import { mount, createLocalVue } from '@vue/test-utils';
-import { GlDropdownItem, GlAvatarLink, GlAvatarLabeled, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlDropdownItem,
+  GlAvatarLink,
+  GlAvatarLabeled,
+  GlSearchBoxByType,
+  GlLoadingIcon,
+} from '@gitlab/ui';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import VueApollo from 'vue-apollo';
 import BoardAssigneeDropdown from '~/boards/components/board_assignee_dropdown.vue';
@@ -20,12 +26,13 @@ describe('BoardCardAssigneeDropdown', () => {
   let fakeApollo;
   let getIssueParticipantsSpy;
   let getSearchUsersSpy;
+  let dispatchSpy;
 
   const iid = '111';
   const activeIssueName = 'test';
   const anotherIssueName = 'hello';
 
-  const createComponent = (search = '') => {
+  const createComponent = (search = '', loading = false) => {
     wrapper = mount(BoardAssigneeDropdown, {
       data() {
         return {
@@ -39,6 +46,15 @@ describe('BoardCardAssigneeDropdown', () => {
         canUpdate: true,
         rootPath: '',
       },
+      mocks: {
+        $apollo: {
+          queries: {
+            participants: {
+              loading,
+            },
+          },
+        },
+      },
     });
   };
 
@@ -82,6 +98,8 @@ describe('BoardCardAssigneeDropdown', () => {
     return wrapper.findAll(GlDropdownItem).wrappers.find(node => node.text().indexOf(text) === 0);
   };
 
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+
   beforeEach(() => {
     store.state.activeId = '1';
     store.state.issues = {
@@ -91,10 +109,11 @@ describe('BoardCardAssigneeDropdown', () => {
       },
     };
 
-    jest.spyOn(store, 'dispatch').mockResolvedValue();
+    dispatchSpy = jest.spyOn(store, 'dispatch').mockResolvedValue();
   });
 
   afterEach(() => {
+    window.gon = {};
     jest.restoreAllMocks();
   });
 
@@ -243,6 +262,30 @@ describe('BoardCardAssigneeDropdown', () => {
     },
   );
 
+  describe('when participants is loading', () => {
+    beforeEach(() => {
+      createComponent('', true);
+    });
+
+    it('finds a loading icon in the dropdown', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+  });
+
+  describe('when participants is loading is false', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('does not find GlLoading icon in the dropdown', () => {
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+
+    it('finds at least 1 GlDropdownItem', () => {
+      expect(wrapper.findAll(GlDropdownItem).length).toBeGreaterThan(0);
+    });
+  });
+
   describe('Apollo', () => {
     beforeEach(() => {
       getIssueParticipantsSpy = jest.fn().mockResolvedValue({
@@ -305,4 +348,25 @@ describe('BoardCardAssigneeDropdown', () => {
 
     expect(wrapper.find(GlSearchBoxByType).exists()).toBe(true);
   });
+
+  describe('when assign-self is emitted from IssuableAssignees', () => {
+    const currentUser = { username: 'self', name: '', id: '' };
+
+    beforeEach(() => {
+      window.gon = { current_username: currentUser.username };
+
+      dispatchSpy.mockResolvedValue([currentUser]);
+      createComponent();
+
+      wrapper.find(IssuableAssignees).vm.$emit('assign-self');
+    });
+
+    it('calls setAssignees with currentUser', () => {
+      expect(store.dispatch).toHaveBeenCalledWith('setAssignees', currentUser.username);
+    });
+
+    it('adds the user to the selected list', async () => {
+      expect(findByText(currentUser.username).exists()).toBe(true);
+    });
+  });
 });