diff options
Diffstat (limited to 'spec/frontend/registry/explorer/pages/list_spec.js')
| -rw-r--r-- | spec/frontend/registry/explorer/pages/list_spec.js | 91 |
1 files changed, 77 insertions, 14 deletions
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js index f7f207cc183..48acc06792d 100644 --- a/spec/frontend/registry/explorer/pages/list_spec.js +++ b/spec/frontend/registry/explorer/pages/list_spec.js @@ -1,9 +1,11 @@ import { GlSkeletonLoader, GlSprintf, GlAlert } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql'; +import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; import DeleteImage from '~/registry/explorer/components/delete_image.vue'; import CliCommands from '~/registry/explorer/components/list_page/cli_commands.vue'; import GroupEmptyState from '~/registry/explorer/components/list_page/group_empty_state.vue'; @@ -60,7 +62,7 @@ describe('List Page', () => { const waitForApolloRequestRender = async () => { jest.runOnlyPendingTimers(); await waitForPromises(); - await wrapper.vm.$nextTick(); + await nextTick(); }; const mountComponent = ({ @@ -69,6 +71,7 @@ describe('List Page', () => { detailsResolver = jest.fn().mockResolvedValue(graphQLProjectImageRepositoriesDetailsMock), mutationResolver = jest.fn().mockResolvedValue(graphQLImageDeleteMock), config = { isGroupPage: false }, + query = {}, } = {}) => { localVue.use(VueApollo); @@ -95,6 +98,7 @@ describe('List Page', () => { $toast, $route: { name: 'foo', + query, }, ...mocks, }, @@ -158,9 +162,11 @@ describe('List Page', () => { }); describe('isLoading is true', () => { - it('shows the skeleton loader', () => { + it('shows the skeleton loader', async () => { mountComponent(); + await nextTick(); + expect(findSkeletonLoader().exists()).toBe(true); }); @@ -176,9 +182,11 @@ describe('List Page', () => { expect(findCliCommands().exists()).toBe(false); }); - it('title has the metadataLoading props set to true', () => { + it('title has the metadataLoading props set to true', async () => { mountComponent(); + await nextTick(); + expect(findRegistryHeader().props('metadataLoading')).toBe(true); }); }); @@ -311,7 +319,7 @@ describe('List Page', () => { await selectImageForDeletion(); findDeleteImage().vm.$emit('success'); - await wrapper.vm.$nextTick(); + await nextTick(); const alert = findDeleteAlert(); expect(alert.exists()).toBe(true); @@ -327,7 +335,7 @@ describe('List Page', () => { await selectImageForDeletion(); findDeleteImage().vm.$emit('error'); - await wrapper.vm.$nextTick(); + await nextTick(); const alert = findDeleteAlert(); expect(alert.exists()).toBe(true); @@ -343,12 +351,12 @@ describe('List Page', () => { const doSearch = async () => { await waitForApolloRequestRender(); findRegistrySearch().vm.$emit('filter:changed', [ - { type: 'filtered-search-term', value: { data: 'centos6' } }, + { type: FILTERED_SEARCH_TERM, value: { data: 'centos6' } }, ]); findRegistrySearch().vm.$emit('filter:submit'); - await wrapper.vm.$nextTick(); + await nextTick(); }; it('has a search box element', async () => { @@ -373,7 +381,7 @@ describe('List Page', () => { await waitForApolloRequestRender(); findRegistrySearch().vm.$emit('sorting:changed', { sort: 'asc' }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(resolver).toHaveBeenCalledWith(expect.objectContaining({ sort: 'UPDATED_DESC' })); }); @@ -416,7 +424,7 @@ describe('List Page', () => { await waitForApolloRequestRender(); findImageList().vm.$emit('prev-page'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(resolver).toHaveBeenCalledWith( expect.objectContaining({ before: pageInfo.startCursor }), @@ -436,7 +444,7 @@ describe('List Page', () => { await waitForApolloRequestRender(); findImageList().vm.$emit('next-page'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(resolver).toHaveBeenCalledWith( expect.objectContaining({ after: pageInfo.endCursor }), @@ -457,11 +465,10 @@ describe('List Page', () => { expect(findDeleteModal().exists()).toBe(true); }); - it('contains a description with the path of the item to delete', () => { + it('contains a description with the path of the item to delete', async () => { findImageList().vm.$emit('delete', { path: 'foo' }); - return wrapper.vm.$nextTick().then(() => { - expect(findDeleteModal().html()).toContain('foo'); - }); + await nextTick(); + expect(findDeleteModal().html()).toContain('foo'); }); }); @@ -497,4 +504,60 @@ describe('List Page', () => { testTrackingCall('confirm_delete'); }); }); + + describe('url query string handling', () => { + const defaultQueryParams = { + search: [1, 2], + sort: 'asc', + orderBy: 'CREATED', + }; + const queryChangePayload = 'foo'; + + it('query:updated event pushes the new query to the router', async () => { + const push = jest.fn(); + mountComponent({ mocks: { $router: { push } } }); + + await nextTick(); + + findRegistrySearch().vm.$emit('query:changed', queryChangePayload); + + expect(push).toHaveBeenCalledWith({ query: queryChangePayload }); + }); + + it('graphql API call has the variables set from the URL', async () => { + const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); + mountComponent({ query: defaultQueryParams, resolver }); + + await nextTick(); + + expect(resolver).toHaveBeenCalledWith( + expect.objectContaining({ + name: 1, + sort: 'CREATED_ASC', + }), + ); + }); + + it.each` + sort | orderBy | search | payload + ${'ASC'} | ${undefined} | ${undefined} | ${{ sort: 'UPDATED_ASC' }} + ${undefined} | ${'bar'} | ${undefined} | ${{ sort: 'BAR_DESC' }} + ${'ASC'} | ${'bar'} | ${undefined} | ${{ sort: 'BAR_ASC' }} + ${undefined} | ${undefined} | ${undefined} | ${{}} + ${undefined} | ${undefined} | ${['one']} | ${{ name: 'one' }} + ${undefined} | ${undefined} | ${['one', 'two']} | ${{ name: 'one' }} + ${undefined} | ${'UPDATED'} | ${['one', 'two']} | ${{ name: 'one', sort: 'UPDATED_DESC' }} + ${'ASC'} | ${'UPDATED'} | ${['one', 'two']} | ${{ name: 'one', sort: 'UPDATED_ASC' }} + `( + 'with sort equal to $sort, orderBy equal to $orderBy, search set to $search API call has the variables set as $payload', + async ({ sort, orderBy, search, payload }) => { + const resolver = jest.fn().mockResolvedValue({ sort, orderBy }); + mountComponent({ query: { sort, orderBy, search }, resolver }); + + await nextTick(); + + expect(resolver).toHaveBeenCalledWith(expect.objectContaining(payload)); + }, + ); + }); }); |