Write conversation part reopened component for messages (#1689)

Add conversation-part-reopened component

Author: Dave Connis

app/components/conversations/conversation-part-reopened.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--reopened'],
+  classNameBindings: ['isSelf:conversation-part-reopened--is-self'],
+
+  currentUser: service(),
+
+  author: null,
+  reopenedAt: null,
+
+  user: alias('currentUser.user'),
+
+  isSelf: computed('author', 'user', function() {
+    return get(this, 'author.id') === get(this, 'user.id');
+  })
+});

app/models/conversation-part.js

@@ -4,6 +4,7 @@ import { belongsTo } from 'ember-data/relationships';
 
 export default Model.extend({
   body: attr(),
+  closedAt: attr(),
   insertedAt: attr(),
   readAt: attr(),
   updatedAt: attr(),

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

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

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

@@ -10,11 +10,18 @@
     {{/if}}
     {{#each sortedConversationParts as |conversationPart|}}
       {{#if conversationPart.isLoaded}}
-        {{#if (eq conversationPart.partType 'isClosed')}}
+        {{#if (eq conversationPart.partType 'closed')}}
           {{conversation/conversation-part-closed
             author=conversationPart.author
             closedAt=conversationPart.insertedAt
           }}
+        {{else if (eq conversationPart.partType 'reopened')}}
+          {{conversations/conversation-part-comment
+            author=conversationPart.author
+            body=conversationPart.body
+            readAt=conversationPart.readAt
+            sentAt=conversationPart.insertedAt
+          }}
         {{else}}
           {{conversations/conversation-part-comment
             author=conversationPart.author

tests/integration/components/conversations/conversation-part-reopened-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-reopened
+      author=author
+      reopenedAt=reopenedAt
+    }}
+  `);
+}
+
+moduleForComponent('conversations/conversation-part-reopened', 'Integration | Component | conversations/conversation part reopened', {
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
+});
+
+test('if current user reopens message, "You reopened 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, 'reopenedAt', twoMinutesAgo);
+
+  renderPage();
+
+  let expectedText = `You reopened this ${twoMinutesAgoFriendly}`;
+  assert.equal(page.reopenedAt.text, expectedText, 'The reopened at timestamp is rendered');
+});
+
+test('if someone other than the current user reopens the message, "Author.username reopened 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, 'reopenedAt', twoMinutesAgo);
+
+  renderPage();
+
+  let expectedText = `${author.username} reopened this ${twoMinutesAgoFriendly}`;
+  assert.equal(page.reopenedAt.text, expectedText, 'The reopened at timestamp is rendered');
+});

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

@@ -15,9 +15,10 @@ export default {
     scope: '[data-test-closed-at]'
   },
 
+  isByCurrentUser: hasClass('conversation-part--is-self'),
   isComment: hasClass('conversation-part--comment'),
   isClosed: hasClass('conversation-part--closed'),
-  isByCurrentUser: hasClass('conversation-part--is-self'),
+  isReopened: hasClass('conversation-part--reopened'),
 
   photo: {
     scope: '[data-test-target-photo]',
@@ -29,6 +30,10 @@ export default {
     mouseenter: triggerable('mouseenter')
   },
 
+  reopenedAt: {
+    scope: '[data-test-reopened-at]'
+  },
+
   sentAt: {
     scope: '[data-test-sent-at]'
   }