diff options
Diffstat (limited to 'spec/frontend/registry')
6 files changed, 76 insertions, 19 deletions
diff --git a/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js b/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js index 8fe659694ba..d2fe5af3a94 100644 --- a/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js +++ b/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js @@ -1,5 +1,6 @@ -import { GlSprintf } from '@gitlab/ui'; +import { GlSprintf, GlFormInput } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import component from '~/registry/explorer/components/details_page/delete_modal.vue'; import { REMOVE_TAG_CONFIRMATION_TEXT, @@ -12,8 +13,9 @@ import { GlModal } from '../../stubs'; describe('Delete Modal', () => { let wrapper; - const findModal = () => wrapper.find(GlModal); + const findModal = () => wrapper.findComponent(GlModal); const findDescription = () => wrapper.find('[data-testid="description"]'); + const findInputComponent = () => wrapper.findComponent(GlFormInput); const mountComponent = (propsData) => { wrapper = shallowMount(component, { @@ -25,6 +27,13 @@ describe('Delete Modal', () => { }); }; + const expectPrimaryActionStatus = (disabled = true) => + expect(findModal().props('actionPrimary')).toMatchObject( + expect.objectContaining({ + attributes: [{ variant: 'danger' }, { disabled }], + }), + ); + afterEach(() => { wrapper.destroy(); wrapper = null; @@ -65,11 +74,49 @@ describe('Delete Modal', () => { it('has the correct description', () => { mountComponent({ deleteImage: true }); - expect(wrapper.text()).toContain(DELETE_IMAGE_CONFIRMATION_TEXT); + expect(wrapper.text()).toContain( + DELETE_IMAGE_CONFIRMATION_TEXT.replace('%{code}', '').trim(), + ); + }); + + describe('delete button', () => { + const itemsToBeDeleted = [{ project: { path: 'foo' } }]; + + it('is disabled by default', () => { + mountComponent({ deleteImage: true }); + + expectPrimaryActionStatus(); + }); + + it('if the user types something different from the project path is disabled', async () => { + mountComponent({ deleteImage: true, itemsToBeDeleted }); + + findInputComponent().vm.$emit('input', 'bar'); + + await nextTick(); + + expectPrimaryActionStatus(); + }); + + it('if the user types the project path it is enabled', async () => { + mountComponent({ deleteImage: true, itemsToBeDeleted }); + + findInputComponent().vm.$emit('input', 'foo'); + + await nextTick(); + + expectPrimaryActionStatus(false); + }); }); }); describe('when we are deleting tags', () => { + it('delete button is enabled', () => { + mountComponent(); + + expectPrimaryActionStatus(false); + }); + describe('itemsToBeDeleted contains one element', () => { beforeEach(() => { mountComponent({ itemsToBeDeleted: [{ path: 'foo' }] }); 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 632f506f4ae..acff5c21940 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,10 +1,11 @@ -import { GlButton, GlIcon } from '@gitlab/ui'; +import { GlDropdownItem, GlIcon } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; import { useFakeDate } from 'helpers/fake_date'; import createMockApollo from 'helpers/mock_apollo_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import waitForPromises from 'helpers/wait_for_promises'; +import { GlDropdown } from 'jest/registry/explorer/stubs'; import component from '~/registry/explorer/components/details_page/details_header.vue'; import { UNSCHEDULED_STATUS, @@ -48,8 +49,8 @@ describe('Details Header', () => { const findTitle = () => findByTestId('title'); const findTagsCount = () => findByTestId('tags-count'); const findCleanup = () => findByTestId('cleanup'); - const findDeleteButton = () => wrapper.find(GlButton); - const findInfoIcon = () => wrapper.find(GlIcon); + const findDeleteButton = () => wrapper.findComponent(GlDropdownItem); + const findInfoIcon = () => wrapper.findComponent(GlIcon); const waitForMetadataItems = async () => { // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available @@ -84,6 +85,8 @@ describe('Details Header', () => { mocks, stubs: { TitleArea, + GlDropdown, + GlDropdownItem, }, }); }; @@ -152,10 +155,11 @@ describe('Details Header', () => { it('has the correct props', () => { mountComponent(); - expect(findDeleteButton().props()).toMatchObject({ - variant: 'danger', - disabled: false, - }); + expect(findDeleteButton().attributes()).toMatchObject( + expect.objectContaining({ + variant: 'danger', + }), + ); }); it('emits the correct event', () => { @@ -168,16 +172,16 @@ describe('Details Header', () => { it.each` canDelete | disabled | isDisabled - ${true} | ${false} | ${false} - ${true} | ${true} | ${true} - ${false} | ${false} | ${true} - ${false} | ${true} | ${true} + ${true} | ${false} | ${undefined} + ${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({ propsData: { image: { ...defaultImage, canDelete }, disabled } }); - expect(findDeleteButton().props('disabled')).toBe(isDisabled); + expect(findDeleteButton().attributes('disabled')).toBe(isDisabled); }, ); }); diff --git a/spec/frontend/registry/explorer/components/list_page/cleanup_status_spec.js b/spec/frontend/registry/explorer/components/list_page/cleanup_status_spec.js index c89bb874a7f..8f2c049a357 100644 --- a/spec/frontend/registry/explorer/components/list_page/cleanup_status_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/cleanup_status_spec.js @@ -2,7 +2,7 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import CleanupStatus from '~/registry/explorer/components/list_page/cleanup_status.vue'; import { - ASYNC_DELETE_IMAGE_ERROR_MESSAGE, + CLEANUP_TIMED_OUT_ERROR_MESSAGE, CLEANUP_STATUS_SCHEDULED, CLEANUP_STATUS_ONGOING, CLEANUP_STATUS_UNFINISHED, @@ -81,7 +81,7 @@ describe('cleanup_status', () => { const tooltip = getBinding(findExtraInfoIcon().element, 'gl-tooltip'); - expect(tooltip.value.title).toBe(ASYNC_DELETE_IMAGE_ERROR_MESSAGE); + expect(tooltip.value.title).toBe(CLEANUP_TIMED_OUT_ERROR_MESSAGE); }); }); }); diff --git a/spec/frontend/registry/explorer/mock_data.js b/spec/frontend/registry/explorer/mock_data.js index 27246cf2364..6a835a28807 100644 --- a/spec/frontend/registry/explorer/mock_data.js +++ b/spec/frontend/registry/explorer/mock_data.js @@ -119,6 +119,7 @@ export const containerRepositoryMock = { expirationPolicyCleanupStatus: 'UNSCHEDULED', project: { visibility: 'public', + path: 'gitlab-test', containerExpirationPolicy: { enabled: false, nextRunAt: '2020-11-27T08:59:27Z', diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js index 022f6e71fe6..21af9dcc60f 100644 --- a/spec/frontend/registry/explorer/pages/details_spec.js +++ b/spec/frontend/registry/explorer/pages/details_spec.js @@ -335,7 +335,7 @@ describe('Details Page', () => { describe('Partial Cleanup Alert', () => { const config = { runCleanupPoliciesHelpPagePath: 'foo', - cleanupPoliciesHelpPagePath: 'bar', + expirationPolicyHelpPagePath: 'bar', userCalloutsPath: 'call_out_path', userCalloutId: 'call_out_id', showUnfinishedTagCleanupCallout: true, @@ -367,7 +367,7 @@ describe('Details Page', () => { expect(findPartialCleanupAlert().props()).toEqual({ runCleanupPoliciesHelpPagePath: config.runCleanupPoliciesHelpPagePath, - cleanupPoliciesHelpPagePath: config.cleanupPoliciesHelpPagePath, + cleanupPoliciesHelpPagePath: config.expirationPolicyHelpPagePath, }); }); diff --git a/spec/frontend/registry/explorer/stubs.js b/spec/frontend/registry/explorer/stubs.js index d6fba863ee0..4f65e73d3fa 100644 --- a/spec/frontend/registry/explorer/stubs.js +++ b/spec/frontend/registry/explorer/stubs.js @@ -2,6 +2,7 @@ import { GlModal as RealGlModal, GlEmptyState as RealGlEmptyState, GlSkeletonLoader as RealGlSkeletonLoader, + GlDropdown as RealGlDropdown, } from '@gitlab/ui'; import { RouterLinkStub } from '@vue/test-utils'; import { stubComponent } from 'helpers/stub_component'; @@ -38,3 +39,7 @@ export const ListItem = { }; }, }; + +export const GlDropdown = stubComponent(RealGlDropdown, { + template: '<div><slot></slot></div>', +}); |