Ensure conversation-thread scrolls to bottom after socket update close #1637 (#1690)

Author: snewcomer

app/models/conversation.js

@@ -1,5 +1,6 @@
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
+import { sort } from '@ember/object/computed';
 import { belongsTo, hasMany } from 'ember-data/relationships';
 
 export default Model.extend({
@@ -11,5 +12,8 @@ export default Model.extend({
   conversationParts: hasMany('conversation-part', { async: true }),
   message: belongsTo('message', { async: true }),
   project: belongsTo('project', { async: true }),
-  user: belongsTo('user', { async: true })
+  user: belongsTo('user', { async: true }),
+
+  partsAsc: ['insertedAt:asc'],
+  sortedConversationParts: sort('conversationParts', 'partsAsc')
 });

app/templates/components/conversations/conversation-thread.hbs

@@ -8,7 +8,7 @@
         sentAt=conversation.message.insertedAt
       }}
     {{/if}}
-    {{#each (sort-by "insertedAt:asc" conversation.conversationParts) as |conversationPart|}}
+    {{#each sortedConversationParts as |conversationPart|}}
       {{#if conversationPart.isLoaded}}
         {{conversations/conversation-part
           author=conversationPart.author

app/templates/conversations/conversation.hbs

@@ -1,5 +1,6 @@
 {{conversations/conversation-thread
   conversation=conversation
+  sortedConversationParts=conversation.sortedConversationParts
   send=(action send)
 }}
 {{conversations/project-details

app/templates/project/conversations/conversation.hbs

@@ -1,5 +1,6 @@
 {{conversations/conversation-thread
   conversation=conversation
+  sortedConversationParts=conversation.sortedConversationParts
   send=(action send)
 }}
 {{conversations/user-details

tests/acceptance/project-conversations-test.js

@@ -9,7 +9,7 @@ const hour = 3600 * 1000;
 function createConversations(count, project, user) {
   return [...Array(count)].map(() => {
     let message = server.create('message', { project });
-    return server.create('conversation', { message, user });
+    return server.create('conversation', { message, user }, 'withConversationParts');
   });
 }
 
@@ -88,8 +88,9 @@ test('Project admin can view list of conversations', async function(assert) {
 });
 
 test('Project admin can view single conversations', async function(assert) {
-  assert.expect(1);
+  assert.expect(5);
 
+  let store = this.application.__container__.lookup('service:store');
   let { project, user } = server.create('project-user', { role: 'admin' });
   authenticateSession(this.application, { user_id: user.id });
 
@@ -100,9 +101,19 @@ test('Project admin can view single conversations', async function(assert) {
     project: project.slug
   });
 
-  page.conversations(1).click();
+  await page.conversations(1).click();
 
-  assert.equal(currentRouteName(), 'project.conversations.conversation');
+  andThen(() => {
+    assert.equal(currentRouteName(), 'project.conversations.conversation');
+
+    let conversation = store.peekRecord('conversation', server.db.conversations[1].id);
+    let firstPart = conversation.get('sortedConversationParts').get('firstObject');
+    let lastPart = conversation.get('sortedConversationParts').get('lastObject');
+    assert.equal(page.conversationThread.conversationParts().count, 11, 'Message head and conversation parts rendered');
+    assert.equal(page.conversationThread.conversationParts(1).body.text, firstPart.get('body'), 'first conversation part is rendered correctly');
+    assert.equal(page.conversationThread.conversationParts(10).body.text, lastPart.get('body'), 'last conversation part is rendered correctly');
+    assert.ok(firstPart.get('insertedAt') < lastPart.get('insertedAt'), 'conversations are sorted correctly');
+  });
 });
 
 test('System is notified of new conversation part', async function(assert) {
@@ -120,17 +131,17 @@ test('System is notified of new conversation part', async function(assert) {
 
   page.conversations(0).click();
 
-  assert.equal(page.conversationThread.conversationParts().count, 1, 'Just the message head is rendered.');
+  assert.equal(page.conversationThread.conversationParts().count, 11, 'Just the message head and conversation parts is rendered.');
   server.create('conversation-part', { conversation });
 
-  assert.equal(page.conversationThread.conversationParts().count, 1, 'No notification yet, so new part was not rendered.');
+  assert.equal(page.conversationThread.conversationParts().count, 11, 'No notification yet, so new part was not rendered.');
   let conversationChannelService = this.application.__container__.lookup('service:conversation-channel');
   let socket = get(conversationChannelService, 'socket.socket');
   let [channel] = socket.channels;
   channel.trigger('new:conversation-part', {});
 
   andThen(() => {
-    assert.equal(page.conversationThread.conversationParts().count, 2, 'Notification was sent. New part is rendered.');
+    assert.equal(page.conversationThread.conversationParts().count, 12, 'Notification was sent. New part is rendered.');
   });
 });
 

tests/acceptance/user-conversations-test.js

@@ -59,12 +59,13 @@ test('User can view list of their own conversations', function(assert) {
 });
 
 test('User can view single conversations', function(assert) {
-  assert.expect(1);
+  assert.expect(5);
 
+  let store = this.application.__container__.lookup('service:store');
   let user = server.create('user');
   authenticateSession(this.application, { user_id: user.id });
 
-  server.create('conversation', { user });
+  server.create('conversation', { user }, 'withConversationParts');
 
   page.visit();
 
@@ -74,6 +75,14 @@ test('User can view single conversations', function(assert) {
 
   andThen(() => {
     assert.equal(currentRouteName(), 'conversations.conversation');
+
+    let conversation = store.peekRecord('conversation', server.db.conversations[0].id);
+    let firstPart = conversation.get('sortedConversationParts').get('firstObject');
+    let lastPart = conversation.get('sortedConversationParts').get('lastObject');
+    assert.equal(page.conversationThread.conversationParts().count, 11, 'Message head and conversation parts rendered');
+    assert.equal(page.conversationThread.conversationParts(1).body.text, firstPart.get('body'), 'first conversation part is rendered correctly');
+    assert.equal(page.conversationThread.conversationParts(10).body.text, lastPart.get('body'), 'last conversation part is rendered correctly');
+    assert.ok(firstPart.get('insertedAt') < lastPart.get('insertedAt'), 'conversations are sorted correctly');
   });
 });
 

tests/integration/components/conversations/conversation-thread-test.js

@@ -10,6 +10,7 @@ let page = PageObject.create(component);
 function renderPage() {
   page.render(hbs`
     {{conversations/conversation-thread
+      sortedConversationParts=conversation.sortedConversationParts
       conversation=conversation
       send=send
     }}
@@ -60,32 +61,32 @@ test('it delays rendering head until loaded', function(assert) {
   assert.equal(page.conversationParts().count, 0, 'No part is rendered.');
 });
 
-test('it renders each conversation part, sorted by insertedAt', function(assert) {
+test('it renders each conversation part', function(assert) {
   assert.expect(4);
 
-  let conversationParts = [
+  let sortedConversationParts = [
     { isLoaded: true, body: 'foo 1', insertedAt: new Date('2017-11-01') },
     { isLoaded: true, body: 'foo 2', insertedAt: new Date('2017-12-01') },
     { isLoaded: true, body: 'foo 3', insertedAt: new Date('2017-10-01') }
   ];
-  set(this, 'conversation', { conversationParts });
+  set(this, 'conversation', { sortedConversationParts });
   renderPage();
 
   assert.equal(page.conversationParts().count, 3, 'Each part is rendered.');
-  assert.equal(page.conversationParts(1).body.text, 'foo 1', 'Part 1 is rendered second to last.');
-  assert.equal(page.conversationParts(2).body.text, 'foo 2', 'Part 2 is rendered last (newest).');
-  assert.equal(page.conversationParts(0).body.text, 'foo 3', 'Part 3 is rendered first (earliest date).');
+  assert.equal(page.conversationParts(0).body.text, 'foo 1', 'Part 1 is rendered first');
+  assert.equal(page.conversationParts(1).body.text, 'foo 2', 'Part 2 is rendered second');
+  assert.equal(page.conversationParts(2).body.text, 'foo 3', 'Part 3 is rendered last');
 });
 
 test('it delays rendering conversation parts not yet loaded', function(assert) {
   assert.expect(1);
 
-  let conversationParts = [
+  let sortedConversationParts = [
     { isLoaded: true, body: 'foo 1' },
     { isLoaded: false, body: 'foo 2' },
     { isLoaded: false, body: 'foo 3' }
   ];
-  set(this, 'conversation', { conversationParts });
+  set(this, 'conversation', { sortedConversationParts });
   renderPage();
 
   assert.equal(page.conversationParts().count, 1, 'Only loaded parts are rendered.');

tests/unit/models/conversation-test.js

@@ -1,18 +1,31 @@
 import { moduleForModel, test } from 'ember-qunit';
 import { testForAttributes } from 'code-corps-ember/tests/helpers/attributes';
 import { testForBelongsTo } from 'code-corps-ember/tests/helpers/relationship';
+import { run } from '@ember/runloop';
 
 moduleForModel('conversation', 'Unit | Model | conversation', {
-  // Specify the other units that are required for this test.
   needs: [
+    'model:conversation',
+    'model:conversation-part',
     'model:message',
     'model:user'
   ]
 });
 
-test('it exists', function(assert) {
-  let model = this.subject();
-  assert.ok(!!model);
+test('sortedConversationParts sorts insertedAt by asc', function(assert) {
+  let laterPart, earlierPart;
+  run(() => {
+    laterPart = this.store().createRecord('conversation-part', { body: 'wat', insertedAt: new Date('2017-10-07') });
+    earlierPart = this.store().createRecord('conversation-part', { body: 'foo', insertedAt: new Date('2017-10-06') });
+  });
+  let model = this.subject({ conversationParts: [laterPart, earlierPart] });
+  assert.equal(model.get('sortedConversationParts.length'), 2);
+  assert.equal(model.get('sortedConversationParts').get('firstObject').get('body'),
+    earlierPart.get('body'),
+    'the first conversation part is the earlier one');
+  assert.equal(model.get('sortedConversationParts').get('lastObject').get('body'),
+    laterPart.get('body'),
+    'the secont conversation part is the later one');
 });
 
 testForAttributes('conversation', ['insertedAt', 'readAt', 'status', 'updatedAt']);