diff options
Diffstat (limited to 'spec/frontend/repository/components/delete_blob_modal_spec.js')
-rw-r--r-- | spec/frontend/repository/components/delete_blob_modal_spec.js | 119 |
1 files changed, 103 insertions, 16 deletions
diff --git a/spec/frontend/repository/components/delete_blob_modal_spec.js b/spec/frontend/repository/components/delete_blob_modal_spec.js index a74e3e6d325..2c62868f391 100644 --- a/spec/frontend/repository/components/delete_blob_modal_spec.js +++ b/spec/frontend/repository/components/delete_blob_modal_spec.js @@ -1,5 +1,5 @@ -import { GlFormTextarea, GlModal, GlFormInput, GlToggle } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; +import { GlFormTextarea, GlModal, GlFormInput, GlToggle, GlForm } from '@gitlab/ui'; +import { shallowMount, mount } from '@vue/test-utils'; import { nextTick } from 'vue'; import DeleteBlobModal from '~/repository/components/delete_blob_modal.vue'; @@ -19,17 +19,34 @@ const initialProps = { describe('DeleteBlobModal', () => { let wrapper; - const createComponent = (props = {}) => { - wrapper = shallowMount(DeleteBlobModal, { + const createComponentFactory = (mountFn) => (props = {}) => { + wrapper = mountFn(DeleteBlobModal, { propsData: { ...initialProps, ...props, }, + attrs: { + static: true, + visible: true, + }, }); }; + const createComponent = createComponentFactory(shallowMount); + const createFullComponent = createComponentFactory(mount); + const findModal = () => wrapper.findComponent(GlModal); - const findForm = () => wrapper.findComponent({ ref: 'form' }); + const findForm = () => findModal().findComponent(GlForm); + const findCommitTextarea = () => findForm().findComponent(GlFormTextarea); + const findTargetInput = () => findForm().findComponent(GlFormInput); + const findCommitHint = () => wrapper.find('[data-testid="hint"]'); + + const fillForm = async (inputValue = {}) => { + const { targetText, commitText } = inputValue; + + await findTargetInput().vm.$emit('input', targetText); + await findCommitTextarea().vm.$emit('input', commitText); + }; afterEach(() => { wrapper.destroy(); @@ -58,17 +75,6 @@ describe('DeleteBlobModal', () => { expect(findForm().attributes('action')).toBe(initialProps.deletePath); }); - it('submits the form', async () => { - createComponent(); - - const submitSpy = jest.spyOn(findForm().element, 'submit'); - findModal().vm.$emit('primary', { preventDefault: () => {} }); - await nextTick(); - - expect(submitSpy).toHaveBeenCalled(); - submitSpy.mockRestore(); - }); - it.each` component | defaultValue | canPushCode | targetBranch | originalBranch | exist ${GlFormTextarea} | ${initialProps.commitMessage} | ${true} | ${initialProps.targetBranch} | ${initialProps.originalBranch} | ${true} @@ -127,4 +133,85 @@ describe('DeleteBlobModal', () => { }, ); }); + + describe('hint', () => { + const targetText = 'some target branch'; + const hintText = 'Try to keep the first line under 52 characters and the others under 72.'; + const charsGenerator = (length) => 'lorem'.repeat(length); + + beforeEach(async () => { + createFullComponent(); + await nextTick(); + }); + + it.each` + commitText | exist | desc + ${charsGenerator(53)} | ${true} | ${'first line length > 52'} + ${`lorem\n${charsGenerator(73)}`} | ${true} | ${'other line length > 72'} + ${charsGenerator(52)} | ${true} | ${'other line length = 52'} + ${`lorem\n${charsGenerator(72)}`} | ${true} | ${'other line length = 72'} + ${`lorem`} | ${false} | ${'first line length < 53'} + ${`lorem\nlorem`} | ${false} | ${'other line length < 53'} + `('displays hint $exist for $desc', async ({ commitText, exist }) => { + await fillForm({ targetText, commitText }); + + if (!exist) { + expect(findCommitHint().exists()).toBe(false); + return; + } + + expect(findCommitHint().text()).toBe(hintText); + }); + }); + + describe('form submission', () => { + let submitSpy; + + beforeEach(async () => { + createFullComponent(); + await nextTick(); + submitSpy = jest.spyOn(findForm().element, 'submit'); + }); + + afterEach(() => { + submitSpy.mockRestore(); + }); + + describe('invalid form', () => { + beforeEach(async () => { + await fillForm({ targetText: '', commitText: '' }); + }); + + it('disables submit button', async () => { + expect(findModal().props('actionPrimary').attributes[0]).toEqual( + expect.objectContaining({ disabled: true }), + ); + }); + + it('does not submit form', async () => { + findModal().vm.$emit('primary', { preventDefault: () => {} }); + expect(submitSpy).not.toHaveBeenCalled(); + }); + }); + + describe('valid form', () => { + beforeEach(async () => { + await fillForm({ + targetText: 'some valid target branch', + commitText: 'some valid commit message', + }); + }); + + it('enables submit button', async () => { + expect(findModal().props('actionPrimary').attributes[0]).toEqual( + expect.objectContaining({ disabled: false }), + ); + }); + + it('submits form', async () => { + findModal().vm.$emit('primary', { preventDefault: () => {} }); + expect(submitSpy).toHaveBeenCalled(); + }); + }); + }); }); |