diff options
Diffstat (limited to 'spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js')
-rw-r--r-- | spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js | 21 |
1 files changed, 18 insertions, 3 deletions
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 } }); |