Merge pull request #699 from KittyGiraudel/typescript-tests

Move the tests to TypeScript

cypress.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
     'cypress-fiddle': {
       scripts: ['/shadow-dom-fixture.js'],
       stylesheets: ['/styles.css'],
-      style: `body { max-width: 600px; margin: 0 auto; }`,
+      style: 'body { max-width: 600px; margin: 0 auto; }',
     },
   },
 })

cypress/e2e/alertDialog.cy.js → cypress/e2e/alertDialog.cy.ts

@@ -1,4 +1,4 @@
-import { shouldBeVisible } from './utils.js'
+import { shouldBeVisible } from './utils.ts'
 
 describe('Alert Dialog', { testIsolation: false }, () => {
   it('should prevent closing the dialog with ESC', () => {

cypress/e2e/focusTrap.cy.js → cypress/e2e/focusTrap.cy.ts

@@ -1,4 +1,4 @@
-import { stripIndent, serialize } from '../support/utils'
+import { stripIndent, serialize } from '../support/utils.ts'
 
 describe('Focus trap', () => {
   it('should return two unique elements if multiple focusable elements are present', () => {

cypress/e2e/instance.cy.js → cypress/e2e/instance.cy.ts

@@ -1,10 +1,11 @@
-import { shouldBeHidden, shouldBeVisible } from './utils.js'
+import { shouldBeHidden, shouldBeVisible } from './utils.ts'
 
 describe('Instance', { testIsolation: false }, () => {
   before(() => cy.visit('/instance'))
 
   it('should be possible to instantiate a dialog with JavaScript', () => {
     cy.window().then(win => {
+      // @ts-expect-error
       win.instance = new win.A11yDialog(
         win.document.getElementById('my-dialog')
       )

cypress/e2e/nestedDialogs.cy.js → cypress/e2e/nestedDialogs.cy.ts

@@ -1,4 +1,4 @@
-import { shouldBeHidden, shouldBeVisible } from './utils.js'
+import { shouldBeHidden, shouldBeVisible } from './utils.ts'
 
 describe('Nested dialogs', { testIsolation: false }, () => {
   before(() => {

cypress/e2e/state.cy.js → cypress/e2e/state.cy.ts

@@ -1,4 +1,4 @@
-import { shouldBeHidden, shouldBeVisible } from './utils.js'
+import { shouldBeHidden, shouldBeVisible } from './utils.ts'
 
 describe('State', { testIsolation: false }, () => {
   before(() => cy.visit('/base'))

cypress/e2e/utils.js → cypress/e2e/utils.ts

@@ -1,4 +1,4 @@
-export function shouldBeVisible($subject) {
+export function shouldBeVisible($subject: Parameters<(typeof cy)['wrap']>[0]) {
   Cypress.log({
     displayName: 'visible',
     name: 'shouldBeVisible',
@@ -12,7 +12,7 @@ export function shouldBeVisible($subject) {
     .should('be.visible')
 }
 
-export function shouldBeHidden($subject) {
+export function shouldBeHidden($subject: Parameters<(typeof cy)['wrap']>[0]) {
   Cypress.log({
     displayName: 'hidden',
     name: 'shouldBeHidden',

cypress/support/e2e.js → cypress/support/e2e.ts

@@ -1,6 +1,14 @@
 import 'cypress-real-events/support'
 import '@cypress/fiddle'
-import { getFocusableEdges } from '../fixtures/dom-utils'
+import { getFocusableEdges } from '../fixtures/dom-utils.js'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      aliasFocusableEdges(options?: { skipAliases: boolean }): Chainable<void>
+    }
+  }
+}
 
 Cypress.Commands.add(
   'aliasFocusableEdges',
@@ -26,38 +34,44 @@ chai.use(_chai => {
       this.assert(
         this._obj.localName === localName,
         `expected #{this} to be an element with localName "${localName}"`,
-        `expected #{this} not to be an element with localName "${localName}"`
+        `expected #{this} not to be an element with localName "${localName}"`,
+        undefined
       )
     }
     this.assert(
       Cypress.dom.isElement(this._obj),
-      `expected #{this} to be an element`,
-      `expected #{this} not to be an element`
+      'expected #{this} to be an element',
+      'expected #{this} not to be an element',
+      undefined
     )
   })
 
   _chai.Assertion.addMethod('focusable', function isFocusable() {
     this.assert(
       Cypress.dom.isFocusable(this._obj),
-      `expected #{this} to be focusable`,
-      `expected #{this} not to be focusable`
+      'expected #{this} to be focusable',
+      'expected #{this} not to be focusable',
+      undefined
     )
   })
 
   _chai.Assertion.addMethod('withinShadowRoot', function isFocusable() {
     this.assert(
+      // @ts-expect-error
       Cypress.dom.isWithinShadowRoot(this._obj),
-      `expected #{this} to be in shadow DOM`,
-      `expected #{this} not to be in shadow DOM`
+      'expected #{this} to be in shadow DOM',
+      'expected #{this} not to be in shadow DOM',
+      undefined
     )
   })
 
   // See: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/dom/elements/shadow.ts#L4
   _chai.Assertion.addMethod('shadowRoot', function isFocusable() {
     this.assert(
       this._obj.shadowRoot?.toString() === '[object ShadowRoot]',
-      `expected #{this} to have a shadow root`,
-      `expected #{this} not to have a shadow root`
+      'expected #{this} to have a shadow root',
+      'expected #{this} not to have a shadow root',
+      undefined
     )
   })
 })

cypress/support/utils.js → cypress/support/utils.ts

@@ -1,8 +1,12 @@
 // https://github.com/sindresorhus/strip-indent
-export const stripIndent = string => {
+export const stripIndent = (string: string) => {
   // https://github.com/jamiebuilds/min-indent
   const match = string.match(/^[ \t]*(?=\S)/gm)
-  const indent = match?.reduce((r, a) => Math.min(r, a.length), Infinity) ?? 0
+  const indent =
+    match?.reduce<number>(
+      (r, a) => Math.min(r, a.length),
+      Number.POSITIVE_INFINITY
+    ) ?? 0
 
   return indent
     ? string.replace(new RegExp(`^[ \\t]{${indent}}`, 'gm'), '')
@@ -13,7 +17,7 @@ export const stripIndent = string => {
 // test code cumbersome however (no syntax highlight, no autocomplete, no auto-
 // indentation, etc.). This function serializes the given function and returns
 // its body, stripped of unnecessary indentation.
-export const serialize = fn => {
+export const serialize = (fn: VoidFunction) => {
   const string = fn.toString()
   const openingBrace = string.indexOf('{')
   const closingBrace = string.lastIndexOf('}')

cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node", "cypress-real-events"],
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  },
+  "include": ["**/*.ts"]
+}