diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-01 18:08:56 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-01 18:08:56 +0300 |
commit | e92c95bf459ea6237b1fe1cbd3e6fc7d0eca8f85 (patch) | |
tree | 080fec6e5ea63a30f6d1f313d585266e88db2344 /spec/frontend/registry | |
parent | 9ecdb93f4e7e85ffc1e7a768780bb1279827a6aa (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/registry')
6 files changed, 87 insertions, 48 deletions
diff --git a/spec/frontend/registry/explorer/components/details_page/empty_state_spec.js b/spec/frontend/registry/explorer/components/details_page/empty_state_spec.js new file mode 100644 index 00000000000..7739f111906 --- /dev/null +++ b/spec/frontend/registry/explorer/components/details_page/empty_state_spec.js @@ -0,0 +1,54 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlEmptyState } from '@gitlab/ui'; +import component from '~/registry/explorer/components/details_page/empty_state.vue'; +import { + NO_TAGS_TITLE, + NO_TAGS_MESSAGE, + MISSING_OR_DELETED_IMAGE_TITLE, + MISSING_OR_DELETED_IMAGE_MESSAGE, +} from '~/registry/explorer/constants'; + +describe('EmptyTagsState component', () => { + let wrapper; + + const findEmptyState = () => wrapper.find(GlEmptyState); + + const mountComponent = (propsData) => { + wrapper = shallowMount(component, { + stubs: { + GlEmptyState, + }, + propsData, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('contains gl-empty-state', () => { + mountComponent(); + expect(findEmptyState().exists()).toBe(true); + }); + + it.each` + isEmptyImage | title | description + ${false} | ${NO_TAGS_TITLE} | ${NO_TAGS_MESSAGE} + ${true} | ${MISSING_OR_DELETED_IMAGE_TITLE} | ${MISSING_OR_DELETED_IMAGE_MESSAGE} + `( + 'when isEmptyImage is $isEmptyImage has the correct props', + ({ isEmptyImage, title, description }) => { + mountComponent({ + noContainersImage: 'foo', + isEmptyImage, + }); + + expect(findEmptyState().props()).toMatchObject({ + title, + description, + svgPath: 'foo', + }); + }, + ); +}); diff --git a/spec/frontend/registry/explorer/components/details_page/empty_tags_state_spec.js b/spec/frontend/registry/explorer/components/details_page/empty_tags_state_spec.js deleted file mode 100644 index 09afd9d2d84..00000000000 --- a/spec/frontend/registry/explorer/components/details_page/empty_tags_state_spec.js +++ /dev/null @@ -1,43 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { GlEmptyState } from '@gitlab/ui'; -import component from '~/registry/explorer/components/details_page/empty_tags_state.vue'; -import { - EMPTY_IMAGE_REPOSITORY_TITLE, - EMPTY_IMAGE_REPOSITORY_MESSAGE, -} from '~/registry/explorer/constants'; - -describe('EmptyTagsState component', () => { - let wrapper; - - const findEmptyState = () => wrapper.find(GlEmptyState); - - const mountComponent = () => { - wrapper = shallowMount(component, { - stubs: { - GlEmptyState, - }, - propsData: { - noContainersImage: 'foo', - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('contains gl-empty-state', () => { - mountComponent(); - expect(findEmptyState().exists()).toBe(true); - }); - - it('has the correct props', () => { - mountComponent(); - expect(findEmptyState().props()).toMatchObject({ - title: EMPTY_IMAGE_REPOSITORY_TITLE, - description: EMPTY_IMAGE_REPOSITORY_MESSAGE, - svgPath: 'foo', - }); - }); -}); diff --git a/spec/frontend/registry/explorer/components/list_page/group_empty_state_spec.js b/spec/frontend/registry/explorer/components/list_page/group_empty_state_spec.js index 1ba2036dc34..ffdc6b787cb 100644 --- a/spec/frontend/registry/explorer/components/list_page/group_empty_state_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/group_empty_state_spec.js @@ -1,8 +1,8 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import { GlSprintf } from '@gitlab/ui'; -import { GlEmptyState } from '../../stubs'; import groupEmptyState from '~/registry/explorer/components/list_page/group_empty_state.vue'; +import { GlEmptyState } from '../../stubs'; const localVue = createLocalVue(); localVue.use(Vuex); diff --git a/spec/frontend/registry/explorer/components/list_page/project_empty_state_spec.js b/spec/frontend/registry/explorer/components/list_page/project_empty_state_spec.js index 3a27cf1923c..cbd1f1a99db 100644 --- a/spec/frontend/registry/explorer/components/list_page/project_empty_state_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/project_empty_state_spec.js @@ -1,8 +1,8 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import { GlSprintf } from '@gitlab/ui'; -import { GlEmptyState } from '../../stubs'; import projectEmptyState from '~/registry/explorer/components/list_page/project_empty_state.vue'; +import { GlEmptyState } from '../../stubs'; import { dockerCommands } from '../../mock_data'; const localVue = createLocalVue(); diff --git a/spec/frontend/registry/explorer/mock_data.js b/spec/frontend/registry/explorer/mock_data.js index b0fc009872c..f4453912db4 100644 --- a/spec/frontend/registry/explorer/mock_data.js +++ b/spec/frontend/registry/explorer/mock_data.js @@ -235,3 +235,9 @@ export const graphQLProjectImageRepositoriesDetailsMock = { }, }, }; + +export const graphQLEmptyImageDetailsMock = { + data: { + containerRepository: null, + }, +}; diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js index 9e6e74e22f0..7106cdae27f 100644 --- a/spec/frontend/registry/explorer/pages/details_spec.js +++ b/spec/frontend/registry/explorer/pages/details_spec.js @@ -11,7 +11,7 @@ import PartialCleanupAlert from '~/registry/explorer/components/details_page/par import DetailsHeader from '~/registry/explorer/components/details_page/details_header.vue'; import TagsLoader from '~/registry/explorer/components/details_page/tags_loader.vue'; import TagsList from '~/registry/explorer/components/details_page/tags_list.vue'; -import EmptyTagsState from '~/registry/explorer/components/details_page/empty_tags_state.vue'; +import EmptyTagsState from '~/registry/explorer/components/details_page/empty_state.vue'; import getContainerRepositoryDetailsQuery from '~/registry/explorer/graphql/queries/get_container_repository_details.query.graphql'; import deleteContainerRepositoryTagsMutation from '~/registry/explorer/graphql/mutations/delete_container_repository_tags.mutation.graphql'; @@ -23,6 +23,7 @@ import { graphQLImageDetailsEmptyTagsMock, graphQLDeleteImageRepositoryTagsMock, containerRepositoryMock, + graphQLEmptyImageDetailsMock, tagsMock, tagsPageInfo, } from '../mock_data'; @@ -40,7 +41,7 @@ describe('Details Page', () => { const findTagsList = () => wrapper.find(TagsList); const findDeleteAlert = () => wrapper.find(DeleteAlert); const findDetailsHeader = () => wrapper.find(DetailsHeader); - const findEmptyTagsState = () => wrapper.find(EmptyTagsState); + const findEmptyState = () => wrapper.find(EmptyTagsState); const findPartialCleanupAlert = () => wrapper.find(PartialCleanupAlert); const routeId = 1; @@ -134,6 +135,27 @@ describe('Details Page', () => { }); }); + describe('when the image does not exist', () => { + it('does not show the default ui', async () => { + mountComponent({ resolver: jest.fn().mockResolvedValue(graphQLEmptyImageDetailsMock) }); + + await waitForApolloRequestRender(); + + expect(findTagsLoader().exists()).toBe(false); + expect(findDetailsHeader().exists()).toBe(false); + expect(findTagsList().exists()).toBe(false); + expect(findPagination().exists()).toBe(false); + }); + + it('shows an empty state message', async () => { + mountComponent({ resolver: jest.fn().mockResolvedValue(graphQLEmptyImageDetailsMock) }); + + await waitForApolloRequestRender(); + + expect(findEmptyState().exists()).toBe(true); + }); + }); + describe('when the list of tags is empty', () => { const resolver = jest.fn().mockResolvedValue(graphQLImageDetailsEmptyTagsMock); @@ -142,7 +164,7 @@ describe('Details Page', () => { await waitForApolloRequestRender(); - expect(findEmptyTagsState().exists()).toBe(true); + expect(findEmptyState().exists()).toBe(true); }); it('does not show the loader', async () => { |