data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

add test for status types

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/integration/01-basic-spec.js
View file

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

2
cypress/integration/02-login-spec.js
View file

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

3
cypress/integration/03-basic-timeline-spec.js
View file

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

3
cypress/integration/04-pinned-statuses.js
View file

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

52
cypress/integration/05-status-types.js Normal file
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')
})
})

16
cypress/support/commands.js
View file

@ -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()

2
routes/_components/IconButton.html
View file

@ -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>

11
routes/_components/status/Status.html
View file

@ -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>

33
routes/_components/status/StatusToolbar.html
View file

@ -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>