1 files changed, 51 insertions, 0 deletions
diff --git a/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js b/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js
new file mode 100644
index 00000000000..279ca017b44
--- /dev/null
+++ b/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js
@@ -0,0 +1,51 @@
+import { mount } from '@vue/test-utils';
+import DiscussionNotesRepliesWrapper from '~/notes/components/discussion_notes_replies_wrapper.vue';
+
+const TEST_CHILDREN = '<li>Hello!</li><li>World!</li>';
+
+// We have to wrap our SUT with a TestComponent because multiple roots are possible
+// because it's a functional component.
+const TestComponent = {
+  components: { DiscussionNotesRepliesWrapper },
+  template: `<ul><discussion-notes-replies-wrapper v-bind="$attrs">${TEST_CHILDREN}</discussion-notes-replies-wrapper></ul>`,
+};
+
+describe('DiscussionNotesRepliesWrapper', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(TestComponent, {
+      propsData: props,
+      sync: false,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when normal discussion', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders children directly', () => {
+      expect(wrapper.html()).toEqual(`<ul>${TEST_CHILDREN}</ul>`);
+    });
+  });
+
+  describe('when diff discussion', () => {
+    beforeEach(() => {
+      createComponent({
+        isDiffDiscussion: true,
+      });
+    });
+
+    it('wraps children with notes', () => {
+      const notes = wrapper.find('li.discussion-collapsible ul.notes');
+
+      expect(notes.exists()).toBe(true);
+      expect(notes.html()).toEqual(`<ul class="notes">${TEST_CHILDREN}</ul>`);
+    });
+  });
+});