diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-10-20 09:40:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-10-20 09:40:42 +0000 |
commit | ee664acb356f8123f4f6b00b73c1e1cf0866c7fb (patch) | |
tree | f8479f94a28f66654c6a4f6fb99bad6b4e86a40e /spec/frontend/webhooks | |
parent | 62f7d5c5b69180e82ae8196b7b429eeffc8e7b4f (diff) | |
download | gitlab-ce-ee664acb356f8123f4f6b00b73c1e1cf0866c7fb.tar.gz |
Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42
Diffstat (limited to 'spec/frontend/webhooks')
-rw-r--r-- | spec/frontend/webhooks/components/form_url_app_spec.js | 142 | ||||
-rw-r--r-- | spec/frontend/webhooks/components/form_url_mask_item_spec.js | 100 |
2 files changed, 242 insertions, 0 deletions
diff --git a/spec/frontend/webhooks/components/form_url_app_spec.js b/spec/frontend/webhooks/components/form_url_app_spec.js new file mode 100644 index 00000000000..16e0a3f549e --- /dev/null +++ b/spec/frontend/webhooks/components/form_url_app_spec.js @@ -0,0 +1,142 @@ +import { nextTick } from 'vue'; +import { GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui'; + +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'; + +describe('FormUrlApp', () => { + let wrapper; + + const createComponent = ({ props } = {}) => { + wrapper = shallowMountExtended(FormUrlApp, { + propsData: { ...props }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const findAllRadioButtons = () => wrapper.findAllComponents(GlFormRadio); + const findRadioGroup = () => wrapper.findComponent(GlFormRadioGroup); + const findUrlMaskDisable = () => findAllRadioButtons().at(0); + const findUrlMaskEnable = () => findAllRadioButtons().at(1); + const findAllUrlMaskItems = () => wrapper.findAllComponents(FormUrlMaskItem); + const findAddItem = () => wrapper.findComponent(GlLink); + const findFormUrl = () => wrapper.findByTestId('form-url'); + const findFormUrlPreview = () => wrapper.findByTestId('form-url-preview'); + const findUrlMaskSection = () => wrapper.findByTestId('url-mask-section'); + + describe('template', () => { + it('renders radio buttons for URL masking', () => { + createComponent(); + + expect(findAllRadioButtons()).toHaveLength(2); + expect(findUrlMaskDisable().text()).toBe(FormUrlApp.i18n.radioFullUrlText); + expect(findUrlMaskEnable().text()).toBe(FormUrlApp.i18n.radioMaskUrlText); + }); + + it('does not render mask section', () => { + createComponent(); + + expect(findUrlMaskSection().exists()).toBe(false); + }); + + describe('on radio select', () => { + beforeEach(async () => { + createComponent(); + + findRadioGroup().vm.$emit('input', true); + await nextTick(); + }); + + it('renders mask section', () => { + expect(findUrlMaskSection().exists()).toBe(true); + }); + + it('renders an empty mask item by default', () => { + expect(findAllUrlMaskItems()).toHaveLength(1); + + const firstItem = findAllUrlMaskItems().at(0); + expect(firstItem.props('itemKey')).toBeNull(); + expect(firstItem.props('itemValue')).toBeNull(); + }); + }); + + describe('with mask items', () => { + const mockItem1 = { key: 'key1', value: 'value1' }; + const mockItem2 = { key: 'key2', value: 'value2' }; + + beforeEach(() => { + createComponent({ + props: { initialUrlVariables: [mockItem1, mockItem2] }, + }); + }); + + it('renders masked URL preview', async () => { + const mockUrl = 'https://test.host/value1?secret=value2'; + + findFormUrl().vm.$emit('input', mockUrl); + await nextTick(); + + expect(findFormUrlPreview().attributes('value')).toBe( + 'https://test.host/{key1}?secret={key2}', + ); + }); + + it('renders mask items correctly', () => { + expect(findAllUrlMaskItems()).toHaveLength(2); + + const firstItem = findAllUrlMaskItems().at(0); + expect(firstItem.props('itemKey')).toBe(mockItem1.key); + expect(firstItem.props('itemValue')).toBe(mockItem1.value); + + const secondItem = findAllUrlMaskItems().at(1); + expect(secondItem.props('itemKey')).toBe(mockItem2.key); + expect(secondItem.props('itemValue')).toBe(mockItem2.value); + }); + + describe('on mask item input', () => { + const mockInput = { index: 0, key: 'display', value: 'secret' }; + + it('updates mask item', async () => { + const firstItem = findAllUrlMaskItems().at(0); + firstItem.vm.$emit('input', mockInput); + await nextTick(); + + expect(firstItem.props('itemKey')).toBe(mockInput.key); + expect(firstItem.props('itemValue')).toBe(mockInput.value); + }); + }); + + describe('when add item is clicked', () => { + it('adds mask item', async () => { + findAddItem().vm.$emit('click'); + await nextTick(); + + expect(findAllUrlMaskItems()).toHaveLength(3); + + const lastItem = findAllUrlMaskItems().at(-1); + expect(lastItem.props('itemKey')).toBeNull(); + expect(lastItem.props('itemValue')).toBeNull(); + }); + }); + + describe('when remove item is clicked', () => { + it('removes the correct mask item', async () => { + const firstItem = findAllUrlMaskItems().at(0); + firstItem.vm.$emit('remove'); + await nextTick(); + + expect(findAllUrlMaskItems()).toHaveLength(1); + + const newFirstItem = findAllUrlMaskItems().at(0); + expect(newFirstItem.props('itemKey')).toBe(mockItem2.key); + expect(newFirstItem.props('itemValue')).toBe(mockItem2.value); + }); + }); + }); + }); +}); diff --git a/spec/frontend/webhooks/components/form_url_mask_item_spec.js b/spec/frontend/webhooks/components/form_url_mask_item_spec.js new file mode 100644 index 00000000000..ab028ef2997 --- /dev/null +++ b/spec/frontend/webhooks/components/form_url_mask_item_spec.js @@ -0,0 +1,100 @@ +import { nextTick } from 'vue'; +import { GlButton, GlFormInput } from '@gitlab/ui'; + +import FormUrlMaskItem from '~/webhooks/components/form_url_mask_item.vue'; + +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; + +describe('FormUrlMaskItem', () => { + let wrapper; + + const defaultProps = { + index: 0, + }; + const mockKey = 'key'; + const mockValue = 'value'; + const mockInput = 'input'; + + const createComponent = ({ props } = {}) => { + wrapper = shallowMountExtended(FormUrlMaskItem, { + propsData: { ...defaultProps, ...props }, + }); + }; + + 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(); + + const keyInput = findMaskItemKey(); + expect(keyInput.attributes('label')).toBe(FormUrlMaskItem.i18n.keyLabel); + expect(keyInput.findComponent(GlFormInput).attributes('name')).toBe( + 'hook[url_variables][][key]', + ); + + const valueInput = findMaskItemValue(); + expect(valueInput.attributes('label')).toBe(FormUrlMaskItem.i18n.valueLabel); + expect(valueInput.findComponent(GlFormInput).attributes('name')).toBe( + 'hook[url_variables][][value]', + ); + }); + + describe('on key input', () => { + beforeEach(async () => { + createComponent({ props: { itemKey: mockKey, itemValue: mockValue } }); + + findMaskItemKey().findComponent(GlFormInput).vm.$emit('input', mockInput); + await nextTick(); + }); + + it('emits input event', () => { + expect(wrapper.emitted('input')).toEqual([ + [{ index: defaultProps.index, key: mockInput, value: mockValue }], + ]); + }); + }); + + describe('on value input', () => { + beforeEach(async () => { + createComponent({ props: { itemKey: mockKey, itemValue: mockValue } }); + + findMaskItemValue().findComponent(GlFormInput).vm.$emit('input', mockInput); + await nextTick(); + }); + + it('emits input event', () => { + expect(wrapper.emitted('input')).toEqual([ + [{ index: defaultProps.index, key: mockKey, value: mockInput }], + ]); + }); + }); + + it('renders remove button', () => { + createComponent(); + + expect(findRemoveButton().props('icon')).toBe('remove'); + }); + + describe('when remove button is clicked', () => { + const mockIndex = 5; + + beforeEach(async () => { + createComponent({ props: { index: mockIndex } }); + + findRemoveButton().vm.$emit('click'); + await nextTick(); + }); + + it('emits remove event', () => { + expect(wrapper.emitted('remove')).toEqual([[mockIndex]]); + }); + }); + }); +}); |