diff options
Diffstat (limited to 'spec/frontend/registry/explorer/components/details_page/details_header_spec.js')
-rw-r--r-- | spec/frontend/registry/explorer/components/details_page/details_header_spec.js | 85 |
1 files changed, 70 insertions, 15 deletions
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 337235e3de5..3fa3a2ae1de 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 @@ -1,7 +1,6 @@ +import { GlSprintf, GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import { GlSprintf } from '@gitlab/ui'; import { useFakeDate } from 'helpers/fake_date'; -import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import component from '~/registry/explorer/components/details_page/details_header.vue'; import { DETAILS_PAGE_TITLE, @@ -15,6 +14,7 @@ import { CLEANUP_ONGOING_TOOLTIP, CLEANUP_UNFINISHED_TOOLTIP, } from '~/registry/explorer/constants'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; describe('Details Header', () => { let wrapper; @@ -23,6 +23,7 @@ describe('Details Header', () => { name: 'foo', updatedAt: '2020-11-03T13:29:21Z', tagsCount: 10, + canDelete: true, project: { visibility: 'public', containerExpirationPolicy: { @@ -36,8 +37,10 @@ describe('Details Header', () => { const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`); const findLastUpdatedAndVisibility = () => findByTestId('updated-and-visibility'); + const findTitle = () => findByTestId('title'); const findTagsCount = () => findByTestId('tags-count'); const findCleanup = () => findByTestId('cleanup'); + const findDeleteButton = () => wrapper.find(GlButton); const waitForMetadataItems = async () => { // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available @@ -45,11 +48,9 @@ describe('Details Header', () => { await wrapper.vm.$nextTick(); }; - const mountComponent = (image = defaultImage) => { + const mountComponent = (propsData = { image: defaultImage }) => { wrapper = shallowMount(component, { - propsData: { - image, - }, + propsData, stubs: { GlSprintf, TitleArea, @@ -63,13 +64,65 @@ describe('Details Header', () => { }); it('has the correct title ', () => { - mountComponent({ ...defaultImage, name: '' }); - expect(wrapper.text()).toMatchInterpolatedText(DETAILS_PAGE_TITLE); + mountComponent({ image: { ...defaultImage, name: '' } }); + expect(findTitle().text()).toMatchInterpolatedText(DETAILS_PAGE_TITLE); }); it('shows imageName in the title', () => { mountComponent(); - expect(wrapper.text()).toContain('foo'); + expect(findTitle().text()).toContain('foo'); + }); + + describe('delete button', () => { + it('exists', () => { + mountComponent(); + + expect(findDeleteButton().exists()).toBe(true); + }); + + it('is hidden while loading', () => { + mountComponent({ image: defaultImage, metadataLoading: true }); + + expect(findDeleteButton().exists()).toBe(false); + }); + + it('has the correct text', () => { + mountComponent(); + + expect(findDeleteButton().text()).toBe('Delete'); + }); + + it('has the correct props', () => { + mountComponent(); + + expect(findDeleteButton().props()).toMatchObject({ + variant: 'danger', + disabled: false, + }); + }); + + it('emits the correct event', () => { + mountComponent(); + + findDeleteButton().vm.$emit('click'); + + expect(wrapper.emitted('delete')).toEqual([[]]); + }); + + it.each` + canDelete | disabled | isDisabled + ${true} | ${false} | ${false} + ${true} | ${true} | ${true} + ${false} | ${false} | ${true} + ${false} | ${true} | ${true} + `( + 'when canDelete is $canDelete and disabled is $disabled is $isDisabled that the button is disabled', + ({ canDelete, disabled, isDisabled }) => { + mountComponent({ image: { ...defaultImage, canDelete }, disabled }); + + expect(findDeleteButton().props('disabled')).toBe(isDisabled); + }, + ); }); describe('metadata items', () => { @@ -82,7 +135,7 @@ describe('Details Header', () => { }); it('when there is one tag has the correct text', async () => { - mountComponent({ ...defaultImage, tagsCount: 1 }); + mountComponent({ image: { ...defaultImage, tagsCount: 1 } }); await waitForMetadataItems(); expect(findTagsCount().props('text')).toBe('1 tag'); @@ -124,10 +177,12 @@ describe('Details Header', () => { 'when the status is $status the text is $text and the tooltip is $tooltip', async ({ status, text, tooltip }) => { mountComponent({ - ...defaultImage, - expirationPolicyCleanupStatus: status, - project: { - containerExpirationPolicy: { enabled: true, nextRunAt: '2021-01-03T14:29:21Z' }, + image: { + ...defaultImage, + expirationPolicyCleanupStatus: status, + project: { + containerExpirationPolicy: { enabled: true, nextRunAt: '2021-01-03T14:29:21Z' }, + }, }, }); await waitForMetadataItems(); @@ -156,7 +211,7 @@ describe('Details Header', () => { expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye'); }); it('shows an eye slashed when the project is not public', async () => { - mountComponent({ ...defaultImage, project: { visibility: 'private' } }); + mountComponent({ image: { ...defaultImage, project: { visibility: 'private' } } }); await waitForMetadataItems(); expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye-slash'); |