diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/container_registry/explorer/components')
3 files changed, 58 insertions, 29 deletions
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_button_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_button_spec.js index 6d7bf528495..ad67128502a 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_button_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_button_spec.js @@ -1,7 +1,7 @@ -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlTooltip, GlSprintf } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import component from '~/packages_and_registries/container_registry/explorer/components/delete_button.vue'; +import { LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION } from '~/packages_and_registries/container_registry/explorer/constants/list'; describe('delete_button', () => { let wrapper; @@ -12,6 +12,7 @@ describe('delete_button', () => { }; const findButton = () => wrapper.find(GlButton); + const findTooltip = () => wrapper.find(GlTooltip); const mountComponent = (props) => { wrapper = shallowMount(component, { @@ -19,8 +20,9 @@ describe('delete_button', () => { ...defaultProps, ...props, }, - directives: { - GlTooltip: createMockDirective(), + stubs: { + GlTooltip, + GlSprintf, }, }); }; @@ -33,41 +35,50 @@ describe('delete_button', () => { describe('tooltip', () => { it('the title is controlled by tooltipTitle prop', () => { mountComponent(); - const tooltip = getBinding(wrapper.element, 'gl-tooltip'); + const tooltip = findTooltip(); expect(tooltip).toBeDefined(); - expect(tooltip.value.title).toBe(defaultProps.tooltipTitle); + expect(tooltip.text()).toBe(defaultProps.tooltipTitle); }); it('is disabled when tooltipTitle is disabled', () => { mountComponent({ tooltipDisabled: true }); - const tooltip = getBinding(wrapper.element, 'gl-tooltip'); - expect(tooltip.value.disabled).toBe(true); + expect(findTooltip().props('disabled')).toBe(true); }); - describe('button', () => { - it('exists', () => { - mountComponent(); - expect(findButton().exists()).toBe(true); + it('works with a link', () => { + mountComponent({ + tooltipTitle: LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION, + tooltipLink: 'foo', }); + expect(findTooltip().text()).toMatchInterpolatedText( + LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION, + ); + }); + }); - it('has the correct props/attributes bound', () => { - mountComponent({ disabled: true }); - expect(findButton().attributes()).toMatchObject({ - 'aria-label': 'Foo title', - icon: 'remove', - title: 'Foo title', - variant: 'danger', - disabled: 'true', - category: 'secondary', - }); - }); + describe('button', () => { + it('exists', () => { + mountComponent(); + expect(findButton().exists()).toBe(true); + }); - it('emits a delete event', () => { - mountComponent(); - expect(wrapper.emitted('delete')).toEqual(undefined); - findButton().vm.$emit('click'); - expect(wrapper.emitted('delete')).toEqual([[]]); + it('has the correct props/attributes bound', () => { + mountComponent({ disabled: true }); + expect(findButton().attributes()).toMatchObject({ + 'aria-label': 'Foo title', + icon: 'remove', + title: 'Foo title', + variant: 'danger', + disabled: 'true', + category: 'secondary', }); }); + + it('emits a delete event', () => { + mountComponent(); + expect(wrapper.emitted('delete')).toEqual(undefined); + findButton().vm.$emit('click'); + expect(wrapper.emitted('delete')).toEqual([[]]); + }); }); }); diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js index 411bef54e40..690d827ec67 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js @@ -10,6 +10,7 @@ import { LIST_DELETE_BUTTON_DISABLED, REMOVE_REPOSITORY_LABEL, IMAGE_DELETE_SCHEDULED_STATUS, + IMAGE_MIGRATING_STATE, SCHEDULED_STATUS, ROOT_IMAGE_TEXT, } from '~/packages_and_registries/container_registry/explorer/constants'; @@ -41,6 +42,9 @@ describe('Image List Row', () => { item, ...props, }, + provide: { + config: {}, + }, directives: { GlTooltip: createMockDirective(), }, @@ -178,6 +182,12 @@ describe('Image List Row', () => { expect(findDeleteBtn().props('disabled')).toBe(state); }, ); + + it('is disabled when migrationState is importing', () => { + mountComponent({ item: { ...item, migrationState: IMAGE_MIGRATING_STATE } }); + + expect(findDeleteBtn().props('disabled')).toBe(true); + }); }); describe('tags count', () => { diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js index c91a9c0f0fb..7d09c09d03b 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js @@ -1,4 +1,4 @@ -import { GlSprintf } from '@gitlab/ui'; +import { GlSprintf, GlLink } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; import Component from '~/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue'; @@ -6,6 +6,7 @@ import { CONTAINER_REGISTRY_TITLE, LIST_INTRO_TEXT, EXPIRATION_POLICY_DISABLED_TEXT, + SET_UP_CLEANUP, } from '~/packages_and_registries/container_registry/explorer/constants'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; @@ -21,6 +22,7 @@ describe('registry_header', () => { const findCommandsSlot = () => wrapper.find('[data-testid="commands-slot"]'); const findImagesCountSubHeader = () => wrapper.find('[data-testid="images-count"]'); const findExpirationPolicySubHeader = () => wrapper.find('[data-testid="expiration-policy"]'); + const findSetupCleanUpLink = () => wrapper.findComponent(GlLink); const mountComponent = async (propsData, slots) => { wrapper = shallowMount(Component, { @@ -88,6 +90,7 @@ describe('registry_header', () => { }); const text = findExpirationPolicySubHeader(); + expect(text.exists()).toBe(true); expect(text.props()).toMatchObject({ text: EXPIRATION_POLICY_DISABLED_TEXT, @@ -100,12 +103,17 @@ describe('registry_header', () => { await mountComponent({ expirationPolicy: { enabled: true }, expirationPolicyHelpPagePath: 'foo', + showCleanupPolicyLink: true, imagesCount: 1, }); const text = findExpirationPolicySubHeader(); + const cleanupLink = findSetupCleanUpLink(); + expect(text.exists()).toBe(true); expect(text.props('text')).toBe('Expiration policy will run in '); + expect(cleanupLink.exists()).toBe(true); + expect(cleanupLink.text()).toBe(SET_UP_CLEANUP); }); it('when the expiration policy is completely disabled', async () => { await mountComponent({ |