Fix conversation-list-item reopen link CSS (#1646)

* Fix conversation-list-item reopen link CSS
* Fix failing test caused by CSS change

Author: joshsmith

app/styles/components/conversations/conversation-list-item.scss

@@ -17,7 +17,8 @@
   &:hover {
     background: $blue--background;
 
-    .conversation-list-item__close-link {
+    .conversation-list-item__close-link,
+    .conversation-list-item__reopen-link {
       display: block;
     }
   }
@@ -34,7 +35,8 @@
     .conversation-list-item__name,
     .conversation-list-item__username,
     .conversation-list-item__timestamp,
-    .conversation-list-item__close-link {
+    .conversation-list-item__close-link,
+    .conversation-list-item__reopen-link {
       color: white;
     }
   }
@@ -76,7 +78,7 @@
     margin: 0;
   }
 
-  &__close-link {
+  &__close-link, &__reopen-link {
     display: none;
     font-size: $body-font-size-normal;
     padding: 0.5em;

app/templates/components/conversations/conversation-list-item-with-user.hbs

@@ -21,11 +21,11 @@
     {{#if (eq conversation.status 'open')}}
       {{!-- bubbles=false to prevent bubbling to wrapping link-to element --}}
       <span data-test-close-link class="conversation-list-item__close-link" {{action close conversation bubbles=false}}>
-        {{fa-icon "check"}}<span>Close</span>
+        {{fa-icon "check"}} <span>Close</span>
       </span>
     {{else if (eq conversation.status 'closed')}}
       <span data-test-reopen-link class="conversation-list-item__reopen-link" {{action reopen conversation bubbles=false}}>
-        {{fa-icon "inbox"}}<span>Reopen</span>
+        {{fa-icon "inbox"}} <span>Reopen</span>
       </span>
     {{/if}}
   </div>

tests/integration/components/conversations/conversation-list-item-with-user-test.js

@@ -55,7 +55,30 @@ test('it renders the conversation details', function(assert) {
   assert.equal(page.closeButton.text, 'Close', 'Close button text is correct');
 });
 
-test('it does not render close button when conversation is closed', function(assert) {
+test('it renders close button when conversation is open', function(assert) {
+  assert.expect(3);
+
+  let user = {
+    username: 'testuser'
+  };
+
+  let conversation = {
+    status: 'open',
+    user
+  };
+
+  set(this, 'conversation', conversation);
+
+  renderPage();
+
+  // we use isPresent because the buttons only display on hover and are
+  // otherwise set to `display: none;`
+  assert.ok(page.closeButton.isPresent, 'Close button is rendered');
+  assert.notOk(page.reopenButton.isPresent, 'Reopen button is not rendered');
+  assert.equal(page.closeButton.text, 'Close', 'Close button text is correct');
+});
+
+test('it renders reopen button when conversation is closed', function(assert) {
   assert.expect(3);
 
   let user = {
@@ -71,8 +94,10 @@ test('it does not render close button when conversation is closed', function(ass
 
   renderPage();
 
-  assert.notOk(page.closeButton.isVisible, 'Close button is hidden');
-  assert.ok(page.reopenButton.isVisible, 'Reopen button is visible');
+  // we use isPresent because the buttons only display on hover and are
+  // otherwise set to `display: none;`
+  assert.notOk(page.closeButton.isPresent, 'Close button is not rendered');
+  assert.ok(page.reopenButton.isPresent, 'Reopen button is rendered');
   assert.equal(page.reopenButton.text, 'Reopen', 'Reopen button text is correct');
 });