diff options
Diffstat (limited to 'spec/frontend/registry/explorer/components/details_page')
4 files changed, 76 insertions, 41 deletions
diff --git a/spec/frontend/registry/explorer/components/details_page/__snapshots__/tags_loader_spec.js.snap b/spec/frontend/registry/explorer/components/details_page/__snapshots__/tags_loader_spec.js.snap index aeb49f88770..5f191ef5561 100644 --- a/spec/frontend/registry/explorer/components/details_page/__snapshots__/tags_loader_spec.js.snap +++ b/spec/frontend/registry/explorer/components/details_page/__snapshots__/tags_loader_spec.js.snap @@ -2,9 +2,7 @@ exports[`TagsLoader component has the correct markup 1`] = ` <div> - <div - preserve-aspect-ratio="xMinYMax meet" - > + <div> <rect height="15" rx="4" diff --git a/spec/frontend/registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/registry/explorer/components/details_page/details_header_spec.js index fc93e9094c9..ec883886026 100644 --- a/spec/frontend/registry/explorer/components/details_page/details_header_spec.js +++ b/spec/frontend/registry/explorer/components/details_page/details_header_spec.js @@ -7,9 +7,27 @@ import { DETAILS_PAGE_TITLE } from '~/registry/explorer/constants'; describe('Details Header', () => { let wrapper; - const mountComponent = propsData => { + const defaultImage = { + name: 'foo', + updatedAt: '2020-11-03T13:29:21Z', + project: { + visibility: 'public', + }, + }; + + const findLastUpdatedAndVisibility = () => wrapper.find('[data-testid="updated-and-visibility"]'); + + const waitForMetadataItems = async () => { + // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + }; + + const mountComponent = (image = defaultImage) => { wrapper = shallowMount(component, { - propsData, + propsData: { + image, + }, stubs: { GlSprintf, TitleArea, @@ -23,12 +41,34 @@ describe('Details Header', () => { }); it('has the correct title ', () => { - mountComponent(); + mountComponent({ ...defaultImage, name: '' }); expect(wrapper.text()).toMatchInterpolatedText(DETAILS_PAGE_TITLE); }); it('shows imageName in the title', () => { - mountComponent({ imageName: 'foo' }); + mountComponent(); expect(wrapper.text()).toContain('foo'); }); + + it('has a metadata item with last updated text', async () => { + mountComponent(); + await waitForMetadataItems(); + + expect(findLastUpdatedAndVisibility().props('text')).toBe('Last updated 1 month ago'); + }); + + describe('visibility icon', () => { + it('shows an eye when the project is public', async () => { + mountComponent(); + await waitForMetadataItems(); + + expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye'); + }); + it('shows an eye slashed when the project is not public', async () => { + mountComponent({ ...defaultImage, project: { visibility: 'private' } }); + await waitForMetadataItems(); + + expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye-slash'); + }); + }); }); diff --git a/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js index 3276ef911e3..e1b75636735 100644 --- a/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js +++ b/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js @@ -15,12 +15,12 @@ import { NOT_AVAILABLE_SIZE, } from '~/registry/explorer/constants/index'; -import { tagsListResponse } from '../../mock_data'; +import { tagsMock } from '../../mock_data'; import { ListItem } from '../../stubs'; describe('tags list row', () => { let wrapper; - const [tag] = [...tagsListResponse.data]; + const [tag] = [...tagsMock]; const defaultProps = { tag, isMobile: false, index: 0 }; @@ -65,7 +65,7 @@ describe('tags list row', () => { }); it("does not exist when the row can't be deleted", () => { - const customTag = { ...tag, destroy_path: '' }; + const customTag = { ...tag, canDelete: false }; mountComponent({ ...defaultProps, tag: customTag }); @@ -137,8 +137,8 @@ describe('tags list row', () => { mountComponent(); expect(findClipboardButton().attributes()).toMatchObject({ - text: 'location', - title: 'location', + text: tag.location, + title: tag.location, }); }); }); @@ -171,26 +171,26 @@ describe('tags list row', () => { expect(findSize().exists()).toBe(true); }); - it('contains the total_size and layers', () => { - mountComponent({ ...defaultProps, tag: { ...tag, total_size: 1024 } }); + it('contains the totalSize and layers', () => { + mountComponent({ ...defaultProps, tag: { ...tag, totalSize: 1024, layers: 10 } }); expect(findSize().text()).toMatchInterpolatedText('1.00 KiB · 10 layers'); }); - it('when total_size is missing', () => { - mountComponent(); + it('when totalSize is missing', () => { + mountComponent({ ...defaultProps, tag: { ...tag, totalSize: 0, layers: 10 } }); expect(findSize().text()).toMatchInterpolatedText(`${NOT_AVAILABLE_SIZE} · 10 layers`); }); it('when layers are missing', () => { - mountComponent({ ...defaultProps, tag: { ...tag, total_size: 1024, layers: null } }); + mountComponent({ ...defaultProps, tag: { ...tag, totalSize: 1024 } }); expect(findSize().text()).toMatchInterpolatedText('1.00 KiB'); }); it('when there is 1 layer', () => { - mountComponent({ ...defaultProps, tag: { ...tag, layers: 1 } }); + mountComponent({ ...defaultProps, tag: { ...tag, totalSize: 0, layers: 1 } }); expect(findSize().text()).toMatchInterpolatedText(`${NOT_AVAILABLE_SIZE} · 1 layer`); }); @@ -218,7 +218,7 @@ describe('tags list row', () => { it('pass the correct props to time ago tooltip', () => { mountComponent(); - expect(findTimeAgoTooltip().attributes()).toMatchObject({ time: tag.created_at }); + expect(findTimeAgoTooltip().attributes()).toMatchObject({ time: tag.createdAt }); }); }); @@ -232,7 +232,7 @@ describe('tags list row', () => { it('has the correct text', () => { mountComponent(); - expect(findShortRevision().text()).toMatchInterpolatedText('Digest: 1ab51d5'); + expect(findShortRevision().text()).toMatchInterpolatedText('Digest: 2cf3d2f'); }); it(`displays ${NOT_AVAILABLE_TEXT} when digest is missing`, () => { @@ -260,18 +260,15 @@ describe('tags list row', () => { }); it.each` - destroy_path | digest - ${'foo'} | ${null} - ${null} | ${'foo'} - ${null} | ${null} - `( - 'is disabled when destroy_path is $destroy_path and digest is $digest', - ({ destroy_path, digest }) => { - mountComponent({ ...defaultProps, tag: { ...tag, destroy_path, digest } }); - - expect(findDeleteButton().attributes('disabled')).toBe('true'); - }, - ); + canDelete | digest + ${true} | ${null} + ${false} | ${'foo'} + ${false} | ${null} + `('is disabled when canDelete is $canDelete and digest is $digest', ({ canDelete, digest }) => { + mountComponent({ ...defaultProps, tag: { ...tag, canDelete, digest } }); + + expect(findDeleteButton().attributes('disabled')).toBe('true'); + }); it('delete event emits delete', () => { mountComponent(); @@ -295,10 +292,10 @@ describe('tags list row', () => { }); describe.each` - name | finderFunction | text | icon | clipboard - ${'published date detail'} | ${findPublishedDateDetail} | ${'Published to the bar image repository at 10:23 GMT+0000 on 2020-06-29'} | ${'clock'} | ${false} - ${'manifest detail'} | ${findManifestDetail} | ${'Manifest digest: sha256:1ab51d519f574b636ae7788051c60239334ae8622a9fd82a0cf7bae7786dfd5c'} | ${'log'} | ${true} - ${'configuration detail'} | ${findConfigurationDetail} | ${'Configuration digest: sha256:b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43'} | ${'cloud-gear'} | ${true} + name | finderFunction | text | icon | clipboard + ${'published date detail'} | ${findPublishedDateDetail} | ${'Published to the gitlab-org/gitlab-test/rails-12009 image repository at 01:29 GMT+0000 on 2020-11-03'} | ${'clock'} | ${false} + ${'manifest detail'} | ${findManifestDetail} | ${'Manifest digest: sha256:2cf3d2fdac1b04a14301d47d51cb88dcd26714c74f91440eeee99ce399089062'} | ${'log'} | ${true} + ${'configuration detail'} | ${findConfigurationDetail} | ${'Configuration digest: sha256:c2613843ab33aabf847965442b13a8b55a56ae28837ce182627c0716eb08c02b'} | ${'cloud-gear'} | ${true} `('$name details row', ({ finderFunction, text, icon, clipboard }) => { it(`has ${text} as text`, () => { expect(finderFunction().text()).toMatchInterpolatedText(text); diff --git a/spec/frontend/registry/explorer/components/details_page/tags_list_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_list_spec.js index ebeaa8ff870..035b59731c9 100644 --- a/spec/frontend/registry/explorer/components/details_page/tags_list_spec.js +++ b/spec/frontend/registry/explorer/components/details_page/tags_list_spec.js @@ -3,12 +3,12 @@ import { GlButton } from '@gitlab/ui'; import component from '~/registry/explorer/components/details_page/tags_list.vue'; import TagsListRow from '~/registry/explorer/components/details_page/tags_list_row.vue'; import { TAGS_LIST_TITLE, REMOVE_TAGS_BUTTON_TITLE } from '~/registry/explorer/constants/index'; -import { tagsListResponse } from '../../mock_data'; +import { tagsMock } from '../../mock_data'; describe('Tags List', () => { let wrapper; - const tags = [...tagsListResponse.data]; - const readOnlyTags = tags.map(t => ({ ...t, destroy_path: undefined })); + const tags = [...tagsMock]; + const readOnlyTags = tags.map(t => ({ ...t, canDelete: false })); const findTagsListRow = () => wrapper.findAll(TagsListRow); const findDeleteButton = () => wrapper.find(GlButton); @@ -92,7 +92,7 @@ describe('Tags List', () => { .vm.$emit('select'); findDeleteButton().vm.$emit('click'); - expect(wrapper.emitted('delete')).toEqual([[{ centos6: true }]]); + expect(wrapper.emitted('delete')).toEqual([[{ 'beta-24753': true }]]); }); }); @@ -132,7 +132,7 @@ describe('Tags List', () => { findTagsListRow() .at(0) .vm.$emit('delete'); - expect(wrapper.emitted('delete')).toEqual([[{ centos6: true }]]); + expect(wrapper.emitted('delete')).toEqual([[{ 'beta-24753': true }]]); }); }); }); |