diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-08 15:09:27 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-08 15:09:27 +0300 |
commit | 81f062b841f6062601662061850934a51e77ceea (patch) | |
tree | 0851038895c34776af8603f13b546b50df511e36 /spec/frontend/webhooks/components | |
parent | e40061efd4c68576da944254567d0b3fbc233ae4 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/webhooks/components')
-rw-r--r-- | spec/frontend/webhooks/components/form_url_app_spec.js | 86 | ||||
-rw-r--r-- | spec/frontend/webhooks/components/form_url_mask_item_spec.js | 41 |
2 files changed, 120 insertions, 7 deletions
diff --git a/spec/frontend/webhooks/components/form_url_app_spec.js b/spec/frontend/webhooks/components/form_url_app_spec.js index 76812097748..93f468af1e3 100644 --- a/spec/frontend/webhooks/components/form_url_app_spec.js +++ b/spec/frontend/webhooks/components/form_url_app_spec.js @@ -1,10 +1,14 @@ import { nextTick } from 'vue'; -import { GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui'; +import { GlFormGroup, GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui'; +import { scrollToElement } from '~/lib/utils/common_utils'; import FormUrlApp from '~/webhooks/components/form_url_app.vue'; import FormUrlMaskItem from '~/webhooks/components/form_url_mask_item.vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; + +jest.mock('~/lib/utils/common_utils'); describe('FormUrlApp', () => { let wrapper; @@ -26,8 +30,11 @@ describe('FormUrlApp', () => { const findAllUrlMaskItems = () => wrapper.findAllComponents(FormUrlMaskItem); const findAddItem = () => wrapper.findComponent(GlLink); const findFormUrl = () => wrapper.findByTestId('form-url'); + const findFormUrlGroup = () => wrapper.findAllComponents(GlFormGroup).at(0); const findFormUrlPreview = () => wrapper.findByTestId('form-url-preview'); const findUrlMaskSection = () => wrapper.findByTestId('url-mask-section'); + const findFormEl = () => document.querySelector('.js-webhook-form'); + const submitForm = () => findFormEl().dispatchEvent(new Event('submit')); describe('template', () => { it('renders radio buttons for URL masking', () => { @@ -152,5 +159,82 @@ describe('FormUrlApp', () => { }); }); }); + + describe('validations', () => { + const inputRequiredText = FormUrlApp.i18n.inputRequired; + + beforeEach(() => { + setHTMLFixture('<form class="js-webhook-form"></form>'); + }); + + afterEach(() => { + resetHTMLFixture(); + }); + + it.each` + url | state | scrollToElementCalls + ${null} | ${undefined} | ${1} + ${''} | ${undefined} | ${1} + ${'https://example.com/'} | ${'true'} | ${0} + `('when URL is `$url`, state is `$state`', async ({ url, state, scrollToElementCalls }) => { + createComponent({ + props: { initialUrl: url }, + }); + + submitForm(); + await nextTick(); + + expect(findFormUrlGroup().attributes('state')).toBe(state); + expect(scrollToElement).toHaveBeenCalledTimes(scrollToElementCalls); + expect(findFormUrlGroup().attributes('invalid-feedback')).toBe(inputRequiredText); + }); + + it.each` + key | value | keyInvalidFeedback | valueInvalidFeedback | scrollToElementCalls + ${null} | ${null} | ${inputRequiredText} | ${inputRequiredText} | ${1} + ${null} | ${'value'} | ${inputRequiredText} | ${null} | ${1} + ${'key'} | ${null} | ${null} | ${inputRequiredText} | ${1} + ${'key'} | ${'value'} | ${null} | ${null} | ${0} + `( + 'when key is `$key` and value is `$value`', + async ({ key, value, keyInvalidFeedback, valueInvalidFeedback, scrollToElementCalls }) => { + createComponent({ + props: { initialUrl: 'url' }, + }); + findRadioGroup().vm.$emit('input', true); + await nextTick(); + + const maskItem = findAllUrlMaskItems().at(0); + const mockInput = { index: 0, key, value }; + maskItem.vm.$emit('input', mockInput); + + submitForm(); + await nextTick(); + + expect(maskItem.props('keyInvalidFeedback')).toBe(keyInvalidFeedback); + expect(maskItem.props('valueInvalidFeedback')).toBe(valueInvalidFeedback); + expect(scrollToElement).toHaveBeenCalledTimes(scrollToElementCalls); + }, + ); + + describe('when initialUrlVariables is passed', () => { + it('does not validate empty values', async () => { + const initialUrlVariables = [{ key: 'key' }]; + + createComponent({ + props: { initialUrl: 'url', initialUrlVariables }, + }); + + submitForm(); + await nextTick(); + + const maskItem = findAllUrlMaskItems().at(0); + + expect(maskItem.props('keyInvalidFeedback')).toBeNull(); + expect(maskItem.props('valueInvalidFeedback')).toBeNull(); + expect(scrollToElement).not.toHaveBeenCalled(); + }); + }); + }); }); }); diff --git a/spec/frontend/webhooks/components/form_url_mask_item_spec.js b/spec/frontend/webhooks/components/form_url_mask_item_spec.js index a6323928d22..06c743749a6 100644 --- a/spec/frontend/webhooks/components/form_url_mask_item_spec.js +++ b/spec/frontend/webhooks/components/form_url_mask_item_spec.js @@ -14,6 +14,7 @@ describe('FormUrlMaskItem', () => { const mockKey = 'key'; const mockValue = 'value'; const mockInput = 'input'; + const mockFeedback = 'feedback'; const createComponent = ({ props } = {}) => { wrapper = shallowMountExtended(FormUrlMaskItem, { @@ -21,10 +22,6 @@ describe('FormUrlMaskItem', () => { }); }; - afterEach(() => { - wrapper.destroy(); - }); - const findMaskItemKey = () => wrapper.findByTestId('mask-item-key'); const findMaskItemValue = () => wrapper.findByTestId('mask-item-value'); const findRemoveButton = () => wrapper.findComponent(GlButton); @@ -34,14 +31,20 @@ describe('FormUrlMaskItem', () => { createComponent({ props: { itemKey: mockKey, itemValue: mockValue } }); const keyInput = findMaskItemKey(); - expect(keyInput.attributes('label')).toBe(FormUrlMaskItem.i18n.keyLabel); + expect(keyInput.attributes()).toMatchObject({ + label: FormUrlMaskItem.i18n.keyLabel, + state: 'true', + }); expect(keyInput.findComponent(GlFormInput).attributes()).toMatchObject({ name: 'hook[url_variables][][key]', value: mockKey, }); const valueInput = findMaskItemValue(); - expect(valueInput.attributes('label')).toBe(FormUrlMaskItem.i18n.valueLabel); + expect(valueInput.attributes()).toMatchObject({ + label: FormUrlMaskItem.i18n.valueLabel, + state: 'true', + }); expect(valueInput.findComponent(GlFormInput).attributes()).toMatchObject({ name: 'hook[url_variables][][value]', value: mockValue, @@ -69,6 +72,32 @@ describe('FormUrlMaskItem', () => { }); }); + describe('when keyInvalidFeedback is passed', () => { + beforeEach(() => { + createComponent({ + props: { keyInvalidFeedback: mockFeedback }, + }); + }); + + it('sets validation message on key', () => { + expect(findMaskItemKey().attributes('invalid-feedback')).toBe(mockFeedback); + expect(findMaskItemKey().attributes('state')).toBeUndefined(); + }); + }); + + describe('when valueInvalidFeedback is passed', () => { + beforeEach(() => { + createComponent({ + props: { valueInvalidFeedback: mockFeedback }, + }); + }); + + it('sets validation message on value', () => { + expect(findMaskItemValue().attributes('invalid-feedback')).toBe(mockFeedback); + expect(findMaskItemValue().attributes('state')).toBeUndefined(); + }); + }); + describe('on key input', () => { beforeEach(async () => { createComponent({ props: { itemKey: mockKey, itemValue: mockValue } }); |