add tests for content warnings

routes/_components/compose/ComposeBox.html

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

routes/_components/compose/ComposeButton.html

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

routes/_components/compose/ComposeLengthGauge.html

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

routes/_components/compose/ComposeLengthIndicator.html

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

tests/spec/15-compose-content-warnings.js

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

tests/utils.js

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