Discussions redesign

3 files changed, 103 insertions, 5 deletions

diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index b447e79b0df..81cb3e1f74d 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -3,6 +3,7 @@ import createStore from '~/notes/stores';
 import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
 import '~/behaviors/markdown/render_gfm';
 import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
+import mockDiffFile from '../../diffs/mock_data/diff_file';
 
 const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
 
@@ -33,9 +34,20 @@ describe('noteable_discussion component', () => {
     expect(vm.$el.querySelector('.user-avatar-link')).not.toBeNull();
   });
 
+  it('should not render discussion header for non diff discussions', () => {
+    expect(vm.$el.querySelector('.discussion-header')).toBeNull();
+  });
+
   it('should render discussion header', () => {
-    expect(vm.$el.querySelector('.discussion-header')).not.toBeNull();
-    expect(vm.$el.querySelector('.notes').children.length).toEqual(discussionMock.notes.length);
+    const discussion = { ...discussionMock };
+    discussion.diff_file = mockDiffFile;
+    discussion.diff_discussion = true;
+    const diffDiscussionVm = new Component({
+      store,
+      propsData: { discussion },
+    }).$mount();
+
+    expect(diffDiscussionVm.$el.querySelector('.discussion-header')).not.toBeNull();
   });
 
   describe('actions', () => {
diff --git a/spec/javascripts/notes/components/toggle_replies_widget_spec.js b/spec/javascripts/notes/components/toggle_replies_widget_spec.js
new file mode 100644
index 00000000000..2ead8cc6e6a
--- /dev/null
+++ b/spec/javascripts/notes/components/toggle_replies_widget_spec.js
@@ -0,0 +1,78 @@
+import Vue from 'vue';
+import toggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { note } from '../mock_data';
+
+const deepCloneObject = obj => JSON.parse(JSON.stringify(obj));
+
+describe('toggle replies widget for notes', () => {
+  let vm;
+  let ToggleRepliesWidget;
+  const noteFromOtherUser = deepCloneObject(note);
+  noteFromOtherUser.author.username = 'fatihacet';
+
+  const noteFromAnotherUser = deepCloneObject(note);
+  noteFromAnotherUser.author.username = 'mgreiling';
+  noteFromAnotherUser.author.name = 'Mike Greiling';
+
+  const replies = [note, note, note, noteFromOtherUser, noteFromAnotherUser];
+
+  beforeEach(() => {
+    ToggleRepliesWidget = Vue.extend(toggleRepliesWidget);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('collapsed state', () => {
+    beforeEach(() => {
+      vm = mountComponent(ToggleRepliesWidget, {
+        replies,
+        collapsed: true,
+      });
+    });
+
+    it('should render the collapsed', () => {
+      const vmTextContent = vm.$el.textContent.replace(/\s\s+/g, ' ');
+
+      expect(vm.$el.classList.contains('collapsed')).toEqual(true);
+      expect(vm.$el.querySelectorAll('.user-avatar-link').length).toEqual(3);
+      expect(vm.$el.querySelector('time')).not.toBeNull();
+      expect(vmTextContent).toContain('5 replies');
+      expect(vmTextContent).toContain(`Last reply by ${noteFromAnotherUser.author.name}`);
+    });
+
+    it('should emit toggle event when the replies text clicked', () => {
+      const spy = spyOn(vm, '$emit');
+
+      vm.$el.querySelector('.js-replies-text').click();
+
+      expect(spy).toHaveBeenCalledWith('toggle');
+    });
+  });
+
+  describe('expanded state', () => {
+    beforeEach(() => {
+      vm = mountComponent(ToggleRepliesWidget, {
+        replies,
+        collapsed: false,
+      });
+    });
+
+    it('should render expanded state', () => {
+      const vmTextContent = vm.$el.textContent.replace(/\s\s+/g, ' ');
+
+      expect(vm.$el.querySelector('.collapse-replies-btn')).not.toBeNull();
+      expect(vmTextContent).toContain('Collapse replies');
+    });
+
+    it('should emit toggle event when the collapse replies text called', () => {
+      const spy = spyOn(vm, '$emit');
+
+      vm.$el.querySelector('.js-collapse-replies').click();
+
+      expect(spy).toHaveBeenCalledWith('toggle');
+    });
+  });
+});
diff --git a/spec/support/features/discussion_comments_shared_example.rb b/spec/support/features/discussion_comments_shared_example.rb
index 80604395adf..18cf08f0b9e 100644
--- a/spec/support/features/discussion_comments_shared_example.rb
+++ b/spec/support/features/discussion_comments_shared_example.rb
@@ -150,17 +150,25 @@ shared_examples 'discussion comments' do |resource_name|
         end
 
         if resource_name == 'merge request'
-          let(:note_id) { find("#{comments_selector} .note", match: :first)['data-note-id'] }
+          let(:note_id) { find("#{comments_selector} .note:first-child", match: :first)['data-note-id'] }
+          let(:reply_id) { find("#{comments_selector} .note:last-child", match: :first)['data-note-id'] }
 
           it 'shows resolved discussion when toggled' do
+            find("#{comments_selector} .js-vue-discussion-reply").click
+            find("#{comments_selector} .note-textarea").send_keys('a')
+
+            click_button "Comment"
+            wait_for_requests
+
             click_button "Resolve discussion"
+            wait_for_requests
 
             expect(page).to have_selector(".note-row-#{note_id}", visible: true)
 
             refresh
-            click_button "Toggle discussion"
+            click_button "1 reply"
 
-            expect(page).to have_selector(".note-row-#{note_id}", visible: true)
+            expect(page).to have_selector(".note-row-#{reply_id}", visible: true)
           end
         end
       end