@thednp/dommatrix 2.0.7 → 2.0.8

package/{cypress/e2e/dommatrix.spec.ts → test/dommatrix.test.ts}

@@ -1,34 +1,36 @@
-/// <reference types="cypress" />
+import { expect, it, describe, vi, beforeEach, afterEach } from 'vitest';
+import { getExampleDOM } from './fixtures/getExampleDom';
 
-import CSSMatrix from '../../src/index';
-import type { Matrix, Matrix3d } from '../../src/types';
-import testSamples from '../fixtures/testSamples';
+import CSSMatrix from '../src/index';
+import type { Matrix, Matrix3d } from '../src/types';
+import testSamples from './fixtures/testSamples';
 
 const roundTo4 = (x: number) => Math.round(x * 10000) / 10000
 
 describe('DOMMatrix Class Test', () => {
-
-  beforeEach(() => {
-    cy.visit('cypress/test.html')
+  let container: HTMLElement;
+  beforeEach(async () => {
+    container = getExampleDOM();
+    await vi.waitUntil(() => container.querySelector('div') !== null, { timeout: 150 });
+  });
+  afterEach(async () => {
+    document.documentElement.innerHTML = '';
   });
 
   it('Test init with no parameter, expect same output as native DOMMatrix', () => {
     const css = new CSSMatrix();
     const css1 = new CSSMatrix().setMatrixValue();
     const dom = new DOMMatrix();
-    cy.wrap(css).as('css')
-      .get('@css').its('is2D').should('equal', dom.is2D)
-      .get('@css').its('isIdentity').should('equal', dom.isIdentity)
-      .get('@css').should(($this) => {
-        expect(JSON.stringify($this)).to.equal(JSON.stringify(dom));
-        expect(JSON.stringify($this)).to.equal(JSON.stringify(css1));
-      })
+
+    expect(css.is2D).to.equal(dom.is2D);
+    expect(css.isIdentity).to.equal(dom.isIdentity);
+    expect(JSON.stringify(css)).to.equal(JSON.stringify(dom));
+    expect(JSON.stringify(css)).to.equal(JSON.stringify(css1));
   });
 
   it('Test init with invalid array, expect error', () => {
     const test = [0.906308, 0.0839613, -0.414194, 0.00103549, 0, 0.980067, 0.198669, -0.000496673, 0.422618, -0.180056, 0.888242, -0.0022206, 0, 0, 0, 'NaN'];
     try {
-      // @ts-ignore
       CSSMatrix.fromArray(test);
     } catch (err) {
       expect(err).to.be.instanceOf(TypeError);
@@ -64,7 +66,7 @@ describe('DOMMatrix Class Test', () => {
 
     [css1, css2, css3].forEach((c) => {
       try {
-        // @ts-ignore
+        // @ts-expect-error
         new CSSMatrix(c);
       } catch (err) {
         expect(err).to.be.instanceOf(TypeError);
@@ -77,61 +79,48 @@ describe('DOMMatrix Class Test', () => {
     const css = new CSSMatrix().rotate(15, 15);
     const dom = new DOMMatrix().rotate(15, 15);
 
-    cy.wrap(new CSSMatrix(css)).as('cc')
-      .get('@cc').its('is2D').should('equal', css.is2D)
-      .get('@cc').its('is2D').should('equal', new CSSMatrix(dom).is2D)
-      .get('@cc').its('isIdentity').should('equal', css.isIdentity)
-      .get('@cc').its('isIdentity').should('equal', new CSSMatrix(dom).isIdentity);
-
-    cy.wrap(css.toJSON()).as('js')
-      .get('@js').its('is2D').should('equal', css.is2D)
-      .get('@js').its('is2D').should('equal', new CSSMatrix(dom).is2D)
-      .get('@js').its('isIdentity').should('equal', css.isIdentity)
-      .get('@js').its('isIdentity').should('equal', new CSSMatrix(dom).isIdentity)
+    expect(css.is2D).to.equal(dom.is2D)
+    expect(css.is2D).to.equal(new CSSMatrix(css).is2D)
+    expect(css.isIdentity).to.equal(dom.isIdentity)
+    expect(css.isIdentity).to.equal((new CSSMatrix(dom)).isIdentity)
+
   });
 
   it('Test specific private methods', () => {
-    cy.log('CSSMatrix.rotateAxisAngle specific error').then(() => {
-      try {
-        // @ts-ignore
-        new CSSMatrix().rotateAxisAngle('a','true','wombat','05');
-      } catch (err) {
-        expect(err).to.be.instanceOf(TypeError);
-        expect(err).to.have.property('message', 'CSSMatrix: expecting 4 values');
-      }
-    });
-
-    cy.log('CSSMatrix.rotate').then(() => {
-      const d1 = new DOMMatrix().rotate(15);
-      const m1 = new CSSMatrix().rotate(15);
-
-      cy.get('.bg-primary').then(($el) => {
-          $el[0].style.transform = m1.toString();
-        })
-        .get('.bg-secondary').then(($el) => {
-          $el[0].style.transform = d1.toString();
-        })
-      expect(m1.isIdentity).to.equal(d1.isIdentity);
-      expect(m1.is2D).to.equal(d1.is2D);
-
-      // for some reason DOMMatrix in 
-      // expect(m1.toFloat32Array()).to.deep.equal(d1.toFloat32Array());
-      // expect(m1.toFloat64Array()).to.deep.equal(d1.toFloat64Array());
-      expect(Array.from(m1.toFloat32Array()).map(roundTo4))
-        .to.deep.equal(Array.from(d1.toFloat32Array()).map(roundTo4));
-      expect(Array.from(m1.toFloat64Array()).map(roundTo4))
-        .to.deep.equal(Array.from(d1.toFloat64Array()).map(roundTo4));
-    });
-
-    cy.log('CSSMatrix.rotate(x:25, y:15)').then(() => {
+    try {
+      // @ts-ignore
+      new CSSMatrix().rotateAxisAngle('a','true','wombat','05');
+    } catch (err) {
+      expect(err).to.be.instanceOf(TypeError);
+      expect(err).to.have.property('message', 'CSSMatrix: expecting 4 values');
+    }
+
+    const d1 = new DOMMatrix().rotate(15);
+    const m1 = new CSSMatrix().rotate(15);
+
+    const cssDiv = container.querySelector('.bg-primary') as HTMLElement;
+    const domDiv = container.querySelector('.bg-secondary') as HTMLElement;
+
+    console.log('Some initial testing');
+
+    cssDiv.style.transform = m1.toString();
+    domDiv.style.transform = d1.toString();
+    expect(m1.isIdentity).to.equal(d1.isIdentity);
+    expect(m1.is2D).to.equal(d1.is2D);
+
+    // for some reason DOMMatrix in 
+    // expect(m1.toFloat32Array()).to.deep.equal(d1.toFloat32Array());
+    // expect(m1.toFloat64Array()).to.deep.equal(d1.toFloat64Array());
+    expect(Array.from(m1.toFloat32Array()).map(roundTo4))
+      .to.deep.equal(Array.from(d1.toFloat32Array()).map(roundTo4));
+    expect(Array.from(m1.toFloat64Array()).map(roundTo4))
+      .to.deep.equal(Array.from(d1.toFloat64Array()).map(roundTo4));
+
+    console.log('CSSMatrix.rotate(x:25, y:15)');
       const d2 = new DOMMatrix().rotate(25,15);
       const m2 = new CSSMatrix().rotate(25,15);
-      cy.get('.bg-primary').then(($el) => {
-          $el[0].style.transform = m2.toString();
-        })
-        .get('.bg-secondary').then(($el) => {
-          $el[0].style.transform = d2.toString();
-        })
+      cssDiv.style.transform = m2.toString();
+      domDiv.style.transform = d2.toString();
 
       expect(m2.isIdentity).to.equal(d2.isIdentity);
       expect(m2.is2D).to.equal(d2.is2D);
@@ -143,18 +132,14 @@ describe('DOMMatrix Class Test', () => {
         .to.deep.equal(Array.from(d2.toFloat32Array()).map(roundTo4));
       expect(Array.from(m2.toFloat64Array()).map(roundTo4))
         .to.deep.equal(Array.from(d2.toFloat64Array()).map(roundTo4));
-    });
 
-    cy.log('CSSMatrix.translate(x:150)').then(() => {
+
+    console.log('CSSMatrix.translate(x:150)');
       const d3 = new DOMMatrix().translate(150);
       const m3 = new CSSMatrix().translate(150);
 
-      cy.get('.bg-primary').then(($el) => {
-          $el[0].style.transform = m3.toString();
-        })
-        .get('.bg-secondary').then(($el) => {
-          $el[0].style.transform = d3.toString();
-        })
+      cssDiv.style.transform = m3.toString();
+      domDiv.style.transform = d3.toString();
       expect(m3.isIdentity).to.equal(d3.isIdentity);
       expect(m3.is2D).to.equal(d3.is2D);
       // expect(m3.toFloat32Array()).to.deep.equal(d3.toFloat32Array());
@@ -163,18 +148,13 @@ describe('DOMMatrix Class Test', () => {
         .to.deep.equal(Array.from(d3.toFloat32Array()).map(roundTo4));
       expect(Array.from(m3.toFloat64Array()).map(roundTo4))
         .to.deep.equal(Array.from(d3.toFloat64Array()).map(roundTo4));
-    });
 
-    cy.log('CSSMatrix.skew(x:15, y:-20)').then(() => {
+    console.log('CSSMatrix.skew(x:15, y:-20)');
       const d4 = new DOMMatrix('skew(15deg, -20deg)');
       const m4 = new CSSMatrix().skew(15, -20);
-      cy.log('In this test we\'re addapting to the output of the native DOMMatrix method since it doesn\'t support the skew() method itself.')
-        .get('.bg-primary').then(($el) => {
-          $el[0].style.transform = m4.toString();
-        })
-        .get('.bg-secondary').then(($el) => {
-          $el[0].style.transform = d4.toString();
-        })
+      console.log('In this test we\'re addapting to the output of the native DOMMatrix method since it doesn\'t support the skew() method itself.');
+        cssDiv.style.transform = m4.toString();
+        domDiv.style.transform = d4.toString();
         expect(m4.isIdentity).to.equal(d4.isIdentity);
         expect(m4.is2D).to.equal(d4.is2D);
         // expect(m4.toFloat32Array()).to.deep.equal(d4.toFloat32Array());
@@ -183,17 +163,13 @@ describe('DOMMatrix Class Test', () => {
           .to.deep.equal(Array.from(d4.toFloat32Array()).map(roundTo4));
         expect(Array.from(m4.toFloat64Array()).map(roundTo4))
           .to.deep.equal(Array.from(d4.toFloat64Array()).map(roundTo4));
-    });
 
-    cy.log('CSSMatrix.scale(x:1.3)').then(() => {
+    console.log('CSSMatrix.scale(x:1.3)');
       const d5 = new DOMMatrix().scale(1.3);
       const m5 = new CSSMatrix().scale(1.3);
-      cy.get('.bg-primary').then(($el) => {
-            $el[0].style.transform = m5.toString();
-        })
-        .get('.bg-secondary').then(($el) => {
-          $el[0].style.transform = d5.toString();
-        })
+      
+      cssDiv.style.transform = m5.toString();
+      domDiv.style.transform = d5.toString();
       expect(m5.isIdentity).to.equal(d5.isIdentity);
       expect(m5.is2D).to.equal(d5.is2D);
       // expect(m5.toFloat32Array()).to.deep.equal(d5.toFloat32Array());
@@ -202,17 +178,12 @@ describe('DOMMatrix Class Test', () => {
         .to.deep.equal(Array.from(d5.toFloat32Array()).map(roundTo4));
       expect(Array.from(m5.toFloat64Array()).map(roundTo4))
         .to.deep.equal(Array.from(d5.toFloat64Array()).map(roundTo4));
-    });
 
-    cy.log('CSSMatrix.scale(x:1.3,y:1.8)').then(() => {
+    console.log('CSSMatrix.scale(x:1.3,y:1.8)');
       const d6 = new DOMMatrix().scale(1.3,1.8);
       const m6 = new CSSMatrix().scale(1.3,1.8);
-      cy.get('.bg-primary').then(($el) => {
-          $el[0].style.transform = m6.toString();
-        })
-        .get('.bg-secondary').then(($el) => {
-          $el[0].style.transform = d6.toString();
-        })
+      cssDiv.style.transform = m6.toString();
+      domDiv.style.transform = d6.toString();
       expect(m6.isIdentity).to.equal(d6.isIdentity);
       expect(m6.is2D).to.equal(d6.is2D);
       // expect(m6.toFloat32Array()).to.deep.equal(d6.toFloat32Array());
@@ -221,29 +192,27 @@ describe('DOMMatrix Class Test', () => {
         .to.deep.equal(Array.from(d6.toFloat32Array()).map(roundTo4));
       expect(Array.from(m6.toFloat64Array()).map(roundTo4))
         .to.deep.equal(Array.from(d6.toFloat64Array()).map(roundTo4));
-    });
 
-    cy.log('CSSMatrix.transformPoint').then(() => {
+    console.log('CSSMatrix.transformPoint');
       const p1 = new DOMPoint(15, 20, 35, 1);
       const p2 = { x: 15, y: 20, z: 35, w: 1};
       const dp = new DOMMatrix().rotate(15).translate(15, 15);
       const mp = new CSSMatrix().rotate(15).translate(15, 15);
   
-      cy.log('For some reason the native DOMMatrix again falsely claims **is2D** to be true');
+      console.log('For some reason the native DOMMatrix again falsely claims **is2D** to be true');
       expect(mp.isIdentity).to.equal(dp.isIdentity);
       expect(mp.is2D).to.equal(dp.is2D);
       expect(mp.toFloat32Array()).to.deep.equal(dp.toFloat32Array());
       expect(mp.toFloat64Array()).to.deep.equal(dp.toFloat64Array());
       expect(mp.transformPoint(p1)).to.deep.equal(dp.transformPoint(p1));
       expect(mp.transformPoint(p2)).to.deep.equal(dp.transformPoint(p2).toJSON());
-    });
   });
 
   it('Test init a 6 values array', () => {
     const test = [0.9659, 0.25879, -0.2588, 0.9659, -1.53961, -1.53961] as Matrix;
     const m1 = new CSSMatrix(test);
     // const m2 = new CSSMatrix(...test);
-    const m3 = new CSSMatrix([...test]);
+    const m3 = new CSSMatrix(test);
     const m4 = new DOMMatrix(test);
 
     expect(m1.toFloat64Array()).to.deep.equal(m3.toFloat64Array())
@@ -272,7 +241,7 @@ describe('DOMMatrix Class Test', () => {
     expect(CSSMatrix.fromMatrix(m.toJSON())).to.deep.equal(m);
 
     try {
-      // @ts-ignore
+      // @ts-expect-error
       CSSMatrix.fromString(source);
     } catch (err) {
       expect(err).to.be.instanceOf(TypeError);
@@ -306,23 +275,25 @@ describe('DOMMatrix Class Test', () => {
       const str = testSamples[test];
       const css = new CSSMatrix(str);
       const dom = new DOMMatrix(str);
+      const cssDiv = container.querySelector('.bg-primary') as HTMLElement;
+      const domDiv = container.querySelector('.bg-secondary') as HTMLElement;
       
-      cy.get('.bg-primary').then(($el) => {
-        $el[0].style.transform = css.toString();
-      });
-      cy.get('.bg-secondary').then(($el) => {
-        $el[0].style.transform = dom.toString();
-      });
+      cssDiv.style.transform = css.toString();
+      domDiv.style.transform = dom.toString();
 
-      cy.log('Due to the nature of the native DOMMatrix RegExp, for consistency reasons we\'re rounding numbers to 6 decimals in this test.')
+      console.log('Due to the nature of the native DOMMatrix RegExp, for consistency reasons we\'re rounding numbers to 6 decimals in this test.')
 
       expect(Array.from(css.toFloat32Array()).map(roundTo4))
         .to.deep.equal(Array.from(dom.toFloat32Array()).map(roundTo4));
 
-      cy.wrap(css).as('css')
-        .log('The native `DOMMatrix` is a little weird when it comes to rotateAxisAngle, it falsely claims the identity matrix is NOT `is2D`')
-        .get('@css').its('isIdentity').should((isIdentity) => expect(isIdentity).to.equal(dom.isIdentity))
-        .get('@css').its('is2D').should((test === 'rotate3d1' ? 'not.equal' : 'equal'), dom.is2D);
-    });
+      console.log('The native `DOMMatrix` is a little weird when it comes to rotateAxisAngle, it falsely claims the identity matrix is NOT `is2D`');
+
+      expect(css.isIdentity).to.equal(dom.isIdentity)
+      if (test === 'rotate3d1') {
+        expect(css.is2D).to.not.equal(dom.is2D)
+      } else {
+        expect(css.is2D).to.equal(dom.is2D)
+      }
+    })
   })
 });

package/{cypress/test.html → test/fixtures/getExampleDom.ts}

@@ -1,35 +1,38 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
-  <title>DOMMatrix Test</title>
-  <meta name="description" content="DOMMatrix Shim Demo">
-  <meta name="keywords" content="javascript,svg,svg path,dommatrix,cssmatrix">
-  <meta name="author" content="thednp">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
-  <style>
-    .box {height: 200px;}
-    #dom, #css {transition: transform 0.5s ease;}
-  </style>
-</head>
-<body class="container">
-  <h1 class="mt-3 mt-md-5"><a class="text-decoration-none" href="https://github.com/thednp/DOMMatrix">DOMMatrix Shim Test</a></h1>
-
-  <div class="row">
-    <div id="css" class="col-12 col-md-6">
-      <div class="box bg-primary text-white p-3 my-3 text-center align-self-center rounded">
-        <b>CSSMatrix</b><br><span class="row"></span>
-      </div>
-    </div>
-    <div id="dom" class="col-12 col-md-6">
-      <div class="box bg-secondary text-white p-3 my-3 text-center align-self-center rounded">
-        <b>DOMMatrix</b><br><span class="row"></span>
-      </div>
-    </div>
-  </div>
-
-</body>
-
-</html>
+export const getExampleDOM = () => {
+  // const CSS = await fetch("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css").then(r => r.text());
+  // This is just a raw example of setting up some DOM
+  // that we can interact with. Swap this with your UI
+  // framework of choice 😉
+  // const div = document.createElement('div');
+  const HTML = document.documentElement;
+  HTML.innerHTML = 
+`<head>
+  <meta charset="UTF-8">
+  <title>DOMMatrix Testing Page</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
+  <style>
+    .box {height: 200px;}
+    #dom, #css {transition: transform 0.5s ease;}
+  </style>
+</head>
+<bo<body class="container">
+  <h1 class="mt-3 mt-md-5"><a class="text-decoration-none" href="https://github.com/thednp/DOMMatrix">DOMMatrix Shim Test</a></h1>
+
+  <div class="row">
+    <div id="css" class="col-12 col-md-6">
+      <div class="box bg-primary text-white p-3 my-3 text-center align-self-center rounded">
+        <b>CSSMatrix</b><br><span class="row"></span>
+      </div>
+    </div>
+    <div id="dom" class="col-12 col-md-6">
+      <div class="box bg-secondary text-white p-3 my-3 text-center align-self-center rounded">
+        <b>DOMMatrix</b><br><span class="row"></span>
+      </div>
+    </div>
+  </div>
+
+</body>
+`;
+
+  return HTML;
+};

package/vitest.config-ui.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+
+
+export default defineConfig({
+  test: {
+    globals: true,
+    coverage: {
+      provider: "istanbul",
+      reporter: ["html", "text", "lcov"],
+      enabled: true,
+      include: ["src/**/*.{ts,tsx}"],
+    },
+    browser: {
+      provider: 'preview', // or 'webdriverio'
+      enabled: true,
+      headless: false,
+      name: 'chromium', // browser name is required
+      // enableUI: true
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    coverage: {
+      provider: "istanbul",
+      reporter: ["html", "text", "lcov"],
+      enabled: true,
+      include: ["src/**/*.{ts,tsx}"],
+    },
+    browser: {
+      provider: 'playwright', // or 'webdriverio'
+      enabled: true,
+      headless: true,
+      name: 'chromium', // browser name is required
+    },
+  },
+});

package/cypress/plugins/esbuild-istanbul.ts

@@ -1,50 +0,0 @@
-// sources
-// * https://github.com/enketo/enketo-express/blob/master/tools/esbuild-plugin-istanbul.js
-'use strict';
-import esbuild from 'esbuild';
-import { promises } from 'fs';
-import { createInstrumenter } from 'istanbul-lib-instrument';
-import { extname, sep } from 'path';
-import tsCompile from './tsCompile';
-
-// import Cypress settings
-const sourceFolder = 'src';
-const [name] = process.cwd().split(sep).slice(-1);
-
-const sourceFilter = `${name}${sep}${sourceFolder}`;
-const instrumenter = createInstrumenter({
-  compact: false,
-  esModules: true,
-  preserveComments: true,
-  autoWrap: true,
-});
-
-const createEsbuildIstanbulPlugin = (): esbuild.Plugin => {
-  return {
-    name: 'istanbul',
-    setup(build: esbuild.PluginBuild) {
-      build.onLoad(
-        { filter: /\.(ts|tsx)$/ },
-        async ({ path }: esbuild.OnLoadArgs): Promise<{ contents: string } & Record<string, any>> => {
-          
-          if (!path.includes(sourceFilter)) {
-            // console.log("> compiling typescript %s for output build", path);
-            const contents = await promises.readFile(path, 'utf8');
-            return {
-              contents: ['.ts', '.tsx'].includes(extname(path)) ? tsCompile(path).outputText : contents,
-            };
-          }
-
-          // console.log("🧡 instrumenting %s for output coverage", path);
-          const { outputText, sourceMap } = tsCompile(path);
-
-          return {
-            contents: instrumenter.instrumentSync(outputText, path, sourceMap),
-          };
-        },
-      );
-    },
-  };
-};
-
-export default createEsbuildIstanbulPlugin;

package/cypress/plugins/tsCompile.ts

@@ -1,34 +0,0 @@
-// compile.ts
-import TypeScript from 'typescript';
-import { basename } from 'path';
-import { RawSourceMap } from 'source-map';
-import { readFileSync } from 'fs';
-
-export default function tsCompile(
-  path: string,
-  ops?: Partial<TypeScript.TranspileOptions>,
-): TypeScript.TranspileOutput & { sourceMap: RawSourceMap } {
-  // Default options -- you could also perform a merge, or use the project tsconfig.json
-  const options: TypeScript.TranspileOptions = Object.assign(
-    {
-      compilerOptions: {
-        allowJs: true,
-        esModuleInterop: true,
-        removeComments: false,
-        target: 99, // ESNext
-        allowSyntheticDefaultImports: true,
-        isolatedModules: true,
-        noEmitHelpers: true,
-        sourceMap: true,
-      } as Partial<TypeScript.CompilerOptions>,
-    },
-    ops,
-  );
-  const contents = readFileSync(path, { encoding: 'utf8' });
-  const { outputText, sourceMapText } = TypeScript.transpileModule(contents, options);
-  const sourceMap: RawSourceMap = JSON.parse(sourceMapText || '');
-  sourceMap.file = basename(path);
-  sourceMap.sources = [basename(path)];
-
-  return { outputText, sourceMap, sourceMapText };
-}

package/cypress/support/commands.ts

@@ -1,37 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }

package/cypress/support/e2e.ts

@@ -1,21 +0,0 @@
-// ***********************************************************
-// This example support/e2e.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import "./commands";
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-import "@cypress/code-coverage/support";

package/cypress.config.ts

@@ -1,29 +0,0 @@
-import { defineConfig } from "cypress";
-import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
-import createEsbuildIstanbulPlugin from "./cypress/plugins/esbuild-istanbul";
-
-async function setupNodeEvents(
-  on: Cypress.PluginEvents,
-  config: Cypress.PluginConfigOptions
-): Promise<Cypress.PluginConfigOptions> {
-  await require("@cypress/code-coverage/task")(on, config);
-
-  on(
-    "file:preprocessor",
-    createBundler({
-      plugins: [createEsbuildIstanbulPlugin()],
-    })
-  );
-
-  // Make sure to return the config object as it might have been modified by the plugin.
-  return config;
-}
-
-export default defineConfig({
-  e2e: {
-    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
-    supportFile: "cypress/support/e2e.ts",
-    video: false,
-    setupNodeEvents,
-  },
-});