diff options
Diffstat (limited to 'spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js')
-rw-r--r-- | spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js | 53 |
1 files changed, 50 insertions, 3 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' }] }); |