1 files changed, 164 insertions, 0 deletions
diff --git a/spec/frontend/issuable/components/issuable_by_email_spec.js b/spec/frontend/issuable/components/issuable_by_email_spec.js
new file mode 100644
index 00000000000..08a99f29479
--- /dev/null
+++ b/spec/frontend/issuable/components/issuable_by_email_spec.js
@@ -0,0 +1,164 @@
+import { GlModal, GlSprintf, GlFormInputGroup, GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
+import httpStatus from '~/lib/utils/http_status';
+
+const initialEmail = 'user@gitlab.com';
+
+const mockToastShow = jest.fn();
+
+describe('IssuableByEmail', () => {
+  let wrapper;
+  let mockAxios;
+  let glModalDirective;
+
+  function createComponent(injectedProperties = {}) {
+    glModalDirective = jest.fn();
+
+    return extendedWrapper(
+      shallowMount(IssuableByEmail, {
+        stubs: {
+          GlModal,
+          GlSprintf,
+          GlFormInputGroup,
+          GlButton,
+        },
+        directives: {
+          glModal: {
+            bind(_, { value }) {
+              glModalDirective(value);
+            },
+          },
+        },
+        mocks: {
+          $toast: {
+            show: mockToastShow,
+          },
+        },
+        provide: {
+          issuableType: 'issue',
+          initialEmail,
+          ...injectedProperties,
+        },
+      }),
+    );
+  }
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    mockAxios.restore();
+  });
+
+  const findFormInputGroup = () => wrapper.find(GlFormInputGroup);
+
+  const clickResetEmail = async () => {
+    wrapper.findByTestId('incoming-email-token-reset').vm.$emit('click');
+
+    await waitForPromises();
+  };
+
+  describe('modal button', () => {
+    it.each`
+      issuableType       | buttonText
+      ${'issue'}         | ${'Email a new issue to this project'}
+      ${'merge_request'} | ${'Email a new merge request to this project'}
+    `(
+      'renders a link with "$buttonText" when type is "$issuableType"',
+      ({ issuableType, buttonText }) => {
+        wrapper = createComponent({ issuableType });
+        expect(wrapper.findByTestId('issuable-email-modal-btn').text()).toBe(buttonText);
+      },
+    );
+
+    it('opens the modal when the user clicks the button', () => {
+      wrapper = createComponent();
+
+      wrapper.findByTestId('issuable-email-modal-btn').vm.$emit('click');
+
+      expect(glModalDirective).toHaveBeenCalled();
+    });
+  });
+
+  describe('modal', () => {
+    it('renders a read-only email input field', () => {
+      wrapper = createComponent();
+
+      expect(findFormInputGroup().props('value')).toBe('user@gitlab.com');
+    });
+
+    it.each`
+      issuableType       | subject                            | body
+      ${'issue'}         | ${'Enter the issue title'}         | ${'Enter the issue description'}
+      ${'merge_request'} | ${'Enter the merge request title'} | ${'Enter the merge request description'}
+    `('renders a mailto button when type is "$issuableType"', ({ issuableType, subject, body }) => {
+      wrapper = createComponent({
+        issuableType,
+        initialEmail,
+      });
+
+      expect(wrapper.findByTestId('mail-to-btn').attributes('href')).toBe(
+        `mailto:${initialEmail}?subject=${subject}&body=${body}`,
+      );
+    });
+
+    describe('reset email', () => {
+      const resetPath = 'gitlab-test/new_issuable_address?issuable_type=issue';
+
+      beforeEach(() => {
+        jest.spyOn(axios, 'put');
+      });
+      it('should send request to reset email token', async () => {
+        wrapper = createComponent({
+          issuableType: 'issue',
+          initialEmail,
+          resetPath,
+        });
+
+        await clickResetEmail();
+
+        expect(axios.put).toHaveBeenCalledWith(resetPath);
+      });
+
+      it('should update the email when the request succeeds', async () => {
+        mockAxios.onPut(resetPath).reply(httpStatus.OK, { new_address: 'foo@bar.com' });
+
+        wrapper = createComponent({
+          issuableType: 'issue',
+          initialEmail,
+          resetPath,
+        });
+
+        await clickResetEmail();
+
+        expect(findFormInputGroup().props('value')).toBe('foo@bar.com');
+      });
+
+      it('should show a toast message when the request fails', async () => {
+        mockAxios.onPut(resetPath).reply(httpStatus.NOT_FOUND, {});
+
+        wrapper = createComponent({
+          issuableType: 'issue',
+          initialEmail,
+          resetPath,
+        });
+
+        await clickResetEmail();
+
+        expect(mockToastShow).toHaveBeenCalledWith(
+          'There was an error when reseting email token.',
+          { type: 'error' },
+        );
+        expect(findFormInputGroup().props('value')).toBe('user@gitlab.com');
+      });
+    });
+  });
+});