diff options
Diffstat (limited to 'spec/frontend/webhooks/components/form_url_mask_item_spec.js')
-rw-r--r-- | spec/frontend/webhooks/components/form_url_mask_item_spec.js | 78 |
1 files changed, 65 insertions, 13 deletions
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 ab028ef2997..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,29 +22,80 @@ describe('FormUrlMaskItem', () => { }); }; - afterEach(() => { - wrapper.destroy(); - }); - const findMaskItemKey = () => wrapper.findByTestId('mask-item-key'); const findMaskItemValue = () => wrapper.findByTestId('mask-item-value'); const findRemoveButton = () => wrapper.findComponent(GlButton); describe('template', () => { it('renders input for key and value', () => { - createComponent(); + createComponent({ props: { itemKey: mockKey, itemValue: mockValue } }); const keyInput = findMaskItemKey(); - expect(keyInput.attributes('label')).toBe(FormUrlMaskItem.i18n.keyLabel); - expect(keyInput.findComponent(GlFormInput).attributes('name')).toBe( - 'hook[url_variables][][key]', - ); + 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.findComponent(GlFormInput).attributes('name')).toBe( - 'hook[url_variables][][value]', - ); + expect(valueInput.attributes()).toMatchObject({ + label: FormUrlMaskItem.i18n.valueLabel, + state: 'true', + }); + expect(valueInput.findComponent(GlFormInput).attributes()).toMatchObject({ + name: 'hook[url_variables][][value]', + value: mockValue, + }); + }); + + describe('when isEditing is true', () => { + beforeEach(() => { + createComponent({ props: { isEditing: true } }); + }); + + it('renders disabled key and value', () => { + expect(findMaskItemKey().findComponent(GlFormInput).attributes('disabled')).toBe('true'); + expect(findMaskItemValue().findComponent(GlFormInput).attributes('disabled')).toBe('true'); + }); + + it('renders disabled remove button', () => { + expect(findRemoveButton().attributes('disabled')).toBe('true'); + }); + + it('displays ************ as input value', () => { + expect(findMaskItemValue().findComponent(GlFormInput).attributes('value')).toBe( + '************', + ); + }); + }); + + 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', () => { |