diff options
Diffstat (limited to 'spec/frontend/work_items/components/work_item_assignees_spec.js')
-rw-r--r-- | spec/frontend/work_items/components/work_item_assignees_spec.js | 407 |
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', }); }); }); |