Add conversation-part-closed component

app/components/conversations/conversation-part-closed.js

@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { computed, get } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default Component.extend({
+  classNames: ['conversation-part', 'conversation-part--closed'],
+  classNameBindings: ['isSelf:conversation-part--is-self'],
+
+  currentUser: service(),
+
+  author: null,
+  closedAt: null,
+
+  user: alias('currentUser.user'),
+
+  isSelf: computed('author', 'user', function() {
+    return get(this, 'author.id') === get(this, 'user.id');
+  })
+});

app/components/conversations/conversation-part.js → app/components/conversations/conversation-part-comment.js

@@ -4,7 +4,7 @@ import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
 export default Component.extend({
-  classNames: ['conversation-part'],
+  classNames: ['conversation-part', 'conversation-part--comment'],
   classNameBindings: ['isSelf:conversation-part--is-self'],
 
   author: null,

app/templates/components/conversations/conversation-part-closed.hbs

@@ -0,0 +1,13 @@
+<div class="coversation-part__message-wrapper">
+  <div class="conversation-part__timestamps-wrapper">
+    <div class="conversation-part__timestamps">
+      <span data-test-closed-at>
+        {{#if isSelf}}
+          You closed this {{moment-from-now closedAt interval=60000}}
+        {{else}}
+          {{author.username}} closed this {{moment-from-now closedAt interval=60000}}
+        {{/if}}
+      </span>
+    </div>
+  </div>
+</div>

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

@@ -1,7 +1,7 @@
 <div class="conversation-thread-inner">
   <div class="conversation-thread__messages">
     {{#if conversation.message.isLoaded}}
-      {{conversations/conversation-part
+      {{conversations/conversation-part-comment
         author=conversation.message.author
         body=conversation.message.body
         readAt=conversation.message.readAt
@@ -10,12 +10,19 @@
     {{/if}}
     {{#each sortedConversationParts as |conversationPart|}}
       {{#if conversationPart.isLoaded}}
-        {{conversations/conversation-part
-          author=conversationPart.author
-          body=conversationPart.body
-          readAt=conversationPart.readAt
-          sentAt=conversationPart.insertedAt
-        }}
+        {{#if (eq conversationPart.partType 'isClosed')}}
+          {{conversation/conversation-part-closed
+            author=conversationPart.author
+            closedAt=conversationPart.insertedAt
+          }}
+        {{else}}
+          {{conversations/conversation-part-comment
+            author=conversationPart.author
+            body=conversationPart.body
+            readAt=conversationPart.readAt
+            sentAt=conversationPart.insertedAt
+          }}
+        {{/if}}
       {{/if}}
     {{/each}}
   </div>

tests/integration/components/conversations/conversation-part-closed-test.js

@@ -0,0 +1,73 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { set } from '@ember/object';
+import PageObject from 'ember-cli-page-object';
+import component from 'code-corps-ember/tests/pages/components/conversations/conversation-part';
+import stubService from 'code-corps-ember/tests/helpers/stub-service';
+import moment from 'moment';
+
+let page = PageObject.create(component);
+
+function renderPage() {
+  page.render(hbs`
+    {{conversations/conversation-part-closed
+      author=author
+      closedAt=closedAt
+    }}
+  `);
+}
+
+moduleForComponent('conversations/conversation-part-closed', 'Integration | Component | conversations/conversation part closed', {
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
+});
+
+test('if current user closes message, "You closed this" is rendered', function(assert) {
+  assert.expect(1);
+
+  let user = {
+    id: 1,
+    username: 'testuser'
+  };
+  set(this, 'author', user);
+  stubService(this, 'current-user', { user });
+
+  let twoMinutesAgo = moment().subtract(2, 'minutes');
+  let twoMinutesAgoFriendly = twoMinutesAgo.from();
+  set(this, 'closedAt', twoMinutesAgo);
+
+  renderPage();
+
+  let expectedText = `You closed this ${twoMinutesAgoFriendly}`;
+  assert.equal(page.closedAt.text, expectedText, 'The closed at timestamp is rendered');
+});
+
+test('if someone other than the current user closes the message, "Author.username closed this at" is rendered', function(assert) {
+  assert.expect(1);
+
+  let user = {
+    id: 1,
+    username: 'currentuser'
+  };
+  stubService(this, 'current-user', { user });
+
+  let author = {
+    id: 2,
+    username: 'authoruser'
+  };
+  set(this, 'author', author);
+
+  let twoMinutesAgo = moment().subtract(2, 'minutes');
+  let twoMinutesAgoFriendly = twoMinutesAgo.from();
+  set(this, 'closedAt', twoMinutesAgo);
+
+  renderPage();
+
+  let expectedText = `${author.username} closed this ${twoMinutesAgoFriendly}`;
+  assert.equal(page.closedAt.text, expectedText, 'The closed at timestamp is rendered');
+});

tests/integration/components/conversations/conversation-part-test.js → tests/integration/components/conversations/conversation-part-comment-test.js

@@ -16,15 +16,15 @@ let page = PageObject.create(component);
 
 function renderPage() {
   page.render(hbs`
-    {{conversations/conversation-part
+    {{conversations/conversation-part-comment
       author=author
       body=body
       sentAt=sentAt
     }}
   `);
 }
 
-moduleForComponent('conversations/conversation-part', 'Integration | Component | conversations/conversation part', {
+moduleForComponent('conversations/conversation-part-comment', 'Integration | Component | conversations/conversation part comment', {
   integration: true,
   beforeEach() {
     page.setContext(this);
@@ -53,7 +53,7 @@ test('it renders all the details', function(assert) {
 
   assert.equal(page.body.text, body, 'The body renders in the chat bubble');
   assert.equal(page.sentAt.text, '2 days ago', 'The sent at timestamp renders');
-  assert.notOk(page.sentByCurrentUser, 'Does not have the current user styles');
+  assert.notOk(page.isByCurrentUser, 'Does not have the current user styles');
   assert.equal(page.photo.url, user.photoThumbUrl, 'The user photo renders');
   assertTooltipNotRendered(assert);
 
@@ -82,7 +82,7 @@ test('when the current user did not send the message', function(assert) {
 
   renderPage();
 
-  assert.notOk(page.sentByCurrentUser, 'Does not have the current user styles');
+  assert.notOk(page.isByCurrentUser, 'Does not have the current user styles');
 });
 
 test('when the current user sent the message', function(assert) {
@@ -93,5 +93,5 @@ test('when the current user sent the message', function(assert) {
 
   renderPage();
 
-  assert.ok(page.sentByCurrentUser, 'Has the current user styles');
+  assert.ok(page.isByCurrentUser, 'Has the current user styles');
 });

tests/pages/components/conversations/conversation-part.js

@@ -11,6 +11,14 @@ export default {
     scope: '[data-test-body]'
   },
 
+  closedAt: {
+    scope: '[data-test-closed-at]'
+  },
+
+  isComment: hasClass('conversation-part--comment'),
+  isClosed: hasClass('conversation-part--closed'),
+  isByCurrentUser: hasClass('conversation-part--is-self'),
+
   photo: {
     scope: '[data-test-target-photo]',
     url: attribute('src')
@@ -23,7 +31,5 @@ export default {
 
   sentAt: {
     scope: '[data-test-sent-at]'
-  },
-
-  sentByCurrentUser: hasClass('conversation-part--is-self')
+  }
 };