diff options
author | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
commit | 6438df3a1e0fb944485cebf07976160184697d72 (patch) | |
tree | 00b09bfd170e77ae9391b1a2f5a93ef6839f2597 /spec/frontend/registry/explorer/components/list_page | |
parent | 42bcd54d971da7ef2854b896a7b34f4ef8601067 (diff) | |
download | gitlab-ce-6438df3a1e0fb944485cebf07976160184697d72.tar.gz |
Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42
Diffstat (limited to 'spec/frontend/registry/explorer/components/list_page')
4 files changed, 36 insertions, 14 deletions
diff --git a/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap index bab6b25cc15..46b07b4c2d6 100644 --- a/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap +++ b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap @@ -56,7 +56,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = ` </p> <gl-form-input-group-stub - class="gl-mb-4 " + class="gl-mb-4" predefinedoptions="[object Object]" value="" > diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js index b9839d92f1d..a06c4795b2e 100644 --- a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { GlIcon, GlSprintf } from '@gitlab/ui'; +import { GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; @@ -23,12 +23,13 @@ describe('Image List Row', () => { const [item] = imagesListResponse; const findDetailsLink = () => wrapper.find('[data-testid="details-link"]'); - const findTagsCount = () => wrapper.find('[data-testid="tagsCount"]'); + const findTagsCount = () => wrapper.find('[data-testid="tags-count"]'); const findDeleteBtn = () => wrapper.find(DeleteButton); const findClipboardButton = () => wrapper.find(ClipboardButton); const findWarningIcon = () => wrapper.find('[data-testid="warning-icon"]'); + const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); - const mountComponent = props => { + const mountComponent = (props) => { wrapper = shallowMount(Component, { stubs: { RouterLink, @@ -164,6 +165,20 @@ describe('Image List Row', () => { expect(icon.props('name')).toBe('tag'); }); + describe('loading state', () => { + it('shows a loader when metadataLoading is true', () => { + mountComponent({ metadataLoading: true }); + + expect(findSkeletonLoader().exists()).toBe(true); + }); + + it('hides the tags count while loading', () => { + mountComponent({ metadataLoading: true }); + + expect(findTagsCount().exists()).toBe(false); + }); + }); + describe('tags count text', () => { it('with one tag in the image', () => { mountComponent({ item: { ...item, tagsCount: 1 } }); diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js index 54befc9973a..61c362f4d78 100644 --- a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js @@ -11,11 +11,12 @@ describe('Image List', () => { const findRow = () => wrapper.findAll(ImageListRow); const findPagination = () => wrapper.find(GlKeysetPagination); - const mountComponent = (pageInfo = defaultPageInfo) => { + const mountComponent = (props) => { wrapper = shallowMount(Component, { propsData: { images: imagesListResponse, - pageInfo, + pageInfo: defaultPageInfo, + ...props, }, }); }; @@ -35,11 +36,14 @@ describe('Image List', () => { it('when delete event is emitted on the row it emits up a delete event', () => { mountComponent(); - findRow() - .at(0) - .vm.$emit('delete', 'foo'); + findRow().at(0).vm.$emit('delete', 'foo'); expect(wrapper.emitted('delete')).toEqual([['foo']]); }); + + it('passes down the metadataLoading prop', () => { + mountComponent({ metadataLoading: true }); + expect(findRow().at(0).props('metadataLoading')).toBe(true); + }); }); describe('pagination', () => { @@ -57,7 +61,7 @@ describe('Image List', () => { `( 'when hasNextPage is $hasNextPage and hasPreviousPage is $hasPreviousPage: is $isVisible that the component is visible', ({ hasNextPage, hasPreviousPage, isVisible }) => { - mountComponent({ hasNextPage, hasPreviousPage }); + mountComponent({ pageInfo: { ...defaultPageInfo, hasNextPage, hasPreviousPage } }); expect(findPagination().exists()).toBe(isVisible); expect(findPagination().props('hasPreviousPage')).toBe(hasPreviousPage); @@ -66,7 +70,7 @@ describe('Image List', () => { ); it('emits "prev-page" when the user clicks the back page button', () => { - mountComponent({ hasPreviousPage: true }); + mountComponent(); findPagination().vm.$emit('prev'); @@ -74,7 +78,7 @@ describe('Image List', () => { }); it('emits "next-page" when the user clicks the forward page button', () => { - mountComponent({ hasNextPage: true }); + mountComponent(); findPagination().vm.$emit('next'); diff --git a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js index 3c997093d46..58439c185e3 100644 --- a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js @@ -41,9 +41,12 @@ describe('registry_header', () => { describe('header', () => { it('has a title', () => { - mountComponent(); + mountComponent({ metadataLoading: true }); - expect(findTitleArea().props('title')).toBe(CONTAINER_REGISTRY_TITLE); + expect(findTitleArea().props()).toMatchObject({ + title: CONTAINER_REGISTRY_TITLE, + metadataLoading: true, + }); }); it('has a commands slot', () => { |