@instructure/canvas-rce 7.0.0 → 7.3.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@instructure/canvas-rce",
-  "version": "7.0.0",
+  "version": "7.3.0",
   "description": "A component wrapping Canvas's usage of Tinymce",
   "main": "es/index.js",
   "types": "es/index.d.ts",
-  "owner": "LF",
+  "owner": "RCX",
   "scripts": {
     "i18n:extract": "format-message extract \"es/**/*.js\" -g underscored_crc32 -o locales/en.json",
     "integration-test": "nightwatch --env integration",
@@ -14,14 +14,6 @@
     "test:parallel": "yarn test:jest",
     "test:serial": "yarn test:jest",
     "test:jest": "jest --color",
-    "test:cafe": "yarn build:cafe && yarn test:cafe:only",
-    "test:cafe:ui": "yarn build:cafe && yarn test:cafe:only:ui",
-    "test:cafe:only": "testcafe ${TESTCAFE_PROVIDER:-chrome:headless} testcafe/**/*.test.js",
-    "test:cafe:only:ui": "testcafe chrome testcafe/**/*.test.js  -s takeOnFails=true",
-    "test:cafe:only:debug": "testcafe chrome testcafe/**/*.test.js --debug-mode  -s takeOnFails=true",
-    "test:cafe:one": "testcafe chrome testcafe/**/*.test.js --test ",
-    "test:cafe:all": "yarn build:cafe && testcafe chrome,firefox,safari testcafe/**/*.test.js",
-    "test:cafe:debug": "yarn build:cafe && yarn test:cafe:only:debug",
     "test:jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test:jest:watch": "node node_modules/.bin/jest --watch",
     "demo": "scripts/demo.sh",
@@ -35,7 +27,6 @@
     "build:types": "tsc",
     "build:canvas": "yarn run build",
     "build:watch": "yarn clean:es && yarn build:es --watch",
-    "build:cafe": "wp --config webpack.testcafe.config.js",
     "prepublishOnly": "yarn build && yarn test",
     "fmt:check": "biome check",
     "fmt:fix": "biome format --write",
@@ -54,92 +45,83 @@
   ],
   "author": "Instructure, Inc",
   "license": "AGPL-3.0",
-  "browserslist": [
-    "extends @instructure/browserslist-config-canvas-lms"
-  ],
+  "browserslist": ["extends @instructure/browserslist-config-canvas-lms"],
   "nyc": {
-    "include": [
-      "shared/**/*.js",
-      "src/**/*.js"
-    ],
+    "include": ["shared/**/*.js", "src/**/*.js"],
     "exclude": [],
-    "require": [
-      "@babel/register",
-      "@instructure/canvas-theme"
-    ],
+    "require": ["@babel/register", "@instructure/canvas-theme"],
     "sourceMap": false,
     "instrument": false
   },
   "dependencies": {
-    "@instructure/canvas-theme": "10.11.0",
+    "@instructure/canvas-theme": "10.26.2",
     "@instructure/canvas-media": "*",
-    "@instructure/debounce": "10.11.0",
-    "@instructure/emotion": "10.11.0",
+    "@instructure/debounce": "10.26.2",
+    "@instructure/emotion": "10.26.2",
     "@instructure/k5uploader": "*",
     "@instructure/media-capture": "^9.0.0",
-    "@instructure/theme-registry": "10.11.0",
-    "@instructure/ui-a11y-content": "10.11.0",
-    "@instructure/ui-a11y-utils": "10.11.0",
-    "@instructure/ui-alerts": "10.11.0",
-    "@instructure/ui-avatar": "10.11.0",
-    "@instructure/ui-badge": "10.11.0",
-    "@instructure/ui-billboard": "10.11.0",
-    "@instructure/ui-buttons": "10.11.0",
-    "@instructure/ui-checkbox": "10.11.0",
-    "@instructure/ui-source-code-editor": "10.11.0",
-    "@instructure/ui-color-picker": "10.11.0",
-    "@instructure/ui-color-utils": "10.11.0",
-    "@instructure/ui-file-drop": "10.11.0",
-    "@instructure/ui-flex": "10.11.0",
-    "@instructure/ui-focusable": "10.11.0",
-    "@instructure/ui-form-field": "10.11.0",
-    "@instructure/ui-grid": "10.11.0",
-    "@instructure/ui-heading": "10.11.0",
-    "@instructure/ui-icons": "10.11.0",
-    "@instructure/ui-img": "10.11.0",
-    "@instructure/ui-link": "10.11.0",
-    "@instructure/ui-list": "10.11.0",
+    "@instructure/theme-registry": "10.26.2",
+    "@instructure/ui-a11y-content": "10.26.2",
+    "@instructure/ui-a11y-utils": "10.26.2",
+    "@instructure/ui-alerts": "10.26.2",
+    "@instructure/ui-avatar": "10.26.2",
+    "@instructure/ui-badge": "10.26.2",
+    "@instructure/ui-billboard": "10.26.2",
+    "@instructure/ui-buttons": "10.26.2",
+    "@instructure/ui-checkbox": "10.26.2",
+    "@instructure/ui-source-code-editor": "10.26.2",
+    "@instructure/ui-color-picker": "10.26.2",
+    "@instructure/ui-color-utils": "10.26.2",
+    "@instructure/ui-file-drop": "10.26.2",
+    "@instructure/ui-flex": "10.26.2",
+    "@instructure/ui-focusable": "10.26.2",
+    "@instructure/ui-form-field": "10.26.2",
+    "@instructure/ui-grid": "10.26.2",
+    "@instructure/ui-heading": "10.26.2",
+    "@instructure/ui-icons": "10.26.2",
+    "@instructure/ui-img": "10.26.2",
+    "@instructure/ui-link": "10.26.2",
+    "@instructure/ui-list": "10.26.2",
     "@instructure/ui-media-player": "^9.0.0",
-    "@instructure/ui-menu": "10.11.0",
-    "@instructure/ui-modal": "10.11.0",
-    "@instructure/ui-motion": "10.11.0",
-    "@instructure/ui-number-input": "10.11.0",
-    "@instructure/ui-overlays": "10.11.0",
-    "@instructure/ui-pagination": "10.11.0",
-    "@instructure/ui-pill": "10.11.0",
-    "@instructure/ui-popover": "10.11.0",
-    "@instructure/ui-radio-input": "10.11.0",
-    "@instructure/ui-simple-select": "10.11.0",
-    "@instructure/ui-spinner": "10.11.0",
-    "@instructure/ui-svg-images": "10.11.0",
-    "@instructure/ui-table": "10.11.0",
-    "@instructure/ui-tabs": "10.11.0",
-    "@instructure/ui-text-area": "10.11.0",
-    "@instructure/ui-text-input": "10.11.0",
-    "@instructure/ui-text": "10.11.0",
-    "@instructure/ui-themes": "10.11.0",
-    "@instructure/ui-toggle-details": "10.11.0",
-    "@instructure/ui-tooltip": "10.11.0",
-    "@instructure/ui-tray": "10.11.0",
-    "@instructure/ui-tree-browser": "10.11.0",
-    "@instructure/ui-truncate-text": "10.11.0",
-    "@instructure/ui-utils": "10.11.0",
-    "@instructure/ui-view": "10.11.0",
-    "@instructure/uid": "10.11.0",
+    "@instructure/ui-menu": "10.26.2",
+    "@instructure/ui-modal": "10.26.2",
+    "@instructure/ui-motion": "10.26.2",
+    "@instructure/ui-number-input": "10.26.2",
+    "@instructure/ui-overlays": "10.26.2",
+    "@instructure/ui-pagination": "10.26.2",
+    "@instructure/ui-pill": "10.26.2",
+    "@instructure/ui-popover": "10.26.2",
+    "@instructure/ui-radio-input": "10.26.2",
+    "@instructure/ui-simple-select": "10.26.2",
+    "@instructure/ui-spinner": "10.26.2",
+    "@instructure/ui-svg-images": "10.26.2",
+    "@instructure/ui-table": "10.26.2",
+    "@instructure/ui-tabs": "10.26.2",
+    "@instructure/ui-text-area": "10.26.2",
+    "@instructure/ui-text-input": "10.26.2",
+    "@instructure/ui-text": "10.26.2",
+    "@instructure/ui-themes": "10.26.2",
+    "@instructure/ui-toggle-details": "10.26.2",
+    "@instructure/ui-tooltip": "10.26.2",
+    "@instructure/ui-tray": "10.26.2",
+    "@instructure/ui-tree-browser": "10.26.2",
+    "@instructure/ui-truncate-text": "10.26.2",
+    "@instructure/ui-utils": "10.26.2",
+    "@instructure/ui-view": "10.26.2",
+    "@instructure/uid": "10.26.2",
     "@sheerun/mutationobserver-shim": "^0.3.2",
     "@types/tinycolor2": "^1.4.6",
     "@tinymce/tinymce-react": "~3.8.4",
     "aphrodite": "^2",
-    "axios": "^0.28.0",
+    "axios": "^0.30.0",
     "bloody-offset": "0.0.0",
-    "crypto-es": "^2.0.4",
+    "crypto-es": "^2.1.0",
     "classnames": "^2.2.5",
-    "concurrently": "^4",
     "format-message": "^6",
     "format-message-generate-id": "^6",
     "i18n-js": "^3",
     "isomorphic-fetch": "2.2.1",
-    "js-beautify": "1",
+    "js-beautify": "1.14.9",
     "keycode": "^2",
     "lodash": "^4",
     "mathlive": "^0.77.0",
@@ -181,7 +163,6 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/testing-library__jest-dom": "^5.0.0",
-    "axe-testcafe": "^3",
     "babel-loader": "^9.1.3",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-inline-json-import": "^0.2.0",
@@ -200,16 +181,12 @@
     "jest-mock-proxy": "3.1.2",
     "jest": "^28",
     "mathjax": "^3.2.0",
-    "moxios": "^0.4",
+    "msw": "^2.7",
     "nyc": "^13",
     "proxyquire": "1.7.4",
     "shelljs": "^0.8.3",
-    "sinon": "^7",
     "skin-deep": "^1",
     "source-map-support": "0.5.21",
-    "testcafe-browser-provider-selenium": "^1.2.0",
-    "testcafe-react-selectors": "^3.3.0",
-    "testcafe": "1.14.2",
     "ts-node": "^10.9.2",
     "typescript": "*",
     "url-loader": "^4.1.1",
@@ -221,4 +198,4 @@
   "resolutions": {
     "format-message-estree-util": "./packages/format-message-estree-util"
   }
-}
+}

package/testcafe/RCEWrapper.test.js

@@ -1,319 +0,0 @@
-/*
- * Copyright (C) 2019 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import {Selector, ClientFunction} from 'testcafe'
-fixture`RCEWrapper`.page`./testcafe.html`
-const tinyIframe = Selector('#textarea_ifr')
-const textArea = Selector('.RceHtmlEditor')
-const rceContainer = Selector('.tox-tinymce')
-const toggleButton = Selector('button').withText('</>')
-const linksButton = Selector('[role="button"][aria-label="Links"] .tox-split-button__chevron')
-const externalLinksMenuItem = Selector('[role^="menuitem"][title="External Links"]')
-const courseLinksMenuItem = Selector('[role^="menuitem"][title="Course Links"]')
-const editLinkMenuItem = Selector('[role^="menuitem"][title="Edit Link"]')
-const removeLinkMenuItem = Selector('[role^="menuitem"][title="Remove Link"]')
-const linkDialog = Selector('[data-testid="RCELinkOptionsDialog"]')
-const linkTray = Selector('[data-testid="RCELinkOptionsTray"]')
-const selectword = Selector('#selectword')
-const linksTraySelector = '[role="dialog"][aria-label="Course Links"]'
-const rceBody = Selector('#tinymce')
-const linksPanelSelector = Selector('[data-testid="instructure_links-LinksPanel"]')
-
-function named(name) {
-  return Selector(`[name="${name}"]`)
-}
-
-function specificValue(value) {
-  return Selector(`[value="${value}"]`)
-}
-
-test.skip('edits in the textarea are reflected in the editor', async t => {
-  // const myText = ClientFunction(() => document.querySelector('#tinymce').innerText)
-  await t
-    .click(toggleButton)
-    .typeText(textArea, 'this is new content')
-    .click(toggleButton)
-    .switchToIframe(tinyIframe)
-
-  await t.expect(rceBody.withExactText('this is new content').visible).ok().switchToMainWindow()
-
-  await t
-    .click(toggleButton)
-    .pressKey('end')
-    .typeText(textArea, 'this is more content')
-    .click(toggleButton)
-    .switchToIframe(tinyIframe)
-    .expect(Selector('body').find('p').withExactText('this is new content').visible)
-    .ok()
-    .expect(Selector('body').find('p').withExactText('this is more content').visible)
-    .ok()
-    .switchToMainWindow()
-})
-
-test.skip('shows the create links menu', async t => {
-  await t
-    .click(toggleButton)
-    .typeText(textArea, '<div>this is <span id="selectword">selected</span> text</div>')
-    .click(toggleButton)
-    .expect(rceContainer.visible)
-    .ok()
-
-  await t
-    .switchToIframe(tinyIframe)
-    .selectEditableContent(selectword, selectword)
-    .switchToMainWindow()
-    .click(linksButton)
-    .expect(externalLinksMenuItem.visible)
-    .ok()
-    .expect(courseLinksMenuItem.visible)
-    .ok()
-})
-
-test.skip('shows the edit links menu', async t => {
-  await t
-    .click(toggleButton)
-    .typeText(
-      textArea,
-      '<div>this is <a href="http://example.com"><span id="selectword">selected</span></a> text</div>'
-    )
-    .click(toggleButton)
-    .expect(rceContainer.visible)
-    .ok()
-
-  await t
-    .switchToIframe(tinyIframe)
-    .selectEditableContent(selectword, selectword)
-    .switchToMainWindow()
-    .click(linksButton)
-    .expect(editLinkMenuItem.visible)
-    .ok()
-    .expect(removeLinkMenuItem.visible)
-    .ok()
-})
-
-test.skip('can create an external link', async t => {
-  await t
-    .click(toggleButton)
-    .typeText(textArea, '<div>this is <span id="selectword">selected</span> text</div>')
-    .click(toggleButton)
-    .expect(rceContainer.visible)
-    .ok()
-
-  await t
-    .switchToIframe(tinyIframe)
-    .selectEditableContent(selectword, selectword)
-    .switchToMainWindow()
-    .click(linksButton)
-    .click(externalLinksMenuItem)
-    .expect(linkDialog.visible)
-    .ok()
-    .expect(named('linklink').visible)
-    .ok()
-
-  await t
-    .typeText(named('linklink'), 'https://instructure.com')
-    .click(Selector('button').withText('Done'))
-    .switchToIframe(tinyIframe)
-    .expect(
-      Selector('a')
-        .withAttribute('href', 'https://instructure.com')
-        .withAttribute('target', '_blank').exists
-    )
-    .ok()
-})
-
-test.skip('can edit an external link', async t => {
-  await t
-    .click(toggleButton)
-    .typeText(
-      textArea,
-      '<div>this is <a href="http://example.com"><span id="selectword">selected</span></a> text</div>'
-    )
-    .click(toggleButton)
-    .expect(rceContainer.visible)
-    .ok()
-
-  await t
-    .switchToIframe(tinyIframe)
-    .selectEditableContent(selectword, selectword)
-    .switchToMainWindow()
-
-  // the link is selected, the toolbar button should be enabled
-  // await t.expect(linksButton.hasClass('tox-tbtn--enabled')).ok()
-
-  await t.click(linksButton).click(editLinkMenuItem).expect(linkTray.visible).ok()
-
-  await t.expect(specificValue('http://example.com').exists).ok()
-  await t.expect(specificValue('selected').exists).ok()
-})
-
-test.skip('expands selection to edit external link', async t => {
-  await t
-    .click(toggleButton)
-    .typeText(
-      textArea,
-      '<div>this is <a href="http://example.com"><span id="selectword">selected</span></a> text</div>'
-    )
-    .click(toggleButton)
-    .expect(rceContainer.visible)
-    .ok()
-
-  await t.switchToIframe(tinyIframe).click(selectword, {caretPos: 1}).switchToMainWindow()
-
-  await t.click(linksButton).click(editLinkMenuItem).expect(linkTray.visible).ok()
-
-  await t.expect(specificValue('http://example.com').exists).ok()
-  await t.expect(specificValue('selected').exists).ok()
-})
-
-test.skip('can remove a link', async t => {
-  await t
-    .click(toggleButton)
-    .typeText(
-      textArea,
-      '<div>this is <a href="http://example.com"><span id="selectword">selected</span></a> text</div>'
-    )
-    .click(toggleButton)
-    .expect(rceContainer.visible)
-    .ok()
-
-  await t
-    .switchToIframe(tinyIframe)
-    .selectEditableContent(selectword, selectword)
-    .switchToMainWindow()
-    .click(linksButton)
-    .click(removeLinkMenuItem)
-
-  await t.switchToIframe(tinyIframe).expect(Selector('a').exists).notOk()
-})
-
-// fails at the React.lazy call to load the tray's panel
-test.skip('focus returns on dismissing tray', async t => {
-  const tinymceSelection = ClientFunction(() => tinymce.get('textarea').selection.getContent()) // the textarea id is from testcafe.html
-  const focusedId = ClientFunction(() => document.activeElement.id)
-  const focusedTag = ClientFunction(() => document.activeElement.tagName)
-  const ltSelector = Selector(linksTraySelector)
-
-  await t
-    .click(toggleButton)
-    .typeText(textArea, '<div>this is <span id="selectword">selected</span> text</div>')
-    .click(toggleButton)
-    .expect(rceContainer.visible)
-    .ok()
-
-  await t
-    .switchToIframe(tinyIframe)
-    .selectEditableContent(selectword, selectword)
-    .switchToMainWindow()
-    .click(linksButton)
-    .click(courseLinksMenuItem)
-
-  await linksPanelSelector()
-
-  await t
-    .expect(ltSelector.visible)
-    .ok()
-    .click(Selector(`${linksTraySelector} button`).withText('Close'))
-    .expect(ltSelector.exist)
-    .notOk()
-
-  await t
-    .expect(tinymceSelection())
-    .eql('selected')
-    .expect(focusedId())
-    .eql('textarea_ifr')
-
-    .switchToIframe(tinyIframe)
-    .expect(focusedTag())
-    .eql('BODY')
-})
-
-test.skip('show the kb shortcut modal various ways', async t => {
-  const kbshortcutbutton = Selector('button[data-testid="ShowOnFocusButton__button"]')
-  const sbKbshortcutbutton = Selector('button[title="View keyboard shortcuts"]')
-  const shortcutmodal = Selector('[data-testid="RCE_KeyboardShortcutModal"]')
-  const focusKBSCBtn = ClientFunction(() => kbshortcutbutton().focus(), {
-    dependencies: {kbshortcutbutton},
-  })
-  const focusSBKBSCBtn = ClientFunction(() => sbKbshortcutbutton().focus(), {
-    dependencies: {sbKbshortcutbutton},
-  })
-
-  await t.expect(kbshortcutbutton.exists).ok()
-
-  await focusKBSCBtn()
-
-  // open keyboard shortcut modal from the show-on-focus button
-  // close with escape
-  await t
-    .expect(kbshortcutbutton.visible)
-    .ok()
-    .click(kbshortcutbutton)
-    .expect(shortcutmodal.visible)
-    .ok()
-    .pressKey('esc')
-    .expect(shortcutmodal.exists)
-    .notOk()
-
-  // open modal using alt+0
-  // close with the close button
-  // await t
-  //   .switchToIframe(tinyIframe)
-  //   .click(Selector('body'))
-  //   .pressKey('alt+0')
-  //   .expect(shortcutmodal.visible)
-  //   .ok()
-  //   .click(Selector('button').withText('Close'))
-  //   .expect(shortcutmodal.exists)
-  //   .notOk()
-
-  // open modal from button in status bar
-  // debugger;
-  // close with the close button
-  await focusSBKBSCBtn()
-
-  await t
-    .expect(sbKbshortcutbutton.exists)
-    .ok()
-    .click(sbKbshortcutbutton)
-    .expect(shortcutmodal.visible)
-    .ok()
-    .click(Selector('button').withText('Close'))
-    .expect(shortcutmodal.exists)
-    .notOk()
-})
-
-// test.skip('can bring up the images dialog', async t => {
-//   await t
-//     .switchToMainWindow()
-//     .click(imagesButton())
-//     .click(uploadImageMenuItem())
-//     .expect(uploadImageDialog().visible)
-//     .ok()
-
-// await t
-//   .typeText(named('linklink'), 'https://instructure.com')
-//   .click(Selector('button').withText('Done'))
-//   .switchToIframe(tinyIframe)
-//   .expect(
-//     Selector('a')
-//       .withAttribute('href', 'https://instructure.com')
-//       .withAttribute('target', '_blank').exists
-//   )
-//   .ok()
-// })

package/testcafe/StatusBar.test.js

@@ -1,108 +0,0 @@
-/*
- * Copyright (C) 2019 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import {Selector} from 'testcafe'
-fixture`StatusBar`.page`./testcafe.html`
-
-const tinyIframe = Selector('#textarea_ifr')
-const application = Selector('.tox-tinymce[role="document"]')
-const textArea = Selector('.RceHtmlEditor')
-const statusPath = Selector('[data-testid="whole-status-bar-path"]')
-const wordCount = Selector('[data-testid="status-bar-word-count"]')
-const toggleButton = Selector('button').withText('</>')
-const dragHandle = Selector('[name="IconDragHandle"]')
-
-test.skip('toggles between rce and html views', async t => {
-  const rceContainer = Selector('.tox-tinymce')
-  const keyboardButton = Selector('button[title="View keyboard shortcuts"]')
-  const a11yButton = Selector('button[title="Accessibility Checker"]')
-  await t.expect(rceContainer.visible).ok('rce should be initially visible')
-  // initially empty, so it's not visible, but we just care that it exists
-  await t.expect(statusPath.exists).ok('rich content path should be visible')
-  await t.expect(keyboardButton.visible).ok('keyboard button should be visible')
-  await t.expect(a11yButton.visible).ok('a11yButton button should be visible')
-  await t.expect(wordCount.visible).ok('word count should be visible')
-  await t.expect(textArea.visible).notOk('textarea should be initially invisible')
-  await t.click(toggleButton)
-  await t.expect(rceContainer.visible).notOk('rce should be invisible after toggle')
-  await t.expect(textArea.visible).ok('textarea should be visible after toggle')
-  await t.expect(statusPath.count).eql(0)
-  await t.expect(wordCount.count).eql(0)
-  await t.expect(keyboardButton.count).eql(0)
-  await t.expect(a11yButton.count).eql(0)
-  await t.expect(dragHandle.visible).ok('drag handle should still be visible')
-  await t.click(toggleButton)
-  await t.expect(rceContainer.visible).ok('rce should be visible after toggling again')
-  await t.expect(statusPath.visible).ok('rich content path should be visible again')
-  await t.expect(keyboardButton.visible).ok('keyboard button should be visible again')
-  await t.expect(a11yButton.visible).ok('a11yButton button should be visible again')
-  await t.expect(wordCount.visible).ok('word count should be visible again')
-  await t.expect(textArea.visible).notOk('textarea should be hidden after toggling again')
-})
-
-test.skip('counts words', async t => {
-  // search for the exact text for the selector will wait for it to change to this text
-  await t.expect(wordCount.withText('0 words').exists).ok()
-
-  await t.switchToIframe(tinyIframe).typeText('body', 'foo')
-  await t.switchToMainWindow().expect(wordCount.withText('1 word').exists).ok()
-
-  await t.switchToIframe(tinyIframe).typeText('body', ' bar baz bing')
-  await t.switchToMainWindow().expect(Selector('span').withText('4 words').exists).ok()
-})
-
-test.skip('displays the current html path', async t => {
-  await t.switchToIframe(tinyIframe).typeText('body', 'foo ')
-  await t.expect(Selector(statusPath).withText(/p.*strong.*em/).exists).notOk()
-  await t.switchToMainWindow().click(Selector('button[title="Bold"]'))
-  await t.switchToIframe(tinyIframe).typeText('body', 'bar ')
-  await t.switchToMainWindow().click(Selector('button[title="Italic"]'))
-  await t.switchToIframe(tinyIframe).typeText('body', 'baz ')
-  await t
-    .switchToMainWindow()
-    .expect(statusPath.withText(/p.*strong.*em/).exists)
-    .ok()
-})
-// these 2 tests fail in headless
-test.skip('drag handle resizes the editor', async t => {
-  const initialSize = await tinyIframe.boundingClientRect
-  await t.drag(dragHandle, -100, 400)
-  let finalSize = await tinyIframe.boundingClientRect
-  await t.expect(finalSize.height).eql(initialSize.height + 400)
-  await t.expect(finalSize.width).eql(initialSize.width)
-  await t.drag(dragHandle, -100, -300)
-  finalSize = await tinyIframe.boundingClientRect
-  await t.expect(finalSize.height).eql(initialSize.height + 100)
-  await t.expect(finalSize.width).eql(initialSize.width)
-})
-
-test.skip('drag handle in rce mode also resizes the textarea', async t => {
-  await t.drag(dragHandle, 0, 400)
-  const applicationHeight = await application.getStyleProperty('height')
-  await t.click(toggleButton)
-  const textareaHeight = await textArea.getStyleProperty('height')
-  await t.expect(textareaHeight).eql(applicationHeight)
-})
-
-test.skip('drag handle in textarea mode also resizes the rce', async t => {
-  await t.click(toggleButton).drag(dragHandle, 0, 400)
-  const textareaHeight = await textArea.getStyleProperty('height')
-  await t.click(toggleButton)
-  const rceHeight = await application.getStyleProperty('height')
-  await t.expect(rceHeight).eql(textareaHeight)
-})