1 files changed, 70 insertions, 0 deletions
diff --git a/spec/frontend/notes/components/email_participants_warning_spec.js b/spec/frontend/notes/components/email_participants_warning_spec.js
new file mode 100644
index 00000000000..ab1a6b152a4
--- /dev/null
+++ b/spec/frontend/notes/components/email_participants_warning_spec.js
@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+import EmailParticipantsWarning from '~/notes/components/email_participants_warning.vue';
+
+describe('Email Participants Warning Component', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findMoreButton = () => wrapper.find('button');
+
+  const createWrapper = (emails) => {
+    wrapper = mount(EmailParticipantsWarning, {
+      propsData: { emails },
+    });
+  };
+
+  describe('with 3 or less emails', () => {
+    beforeEach(() => {
+      createWrapper(['a@gitlab.com', 'b@gitlab.com', 'c@gitlab.com']);
+    });
+
+    it('more button does not exist', () => {
+      expect(findMoreButton().exists()).toBe(false);
+    });
+
+    it('all emails are displayed', () => {
+      expect(wrapper.text()).toBe(
+        'a@gitlab.com, b@gitlab.com, and c@gitlab.com will be notified of your comment.',
+      );
+    });
+  });
+
+  describe('with more than 3 emails', () => {
+    beforeEach(() => {
+      createWrapper(['a@gitlab.com', 'b@gitlab.com', 'c@gitlab.com', 'd@gitlab.com']);
+    });
+
+    it('only displays first 3 emails', () => {
+      expect(wrapper.text()).toContain('a@gitlab.com, b@gitlab.com, c@gitlab.com');
+      expect(wrapper.text()).not.toContain('d@gitlab.com');
+    });
+
+    it('more button does exist', () => {
+      expect(findMoreButton().exists()).toBe(true);
+    });
+
+    it('more button displays the correct wordage', () => {
+      expect(findMoreButton().text()).toBe('and 1 more');
+    });
+
+    describe('when more button clicked', () => {
+      beforeEach(() => {
+        findMoreButton().trigger('click');
+      });
+
+      it('more button no longer exists', () => {
+        expect(findMoreButton().exists()).toBe(false);
+      });
+
+      it('all emails are displayed', () => {
+        expect(wrapper.text()).toBe(
+          'a@gitlab.com, b@gitlab.com, c@gitlab.com, and d@gitlab.com will be notified of your comment.',
+        );
+      });
+    });
+  });
+});