1 files changed, 199 insertions, 0 deletions
diff --git a/spec/frontend/projects/settings_service_desk/components/custom_email_form_spec.js b/spec/frontend/projects/settings_service_desk/components/custom_email_form_spec.js
new file mode 100644
index 00000000000..ded8b181c4e
--- /dev/null
+++ b/spec/frontend/projects/settings_service_desk/components/custom_email_form_spec.js
@@ -0,0 +1,199 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CustomEmailForm from '~/projects/settings_service_desk/components/custom_email_form.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { I18N_FORM_FORWARDING_CLIPBOARD_BUTTON_TITLE } from '~/projects/settings_service_desk/custom_email_constants';
+
+describe('CustomEmailForm', () => {
+  let wrapper;
+
+  const defaultProps = {
+    incomingEmail: 'incoming@example.com',
+    isSubmitting: false,
+  };
+
+  const findForm = () => wrapper.find('form');
+  const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
+  const findInputByTestId = (testId) => wrapper.findByTestId(testId).find('input');
+  const findCustomEmailInput = () => findInputByTestId('form-custom-email');
+  const findSmtpAddressInput = () => findInputByTestId('form-smtp-address');
+  const findSmtpPortInput = () => findInputByTestId('form-smtp-port');
+  const findSmtpUsernameInput = () => findInputByTestId('form-smtp-username');
+  const findSmtpPasswordInput = () => findInputByTestId('form-smtp-password');
+  const findSubmit = () => wrapper.findByTestId('form-submit');
+
+  const clickButtonAndExpectNoSubmitEvent = async () => {
+    await nextTick();
+    findForm().trigger('submit');
+
+    expect(findSubmit().find('button').attributes('disabled')).toBeDefined();
+    expect(wrapper.emitted('submit')).toEqual(undefined);
+  };
+
+  const createWrapper = (props = {}) => {
+    wrapper = extendedWrapper(mount(CustomEmailForm, { propsData: { ...defaultProps, ...props } }));
+  };
+
+  it('renders a copy to clipboard button', () => {
+    createWrapper();
+
+    expect(findClipboardButton().exists()).toBe(true);
+    expect(findClipboardButton().props()).toEqual(
+      expect.objectContaining({
+        title: I18N_FORM_FORWARDING_CLIPBOARD_BUTTON_TITLE,
+        text: defaultProps.incomingEmail,
+      }),
+    );
+  });
+
+  it('form inputs are disabled when submitting', () => {
+    createWrapper({ isSubmitting: true });
+
+    expect(findCustomEmailInput().attributes('disabled')).toBeDefined();
+    expect(findSmtpAddressInput().attributes('disabled')).toBeDefined();
+    expect(findSmtpPortInput().attributes('disabled')).toBeDefined();
+    expect(findSmtpUsernameInput().attributes('disabled')).toBeDefined();
+    expect(findSmtpPasswordInput().attributes('disabled')).toBeDefined();
+    expect(findSubmit().props('loading')).toBe(true);
+  });
+
+  describe('form validation and submit event', () => {
+    it('is invalid when form inputs are empty', async () => {
+      createWrapper();
+
+      await nextTick();
+      findForm().trigger('submit');
+
+      expect(wrapper.emitted('submit')).toEqual(undefined);
+    });
+
+    describe('with inputs set', () => {
+      beforeEach(() => {
+        createWrapper();
+
+        findCustomEmailInput().setValue('user@example.com');
+        findCustomEmailInput().trigger('change');
+
+        findSmtpAddressInput().setValue('smtp.example.com');
+        findSmtpAddressInput().trigger('change');
+
+        findSmtpPortInput().setValue('587');
+        findSmtpPortInput().trigger('change');
+
+        findSmtpUsernameInput().setValue('user@example.com');
+        findSmtpUsernameInput().trigger('change');
+
+        findSmtpPasswordInput().setValue('supersecret');
+        findSmtpPasswordInput().trigger('change');
+      });
+
+      it('is invalid when malformed email provided', async () => {
+        findCustomEmailInput().setValue('userexample.com');
+        findCustomEmailInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findCustomEmailInput().classes()).toContain('is-invalid');
+      });
+
+      it('is invalid when email is not set', async () => {
+        findCustomEmailInput().setValue('');
+        findCustomEmailInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findCustomEmailInput().classes()).toContain('is-invalid');
+      });
+
+      it('is invalid when smtp address is not set', async () => {
+        findSmtpAddressInput().setValue('');
+        findSmtpAddressInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findSmtpAddressInput().classes()).toContain('is-invalid');
+      });
+
+      it('is invalid when smtp port is not set', async () => {
+        findSmtpPortInput().setValue('');
+        findSmtpPortInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findSmtpPortInput().classes()).toContain('is-invalid');
+      });
+
+      it('is invalid when smtp port is not an integer', async () => {
+        findSmtpPortInput().setValue('20m2');
+        findSmtpPortInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findSmtpPortInput().classes()).toContain('is-invalid');
+      });
+
+      it('is invalid when smtp port is 0', async () => {
+        findSmtpPortInput().setValue('0');
+        findSmtpPortInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findSmtpPortInput().classes()).toContain('is-invalid');
+      });
+
+      it('is invalid when smtp username is not set', async () => {
+        findSmtpUsernameInput().setValue('');
+        findSmtpUsernameInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findSmtpUsernameInput().classes()).toContain('is-invalid');
+      });
+
+      it('is invalid when password is too short', async () => {
+        findSmtpPasswordInput().setValue('2short');
+        findSmtpPasswordInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findSmtpPasswordInput().classes()).toContain('is-invalid');
+      });
+
+      it('is invalid when password is not set', async () => {
+        findSmtpPasswordInput().setValue('');
+        findSmtpPasswordInput().trigger('change');
+
+        await clickButtonAndExpectNoSubmitEvent();
+        expect(findSmtpPasswordInput().classes()).toContain('is-invalid');
+      });
+
+      it('sets smtpUsername automatically when empty based on customEmail', async () => {
+        const email = 'support@example.com';
+
+        findSmtpUsernameInput().setValue('');
+        findSmtpUsernameInput().trigger('change');
+
+        findCustomEmailInput().setValue(email);
+        findCustomEmailInput().trigger('change');
+
+        await nextTick();
+
+        expect(findSmtpUsernameInput().element.value).toBe(email);
+        expect(wrapper.html()).not.toContain('is-invalid');
+      });
+
+      it('is valid and emits submit event with form data', async () => {
+        await nextTick();
+
+        expect(wrapper.html()).not.toContain('is-invalid');
+
+        findForm().trigger('submit');
+
+        expect(wrapper.emitted('submit')).toEqual([
+          [
+            {
+              custom_email: 'user@example.com',
+              smtp_address: 'smtp.example.com',
+              smtp_password: 'supersecret',
+              smtp_port: '587',
+              smtp_username: 'user@example.com',
+            },
+          ],
+        ]);
+      });
+    });
+  });
+});