Merge pull request #1407 from code-corps/handle-null-body

Handle null body for Comment and Task

app/components/comment-item.js

@@ -50,24 +50,44 @@ export default Component.extend({
   currentUser: service(),
 
   /**
-   * processedBody - Computed property
+   * parsedBody - Computed property
    *
    * Parses the provided body and "linkifies" the username mentions within it
    * using information provided in the mentions collection
    *
    * We are expected to assign mentions in the template
    *
+   * The component can load before the comment body has loaded.
+   * Computing isLoaded allows us to parse the body once the data is available.
+   *
    * NOTE: This feature is currently disabled, so the unmodified body is returned
    *
    * @property processedComment
    @ @type String
    */
-  processedBody: computed('comment.body', 'mentions', function() {
+  parsedBody: computed('comment.body', 'comment.isLoaded', 'mentions', function() {
     let body = get(this, 'comment.body');
     let mentions = get(this, 'mentions');
     return parse(body, mentions || []);
   }),
 
+  /**
+   * nullbody - Computed property
+   *
+   * checks to see if outcome of processed content is null, indicating null
+   * comment body and returns computed property as true if body is null.
+   *
+   * It tests specifically against null because parsedBody generates other
+   * falsey outputs even when comment body is not null. For example, if the
+   * comment data is not loaded yet, parsedBody returns undefined.
+   */
+  nullBody: computed('parsedBody', function() {
+    if (get(this, 'parsedBody') === null) {
+      return true;
+    }
+    return false;
+  }),
+
   /**
    * didReceiveAttrs - Component lifecycle hook
    *

app/components/task-details.js

@@ -128,7 +128,9 @@ export default Component.extend({
    */
   _fetchMentions(task) {
     get(this, 'mentionFetcher').fetchBodyWithMentions(task, 'task').then((body) => {
-      set(this, 'taskBodyWithMentions', body);
+      if (body) {
+        set(this, 'taskBodyWithMentions', body);
+      }
     });
   },
 
@@ -141,7 +143,8 @@ export default Component.extend({
    */
   _prefetchMentions(task) {
     let body = get(this, 'mentionFetcher').prefetchBodyWithMentions(task, 'task');
-
-    set(this, 'taskBodyWithMentions', body);
+    if (body) {
+      set(this, 'taskBodyWithMentions', body);
+    }
   }
 });

app/styles/_markdown.scss

@@ -155,3 +155,7 @@
     margin-bottom: 0 !important;
   }
 }
+
+.markdown-body--empty {
+    color: $text--light;
+}

app/styles/app.scss

@@ -43,8 +43,6 @@
 @import "base/base";
 @import "base/helpers";
 
-
-
 //
 //
 //
@@ -54,7 +52,6 @@
 @import "code";
 @import "images";
 @import "markdown";
-
 //
 // LAYOUT
 //

app/templates/components/comment-item.hbs

@@ -36,7 +36,11 @@
     {{/if}}
   </div>
   <div class="comment-body markdown-body">
-    {{{processedBody}}}
+    {{#if nullBody}}
+      <em class="markdown-body--empty" data-test-markdown-body-empty>No description provided.</em>
+    {{else}}
+      {{{parsedBody}}}
+    {{/if}}
   </div>
 {{/if}}
 </div>

app/templates/components/task-details.hbs

@@ -24,7 +24,13 @@
           {{code-theme-selector}}
         {{/if}}
       </div>
-      <div class="comment-body markdown-body">{{{taskBodyWithMentions}}}</div>
+      <div class="comment-body markdown-body">
+        {{#if taskBodyWithMentions }}
+          {{{taskBodyWithMentions}}}
+        {{else}}
+          <em class="markdown-body--empty" data-test-markdown-body-empty>No description provided.</em>
+        {{/if}}
+      </div>
     {{/if}}
   </div>
 </div>

tests/integration/components/comment-item-test.js

@@ -90,3 +90,24 @@ test('it switches between editing and viewing mode', function(assert) {
 
   assert.notOk(page.editor.isVisible, 'Component switched back to view mode.');
 });
+
+test('if the comment body is empty render null comment element', function(assert) {
+  assert.expect(1);
+
+  let comment = { isLoaded: false };
+
+  set(this, 'comment', comment);
+
+  renderPage();
+
+  // this will trigger some promise resolving, so we wrap it in a loop
+  run(this, () => {
+    setProperties(comment, {
+      body: null,
+      containsCode: true,
+      isLoaded: true,
+      user: { username: 'tester' }
+    });
+  });
+  assert.ok(page.nullCommentBody.isVisible, 'The message for no comment body is rendered');
+});

tests/integration/components/task-details-test.js

@@ -133,3 +133,29 @@ test('it saves', function(assert) {
   page.save.click();
   assert.equal(page.commentBody.text, 'A new body', 'The body is saved');
 });
+
+test('if the task body is null render the no description element', function(assert) {
+  stubService(this, 'mention-fetcher', {
+    prefetchBodyWithMentions() {
+      return null;
+    }
+  });
+
+  this.set('task', mockTask);
+
+  page.render(hbs`{{task-details task=task}}`);
+  assert.ok(page.nullCommentBody.isVisible, 'The message for no comment body is rendered');
+});
+
+test('if the task body is not null do not render the no description element', function(assert) {
+  stubService(this, 'mention-fetcher', {
+    prefetchBodyWithMentions() {
+      return 'A body';
+    }
+  });
+
+  this.set('task', mockTask);
+
+  page.render(hbs`{{task-details task=task}}`);
+  assert.notOk(page.nullCommentBody.isVisible, 'The message for no comment body is not rendered if there is data');
+});

tests/pages/components/comment-item.js

@@ -17,7 +17,9 @@ export default {
   commentBody: {
     scope: '.comment-body'
   },
-
+  nullCommentBody:{
+    scope: '[data-test-markdown-body-empty]'
+  },
   editLink: {
     scope: '.edit'
   },

tests/pages/components/task-details.js

@@ -22,7 +22,9 @@ export default {
     hasStrongText: isVisible('strong'),
     text: text()
   },
-
+  nullCommentBody:{
+    scope: '[data-test-markdown-body-empty]'
+  },
   edit: {
     scope: '.edit',
     click: clickable(),