1 files changed, 361 insertions, 46 deletions

diff --git a/spec/frontend/work_items/components/work_item_assignees_spec.js b/spec/frontend/work_items/components/work_item_assignees_spec.js
index 0552fe5050e..299949a4baa 100644
--- a/spec/frontend/work_items/components/work_item_assignees_spec.js
+++ b/spec/frontend/work_items/components/work_item_assignees_spec.js
@@ -1,52 +1,90 @@
-import { GlLink, GlTokenSelector } from '@gitlab/ui';
-import { nextTick } from 'vue';
+import { GlLink, GlTokenSelector, GlSkeletonLoader } from '@gitlab/ui';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import { stripTypenames } from 'helpers/graphql_helpers';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import userSearchQuery from '~/graphql_shared/queries/users_search.query.graphql';
+import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
+import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import WorkItemAssignees from '~/work_items/components/work_item_assignees.vue';
-import localUpdateWorkItemMutation from '~/work_items/graphql/local_update_work_item.mutation.graphql';
-
-const mockAssignees = [
-  {
-    __typename: 'UserCore',
-    id: 'gid://gitlab/User/1',
-    avatarUrl: '',
-    webUrl: '',
-    name: 'John Doe',
-    username: 'doe_I',
-  },
-  {
-    __typename: 'UserCore',
-    id: 'gid://gitlab/User/2',
-    avatarUrl: '',
-    webUrl: '',
-    name: 'Marcus Rutherford',
-    username: 'ruthfull',
-  },
-];
+import { i18n, TASK_TYPE_NAME, TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
+import { temporaryConfig, resolvers } from '~/work_items/graphql/provider';
+import {
+  projectMembersResponseWithCurrentUser,
+  mockAssignees,
+  workItemQueryResponse,
+  currentUserResponse,
+  currentUserNullResponse,
+  projectMembersResponseWithoutCurrentUser,
+} from '../mock_data';
 
-const workItemId = 'gid://gitlab/WorkItem/1';
+Vue.use(VueApollo);
 
-const mutate = jest.fn();
+const workItemId = 'gid://gitlab/WorkItem/1';
+const dropdownItems = projectMembersResponseWithCurrentUser.data.workspace.users.nodes;
 
 describe('WorkItemAssignees component', () => {
   let wrapper;
 
   const findAssigneeLinks = () => wrapper.findAllComponents(GlLink);
   const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
 
   const findEmptyState = () => wrapper.findByTestId('empty-state');
+  const findAssignSelfButton = () => wrapper.findByTestId('assign-self');
+  const findAssigneesTitle = () => wrapper.findByTestId('assignees-title');
+
+  const successSearchQueryHandler = jest
+    .fn()
+    .mockResolvedValue(projectMembersResponseWithCurrentUser);
+  const successCurrentUserQueryHandler = jest.fn().mockResolvedValue(currentUserResponse);
+  const noCurrentUserQueryHandler = jest.fn().mockResolvedValue(currentUserNullResponse);
+
+  const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
+
+  const createComponent = ({
+    assignees = mockAssignees,
+    searchQueryHandler = successSearchQueryHandler,
+    currentUserQueryHandler = successCurrentUserQueryHandler,
+    allowsMultipleAssignees = true,
+    canUpdate = true,
+  } = {}) => {
+    const apolloProvider = createMockApollo(
+      [
+        [userSearchQuery, searchQueryHandler],
+        [currentUserQuery, currentUserQueryHandler],
+      ],
+      resolvers,
+      {
+        typePolicies: temporaryConfig.cacheConfig.typePolicies,
+      },
+    );
+
+    apolloProvider.clients.defaultClient.writeQuery({
+      query: workItemQuery,
+      variables: {
+        id: workItemId,
+      },
+      data: workItemQueryResponse.data,
+    });
 
-  const createComponent = ({ assignees = mockAssignees } = {}) => {
     wrapper = mountExtended(WorkItemAssignees, {
+      provide: {
+        fullPath: 'test-project-path',
+      },
       propsData: {
         assignees,
         workItemId,
-      },
-      mocks: {
-        $apollo: {
-          mutate,
-        },
+        allowsMultipleAssignees,
+        workItemType: TASK_TYPE_NAME,
+        canUpdate,
       },
       attachTo: document.body,
+      apolloProvider,
     });
   };
 
@@ -54,39 +92,316 @@ describe('WorkItemAssignees component', () => {
     wrapper.destroy();
   });
 
-  it('should pass the correct data-user-id attribute', () => {
+  it('passes the correct data-user-id attribute', () => {
     createComponent();
 
     expect(findAssigneeLinks().at(0).attributes('data-user-id')).toBe('1');
   });
 
-  describe('when there are assignees', () => {
+  it('container does not have shadow by default', () => {
+    createComponent();
+    expect(findTokenSelector().props('containerClass')).toBe('gl-shadow-none!');
+  });
+
+  it('container has shadow after focusing token selector', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('focus');
+    await nextTick();
+
+    expect(findTokenSelector().props('containerClass')).toBe('');
+  });
+
+  it('focuses token selector on token selector input event', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
+    await nextTick();
+
+    expect(findEmptyState().exists()).toBe(false);
+    expect(findTokenSelector().element.contains(document.activeElement)).toBe(true);
+  });
+
+  it('calls a mutation on clicking outside the token selector', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
+    findTokenSelector().vm.$emit('blur', new FocusEvent({ relatedTarget: null }));
+    await waitForPromises();
+
+    expect(findTokenSelector().props('selectedTokens')).toEqual([mockAssignees[0]]);
+  });
+
+  it('passes `false` to `viewOnly` token selector prop if user can update assignees', () => {
+    createComponent();
+
+    expect(findTokenSelector().props('viewOnly')).toBe(false);
+  });
+
+  it('passes `true` to `viewOnly` token selector prop if user can not update assignees', () => {
+    createComponent({ canUpdate: false });
+
+    expect(findTokenSelector().props('viewOnly')).toBe(true);
+  });
+
+  describe('when searching for users', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('should focus token selector on token removal', async () => {
-      findTokenSelector().vm.$emit('token-remove', mockAssignees[0].id);
+    it('does not start user search by default', () => {
+      expect(findTokenSelector().props('loading')).toBe(false);
+      expect(findTokenSelector().props('dropdownItems')).toEqual([]);
+    });
+
+    it('starts user search on hovering for more than 250ms', async () => {
+      findTokenSelector().trigger('mouseover');
+      jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
       await nextTick();
 
-      expect(findEmptyState().exists()).toBe(false);
-      expect(findTokenSelector().element.contains(document.activeElement)).toBe(true);
+      expect(findTokenSelector().props('loading')).toBe(true);
     });
 
-    it('should call a mutation on clicking outside the token selector', async () => {
-      findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
-      findTokenSelector().vm.$emit('token-remove');
+    it('starts user search on focusing token selector', async () => {
+      findTokenSelector().vm.$emit('focus');
       await nextTick();
-      expect(mutate).not.toHaveBeenCalled();
 
-      findTokenSelector().vm.$emit('blur', new FocusEvent({ relatedTarget: null }));
+      expect(findTokenSelector().props('loading')).toBe(true);
+    });
+
+    it('does not start searching if token-selector was hovered for less than 250ms', async () => {
+      findTokenSelector().trigger('mouseover');
+      jest.advanceTimersByTime(100);
+      await nextTick();
+
+      expect(findTokenSelector().props('loading')).toBe(false);
+    });
+
+    it('does not start searching if cursor was moved out from token selector before 250ms passed', async () => {
+      findTokenSelector().trigger('mouseover');
+      jest.advanceTimersByTime(100);
+
+      findTokenSelector().trigger('mouseout');
+      jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+      await nextTick();
+
+      expect(findTokenSelector().props('loading')).toBe(false);
+    });
+
+    it('shows skeleton loader on dropdown when loading users', async () => {
+      findTokenSelector().vm.$emit('focus');
       await nextTick();
 
-      expect(mutate).toHaveBeenCalledWith({
-        mutation: localUpdateWorkItemMutation,
-        variables: {
-          input: { id: workItemId, assigneeIds: [mockAssignees[0].id] },
-        },
+      expect(findSkeletonLoader().exists()).toBe(true);
+    });
+
+    it('shows correct users list in dropdown when loaded', async () => {
+      findTokenSelector().vm.$emit('focus');
+      await nextTick();
+
+      expect(findSkeletonLoader().exists()).toBe(true);
+
+      await waitForPromises();
+
+      expect(findSkeletonLoader().exists()).toBe(false);
+      expect(findTokenSelector().props('dropdownItems')).toHaveLength(2);
+    });
+
+    it('should search for users with correct key after text input', async () => {
+      const searchKey = 'Hello';
+
+      findTokenSelector().vm.$emit('focus');
+      findTokenSelector().vm.$emit('text-input', searchKey);
+      await waitForPromises();
+
+      expect(successSearchQueryHandler).toHaveBeenCalledWith(
+        expect.objectContaining({ search: searchKey }),
+      );
+    });
+  });
+
+  it('emits error event if search users query fails', async () => {
+    createComponent({ searchQueryHandler: errorHandler });
+    findTokenSelector().vm.$emit('focus');
+    await waitForPromises();
+
+    expect(wrapper.emitted('error')).toEqual([[i18n.fetchError]]);
+  });
+
+  describe('when assigning to current user', () => {
+    it('does not show `Assign myself` button if current user is loading', () => {
+      createComponent();
+      findTokenSelector().trigger('mouseover');
+
+      expect(findAssignSelfButton().exists()).toBe(false);
+    });
+
+    it('does not show `Assign myself` button if work item has assignees', async () => {
+      createComponent();
+      await waitForPromises();
+      findTokenSelector().trigger('mouseover');
+
+      expect(findAssignSelfButton().exists()).toBe(false);
+    });
+
+    it('does now show `Assign myself` button if user is not logged in', async () => {
+      createComponent({ currentUserQueryHandler: noCurrentUserQueryHandler, assignees: [] });
+      await waitForPromises();
+      findTokenSelector().trigger('mouseover');
+
+      expect(findAssignSelfButton().exists()).toBe(false);
+    });
+  });
+
+  describe('when user is logged in and there are no assignees', () => {
+    beforeEach(() => {
+      createComponent({ assignees: [] });
+      return waitForPromises();
+    });
+
+    it('renders `Assign myself` button', async () => {
+      findTokenSelector().trigger('mouseover');
+      expect(findAssignSelfButton().exists()).toBe(true);
+    });
+
+    it('calls update work item assignees mutation with current user as a variable on button click', () => {
+      // TODO: replace this test as soon as we have a real mutation implemented
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockImplementation(jest.fn());
+
+      findTokenSelector().trigger('mouseover');
+      findAssignSelfButton().vm.$emit('click', new MouseEvent('click'));
+
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variables: {
+            input: {
+              assignees: [stripTypenames(currentUserResponse.data.currentUser)],
+              id: workItemId,
+            },
+          },
+        }),
+      );
+    });
+  });
+
+  it('moves current user to the top of dropdown items if user is a project member', async () => {
+    createComponent();
+    await waitForPromises();
+
+    expect(findTokenSelector().props('dropdownItems')[0]).toEqual(
+      expect.objectContaining({
+        ...stripTypenames(currentUserResponse.data.currentUser),
+      }),
+    );
+  });
+
+  describe('when current user is not in the list of project members', () => {
+    const searchQueryHandler = jest
+      .fn()
+      .mockResolvedValue(projectMembersResponseWithoutCurrentUser);
+
+    beforeEach(() => {
+      createComponent({ searchQueryHandler });
+      return waitForPromises();
+    });
+
+    it('adds current user to the top of dropdown items', () => {
+      expect(findTokenSelector().props('dropdownItems')[0]).toEqual(
+        stripTypenames(currentUserResponse.data.currentUser),
+      );
+    });
+
+    it('does not add current user if search is not empty', async () => {
+      findTokenSelector().vm.$emit('text-input', 'test');
+      await waitForPromises();
+
+      expect(findTokenSelector().props('dropdownItems')[0]).not.toEqual(
+        stripTypenames(currentUserResponse.data.currentUser),
+      );
+    });
+  });
+
+  it('has `Assignee` label when only one assignee is present', () => {
+    createComponent({ assignees: [mockAssignees[0]] });
+
+    expect(findAssigneesTitle().text()).toBe('Assignee');
+  });
+
+  it('has `Assignees` label if more than one assignee is present', () => {
+    createComponent();
+
+    expect(findAssigneesTitle().text()).toBe('Assignees');
+  });
+
+  describe('when multiple assignees are allowed', () => {
+    beforeEach(() => {
+      createComponent({ allowsMultipleAssignees: true, assignees: [] });
+      return waitForPromises();
+    });
+
+    it('has `Add assignees` text on placeholder', () => {
+      expect(findEmptyState().text()).toContain('Add assignees');
+    });
+
+    it('adds multiple assignees when token-selector provides multiple values', async () => {
+      findTokenSelector().vm.$emit('input', dropdownItems);
+      await nextTick();
+
+      expect(findTokenSelector().props('selectedTokens')).toHaveLength(2);
+    });
+  });
+
+  describe('when multiple assignees are not allowed', () => {
+    beforeEach(() => {
+      createComponent({ allowsMultipleAssignees: false, assignees: [] });
+      return waitForPromises();
+    });
+
+    it('has `Add assignee` text on placeholder', () => {
+      expect(findEmptyState().text()).toContain('Add assignee');
+      expect(findEmptyState().text()).not.toContain('Add assignees');
+    });
+
+    it('adds a single assignee token-selector provides multiple values', async () => {
+      findTokenSelector().vm.$emit('input', dropdownItems);
+      await nextTick();
+
+      expect(findTokenSelector().props('selectedTokens')).toHaveLength(1);
+    });
+
+    it('removes shadow after token-selector input', async () => {
+      findTokenSelector().vm.$emit('input', dropdownItems);
+      await nextTick();
+
+      expect(findTokenSelector().props('containerClass')).toBe('gl-shadow-none!');
+    });
+  });
+
+  describe('tracking', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      trackingSpy = null;
+    });
+
+    it('does not track updating assignees until token selector blur event', async () => {
+      findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
+      await waitForPromises();
+
+      expect(trackingSpy).not.toHaveBeenCalled();
+    });
+
+    it('tracks editing the assignees on token selector blur', async () => {
+      findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
+      findTokenSelector().vm.$emit('blur', new FocusEvent({ relatedTarget: null }));
+      await waitForPromises();
+
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, 'updated_assignees', {
+        category: TRACKING_CATEGORY_SHOW,
+        label: 'item_assignees',
+        property: 'type_Task',
       });
     });
   });