add test for status types

cypress/integration/01-basic-spec.js

@@ -1,4 +1,4 @@
-describe('Basic spec', () => {
+describe('01-basic-spec.js', () => {
   beforeEach(() => {
     cy.visit('/')
     cy.wait(500)

cypress/integration/02-login-spec.js

@@ -1,4 +1,4 @@
-describe('Login spec', () => {
+describe('02-login-spec.js', () => {
   beforeEach(() => {
     cy.visit('/')
     cy.wait(500)

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)
   })
 

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)
   })
 

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')
+
+
+  })
+
+})

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).find('.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', 'followed you')
     }
     if (status.rebloggedBy) {
-      cy.getNthVirtualArticle(i).get('.status-header span').should('contain', status.rebloggedBy)
+      cy.getNthVirtualArticle(i).find('.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', 'boosted')
     }
     if (status.favoritedBy) {
-      cy.getNthVirtualArticle(i).get('.status-header span').should('contain', status.favoritedBy)
+      cy.getNthVirtualArticle(i).find('.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', 'favorited')
     }
     cy.wait(50)
     cy.getNthVirtualArticle(i).scrollIntoView()

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>

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>

routes/_components/status/StatusToolbar.html

@@ -4,10 +4,11 @@
     href="#fa-reply"
     />
   <IconButton
-    label="Boost"
+    label="{{boostLabel}}"
-    pressable="true"
+    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>