1 files changed, 137 insertions, 0 deletions
diff --git a/spec/frontend/notes/components/comment_field_layout_spec.js b/spec/frontend/notes/components/comment_field_layout_spec.js
new file mode 100644
index 00000000000..4d9b4ea8c6f
--- /dev/null
+++ b/spec/frontend/notes/components/comment_field_layout_spec.js
@@ -0,0 +1,137 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CommentFieldLayout from '~/notes/components/comment_field_layout.vue';
+import EmailParticipantsWarning from '~/notes/components/email_participants_warning.vue';
+import NoteableWarning from '~/vue_shared/components/notes/noteable_warning.vue';
+
+describe('Comment Field Layout Component', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const LOCKED_DISCUSSION_DOCS_PATH = 'docs/locked/path';
+  const CONFIDENTIAL_ISSUES_DOCS_PATH = 'docs/confidential/path';
+
+  const noteableDataMock = {
+    confidential: false,
+    discussion_locked: false,
+    locked_discussion_docs_path: LOCKED_DISCUSSION_DOCS_PATH,
+    confidential_issues_docs_path: CONFIDENTIAL_ISSUES_DOCS_PATH,
+  };
+
+  const findIssuableNoteWarning = () => wrapper.find(NoteableWarning);
+  const findEmailParticipantsWarning = () => wrapper.find(EmailParticipantsWarning);
+  const findErrorAlert = () => wrapper.findByTestId('comment-field-alert-container');
+
+  const createWrapper = (props = {}, slots = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(CommentFieldLayout, {
+        propsData: {
+          noteableData: noteableDataMock,
+          ...props,
+        },
+        slots,
+      }),
+    );
+  };
+
+  describe('.error-alert', () => {
+    it('does not exist by default', () => {
+      createWrapper();
+
+      expect(findErrorAlert().exists()).toBe(false);
+    });
+
+    it('exists when withAlertContainer is true', () => {
+      createWrapper({ withAlertContainer: true });
+
+      expect(findErrorAlert().isVisible()).toBe(true);
+    });
+  });
+
+  describe('issue is not confidential and not locked', () => {
+    it('does not show IssuableNoteWarning', () => {
+      createWrapper();
+
+      expect(findIssuableNoteWarning().exists()).toBe(false);
+    });
+  });
+
+  describe('issue is confidential', () => {
+    beforeEach(() => {
+      createWrapper({
+        noteableData: { ...noteableDataMock, confidential: true },
+      });
+    });
+
+    it('shows IssuableNoteWarning', () => {
+      expect(findIssuableNoteWarning().isVisible()).toBe(true);
+    });
+
+    it('sets IssuableNoteWarning props', () => {
+      expect(findIssuableNoteWarning().props()).toMatchObject({
+        isLocked: false,
+        isConfidential: true,
+        lockedNoteableDocsPath: LOCKED_DISCUSSION_DOCS_PATH,
+        confidentialNoteableDocsPath: CONFIDENTIAL_ISSUES_DOCS_PATH,
+      });
+    });
+  });
+
+  describe('issue is locked', () => {
+    beforeEach(() => {
+      createWrapper({
+        noteableData: { ...noteableDataMock, discussion_locked: true },
+      });
+    });
+
+    it('shows IssuableNoteWarning', () => {
+      expect(findIssuableNoteWarning().isVisible()).toBe(true);
+    });
+
+    it('sets IssuableNoteWarning props', () => {
+      expect(findIssuableNoteWarning().props()).toMatchObject({
+        isConfidential: false,
+        isLocked: true,
+        lockedNoteableDocsPath: LOCKED_DISCUSSION_DOCS_PATH,
+        confidentialNoteableDocsPath: CONFIDENTIAL_ISSUES_DOCS_PATH,
+      });
+    });
+  });
+
+  describe('issue has no email participants', () => {
+    it('does not show EmailParticipantsWarning', () => {
+      createWrapper();
+
+      expect(findEmailParticipantsWarning().exists()).toBe(false);
+    });
+  });
+
+  describe('issue has email participants', () => {
+    beforeEach(() => {
+      createWrapper({
+        noteableData: {
+          ...noteableDataMock,
+          issue_email_participants: [
+            { email: 'someone@gitlab.com' },
+            { email: 'another@gitlab.com' },
+          ],
+        },
+      });
+    });
+
+    it('shows EmailParticipantsWarning', () => {
+      expect(findEmailParticipantsWarning().isVisible()).toBe(true);
+    });
+
+    it('sets EmailParticipantsWarning props', () => {
+      expect(findEmailParticipantsWarning().props('emails')).toEqual([
+        'someone@gitlab.com',
+        'another@gitlab.com',
+      ]);
+    });
+  });
+});