diff options
Diffstat (limited to 'spec/frontend/sidebar')
20 files changed, 153 insertions, 147 deletions
diff --git a/spec/frontend/sidebar/assignees_realtime_spec.js b/spec/frontend/sidebar/assignees_realtime_spec.js index ecf33d6de37..2249a1c08b8 100644 --- a/spec/frontend/sidebar/assignees_realtime_spec.js +++ b/spec/frontend/sidebar/assignees_realtime_spec.js @@ -1,4 +1,5 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import AssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue'; @@ -7,8 +8,7 @@ import SidebarMediator from '~/sidebar/sidebar_mediator'; import getIssueAssigneesQuery from '~/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql'; import Mock, { issuableQueryResponse, subscriptionNullResponse } from './mock_data'; -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); describe('Assignees Realtime', () => { let wrapper; @@ -38,7 +38,6 @@ describe('Assignees Realtime', () => { mediator, }, apolloProvider: fakeApollo, - localVue, }); }; diff --git a/spec/frontend/sidebar/assignees_spec.js b/spec/frontend/sidebar/assignees_spec.js index b3a67f18f82..a4474ead956 100644 --- a/spec/frontend/sidebar/assignees_spec.js +++ b/spec/frontend/sidebar/assignees_spec.js @@ -1,5 +1,6 @@ import { GlIcon } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { trimText } from 'helpers/text_helper'; import UsersMockHelper from 'helpers/user_mock_data_helper'; import Assignee from '~/sidebar/components/assignees/assignees.vue'; @@ -59,7 +60,7 @@ describe('Assignee component', () => { expect(componentTextNoUsers).toContain('assign yourself'); }); - it('emits the assign-self event when "assign yourself" is clicked', () => { + it('emits the assign-self event when "assign yourself" is clicked', async () => { createWrapper({ ...getDefaultProps(), editable: true, @@ -68,9 +69,8 @@ describe('Assignee component', () => { jest.spyOn(wrapper.vm, '$emit'); wrapper.find('[data-testid="assign-yourself"]').trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted('assign-self')).toBeTruthy(); - }); + await nextTick(); + expect(wrapper.emitted('assign-self')).toBeTruthy(); }); }); diff --git a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js index 07da4acef8c..def46255994 100644 --- a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js +++ b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js @@ -1,6 +1,7 @@ import { GlSearchBoxByType, GlDropdown } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; + import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -23,8 +24,7 @@ const updateIssueAssigneesMutationSuccess = jest .mockResolvedValue(updateIssueAssigneesMutationResponse); const mockError = jest.fn().mockRejectedValue('Error!'); -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); const initialAssignees = [ { @@ -59,7 +59,6 @@ describe('Sidebar assignees widget', () => { [updateIssueAssigneesMutation, updateIssueAssigneesMutationHandler], ]); wrapper = shallowMount(SidebarAssigneesWidget, { - localVue, apolloProvider: fakeApollo, propsData: { iid: '1', @@ -138,9 +137,17 @@ describe('Sidebar assignees widget', () => { createComponent(); await waitForPromises(); - expect(findAssignees().props('users')).toEqual( - issuableQueryResponse.data.workspace.issuable.assignees.nodes, - ); + expect(findAssignees().props('users')).toEqual([ + { + id: 'gid://gitlab/User/2', + avatarUrl: + 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon', + name: 'Jacki Kub', + username: 'francina.skiles', + webUrl: '/franc', + status: null, + }, + ]); }); it('renders an error when issuable query is rejected', async () => { @@ -196,7 +203,7 @@ describe('Sidebar assignees widget', () => { { assignees: [ { - __typename: 'User', + __typename: 'UserCore', avatarUrl: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', id: 'gid://gitlab/User/1', @@ -322,9 +329,10 @@ describe('Sidebar assignees widget', () => { }); describe('when user is not signed in', () => { - beforeEach(() => { + beforeEach(async () => { gon.current_username = undefined; createComponent(); + await waitForPromises(); }); it('passes signedIn prop as false to IssuableAssignees', () => { @@ -353,6 +361,7 @@ describe('Sidebar assignees widget', () => { describe('when making changes to participants list', () => { beforeEach(async () => { createComponent(); + await waitForPromises(); }); it('passes falsy `isDirty` prop to editable item if no changes to selected users were made', () => { diff --git a/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js index 84b192aaf41..c870bbecd76 100644 --- a/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js +++ b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js @@ -1,5 +1,6 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; describe('boards sidebar remove issue', () => { @@ -71,7 +72,7 @@ describe('boards sidebar remove issue', () => { createComponent({ canUpdate: true, slots }); findEditButton().vm.$emit('click'); - await wrapper.vm.$nextTick; + await nextTick; expect(findCollapsed().isVisible()).toBe(false); expect(findExpanded().isVisible()).toBe(true); @@ -82,14 +83,14 @@ describe('boards sidebar remove issue', () => { beforeEach(async () => { createComponent({ canUpdate: true }); findEditButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); }); it('hides expanded section and displays collapsed section', async () => { expect(findExpanded().isVisible()).toBe(true); document.body.click(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findCollapsed().isVisible()).toBe(true); expect(findExpanded().isVisible()).toBe(false); @@ -101,7 +102,7 @@ describe('boards sidebar remove issue', () => { findEditButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.emitted().open.length).toBe(1); }); @@ -111,7 +112,7 @@ describe('boards sidebar remove issue', () => { findEditButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); wrapper.vm.collapse({ emitEvent: false }); diff --git a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js index c72c23a3a60..90aae85e1ca 100644 --- a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js +++ b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { TEST_HOST } from 'helpers/test_constants'; import UsersMockHelper from 'helpers/user_mock_data_helper'; import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue'; @@ -84,10 +85,10 @@ describe('UncollapsedAssigneeList component', () => { }); describe('when more button is clicked', () => { - beforeEach(() => { + beforeEach(async () => { findMoreButton().trigger('click'); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('shows "show less" label', () => { diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js index 707215d0739..1de71e52264 100644 --- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js +++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js @@ -1,5 +1,6 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; + import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -15,8 +16,7 @@ import { issueConfidentialityResponse } from '../../mock_data'; jest.mock('~/flash'); -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); describe('Sidebar Confidentiality Widget', () => { let wrapper; @@ -32,7 +32,6 @@ describe('Sidebar Confidentiality Widget', () => { fakeApollo = createMockApollo([[issueConfidentialQuery, confidentialQueryHandler]]); wrapper = shallowMount(SidebarConfidentialityWidget, { - localVue, apolloProvider: fakeApollo, provide: { canUpdate: true, diff --git a/spec/frontend/sidebar/components/mock_data.js b/spec/frontend/sidebar/components/mock_data.js index 70c3f8a3012..a9a00b3cfdf 100644 --- a/spec/frontend/sidebar/components/mock_data.js +++ b/spec/frontend/sidebar/components/mock_data.js @@ -1,6 +1,7 @@ export const getIssueCrmContactsQueryResponse = { data: { issue: { + __typename: 'Issue', id: 'gid://gitlab/Issue/123', customerRelationsContacts: { nodes: [ @@ -37,6 +38,7 @@ export const issueCrmContactsUpdateNullResponse = { export const issueCrmContactsUpdateResponse = { data: { issueCrmContactsUpdated: { + __typename: 'Issue', id: 'gid://gitlab/Issue/123', customerRelationsContacts: { nodes: [ diff --git a/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js b/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js index 859e63b3df6..338ecf944f3 100644 --- a/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js +++ b/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; +import { stripTypenames } from 'helpers/graphql_helpers'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import Participants from '~/sidebar/components/participants/participants.vue'; @@ -66,9 +67,11 @@ describe('Sidebar Participants Widget', () => { }); it('passes participants to child component', () => { - expect(findParticipants().props('participants')).toEqual( + const participantsWithoutTypename = stripTypenames( epicParticipantsResponse().data.workspace.issuable.participants.nodes, ); + + expect(findParticipants().props('participants')).toEqual(participantsWithoutTypename); }); }); diff --git a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js index 6116bc68927..5d80a221d8e 100644 --- a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js +++ b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js @@ -97,14 +97,14 @@ describe('SidebarSeverity', () => { }); }); - it('shows error alert when severity update fails ', () => { + it('shows error alert when severity update fails ', async () => { const errorMsg = 'Something went wrong'; jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValueOnce(errorMsg); findCriticalSeverityDropdownItem().vm.$emit('click'); - setImmediate(() => { - expect(createFlash).toHaveBeenCalled(); - }); + await waitForPromises(); + + expect(createFlash).toHaveBeenCalled(); }); it('shows loading icon while updating', async () => { diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js index d7471d99477..3ddd41c0bd4 100644 --- a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js +++ b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js @@ -8,9 +8,9 @@ import { GlLoadingIcon, } from '@gitlab/ui'; import * as Sentry from '@sentry/browser'; -import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; +import { shallowMount, mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; - import createMockApollo from 'helpers/mock_apollo_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; @@ -37,8 +37,6 @@ import { jest.mock('~/flash'); -const localVue = createLocalVue(); - describe('SidebarDropdownWidget', () => { let wrapper; let mockApollo; @@ -78,7 +76,7 @@ describe('SidebarDropdownWidget', () => { // It then emits `shown` event in a watcher for `visible` // Hence we need both of these: await waitForPromises(); - await wrapper.vm.$nextTick(); + await nextTick(); }; const waitForApollo = async () => { @@ -108,7 +106,7 @@ describe('SidebarDropdownWidget', () => { projectMilestonesSpy = jest.fn().mockResolvedValue(mockProjectMilestonesResponse), currentMilestoneSpy = jest.fn().mockResolvedValue(noCurrentMilestoneResponse), } = {}) => { - localVue.use(VueApollo); + Vue.use(VueApollo); mockApollo = createMockApollo([ [projectMilestonesQuery, projectMilestonesSpy], [projectIssueMilestoneQuery, currentMilestoneSpy], @@ -117,7 +115,6 @@ describe('SidebarDropdownWidget', () => { wrapper = extendedWrapper( mount(SidebarDropdownWidget, { - localVue, provide: { canUpdate: true }, apolloProvider: mockApollo, propsData: { @@ -354,7 +351,7 @@ describe('SidebarDropdownWidget', () => { }); it(`calls createFlash with "${expectedMsg}"`, async () => { - await wrapper.vm.$nextTick(); + await nextTick(); expect(createFlash).toHaveBeenCalledWith({ message: expectedMsg, captureError: true, @@ -377,7 +374,7 @@ describe('SidebarDropdownWidget', () => { findSearchBox().vm.$emit('input', 'non existing milestones'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findDropdownText().text()).toBe('No milestone found'); }); @@ -482,7 +479,7 @@ describe('SidebarDropdownWidget', () => { it('sends a projectMilestones query with the entered search term "foo"', async () => { findSearchBox().vm.$emit('input', mockSearchTerm); - await wrapper.vm.$nextTick(); + await nextTick(); // Account for debouncing jest.runAllTimers(); diff --git a/spec/frontend/sidebar/components/time_tracking/report_spec.js b/spec/frontend/sidebar/components/time_tracking/report_spec.js index 64d143615a0..2b17e6dd6c3 100644 --- a/spec/frontend/sidebar/components/time_tracking/report_spec.js +++ b/spec/frontend/sidebar/components/time_tracking/report_spec.js @@ -1,6 +1,7 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { getAllByRole, getByRole } from '@testing-library/dom'; -import { shallowMount, createLocalVue, mount } from '@vue/test-utils'; +import { shallowMount, mount } from '@vue/test-utils'; +import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -13,8 +14,7 @@ import { getIssueTimelogsQueryResponse, getMrTimelogsQueryResponse } from './moc jest.mock('~/flash'); describe('Issuable Time Tracking Report', () => { - const localVue = createLocalVue(); - localVue.use(VueApollo); + Vue.use(VueApollo); let wrapper; let fakeApollo; const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); @@ -37,7 +37,6 @@ describe('Issuable Time Tracking Report', () => { issuableType, }, propsData: { limitToHours, issuableId: '1' }, - localVue, apolloProvider: fakeApollo, }); }; diff --git a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js index eb202a8cfcc..835e700e63c 100644 --- a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js +++ b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js @@ -1,5 +1,6 @@ import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { stubTransition } from 'helpers/stub_transition'; import { createMockDirective } from 'helpers/vue_mock_directive'; import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue'; @@ -161,7 +162,7 @@ describe('Issuable Time Tracker', () => { it('should show the correct tooltip text', async () => { expect(findByTestId('timeTrackingComparisonPane').exists()).toBe(true); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findComparisonMeter()).toBe('Time remaining: 26h 23m'); }); @@ -179,7 +180,7 @@ describe('Issuable Time Tracker', () => { }, }, }); - await wrapper.vm.$nextTick(); + await nextTick(); }); it('should display the human readable version of time estimated', () => { @@ -282,7 +283,7 @@ describe('Issuable Time Tracker', () => { }, }, }); - await wrapper.vm.$nextTick(); + await nextTick(); }); it('should not show the "Help" pane by default', () => { @@ -292,19 +293,19 @@ describe('Issuable Time Tracker', () => { it('should show the "Help" pane when help button is clicked', async () => { findHelpButton().trigger('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findByTestId('helpPane').exists()).toBe(true); }); it('should not show the "Help" pane when help button is clicked and then closed', async () => { findHelpButton().trigger('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findByTestId('helpPane').exists()).toBe(true); findCloseHelpButton().trigger('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findByTestId('helpPane').exists()).toBe(false); }); @@ -315,7 +316,7 @@ describe('Issuable Time Tracker', () => { it('refetches issuableTimeTracking query when eventHub emits `timeTracker:refresh` event', async () => { SidebarEventHub.$emit('timeTracker:refresh'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(issuableTimeTrackingRefetchSpy).toHaveBeenCalled(); }); diff --git a/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js b/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js index 23f1753c4bf..ea931782d1e 100644 --- a/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js +++ b/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js @@ -1,6 +1,6 @@ -import { GlIcon } from '@gitlab/ui'; +import { GlIcon, GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -103,7 +103,7 @@ describe('Sidebar Todo Widget', () => { }); it('sets default tooltip title', () => { - expect(wrapper.find(GlIcon).attributes('title')).toBe('Add a to do'); + expect(wrapper.find(GlButton).attributes('title')).toBe('Add a to do'); }); it('when user has a to do', async () => { @@ -113,13 +113,13 @@ describe('Sidebar Todo Widget', () => { await waitForPromises(); expect(wrapper.find(GlIcon).props('name')).toBe('todo-done'); - expect(wrapper.find(GlIcon).attributes('title')).toBe('Mark as done'); + expect(wrapper.find(GlButton).attributes('title')).toBe('Mark as done'); }); it('emits `todoUpdated` event on click on icon', async () => { wrapper.find(GlIcon).vm.$emit('click', event); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.emitted('todoUpdated')).toEqual([[false]]); }); }); diff --git a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js index 1673425947e..971744edb0f 100644 --- a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js +++ b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import createFlash from '~/flash'; import { createStore as createMrStore } from '~/mr_notes/stores'; import createStore from '~/notes/stores'; @@ -118,15 +119,13 @@ describe('EditFormButtons', () => { }); it('resets loading', async () => { - await wrapper.vm.$nextTick().then(() => { - expect(findLockToggle().props('loading')).toBe(false); - }); + await nextTick(); + expect(findLockToggle().props('loading')).toBe(false); }); - it('emits close form', () => { - return wrapper.vm.$nextTick().then(() => { - expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm'); - }); + it('emits close form', async () => { + await nextTick(); + expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm'); }); it('does not flash an error message', () => { @@ -153,15 +152,13 @@ describe('EditFormButtons', () => { }); it('resets loading', async () => { - await wrapper.vm.$nextTick().then(() => { - expect(findLockToggle().props('loading')).toBe(false); - }); + await nextTick(); + expect(findLockToggle().props('loading')).toBe(false); }); - it('emits close form', () => { - return wrapper.vm.$nextTick().then(() => { - expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm'); - }); + it('emits close form', async () => { + await nextTick(); + expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm'); }); it('calls flash with the correct message', () => { diff --git a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js index 1743e114bb0..7bf7e563a01 100644 --- a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js +++ b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { mockTracking, triggerEvent } from 'helpers/tracking_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createStore as createMrStore } from '~/mr_notes/stores'; @@ -80,13 +81,12 @@ describe('IssuableLockForm', () => { }); describe('when not editable', () => { - it('does not display the edit form when opened if not editable', () => { + it('does not display the edit form when opened if not editable', async () => { expect(findEditForm().exists()).toBe(false); findSidebarCollapseIcon().trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(findEditForm().exists()).toBe(false); - }); + await nextTick(); + expect(findEditForm().exists()).toBe(false); }); }); @@ -102,13 +102,12 @@ describe('IssuableLockForm', () => { }); describe("when 'Edit' is clicked", () => { - it('displays the edit form when editable', () => { + it('displays the edit form when editable', async () => { expect(findEditForm().exists()).toBe(false); findEditLink().trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(findEditForm().exists()).toBe(true); - }); + await nextTick(); + expect(findEditForm().exists()).toBe(true); }); it('tracks the event ', () => { @@ -123,13 +122,12 @@ describe('IssuableLockForm', () => { }); describe('When sidebar is collapsed', () => { - it('displays the edit form when opened', () => { + it('displays the edit form when opened', async () => { expect(findEditForm().exists()).toBe(false); findSidebarCollapseIcon().trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(findEditForm().exists()).toBe(true); - }); + await nextTick(); + expect(findEditForm().exists()).toBe(true); }); it('renders a tooltip with the lock status text', () => { diff --git a/spec/frontend/sidebar/mock_data.js b/spec/frontend/sidebar/mock_data.js index 42e89a3ba84..30972484a08 100644 --- a/spec/frontend/sidebar/mock_data.js +++ b/spec/frontend/sidebar/mock_data.js @@ -276,6 +276,7 @@ export const epicParticipantsResponse = () => ({ participants: { nodes: [ { + __typename: 'UserCore', id: 'gid://gitlab/User/2', avatarUrl: 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon', @@ -332,6 +333,7 @@ export const issuableQueryResponse = { assignees: { nodes: [ { + __typename: 'UserCore', id: 'gid://gitlab/User/2', avatarUrl: 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon', @@ -389,7 +391,7 @@ export const updateIssueAssigneesMutationResponse = { assignees: { nodes: [ { - __typename: 'User', + __typename: 'UserCore', id: 'gid://gitlab/User/1', avatarUrl: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', @@ -414,6 +416,7 @@ export const subscriptionNullResponse = { }; const mockUser1 = { + __typename: 'UserCore', id: 'gid://gitlab/User/1', avatarUrl: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', @@ -424,6 +427,7 @@ const mockUser1 = { }; export const mockUser2 = { + __typename: 'UserCore', id: 'gid://gitlab/User/4', avatarUrl: '/avatar2', name: 'rookie', @@ -470,6 +474,7 @@ export const projectMembersResponse = { { id: 'user-4', user: { + __typename: 'UserCore', id: 'gid://gitlab/User/2', avatarUrl: 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon', @@ -503,6 +508,7 @@ export const groupMembersResponse = { { id: 'user-3', user: { + __typename: 'UserCore', id: 'gid://gitlab/User/2', avatarUrl: 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon', @@ -535,6 +541,7 @@ export const participantsQueryResponse = { mockUser1, mockUser1, { + __typename: 'UserCore', id: 'gid://gitlab/User/2', avatarUrl: 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon', @@ -546,6 +553,7 @@ export const participantsQueryResponse = { }, }, { + __typename: 'UserCore', id: 'gid://gitlab/User/3', avatarUrl: '/avatar', name: 'John Doe', diff --git a/spec/frontend/sidebar/participants_spec.js b/spec/frontend/sidebar/participants_spec.js index 94cdbe7f2ef..356628849d9 100644 --- a/spec/frontend/sidebar/participants_spec.js +++ b/spec/frontend/sidebar/participants_spec.js @@ -1,6 +1,6 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; +import { nextTick } from 'vue'; import Participants from '~/sidebar/components/participants/participants.vue'; const PARTICIPANT = { @@ -77,7 +77,7 @@ describe('Participants', () => { expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); }); - it('when only showing visible participants, shows an avatar only for each participant under the limit', () => { + it('when only showing visible participants, shows an avatar only for each participant under the limit', async () => { const numberOfLessParticipants = 2; wrapper = mountComponent({ loading: false, @@ -91,12 +91,11 @@ describe('Participants', () => { isShowingMoreParticipants: false, }); - return Vue.nextTick().then(() => { - expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants); - }); + await nextTick(); + expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants); }); - it('when only showing all participants, each has an avatar', () => { + it('when only showing all participants, each has an avatar', async () => { wrapper = mountComponent({ loading: false, participants: PARTICIPANT_LIST, @@ -109,9 +108,8 @@ describe('Participants', () => { isShowingMoreParticipants: true, }); - return Vue.nextTick().then(() => { - expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length); - }); + await nextTick(); + expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length); }); it('does not have more participants link when they can all be shown', () => { @@ -126,7 +124,7 @@ describe('Participants', () => { expect(getMoreParticipantsButton().exists()).toBe(false); }); - it('when too many participants, has more participants link to show more', () => { + it('when too many participants, has more participants link to show more', async () => { wrapper = mountComponent({ loading: false, participants: PARTICIPANT_LIST, @@ -139,12 +137,11 @@ describe('Participants', () => { isShowingMoreParticipants: false, }); - return Vue.nextTick().then(() => { - expect(getMoreParticipantsButton().text()).toBe('+ 1 more'); - }); + await nextTick(); + expect(getMoreParticipantsButton().text()).toBe('+ 1 more'); }); - it('when too many participants and already showing them, has more participants link to show less', () => { + it('when too many participants and already showing them, has more participants link to show less', async () => { wrapper = mountComponent({ loading: false, participants: PARTICIPANT_LIST, @@ -157,9 +154,8 @@ describe('Participants', () => { isShowingMoreParticipants: true, }); - return Vue.nextTick().then(() => { - expect(getMoreParticipantsButton().text()).toBe('- show less'); - }); + await nextTick(); + expect(getMoreParticipantsButton().text()).toBe('- show less'); }); it('clicking more participants link emits event', () => { @@ -176,7 +172,7 @@ describe('Participants', () => { expect(wrapper.vm.isShowingMoreParticipants).toBe(true); }); - it('clicking on participants icon emits `toggleSidebar` event', () => { + it('clicking on participants icon emits `toggleSidebar` event', async () => { wrapper = mountComponent({ loading: false, participants: PARTICIPANT_LIST, @@ -187,11 +183,9 @@ describe('Participants', () => { wrapper.find('.sidebar-collapsed-icon').trigger('click'); - return Vue.nextTick(() => { - expect(spy).toHaveBeenCalledWith('toggleSidebar'); - - spy.mockRestore(); - }); + await nextTick(); + expect(spy).toHaveBeenCalledWith('toggleSidebar'); + spy.mockRestore(); }); }); diff --git a/spec/frontend/sidebar/sidebar_assignees_spec.js b/spec/frontend/sidebar/sidebar_assignees_spec.js index dc121dcb897..5f77e21c1f8 100644 --- a/spec/frontend/sidebar/sidebar_assignees_spec.js +++ b/spec/frontend/sidebar/sidebar_assignees_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import axios from 'axios'; import AxiosMockAdapter from 'axios-mock-adapter'; +import { nextTick } from 'vue'; import Assigness from '~/sidebar/components/assignees/assignees.vue'; import AssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue'; import SidebarAssignees from '~/sidebar/components/assignees/sidebar_assignees.vue'; @@ -74,16 +75,15 @@ describe('sidebar assignees', () => { expect(mediator.store.assignees.length).toBe(1); }); - it('hides assignees until fetched', () => { + it('hides assignees until fetched', async () => { createComponent(); expect(wrapper.find(Assigness).exists()).toBe(false); wrapper.vm.store.isFetching.assignees = false; - return wrapper.vm.$nextTick(() => { - expect(wrapper.find(Assigness).exists()).toBe(true); - }); + await nextTick(); + expect(wrapper.find(Assigness).exists()).toBe(true); }); describe('when realTimeIssueSidebar is turned on', () => { diff --git a/spec/frontend/sidebar/sidebar_move_issue_spec.js b/spec/frontend/sidebar/sidebar_move_issue_spec.js index d9972ae75c3..7bb7b18adf8 100644 --- a/spec/frontend/sidebar/sidebar_move_issue_spec.js +++ b/spec/frontend/sidebar/sidebar_move_issue_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; +import waitForPromises from 'helpers/wait_for_promises'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue'; @@ -77,15 +78,14 @@ describe('SidebarMoveIssue', () => { expect(test.sidebarMoveIssue.$dropdownToggle.data('deprecatedJQueryDropdown')).toBeTruthy(); }); - it('escapes html from project name', (done) => { + it('escapes html from project name', async () => { test.$toggleButton.dropdown('toggle'); - setImmediate(() => { - expect(test.$content.find('.js-move-issue-dropdown-item')[1].innerHTML.trim()).toEqual( - '<img src=x onerror=alert(document.domain)> foo / bar', - ); - done(); - }); + await waitForPromises(); + + expect(test.$content.find('.js-move-issue-dropdown-item')[1].innerHTML.trim()).toEqual( + '<img src=x onerror=alert(document.domain)> foo / bar', + ); }); }); @@ -101,20 +101,20 @@ describe('SidebarMoveIssue', () => { expect(test.$confirmButton.hasClass('is-loading')).toBe(true); }); - it('should remove loading state from confirm button on failure', (done) => { + it('should remove loading state from confirm button on failure', async () => { jest.spyOn(test.mediator, 'moveIssue').mockReturnValue(Promise.reject()); test.mediator.setMoveToProjectId(7); test.sidebarMoveIssue.onConfirmClicked(); expect(test.mediator.moveIssue).toHaveBeenCalled(); + // Wait for the move issue request to fail - setImmediate(() => { - expect(createFlash).toHaveBeenCalled(); - expect(test.$confirmButton.prop('disabled')).toBeFalsy(); - expect(test.$confirmButton.hasClass('is-loading')).toBe(false); - done(); - }); + await waitForPromises(); + + expect(createFlash).toHaveBeenCalled(); + expect(test.$confirmButton.prop('disabled')).toBeFalsy(); + expect(test.$confirmButton.hasClass('is-loading')).toBe(false); }); it('should not move the issue with id=0', () => { @@ -127,35 +127,33 @@ describe('SidebarMoveIssue', () => { }); }); - it('should set moveToProjectId on dropdown item "No project" click', (done) => { + it('should set moveToProjectId on dropdown item "No project" click', async () => { jest.spyOn(test.mediator, 'setMoveToProjectId').mockImplementation(() => {}); // Open the dropdown test.$toggleButton.dropdown('toggle'); // Wait for the autocomplete request to finish - setImmediate(() => { - test.$content.find('.js-move-issue-dropdown-item').eq(0).trigger('click'); + await waitForPromises(); - expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(0); - expect(test.$confirmButton.prop('disabled')).toBeTruthy(); - done(); - }); + test.$content.find('.js-move-issue-dropdown-item').eq(0).trigger('click'); + + expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(0); + expect(test.$confirmButton.prop('disabled')).toBeTruthy(); }); - it('should set moveToProjectId on dropdown item click', (done) => { + it('should set moveToProjectId on dropdown item click', async () => { jest.spyOn(test.mediator, 'setMoveToProjectId').mockImplementation(() => {}); // Open the dropdown test.$toggleButton.dropdown('toggle'); // Wait for the autocomplete request to finish - setImmediate(() => { - test.$content.find('.js-move-issue-dropdown-item').eq(1).trigger('click'); + await waitForPromises(); - expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(20); - expect(test.$confirmButton.attr('disabled')).toBe(undefined); - done(); - }); + test.$content.find('.js-move-issue-dropdown-item').eq(1).trigger('click'); + + expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(20); + expect(test.$confirmButton.attr('disabled')).toBe(undefined); }); }); diff --git a/spec/frontend/sidebar/todo_spec.js b/spec/frontend/sidebar/todo_spec.js index 6829e688c65..9316268d2ad 100644 --- a/spec/frontend/sidebar/todo_spec.js +++ b/spec/frontend/sidebar/todo_spec.js @@ -1,6 +1,7 @@ import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue'; const defaultProps = { @@ -49,13 +50,12 @@ describe('SidebarTodo', () => { ); describe('template', () => { - it('emits `toggleTodo` event when clicked on button', () => { + it('emits `toggleTodo` event when clicked on button', async () => { createComponent(); wrapper.find('button').trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().toggleTodo).toBeTruthy(); - }); + await nextTick(); + expect(wrapper.emitted().toggleTodo).toBeTruthy(); }); it('renders component container element with proper data attributes', () => { |