From 47453d284bdc8ca66c86882d0e70673665ca5750 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 19 Feb 2018 10:34:36 -0800
Subject: [PATCH] add test for status types

---
 cypress/integration/01-basic-spec.js          |  2 +-
 cypress/integration/02-login-spec.js          |  2 +-
 cypress/integration/03-basic-timeline-spec.js |  3 +-
 cypress/integration/04-pinned-statuses.js     |  3 +-
 cypress/integration/05-status-types.js        | 52 +++++++++++++++++++
 cypress/support/commands.js                   | 16 +++---
 routes/_components/IconButton.html            |  2 +
 routes/_components/status/Status.html         | 11 ++--
 routes/_components/status/StatusToolbar.html  | 33 ++++++++++--
 9 files changed, 104 insertions(+), 20 deletions(-)
 create mode 100644 cypress/integration/05-status-types.js

diff --git a/cypress/integration/01-basic-spec.js b/cypress/integration/01-basic-spec.js
index 7efd9da4..34c47912 100644
--- a/cypress/integration/01-basic-spec.js
+++ b/cypress/integration/01-basic-spec.js
@@ -1,4 +1,4 @@
-describe('Basic spec', () => {
+describe('01-basic-spec.js', () => {
   beforeEach(() => {
     cy.visit('/')
     cy.wait(500)
diff --git a/cypress/integration/02-login-spec.js b/cypress/integration/02-login-spec.js
index b993cf7d..45e76a5a 100644
--- a/cypress/integration/02-login-spec.js
+++ b/cypress/integration/02-login-spec.js
@@ -1,4 +1,4 @@
-describe('Login spec', () => {
+describe('02-login-spec.js', () => {
   beforeEach(() => {
     cy.visit('/')
     cy.wait(500)
diff --git a/cypress/integration/03-basic-timeline-spec.js b/cypress/integration/03-basic-timeline-spec.js
index 1c2fbb84..3e079f2e 100644
--- a/cypress/integration/03-basic-timeline-spec.js
+++ b/cypress/integration/03-basic-timeline-spec.js
@@ -1,9 +1,8 @@
 const times = require('lodash/times')
 
-describe('Basic timeline spec', () => {
+describe('03-basic-timeline-spec.js', () => {
   beforeEach(() => {
     cy.login('foobar@localhost:3000', 'foobarfoobar')
-    cy.visit('/')
     cy.wait(500)
   })
 
diff --git a/cypress/integration/04-pinned-statuses.js b/cypress/integration/04-pinned-statuses.js
index fe75b892..6e5407ba 100644
--- a/cypress/integration/04-pinned-statuses.js
+++ b/cypress/integration/04-pinned-statuses.js
@@ -1,7 +1,6 @@
-describe('Pinned statuses', () => {
+describe('04-pinned-statuses.js', () => {
   beforeEach(() => {
     cy.login('foobar@localhost:3000', 'foobarfoobar')
-    cy.visit('/')
     cy.wait(500)
   })
 
diff --git a/cypress/integration/05-status-types.js b/cypress/integration/05-status-types.js
new file mode 100644
index 00000000..77237327
--- /dev/null
+++ b/cypress/integration/05-status-types.js
@@ -0,0 +1,52 @@
+describe('05-status-types.js', () => {
+  beforeEach(() => {
+    cy.login('foobar@localhost:3000', 'foobarfoobar')
+    cy.wait(500)
+  })
+
+  it("shows direct vs followers-only vs regular", () => {
+    cy.getNthVirtualArticle(1).should('have.attr', 'aria-label', 'Status by admin')
+    cy.getNthVirtualArticle(1).find('.status-content').should('contain', 'notification of unlisted message')
+    cy.getNthVirtualArticle(1).find('.status-toolbar button:nth-child(2)')
+      .should('have.attr', 'aria-label', 'Boost')
+      .and('not.have.attr', 'disabled')
+
+    cy.getNthVirtualArticle(2).should('have.attr', 'aria-label', 'Status by admin')
+    cy.getNthVirtualArticle(2).find('.status-content').should('contain', 'notification of followers-only message')
+    cy.getNthVirtualArticle(2).find('.status-toolbar button:nth-child(2)')
+      .should('have.attr', 'aria-label', 'Cannot be boosted because this is followers-only')
+      .and('have.attr', 'disabled')
+
+    cy.getNthVirtualArticle(3).should('have.attr', 'aria-label', 'Direct message by admin')
+    cy.getNthVirtualArticle(3).find('.status-content').should('contain', 'notification of direct message')
+    cy.getNthVirtualArticle(3).find('.status-toolbar button:nth-child(2)')
+      .should('have.attr', 'aria-label', 'Cannot be boosted because this is a direct message')
+      .and('have.attr', 'disabled')
+  })
+
+  it("shows direct vs followers-only vs regular in notifications", () => {
+    cy.visit('/notifications')
+    cy.wait(500)
+
+    cy.getNthVirtualArticle(2).should('have.attr', 'aria-label', 'Status by admin')
+    cy.getNthVirtualArticle(2).find('.status-content').should('contain', 'notification of unlisted message')
+    cy.getNthVirtualArticle(2).find('.status-toolbar button:nth-child(2)')
+      .should('have.attr', 'aria-label', 'Boost')
+      .and('not.have.attr', 'disabled')
+
+    cy.getNthVirtualArticle(3).should('have.attr', 'aria-label', 'Status by admin')
+    cy.getNthVirtualArticle(3).find('.status-content').should('contain', 'notification of followers-only message')
+    cy.getNthVirtualArticle(3).find('.status-toolbar button:nth-child(2)')
+      .should('have.attr', 'aria-label', 'Cannot be boosted because this is followers-only')
+      .and('have.attr', 'disabled')
+
+    cy.getNthVirtualArticle(4).should('have.attr', 'aria-label', 'Direct message by admin')
+    cy.getNthVirtualArticle(4).find('.status-content').should('contain', 'notification of direct message')
+    cy.getNthVirtualArticle(4).find('.status-toolbar button:nth-child(2)')
+      .should('have.attr', 'aria-label', 'Cannot be boosted because this is a direct message')
+      .and('have.attr', 'disabled')
+
+
+  })
+
+})
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 7a7759a6..ea8c67ee 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -56,22 +56,22 @@ Cypress.Commands.add('getNthVirtualArticle', (n) => {
 Cypress.Commands.add('validateTimeline', (timeline) => {
   timeline.forEach((status, i) => {
     if (status.content) {
-      cy.getNthVirtualArticle(i).get('.status-content p').should('contain', status.content)
+      cy.getNthVirtualArticle(i).find('.status-content p').should('contain', status.content)
     }
     if (status.spoiler) {
-      cy.getNthVirtualArticle(i).get('.status-spoiler p').should('contain', status.spoiler)
+      cy.getNthVirtualArticle(i).find('.status-spoiler p').should('contain', status.spoiler)
     }
     if (status.followedBy) {
-      cy.getNthVirtualArticle(i).get('.status-header span').should('contain', status.followedBy)
-      cy.getNthVirtualArticle(i).get('.status-header span').should('contain', 'followed you')
+      cy.getNthVirtualArticle(i).find('.status-header span').should('contain', status.followedBy)
+      cy.getNthVirtualArticle(i).find('.status-header span').should('contain', 'followed you')
     }
     if (status.rebloggedBy) {
-      cy.getNthVirtualArticle(i).get('.status-header span').should('contain', status.rebloggedBy)
-      cy.getNthVirtualArticle(i).get('.status-header span').should('contain', 'boosted')
+      cy.getNthVirtualArticle(i).find('.status-header span').should('contain', status.rebloggedBy)
+      cy.getNthVirtualArticle(i).find('.status-header span').should('contain', 'boosted')
     }
     if (status.favoritedBy) {
-      cy.getNthVirtualArticle(i).get('.status-header span').should('contain', status.favoritedBy)
-      cy.getNthVirtualArticle(i).get('.status-header span').should('contain', 'favorited')
+      cy.getNthVirtualArticle(i).find('.status-header span').should('contain', status.favoritedBy)
+      cy.getNthVirtualArticle(i).find('.status-header span').should('contain', 'favorited')
     }
     cy.wait(50)
     cy.getNthVirtualArticle(i).scrollIntoView()
diff --git a/routes/_components/IconButton.html b/routes/_components/IconButton.html
index 3c08ce03..948a00e3 100644
--- a/routes/_components/IconButton.html
+++ b/routes/_components/IconButton.html
@@ -3,6 +3,7 @@
           aria-label="{{label}}"
           aria-pressed="{{!!pressed}}"
           class="icon-button {{pressed ? 'pressed' : ''}} {{big ? 'big-icon' : ''}}"
+          disabled="{{disabled}}"
           on:click
   >
     <svg>
@@ -13,6 +14,7 @@
   <button type="button"
           aria-label="{{label}}"
           class="icon-button {{big ? 'big-icon' : ''}}"
+          disabled="{{disabled}}"
           on:click
   >
     <svg>
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index 233bc267..77698861 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -1,11 +1,11 @@
 <article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}"
-         tabindex="0"
+         tabindex="{{ !isStatusInNotification || notification.type === 'follow' ? '0' : '' }}"
          delegate-click-key="{{elementKey}}"
          delegate-keydown-key="{{elementKey}}"
          focus-key="{{elementKey}}"
          aria-posinset="{{index}}"
          aria-setsize="{{length}}"
-         aria-label="Status by {{originalStatus.account.display_name || originalStatus.account.username}}"
+         aria-label="{{ariaLabel}}"
          on:recalculateHeight>
   {{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog || timelineType === 'pinned'}}
     <StatusHeader :notification :status :isStatusInNotification :timelineType />
@@ -160,7 +160,12 @@
       originalAccount: (originalStatus) => originalStatus.account,
       isStatusInOwnThread: (timelineType, timelineValue, statusId) => timelineType === 'status' && timelineValue === statusId,
       isStatusInNotification: (status, notification) => notification && notification.status && notification.type !== 'mention' && notification.status.id === status.id,
-      spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId]
+      spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
+      visibility: (originalStatus) => originalStatus.visibility,
+      ariaLabel: (originalAccount, visibility) => {
+        return (visibility === 'direct' ? 'Direct message' : 'Status') +
+          ` by ${originalAccount.display_name || originalAccount.username}`
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusToolbar.html b/routes/_components/status/StatusToolbar.html
index 13051e8b..56d0fa4a 100644
--- a/routes/_components/status/StatusToolbar.html
+++ b/routes/_components/status/StatusToolbar.html
@@ -4,10 +4,11 @@
     href="#fa-reply"
     />
   <IconButton
-    label="Boost"
-    pressable="true"
+    label="{{boostLabel}}"
+    pressable="{{!boostDisabled}}"
     pressed="{{status.reblogged}}"
-    href="{{status.visibility === 'private' ? '#fa-lock' : status.visibility === 'direct' ? '#fa-envelope' : '#fa-retweet'}}"
+    disabled="{{boostDisabled}}"
+    href="{{boostIcon}}"
   />
   <IconButton
     label="Favorite"
@@ -37,6 +38,32 @@
   export default {
     components: {
       IconButton
+    },
+    computed: {
+      visibility: (status) => status.visibility,
+      boostLabel: (visibility) => {
+        switch (visibility) {
+          case 'private':
+            return 'Cannot be boosted because this is followers-only'
+          case 'direct':
+            return 'Cannot be boosted because this is a direct message'
+          default:
+            return 'Boost'
+        }
+      },
+      boostIcon: (visibility) => {
+        switch (visibility) {
+          case 'private':
+            return '#fa-lock'
+          case 'direct':
+            return '#fa-envelope'
+          default:
+            return '#fa-retweet'
+        }
+      },
+      boostDisabled: (visibility) => {
+        return visibility === 'private' || visibility === 'direct'
+      }
     }
   }
 </script>
\ No newline at end of file