Merge pull request #944 from basecamp/decaffeinate-system-tests

Decaffeinate remaining test files

.eslintrc

@@ -10,7 +10,7 @@
     "dot-notation": ["error"],
     "eol-last": ["error"],
     "getter-return": ["error"],
-    "id-length": ["error", { "properties": "never", "exceptions": ["_", "i", "n"] }],
+    "id-length": ["error", { "properties": "never", "exceptions": ["_", "i", "j", "n"] }],
     "keyword-spacing": ["error"],
     "no-extra-parens": ["error"],
     "no-multi-spaces": ["error", { "exceptions": { "VariableDeclarator": true } }],
@@ -27,6 +27,16 @@
   },
   "ignorePatterns": ["dist/**/*.js", "**/vendor/**/*.js"],
   "globals": {
+    "after": true,
+    "getComposition": true,
+    "getDocument": true,
+    "getEditor": true,
+    "getEditorController": true,
+    "getEditorElement": true,
+    "getSelectionManager": true,
+    "getToolbarElement": true,
+    "QUnit": true,
+    "rangy": true,
     "Trix": true
   },
   "env": {

package.json

@@ -51,6 +51,8 @@
     "build": "rollup -c",
     "build-css": "node-sass --functions=./assets/trix/stylesheets/functions assets/trix.scss dist/trix.css",
     "watch": "rollup -c -w",
+    "lint": "eslint .",
+    "pretest": "yarn run lint && yarn run build",
     "test": "yarn run build && karma start"
   },
   "dependencies": {}

rollup.config.js

@@ -3,7 +3,7 @@ import json from "@rollup/plugin-json"
 import filesize from "rollup-plugin-filesize"
 import includePaths from "rollup-plugin-includepaths"
 import commonjs from "rollup-plugin-commonjs"
-import { babel } from '@rollup/plugin-babel'
+import { babel } from "@rollup/plugin-babel"
 import nodeResolve from "rollup-plugin-node-resolve"
 
 import { version } from "./package.json"
@@ -39,7 +39,7 @@ export default [
     }
   },
   {
-    input: "src/test/test.coffee",
+    input: "src/test/test.js",
     output: [
       {
         name: "TrixTests",

src/test/system/accessibility_test.js

@@ -0,0 +1,38 @@
+import { assert, test, testGroup, triggerEvent } from "test/test_helper"
+
+testGroup("Accessibility attributes", { template: "editor_default_aria_label" }, () => {
+  test("sets the role to textbox", () => {
+    const editor = document.getElementById("editor-without-labels")
+    assert.equal(editor.getAttribute("role"), "textbox")
+  })
+
+  test("does not set aria-label when the element has no <label> elements", () => {
+    const editor = document.getElementById("editor-without-labels")
+    assert.equal(editor.hasAttribute("aria-label"), false)
+  })
+
+  test("does not override aria-label when the element declares it", () => {
+    const editor = document.getElementById("editor-with-aria-label")
+    assert.equal(editor.getAttribute("aria-label"), "ARIA Label text")
+  })
+
+  test("does not set aria-label when the element declares aria-labelledby", () => {
+    const editor = document.getElementById("editor-with-aria-labelledby")
+    assert.equal(editor.hasAttribute("aria-label"), false)
+    assert.equal(editor.getAttribute("aria-labelledby"), "aria-labelledby-id")
+  })
+
+  test("assigns aria-label to the text of the element's <label> elements", () => {
+    const editor = document.getElementById("editor-with-labels")
+    assert.equal(editor.getAttribute("aria-label"), "Label 1 Label 2 Label 3")
+  })
+
+  test("updates the aria-label on focus", () => {
+    const editor = document.getElementById("editor-with-modified-label")
+    const label = document.getElementById("modified-label")
+
+    label.innerHTML = "<span>New Value</span>"
+    triggerEvent(editor, "focus")
+    assert.equal(editor.getAttribute("aria-label"), "New Value")
+  })
+})

src/test/system/attachment_caption_test.js

@@ -0,0 +1,52 @@
+import config from "trix/config"
+import { assert, insertImageAttachment, test, testGroup } from "test/test_helper"
+
+testGroup("Attachment captions", { template: "editor_empty" }, () => {
+  test("default caption includes file name and size", () => {
+    insertImageAttachment()
+    const element = getCaptionElement()
+    assert.notOk(element.hasAttribute("data-trix-placeholder"))
+    assert.equal(element.textContent, "image.gif 35 Bytes")
+  })
+
+  test("caption excludes file name when configured", () => {
+    withPreviewCaptionConfig({ name: false, size: true }, () => {
+      insertImageAttachment()
+      const element = getCaptionElement()
+      assert.notOk(element.hasAttribute("data-trix-placeholder"))
+      assert.equal(element.textContent, "35 Bytes")
+    })
+  })
+
+  test("caption excludes file size when configured", () => {
+    withPreviewCaptionConfig({ name: true, size: false }, () => {
+      insertImageAttachment()
+      const element = getCaptionElement()
+      assert.notOk(element.hasAttribute("data-trix-placeholder"))
+      assert.equal(element.textContent, "image.gif")
+    })
+  })
+
+  test("caption is empty when configured", () => {
+    withPreviewCaptionConfig({ name: false, size: false }, () => {
+      insertImageAttachment()
+      const element = getCaptionElement()
+      assert.ok(element.hasAttribute("data-trix-placeholder"))
+      assert.equal(element.getAttribute("data-trix-placeholder"), config.lang.captionPlaceholder)
+      assert.equal(element.textContent, "")
+    })
+  })
+})
+
+const withPreviewCaptionConfig = (captionConfig, fn) => {
+  if (!captionConfig) captionConfig = {}
+  const { caption } = config.attachments.preview
+  config.attachments.preview.caption = captionConfig
+  try {
+    return fn()
+  } finally {
+    config.attachments.preview.caption = caption
+  }
+}
+
+const getCaptionElement = () => getEditorElement().querySelector("figcaption")

src/test/system/attachment_gallery_test.js

@@ -0,0 +1,69 @@
+import {
+  assert,
+  clickToolbarButton,
+  createImageAttachment,
+  insertAttachments,
+  pressKey,
+  test,
+  testGroup,
+  typeCharacters,
+} from "test/test_helper"
+import { OBJECT_REPLACEMENT_CHARACTER } from "trix/constants"
+
+const ORC = OBJECT_REPLACEMENT_CHARACTER
+
+testGroup("Attachment galleries", { template: "editor_empty" }, () => {
+  test("inserting more than one image attachment creates a gallery block", function (expectDocument) {
+    insertAttachments(createImageAttachments(2))
+    assert.blockAttributes([ 0, 2 ], [ "attachmentGallery" ])
+    expectDocument(`${ORC}${ORC}\n`)
+  })
+
+  test("gallery formatting is removed from blocks containing less than two image attachments", function (expectDocument) {
+    insertAttachments(createImageAttachments(2))
+    assert.blockAttributes([ 0, 2 ], [ "attachmentGallery" ])
+    getEditor().setSelectedRange([ 1, 2 ])
+    pressKey("backspace", () =>
+      requestAnimationFrame(() => {
+        assert.blockAttributes([ 0, 2 ], [])
+        expectDocument(`${ORC}\n`)
+      })
+    )
+  })
+
+  test("typing in an attachment gallery block splits it", function (expectDocument) {
+    insertAttachments(createImageAttachments(4))
+    getEditor().setSelectedRange(2)
+    typeCharacters("a", () =>
+      requestAnimationFrame(() => {
+        assert.blockAttributes([ 0, 2 ], [ "attachmentGallery" ])
+        assert.blockAttributes([ 3, 4 ], [])
+        assert.blockAttributes([ 5, 7 ], [ "attachmentGallery" ])
+        expectDocument(`${ORC}${ORC}\na\n${ORC}${ORC}\n`)
+      })
+    )
+  })
+
+  test("inserting a gallery in a formatted block", (expectDocument) =>
+    clickToolbarButton({ attribute: "quote" }, () =>
+      typeCharacters("abc", () => {
+        insertAttachments(createImageAttachments(2))
+        requestAnimationFrame(() => {
+          assert.blockAttributes([ 0, 3 ], [ "quote" ])
+          assert.blockAttributes([ 4, 6 ], [ "attachmentGallery" ])
+          expectDocument(`abc\n${ORC}${ORC}\n`)
+        })
+      })
+    ))
+})
+
+const createImageAttachments = function (num) {
+  if (num == null) {
+    num = 1
+  }
+  const attachments = []
+  while (attachments.length < num) {
+    attachments.push(createImageAttachment())
+  }
+  return attachments
+}