Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

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]]);
+      });
+    });
+  });
+});