add test for status types

This commit is contained in:
Nolan Lawson 2018-02-19 10:34:36 -08:00
parent 801f457a70
commit 47453d284b
9 changed files with 104 additions and 20 deletions

View file

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

View file

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

View file

@ -1,9 +1,8 @@
const times = require('lodash/times') const times = require('lodash/times')
describe('Basic timeline spec', () => { describe('03-basic-timeline-spec.js', () => {
beforeEach(() => { beforeEach(() => {
cy.login('foobar@localhost:3000', 'foobarfoobar') cy.login('foobar@localhost:3000', 'foobarfoobar')
cy.visit('/')
cy.wait(500) cy.wait(500)
}) })

View file

@ -1,7 +1,6 @@
describe('Pinned statuses', () => { describe('04-pinned-statuses.js', () => {
beforeEach(() => { beforeEach(() => {
cy.login('foobar@localhost:3000', 'foobarfoobar') cy.login('foobar@localhost:3000', 'foobarfoobar')
cy.visit('/')
cy.wait(500) cy.wait(500)
}) })

View file

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

View file

@ -56,22 +56,22 @@ Cypress.Commands.add('getNthVirtualArticle', (n) => {
Cypress.Commands.add('validateTimeline', (timeline) => { Cypress.Commands.add('validateTimeline', (timeline) => {
timeline.forEach((status, i) => { timeline.forEach((status, i) => {
if (status.content) { 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) { 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) { 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) { 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) { 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.wait(50)
cy.getNthVirtualArticle(i).scrollIntoView() cy.getNthVirtualArticle(i).scrollIntoView()

View file

@ -3,6 +3,7 @@
aria-label="{{label}}" aria-label="{{label}}"
aria-pressed="{{!!pressed}}" aria-pressed="{{!!pressed}}"
class="icon-button {{pressed ? 'pressed' : ''}} {{big ? 'big-icon' : ''}}" class="icon-button {{pressed ? 'pressed' : ''}} {{big ? 'big-icon' : ''}}"
disabled="{{disabled}}"
on:click on:click
> >
<svg> <svg>
@ -13,6 +14,7 @@
<button type="button" <button type="button"
aria-label="{{label}}" aria-label="{{label}}"
class="icon-button {{big ? 'big-icon' : ''}}" class="icon-button {{big ? 'big-icon' : ''}}"
disabled="{{disabled}}"
on:click on:click
> >
<svg> <svg>

View file

@ -1,11 +1,11 @@
<article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}" <article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}"
tabindex="0" tabindex="{{ !isStatusInNotification || notification.type === 'follow' ? '0' : '' }}"
delegate-click-key="{{elementKey}}" delegate-click-key="{{elementKey}}"
delegate-keydown-key="{{elementKey}}" delegate-keydown-key="{{elementKey}}"
focus-key="{{elementKey}}" focus-key="{{elementKey}}"
aria-posinset="{{index}}" aria-posinset="{{index}}"
aria-setsize="{{length}}" aria-setsize="{{length}}"
aria-label="Status by {{originalStatus.account.display_name || originalStatus.account.username}}" aria-label="{{ariaLabel}}"
on:recalculateHeight> on:recalculateHeight>
{{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog || timelineType === 'pinned'}} {{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog || timelineType === 'pinned'}}
<StatusHeader :notification :status :isStatusInNotification :timelineType /> <StatusHeader :notification :status :isStatusInNotification :timelineType />
@ -160,7 +160,12 @@
originalAccount: (originalStatus) => originalStatus.account, originalAccount: (originalStatus) => originalStatus.account,
isStatusInOwnThread: (timelineType, timelineValue, statusId) => timelineType === 'status' && timelineValue === statusId, isStatusInOwnThread: (timelineType, timelineValue, statusId) => timelineType === 'status' && timelineValue === statusId,
isStatusInNotification: (status, notification) => notification && notification.status && notification.type !== 'mention' && notification.status.id === status.id, 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> </script>

View file

@ -4,10 +4,11 @@
href="#fa-reply" href="#fa-reply"
/> />
<IconButton <IconButton
label="Boost" label="{{boostLabel}}"
pressable="true" pressable="{{!boostDisabled}}"
pressed="{{status.reblogged}}" pressed="{{status.reblogged}}"
href="{{status.visibility === 'private' ? '#fa-lock' : status.visibility === 'direct' ? '#fa-envelope' : '#fa-retweet'}}" disabled="{{boostDisabled}}"
href="{{boostIcon}}"
/> />
<IconButton <IconButton
label="Favorite" label="Favorite"
@ -37,6 +38,32 @@
export default { export default {
components: { components: {
IconButton 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> </script>