diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js')
-rw-r--r-- | spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js | 100 |
1 files changed, 75 insertions, 25 deletions
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js index 56f12e2f0bb..0dcf988c814 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js @@ -1,16 +1,25 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { GlEmptyState } from '@gitlab/ui'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import { stripTypenames } from 'helpers/graphql_helpers'; -import EmptyTagsState from '~/packages_and_registries/container_registry/explorer/components/details_page/empty_state.vue'; + import component from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue'; import TagsListRow from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue'; import TagsLoader from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue'; import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; +import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import getContainerRepositoryTagsQuery from '~/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql'; -import { GRAPHQL_PAGE_SIZE } from '~/packages_and_registries/container_registry/explorer/constants/index'; +import { + GRAPHQL_PAGE_SIZE, + NO_TAGS_TITLE, + NO_TAGS_MESSAGE, + NO_TAGS_MATCHING_FILTERS_TITLE, + NO_TAGS_MATCHING_FILTERS_DESCRIPTION, +} from '~/packages_and_registries/container_registry/explorer/constants/index'; +import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; import { tagsMock, imageTagsMock, tagsPageInfo } from '../../mock_data'; const localVue = createLocalVue(); @@ -21,11 +30,20 @@ describe('Tags List', () => { let resolver; const tags = [...tagsMock]; + const defaultConfig = { + noContainersImage: 'noContainersImage', + }; + + const findPersistedSearch = () => wrapper.findComponent(PersistedSearch); const findTagsListRow = () => wrapper.findAllComponents(TagsListRow); const findRegistryList = () => wrapper.findComponent(RegistryList); - const findEmptyState = () => wrapper.findComponent(EmptyTagsState); + const findEmptyState = () => wrapper.findComponent(GlEmptyState); const findTagsLoader = () => wrapper.findComponent(TagsLoader); + const fireFirstSortUpdate = () => { + findPersistedSearch().vm.$emit('update', { sort: 'NAME_ASC', filters: [] }); + }; + const waitForApolloRequestRender = async () => { await waitForPromises(); await nextTick(); @@ -44,7 +62,7 @@ describe('Tags List', () => { stubs: { RegistryList }, provide() { return { - config: {}, + config: defaultConfig, }; }, }); @@ -61,10 +79,23 @@ describe('Tags List', () => { describe('registry list', () => { beforeEach(() => { mountComponent(); - + fireFirstSortUpdate(); return waitForApolloRequestRender(); }); + it('has a persisted search', () => { + expect(findPersistedSearch().props()).toMatchObject({ + defaultOrder: 'NAME', + defaultSort: 'asc', + sortableFields: [ + { + label: 'Name', + orderBy: 'NAME', + }, + ], + }); + }); + it('binds the correct props', () => { expect(findRegistryList().props()).toMatchObject({ title: '2 tags', @@ -75,11 +106,13 @@ describe('Tags List', () => { }); describe('events', () => { - it('prev-page fetch the previous page', () => { + it('prev-page fetch the previous page', async () => { findRegistryList().vm.$emit('prev-page'); expect(resolver).toHaveBeenCalledWith({ first: null, + name: '', + sort: 'NAME_ASC', before: tagsPageInfo.startCursor, last: GRAPHQL_PAGE_SIZE, id: '1', @@ -92,6 +125,8 @@ describe('Tags List', () => { expect(resolver).toHaveBeenCalledWith({ after: tagsPageInfo.endCursor, first: GRAPHQL_PAGE_SIZE, + name: '', + sort: 'NAME_ASC', id: '1', }); }); @@ -108,6 +143,7 @@ describe('Tags List', () => { describe('list rows', () => { it('one row exist for each tag', async () => { mountComponent(); + fireFirstSortUpdate(); await waitForApolloRequestRender(); @@ -116,6 +152,7 @@ describe('Tags List', () => { it('the correct props are bound to it', async () => { mountComponent({ propsData: { disabled: true, id: 1 } }); + fireFirstSortUpdate(); await waitForApolloRequestRender(); @@ -130,7 +167,7 @@ describe('Tags List', () => { describe('events', () => { it('select event update the selected items', async () => { mountComponent(); - + fireFirstSortUpdate(); await waitForApolloRequestRender(); findTagsListRow().at(0).vm.$emit('select'); @@ -142,7 +179,7 @@ describe('Tags List', () => { it('delete event emit a delete event', async () => { mountComponent(); - + fireFirstSortUpdate(); await waitForApolloRequestRender(); findTagsListRow().at(0).vm.$emit('delete'); @@ -154,32 +191,45 @@ describe('Tags List', () => { describe('when the list of tags is empty', () => { beforeEach(() => { resolver = jest.fn().mockResolvedValue(imageTagsMock([])); - }); - - it('has the empty state', async () => { mountComponent(); - - await waitForApolloRequestRender(); - - expect(findEmptyState().exists()).toBe(true); + fireFirstSortUpdate(); + return waitForApolloRequestRender(); }); - it('does not show the loader', async () => { - mountComponent(); - - await waitForApolloRequestRender(); - + it('does not show the loader', () => { expect(findTagsLoader().exists()).toBe(false); }); - it('does not show the list', async () => { - mountComponent(); + it('does not show the list', () => { + expect(findRegistryList().exists()).toBe(false); + }); - await waitForApolloRequestRender(); + describe('empty state', () => { + it('default empty state', () => { + expect(findEmptyState().props()).toMatchObject({ + svgPath: defaultConfig.noContainersImage, + title: NO_TAGS_TITLE, + description: NO_TAGS_MESSAGE, + }); + }); - expect(findRegistryList().exists()).toBe(false); + it('when filtered shows a filtered message', async () => { + findPersistedSearch().vm.$emit('update', { + sort: 'NAME_ASC', + filters: [{ type: FILTERED_SEARCH_TERM, value: { data: 'foo' } }], + }); + + await waitForApolloRequestRender(); + + expect(findEmptyState().props()).toMatchObject({ + svgPath: defaultConfig.noContainersImage, + title: NO_TAGS_MATCHING_FILTERS_TITLE, + description: NO_TAGS_MATCHING_FILTERS_DESCRIPTION, + }); + }); }); }); + describe('loading state', () => { it.each` isImageLoading | queryExecuting | loadingVisible @@ -191,7 +241,7 @@ describe('Tags List', () => { 'when the isImageLoading is $isImageLoading, and is $queryExecuting that the query is still executing is $loadingVisible that the loader is shown', async ({ isImageLoading, queryExecuting, loadingVisible }) => { mountComponent({ propsData: { isImageLoading, isMobile: false, id: 1 } }); - + fireFirstSortUpdate(); if (!queryExecuting) { await waitForApolloRequestRender(); } |