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

add tests for content warnings

Browse source
This commit is contained in:
Nolan Lawson 2018-03-03 16:12:48 -08:00
parent 2f5e19bd44
commit 9149887fec
6 changed files with 85 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
routes/_components/compose/ComposeBox.html
View file

@ -4,11 +4,11 @@
<ComposeContentWarning :realm :contentWarning />
{{/if}}
<ComposeInput :realm :text />
<ComposeLengthGauge :textLength :textOverLimit />
<ComposeLengthGauge :length :overLimit />
<ComposeToolbar :realm :postPrivacy :media :contentWarningShown />
<ComposeLengthIndicator :textLength :textOverLimit />
<ComposeLengthIndicator :length :overLimit />
<ComposeMedia :realm :media />
<ComposeButton :textLength :textOverLimit />
<ComposeButton :length :overLimit />
</div>
<style>
.compose-box {
@ -71,7 +71,11 @@
defaultPostPrivacyKey: ($currentVerifyCredentials) => $currentVerifyCredentials.source.privacy,
postPrivacyKey: (composeData, defaultPostPrivacyKey) => composeData.postPrivacy || defaultPostPrivacyKey,
textLength: (text) => measureText(text),
textOverLimit: (textLength) => textLength > CHAR_LIMIT,
contentWarningLength: (contentWarning) => measureText(contentWarning),
length: (textLength, contentWarningLength, contentWarningShown) => {
return textLength + (contentWarningShown ? contentWarningLength : 0)
},
overLimit: (length) => length > CHAR_LIMIT,
contentWarningShown: (composeData) => composeData.contentWarningShown,
contentWarning: (composeData) => composeData.contentWarning || ''
}

4
routes/_components/compose/ComposeButton.html
View file

@ -16,9 +16,7 @@
export default {
store: () => store,
computed: {
disabled: (textOverLimit, textLength) => {
return textOverLimit || textLength === 0
}
disabled: (overLimit, length) => overLimit || length === 0
}
}
</script>

6
routes/_components/compose/ComposeLengthGauge.html
View file

@ -1,4 +1,4 @@
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{textOverLimit ? 'over-char-limit' : ''}}"
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}"
style="transform: scaleX({{inputLengthAsFractionRoundedAfterRaf || 0}});"
aria-hidden="true"
></div>
@ -36,9 +36,7 @@
},
store: () => store,
computed: {
lengthAsFraction: (textLength) => {
return Math.min(CHAR_LIMIT, textLength) / CHAR_LIMIT
},
lengthAsFraction: (length) => Math.min(CHAR_LIMIT, length) / CHAR_LIMIT,
lengthAsFractionRounded: (lengthAsFraction) => {
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
let int = Math.round(lengthAsFraction * 100)

10
routes/_components/compose/ComposeLengthIndicator.html
View file

@ -1,4 +1,4 @@
<span class="compose-box-length {{textOverLimit ? 'over-char-limit' : ''}}"
<span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
aria-label="{{lengthLabel}}">
{{lengthToDisplayAfterRaf || '0'}}
</span>
@ -33,11 +33,9 @@
},
store: () => store,
computed: {
lengthToDisplay: (textLength) => {
return CHAR_LIMIT - textLength
},
lengthLabel: (textOverLimit, lengthToDisplay) => {
if (textOverLimit) {
lengthToDisplay: (length) => CHAR_LIMIT - length,
lengthLabel: (overLimit, lengthToDisplay) => {
if (overLimit) {
return `${lengthToDisplay} characters over limit`
} else {
return `${lengthToDisplay} characters remaining`

68
tests/spec/15-compose-content-warnings.js Normal file
View file

@ -0,0 +1,68 @@
import {
composeContentWarning, composeInput, composeLengthIndicator, contentWarningButton, homeNavButton,
notificationsNavButton
} from '../utils'
import { foobarRole } from '../roles'
fixture`15-compose-content-warnings.js`
.page`http://localhost:4002`
test('Changes content warnings', async t => {
await t.useRole(foobarRole)
.expect(composeContentWarning.exists).notOk()
.expect(contentWarningButton.getAttribute('aria-label')).eql('Add content warning')
.expect(contentWarningButton.getAttribute('aria-pressed')).eql('false')
.click(contentWarningButton)
.expect(composeContentWarning.exists).ok()
.expect(contentWarningButton.getAttribute('aria-label')).eql('Remove content warning')
.expect(contentWarningButton.getAttribute('aria-pressed')).eql('true')
.typeText(composeContentWarning, 'hello content warning', {paste: true})
.typeText(composeInput, 'secret text', {paste: true})
.click(notificationsNavButton)
.click(homeNavButton)
.expect(contentWarningButton.getAttribute('aria-label')).eql('Remove content warning')
.expect(contentWarningButton.getAttribute('aria-pressed')).eql('true')
.expect(composeContentWarning.value).eql('hello content warning')
.expect(composeInput.value).eql('secret text')
.selectText(composeInput)
.pressKey('delete')
.selectText(composeContentWarning)
.pressKey('delete')
.expect(composeContentWarning.value).eql('')
.expect(composeInput.value).eql('')
.click(contentWarningButton)
.expect(composeContentWarning.exists).notOk()
.expect(contentWarningButton.getAttribute('aria-label')).eql('Add content warning')
.expect(contentWarningButton.getAttribute('aria-pressed')).eql('false')
})
test('Considers content warnings for length limits', async t => {
await t.useRole(foobarRole)
.expect(composeLengthIndicator.innerText).eql('500')
.click(contentWarningButton)
.typeText(composeContentWarning, 'my content warning', {paste: true})
.expect(composeLengthIndicator.innerText).eql('482')
.typeText(composeInput, 'secret text', {paste: true})
.expect(composeLengthIndicator.innerText).eql('471')
.selectText(composeContentWarning)
.pressKey('delete')
.expect(composeLengthIndicator.innerText).eql('489')
.selectText(composeInput)
.pressKey('delete')
.expect(composeLengthIndicator.innerText).eql('500')
})
test('Considers hidden content warnings for length limits', async t => {
await t.useRole(foobarRole)
.expect(composeLengthIndicator.innerText).eql('500')
.click(contentWarningButton)
.typeText(composeContentWarning, 'my content warning', {paste: true})
.expect(composeLengthIndicator.innerText).eql('482')
.click(contentWarningButton)
.expect(composeLengthIndicator.innerText).eql('500')
.click(contentWarningButton)
.expect(composeLengthIndicator.innerText).eql('482')
.selectText(composeContentWarning)
.pressKey('delete')
.expect(composeLengthIndicator.innerText).eql('500')
})

2
tests/utils.js
View file

@ -12,11 +12,13 @@ export const notificationsNavButton = $('nav a[href="/notifications"]')
export const homeNavButton = $('nav a[href="/"]')
export const formError = $('.form-error-user-error')
export const composeInput = $('.compose-box-input')
export const composeContentWarning = $('.content-warning-input')
export const composeButton = $('.compose-box-button')
export const composeLengthIndicator = $('.compose-box-length')
export const emojiButton = $('.compose-box-toolbar button:first-child')
export const mediaButton = $('.compose-box-toolbar button:nth-child(2)')
export const postPrivacyButton = $('.compose-box-toolbar button:nth-child(3)')
export const contentWarningButton = $('.compose-box-toolbar button:nth-child(4)')
export const emailInput = $('input#user_email')
export const passwordInput = $('input#user_password')
export const authorizeInput = $('button[type=submit]:not(.negative)')