diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-02 09:13:09 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-02 09:13:09 +0300 |
commit | 46fd9b1dd86370ae2c986a393b63dbce3315982f (patch) | |
tree | 1c1c9e56aba32169caf2f163463046350c47ceb9 /spec/frontend | |
parent | d96347b5c2dcec453de2583fd6654e2c34eedfdc (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js | 104 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js | 120 |
2 files changed, 99 insertions, 125 deletions
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js index 589697fe542..8a06c990711 100644 --- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js +++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js @@ -14,6 +14,7 @@ import { sortMilestonesByDueDate } from '~/milestones/utils'; import { DEFAULT_MILESTONES } from '~/vue_shared/components/filtered_search_bar/constants'; import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue'; +import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue'; import { mockMilestoneToken, mockMilestones, mockRegularMilestone } from '../mock_data'; @@ -57,6 +58,12 @@ describe('MilestoneToken', () => { let mock; let wrapper; + const findBaseToken = () => wrapper.findComponent(BaseToken); + const triggerFetchMilestones = (searchTerm = null) => { + findBaseToken().vm.$emit('fetch-suggestions', searchTerm); + return waitForPromises(); + }; + beforeEach(() => { mock = new MockAdapter(axios); wrapper = createComponent(); @@ -64,73 +71,77 @@ describe('MilestoneToken', () => { afterEach(() => { mock.restore(); - wrapper.destroy(); }); describe('methods', () => { describe('fetchMilestones', () => { - describe('when config.shouldSkipSort is true', () => { - beforeEach(() => { - wrapper.vm.config.shouldSkipSort = true; + it('sets loading state', async () => { + wrapper = createComponent({ + config: { + fetchMilestones: jest.fn().mockResolvedValue(new Promise(() => {})), + }, }); + await nextTick(); - afterEach(() => { - wrapper.vm.config.shouldSkipSort = false; - }); + expect(findBaseToken().props('suggestionsLoading')).toBe(true); + }); + + describe('when config.shouldSkipSort is true', () => { it('does not call sortMilestonesByDueDate', async () => { - jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockResolvedValue({ - data: mockMilestones, + wrapper = createComponent({ + config: { + shouldSkipSort: true, + fetchMilestones: jest.fn().mockResolvedValue({ data: mockMilestones }), + }, }); - wrapper.vm.fetchMilestones(); - - await waitForPromises(); + await triggerFetchMilestones(); expect(sortMilestonesByDueDate).toHaveBeenCalledTimes(0); }); }); - it('calls `config.fetchMilestones` with provided searchTerm param', () => { - jest.spyOn(wrapper.vm.config, 'fetchMilestones'); - - wrapper.vm.fetchMilestones('foo'); + describe('when request is successful', () => { + const searchTerm = 'foo'; - expect(wrapper.vm.config.fetchMilestones).toHaveBeenCalledWith('foo'); - }); - - it('sets response to `milestones` when request is successful', () => { - wrapper.vm.config.shouldSkipSort = false; + beforeEach(() => { + wrapper = createComponent({ + config: { + shouldSkipSort: false, + fetchMilestones: jest.fn().mockResolvedValue({ data: mockMilestones }), + }, + }); + return triggerFetchMilestones(searchTerm); + }); - jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockResolvedValue({ - data: mockMilestones, + it('calls `config.fetchMilestones` with provided searchTerm param', () => { + expect(findBaseToken().props('config').fetchMilestones).toHaveBeenCalledWith(searchTerm); }); - wrapper.vm.fetchMilestones(); - return waitForPromises().then(() => { - expect(wrapper.vm.milestones).toEqual(mockMilestones); + it('sets response to `milestones`', () => { expect(sortMilestonesByDueDate).toHaveBeenCalled(); + expect(findBaseToken().props('suggestions')).toEqual(mockMilestones); }); }); - it('calls `createAlert` with flash error message when request fails', () => { - jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockRejectedValue({}); - - wrapper.vm.fetchMilestones('foo'); + describe('when request fails', () => { + beforeEach(() => { + wrapper = createComponent({ + config: { + fetchMilestones: jest.fn().mockRejectedValue({}), + }, + }); + return triggerFetchMilestones(); + }); - return waitForPromises().then(() => { + it('calls `createAlert` with flash error message', () => { expect(createAlert).toHaveBeenCalledWith({ message: 'There was a problem fetching milestones.', }); }); - }); - it('sets `loading` to false when request completes', () => { - jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockRejectedValue({}); - - wrapper.vm.fetchMilestones('foo'); - - return waitForPromises().then(() => { - expect(wrapper.vm.loading).toBe(false); + it('sets `loading` to false when request completes', () => { + expect(findBaseToken().props('suggestionsLoading')).toBe(false); }); }); }); @@ -143,15 +154,12 @@ describe('MilestoneToken', () => { ]; beforeEach(async () => { - wrapper = createComponent({ value: { data: `"${mockRegularMilestone.title}"` } }); - - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ - milestones: mockMilestones, + wrapper = createComponent({ + value: { data: `"${mockRegularMilestone.title}"` }, + config: { + initialMilestones: mockMilestones, + }, }); - - await nextTick(); }); it('renders gl-filtered-search-token component', () => { @@ -228,7 +236,7 @@ describe('MilestoneToken', () => { it('finds the correct value from the activeToken', () => { DEFAULT_MILESTONES.forEach(({ value, title }) => { - const activeToken = wrapper.vm.getActiveMilestone([], value); + const activeToken = findBaseToken().props('getActiveTokenValue')([], value); expect(activeToken.title).toEqual(title); }); diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js index 32cb74d5f80..4671ee43d9e 100644 --- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js +++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js @@ -72,7 +72,7 @@ describe('UserToken', () => { let mock; let wrapper; - const getBaseToken = () => wrapper.findComponent(BaseToken); + const findBaseToken = () => wrapper.findComponent(BaseToken); beforeEach(() => { mock = new MockAdapter(axios); @@ -81,85 +81,70 @@ describe('UserToken', () => { afterEach(() => { window.gon = originalGon; mock.restore(); - wrapper.destroy(); }); describe('methods', () => { describe('fetchUsers', () => { + const triggerFetchUsers = (searchTerm = null) => { + findBaseToken().vm.$emit('fetch-suggestions', searchTerm); + return waitForPromises(); + }; + beforeEach(() => { wrapper = createComponent(); }); - it('calls `config.fetchUsers` with provided searchTerm param', () => { - jest.spyOn(wrapper.vm.config, 'fetchUsers'); - - getBaseToken().vm.$emit('fetch-suggestions', mockUsers[0].username); - - expect(wrapper.vm.config.fetchUsers).toHaveBeenCalledWith( - mockAuthorToken.fetchPath, - mockUsers[0].username, - ); - }); - - it('sets response to `users` when request is successful', () => { - jest.spyOn(wrapper.vm.config, 'fetchUsers').mockResolvedValue(mockUsers); - - getBaseToken().vm.$emit('fetch-suggestions', 'root'); - - return waitForPromises().then(() => { - expect(getBaseToken().props('suggestions')).toEqual(mockUsers); + it('sets loading state', async () => { + wrapper = createComponent({ + config: { + fetchUsers: jest.fn().mockResolvedValue(new Promise(() => {})), + }, }); + await nextTick(); + + expect(findBaseToken().props('suggestionsLoading')).toBe(true); }); - // TODO: rm when completed https://gitlab.com/gitlab-org/gitlab/-/issues/345756 - describe('when there are null users presents', () => { - const mockUsersWithNullUser = mockUsers.concat([null]); + describe('when request is successful', () => { + const searchTerm = 'foo'; beforeEach(() => { - jest - .spyOn(wrapper.vm.config, 'fetchUsers') - .mockResolvedValue({ data: mockUsersWithNullUser }); - - getBaseToken().vm.$emit('fetch-suggestions', 'root'); + wrapper = createComponent({ + config: { + fetchUsers: jest.fn().mockResolvedValue({ data: mockUsers }), + }, + }); + return triggerFetchUsers(searchTerm); }); - describe('when res.data is present', () => { - it('filters the successful response when null values are present', () => { - return waitForPromises().then(() => { - expect(getBaseToken().props('suggestions')).toEqual(mockUsers); - }); - }); + it('calls `config.fetchUsers` with provided searchTerm param', () => { + expect(findBaseToken().props('config').fetchUsers).toHaveBeenCalledWith(searchTerm); }); - describe('when response is an array', () => { - it('filters the successful response when null values are present', () => { - return waitForPromises().then(() => { - expect(getBaseToken().props('suggestions')).toEqual(mockUsers); - }); - }); + it('sets response to `users` when request is successful', () => { + expect(findBaseToken().props('suggestions')).toEqual(mockUsers); }); }); - it('calls `createAlert` with flash error message when request fails', () => { - jest.spyOn(wrapper.vm.config, 'fetchUsers').mockRejectedValue({}); - - getBaseToken().vm.$emit('fetch-suggestions', 'root'); + describe('when request fails', () => { + beforeEach(() => { + wrapper = createComponent({ + config: { + fetchUsers: jest.fn().mockRejectedValue({}), + }, + }); + return triggerFetchUsers(); + }); - return waitForPromises().then(() => { + it('calls `createAlert` with flash error message', () => { expect(createAlert).toHaveBeenCalledWith({ message: 'There was a problem fetching users.', }); }); - }); - - it('sets `loading` to false when request completes', async () => { - jest.spyOn(wrapper.vm.config, 'fetchUsers').mockRejectedValue({}); - - getBaseToken().vm.$emit('fetch-suggestions', 'root'); - await waitForPromises(); - - expect(getBaseToken().props('suggestionsLoading')).toBe(false); + it('sets `loading` to false when request completes', async () => { + expect(findBaseToken().props('suggestionsLoading')).toBe(false); + }); }); }); }); @@ -178,12 +163,12 @@ describe('UserToken', () => { data: { users: mockUsers }, }); - const baseTokenEl = getBaseToken(); + const baseTokenEl = findBaseToken(); expect(baseTokenEl.exists()).toBe(true); expect(baseTokenEl.props()).toMatchObject({ suggestions: mockUsers, - getActiveTokenValue: wrapper.vm.getActiveUser, + getActiveTokenValue: baseTokenEl.props('getActiveTokenValue'), }); }); @@ -191,7 +176,6 @@ describe('UserToken', () => { wrapper = createComponent({ value: { data: mockUsers[0].username }, data: { users: mockUsers }, - stubs: { Portal: true }, }); await nextTick(); @@ -215,30 +199,13 @@ describe('UserToken', () => { users: [ { ...mockUsers[0], + avatarUrl: mockUsers[0].avatar_url, + avatar_url: undefined, }, ], }, - stubs: { Portal: true }, }); - await nextTick(); - - expect(getAvatarEl().props('src')).toBe(mockUsers[0].avatar_url); - - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ - users: [ - { - ...mockUsers[0], - avatarUrl: mockUsers[0].avatar_url, - avatar_url: undefined, - }, - ], - }); - - await nextTick(); - expect(getAvatarEl().props('src')).toBe(mockUsers[0].avatar_url); }); @@ -264,7 +231,6 @@ describe('UserToken', () => { wrapper = createComponent({ active: true, config: { ...mockAuthorToken, defaultUsers: [] }, - stubs: { Portal: true }, }); const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment); const suggestionsSegment = tokenSegments.at(2); |