diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js')
| -rw-r--r-- | spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js | 149 |
1 files changed, 137 insertions, 12 deletions
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js index 1823bbfe533..1f1f010e0c4 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js @@ -15,6 +15,7 @@ import RegistryHeader from '~/packages_and_registries/container_registry/explore import { DELETE_IMAGE_SUCCESS_MESSAGE, DELETE_IMAGE_ERROR_MESSAGE, + GRAPHQL_PAGE_SIZE, SORT_FIELDS, SETTINGS_TEXT, } from '~/packages_and_registries/container_registry/explorer/constants'; @@ -22,6 +23,7 @@ import deleteContainerRepositoryMutation from '~/packages_and_registries/contain import getContainerRepositoriesDetails from '~/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repositories_details.query.graphql'; import component from '~/packages_and_registries/container_registry/explorer/pages/list.vue'; import Tracking from '~/tracking'; +import PersistedPagination from '~/packages_and_registries/shared/components/persisted_pagination.vue'; import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; @@ -60,8 +62,10 @@ describe('List Page', () => { const findEmptySearchMessage = () => wrapper.find('[data-testid="emptySearch"]'); const findDeleteImage = () => wrapper.findComponent(DeleteImage); + const findPersistedPagination = () => wrapper.findComponent(PersistedPagination); + const fireFirstSortUpdate = () => { - findPersistedSearch().vm.$emit('update', { sort: 'UPDATED_DESC', filters: [] }); + findPersistedSearch().vm.$emit('update', { sort: 'UPDATED_DESC', filters: [], pageInfo: {} }); }; const waitForApolloRequestRender = async () => { @@ -218,7 +222,13 @@ describe('List Page', () => { expect(findImageList().exists()).toBe(false); }); - it('cli commands is not visible', () => { + it('pagination is set to empty object', () => { + mountComponent(); + + expect(findPersistedPagination().props('pagination')).toEqual({}); + }); + + it('cli commands are not visible', () => { mountComponent(); expect(findCliCommands().exists()).toBe(false); @@ -233,11 +243,42 @@ describe('List Page', () => { }); }); + describe('when mutation is loading', () => { + beforeEach(async () => { + mountComponent(); + fireFirstSortUpdate(); + await waitForApolloRequestRender(); + findImageList().vm.$emit('delete', deletedContainerRepository); + findDeleteModal().vm.$emit('confirmDelete'); + findDeleteImage().vm.$emit('start'); + }); + + it('shows the skeleton loader', () => { + expect(findSkeletonLoader().exists()).toBe(true); + }); + + it('imagesList is not visible', () => { + expect(findImageList().exists()).toBe(false); + }); + + it('pagination is hidden', () => { + expect(findPersistedPagination().exists()).toBe(false); + }); + + it('cli commands are not visible', () => { + expect(findCliCommands().exists()).toBe(false); + }); + + it('title has the metadataLoading props set to true', () => { + expect(findRegistryHeader().props('metadataLoading')).toBe(true); + }); + }); + describe('list is empty', () => { describe('project page', () => { const resolver = jest.fn().mockResolvedValue(graphQLEmptyImageListMock); - it('cli commands is not visible', async () => { + it('cli commands are not visible', async () => { mountComponent({ resolver }); await waitForApolloRequestRender(); @@ -269,7 +310,7 @@ describe('List Page', () => { expect(findGroupEmptyState().exists()).toBe(true); }); - it('cli commands is not visible', async () => { + it('cli commands are not visible', async () => { mountComponent({ resolver, config }); await waitForApolloRequestRender(); @@ -461,7 +502,15 @@ describe('List Page', () => { }); describe('pagination', () => { - it('prev-page event triggers a fetchMore request', async () => { + it('exists', async () => { + mountComponent(); + fireFirstSortUpdate(); + await waitForApolloRequestRender(); + + expect(findPersistedPagination().props('pagination')).toEqual(pageInfo); + }); + + it('prev event triggers a previous page request', async () => { const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); const detailsResolver = jest .fn() @@ -470,18 +519,58 @@ describe('List Page', () => { fireFirstSortUpdate(); await waitForApolloRequestRender(); - findImageList().vm.$emit('prev-page'); + findPersistedPagination().vm.$emit('prev'); await waitForPromises(); expect(resolver).toHaveBeenCalledWith( - expect.objectContaining({ before: pageInfo.startCursor }), + expect.objectContaining({ + before: pageInfo.startCursor, + first: null, + last: GRAPHQL_PAGE_SIZE, + }), ); expect(detailsResolver).toHaveBeenCalledWith( - expect.objectContaining({ before: pageInfo.startCursor }), + expect.objectContaining({ + before: pageInfo.startCursor, + first: null, + last: GRAPHQL_PAGE_SIZE, + }), ); }); - it('next-page event triggers a fetchMore request', async () => { + it('calls resolver with pagination params when persisted search returns before', async () => { + const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); + const detailsResolver = jest + .fn() + .mockResolvedValue(graphQLProjectImageRepositoriesDetailsMock); + mountComponent({ resolver, detailsResolver }); + + findPersistedSearch().vm.$emit('update', { + sort: 'UPDATED_DESC', + filters: [], + pageInfo: { before: pageInfo.startCursor }, + }); + await waitForApolloRequestRender(); + + expect(resolver).toHaveBeenCalledWith( + expect.objectContaining({ + sort: 'UPDATED_DESC', + before: pageInfo.startCursor, + first: null, + last: GRAPHQL_PAGE_SIZE, + }), + ); + expect(detailsResolver).toHaveBeenCalledWith( + expect.objectContaining({ + sort: 'UPDATED_DESC', + before: pageInfo.startCursor, + first: null, + last: GRAPHQL_PAGE_SIZE, + }), + ); + }); + + it('next event triggers a next page request', async () => { const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); const detailsResolver = jest .fn() @@ -490,14 +579,50 @@ describe('List Page', () => { fireFirstSortUpdate(); await waitForApolloRequestRender(); - findImageList().vm.$emit('next-page'); + findPersistedPagination().vm.$emit('next'); await waitForPromises(); expect(resolver).toHaveBeenCalledWith( - expect.objectContaining({ after: pageInfo.endCursor }), + expect.objectContaining({ + after: pageInfo.endCursor, + first: GRAPHQL_PAGE_SIZE, + }), + ); + expect(detailsResolver).toHaveBeenCalledWith( + expect.objectContaining({ + after: pageInfo.endCursor, + first: GRAPHQL_PAGE_SIZE, + }), + ); + }); + + it('calls resolver with pagination params when persisted search returns after', async () => { + const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); + const detailsResolver = jest + .fn() + .mockResolvedValue(graphQLProjectImageRepositoriesDetailsMock); + mountComponent({ resolver, detailsResolver }); + + findPersistedSearch().vm.$emit('update', { + sort: 'UPDATED_DESC', + filters: [], + pageInfo: { after: pageInfo.endCursor }, + }); + await waitForApolloRequestRender(); + + expect(resolver).toHaveBeenCalledWith( + expect.objectContaining({ + sort: 'UPDATED_DESC', + after: pageInfo.endCursor, + first: GRAPHQL_PAGE_SIZE, + }), ); expect(detailsResolver).toHaveBeenCalledWith( - expect.objectContaining({ after: pageInfo.endCursor }), + expect.objectContaining({ + sort: 'UPDATED_DESC', + after: pageInfo.endCursor, + first: GRAPHQL_PAGE_SIZE, + }), ); }); }); |