add tests for content warnings
This commit is contained in:
parent
2f5e19bd44
commit
9149887fec
|
@ -4,11 +4,11 @@
|
||||||
<ComposeContentWarning :realm :contentWarning />
|
<ComposeContentWarning :realm :contentWarning />
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<ComposeInput :realm :text />
|
<ComposeInput :realm :text />
|
||||||
<ComposeLengthGauge :textLength :textOverLimit />
|
<ComposeLengthGauge :length :overLimit />
|
||||||
<ComposeToolbar :realm :postPrivacy :media :contentWarningShown />
|
<ComposeToolbar :realm :postPrivacy :media :contentWarningShown />
|
||||||
<ComposeLengthIndicator :textLength :textOverLimit />
|
<ComposeLengthIndicator :length :overLimit />
|
||||||
<ComposeMedia :realm :media />
|
<ComposeMedia :realm :media />
|
||||||
<ComposeButton :textLength :textOverLimit />
|
<ComposeButton :length :overLimit />
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.compose-box {
|
.compose-box {
|
||||||
|
@ -71,7 +71,11 @@
|
||||||
defaultPostPrivacyKey: ($currentVerifyCredentials) => $currentVerifyCredentials.source.privacy,
|
defaultPostPrivacyKey: ($currentVerifyCredentials) => $currentVerifyCredentials.source.privacy,
|
||||||
postPrivacyKey: (composeData, defaultPostPrivacyKey) => composeData.postPrivacy || defaultPostPrivacyKey,
|
postPrivacyKey: (composeData, defaultPostPrivacyKey) => composeData.postPrivacy || defaultPostPrivacyKey,
|
||||||
textLength: (text) => measureText(text),
|
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,
|
contentWarningShown: (composeData) => composeData.contentWarningShown,
|
||||||
contentWarning: (composeData) => composeData.contentWarning || ''
|
contentWarning: (composeData) => composeData.contentWarning || ''
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,9 +16,7 @@
|
||||||
export default {
|
export default {
|
||||||
store: () => store,
|
store: () => store,
|
||||||
computed: {
|
computed: {
|
||||||
disabled: (textOverLimit, textLength) => {
|
disabled: (overLimit, length) => overLimit || length === 0
|
||||||
return textOverLimit || textLength === 0
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
|
@ -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}});"
|
style="transform: scaleX({{inputLengthAsFractionRoundedAfterRaf || 0}});"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
></div>
|
></div>
|
||||||
|
@ -36,9 +36,7 @@
|
||||||
},
|
},
|
||||||
store: () => store,
|
store: () => store,
|
||||||
computed: {
|
computed: {
|
||||||
lengthAsFraction: (textLength) => {
|
lengthAsFraction: (length) => Math.min(CHAR_LIMIT, length) / CHAR_LIMIT,
|
||||||
return Math.min(CHAR_LIMIT, textLength) / CHAR_LIMIT
|
|
||||||
},
|
|
||||||
lengthAsFractionRounded: (lengthAsFraction) => {
|
lengthAsFractionRounded: (lengthAsFraction) => {
|
||||||
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
|
// 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)
|
let int = Math.round(lengthAsFraction * 100)
|
||||||
|
|
|
@ -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}}">
|
aria-label="{{lengthLabel}}">
|
||||||
{{lengthToDisplayAfterRaf || '0'}}
|
{{lengthToDisplayAfterRaf || '0'}}
|
||||||
</span>
|
</span>
|
||||||
|
@ -33,11 +33,9 @@
|
||||||
},
|
},
|
||||||
store: () => store,
|
store: () => store,
|
||||||
computed: {
|
computed: {
|
||||||
lengthToDisplay: (textLength) => {
|
lengthToDisplay: (length) => CHAR_LIMIT - length,
|
||||||
return CHAR_LIMIT - textLength
|
lengthLabel: (overLimit, lengthToDisplay) => {
|
||||||
},
|
if (overLimit) {
|
||||||
lengthLabel: (textOverLimit, lengthToDisplay) => {
|
|
||||||
if (textOverLimit) {
|
|
||||||
return `${lengthToDisplay} characters over limit`
|
return `${lengthToDisplay} characters over limit`
|
||||||
} else {
|
} else {
|
||||||
return `${lengthToDisplay} characters remaining`
|
return `${lengthToDisplay} characters remaining`
|
||||||
|
|
68
tests/spec/15-compose-content-warnings.js
Normal file
68
tests/spec/15-compose-content-warnings.js
Normal 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')
|
||||||
|
})
|
|
@ -12,11 +12,13 @@ export const notificationsNavButton = $('nav a[href="/notifications"]')
|
||||||
export const homeNavButton = $('nav a[href="/"]')
|
export const homeNavButton = $('nav a[href="/"]')
|
||||||
export const formError = $('.form-error-user-error')
|
export const formError = $('.form-error-user-error')
|
||||||
export const composeInput = $('.compose-box-input')
|
export const composeInput = $('.compose-box-input')
|
||||||
|
export const composeContentWarning = $('.content-warning-input')
|
||||||
export const composeButton = $('.compose-box-button')
|
export const composeButton = $('.compose-box-button')
|
||||||
export const composeLengthIndicator = $('.compose-box-length')
|
export const composeLengthIndicator = $('.compose-box-length')
|
||||||
export const emojiButton = $('.compose-box-toolbar button:first-child')
|
export const emojiButton = $('.compose-box-toolbar button:first-child')
|
||||||
export const mediaButton = $('.compose-box-toolbar button:nth-child(2)')
|
export const mediaButton = $('.compose-box-toolbar button:nth-child(2)')
|
||||||
export const postPrivacyButton = $('.compose-box-toolbar button:nth-child(3)')
|
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 emailInput = $('input#user_email')
|
||||||
export const passwordInput = $('input#user_password')
|
export const passwordInput = $('input#user_password')
|
||||||
export const authorizeInput = $('button[type=submit]:not(.negative)')
|
export const authorizeInput = $('button[type=submit]:not(.negative)')
|
||||||
|
|
Loading…
Reference in a new issue