@thednp/dommatrix 2.0.6 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,32 +1,36 @@
1
- /// <reference types="cypress" />
1
+ import { expect, it, describe, vi, beforeEach, afterEach } from 'vitest';
2
+ import { getExampleDOM } from './fixtures/getExampleDom';
2
3
 
3
- import CSSMatrix from '../../src/index';
4
- import type { Matrix, Matrix3d } from '../../src/types';
5
- import testSamples from '../fixtures/testSamples';
4
+ import CSSMatrix from '../src/index';
5
+ import type { Matrix, Matrix3d } from '../src/types';
6
+ import testSamples from './fixtures/testSamples';
6
7
 
7
- describe('DOMMatrix Class Test', () => {
8
+ const roundTo4 = (x: number) => Math.round(x * 10000) / 10000
8
9
 
9
- beforeEach(() => {
10
- cy.visit('cypress/test.html')
10
+ describe('DOMMatrix Class Test', () => {
11
+ let container: HTMLElement;
12
+ beforeEach(async () => {
13
+ container = getExampleDOM();
14
+ await vi.waitUntil(() => container.querySelector('div') !== null, { timeout: 150 });
15
+ });
16
+ afterEach(async () => {
17
+ document.documentElement.innerHTML = '';
11
18
  });
12
19
 
13
20
  it('Test init with no parameter, expect same output as native DOMMatrix', () => {
14
21
  const css = new CSSMatrix();
15
22
  const css1 = new CSSMatrix().setMatrixValue();
16
23
  const dom = new DOMMatrix();
17
- cy.wrap(css).as('css')
18
- .get('@css').its('is2D').should('equal', dom.is2D)
19
- .get('@css').its('isIdentity').should('equal', dom.isIdentity)
20
- .get('@css').should(($this) => {
21
- expect(JSON.stringify($this)).to.equal(JSON.stringify(dom));
22
- expect(JSON.stringify($this)).to.equal(JSON.stringify(css1));
23
- })
24
+
25
+ expect(css.is2D).to.equal(dom.is2D);
26
+ expect(css.isIdentity).to.equal(dom.isIdentity);
27
+ expect(JSON.stringify(css)).to.equal(JSON.stringify(dom));
28
+ expect(JSON.stringify(css)).to.equal(JSON.stringify(css1));
24
29
  });
25
30
 
26
31
  it('Test init with invalid array, expect error', () => {
27
32
  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'];
28
33
  try {
29
- // @ts-ignore
30
34
  CSSMatrix.fromArray(test);
31
35
  } catch (err) {
32
36
  expect(err).to.be.instanceOf(TypeError);
@@ -62,7 +66,7 @@ describe('DOMMatrix Class Test', () => {
62
66
 
63
67
  [css1, css2, css3].forEach((c) => {
64
68
  try {
65
- // @ts-ignore
69
+ // @ts-expect-error
66
70
  new CSSMatrix(c);
67
71
  } catch (err) {
68
72
  expect(err).to.be.instanceOf(TypeError);
@@ -75,145 +79,140 @@ describe('DOMMatrix Class Test', () => {
75
79
  const css = new CSSMatrix().rotate(15, 15);
76
80
  const dom = new DOMMatrix().rotate(15, 15);
77
81
 
78
- cy.wrap(new CSSMatrix(css)).as('cc')
79
- .get('@cc').its('is2D').should('equal', css.is2D)
80
- .get('@cc').its('is2D').should('equal', new CSSMatrix(dom).is2D)
81
- .get('@cc').its('isIdentity').should('equal', css.isIdentity)
82
- .get('@cc').its('isIdentity').should('equal', new CSSMatrix(dom).isIdentity);
83
-
84
- cy.wrap(css.toJSON()).as('js')
85
- .get('@js').its('is2D').should('equal', css.is2D)
86
- .get('@js').its('is2D').should('equal', new CSSMatrix(dom).is2D)
87
- .get('@js').its('isIdentity').should('equal', css.isIdentity)
88
- .get('@js').its('isIdentity').should('equal', new CSSMatrix(dom).isIdentity)
82
+ expect(css.is2D).to.equal(dom.is2D)
83
+ expect(css.is2D).to.equal(new CSSMatrix(css).is2D)
84
+ expect(css.isIdentity).to.equal(dom.isIdentity)
85
+ expect(css.isIdentity).to.equal((new CSSMatrix(dom)).isIdentity)
86
+
89
87
  });
90
88
 
91
89
  it('Test specific private methods', () => {
92
- cy.log('CSSMatrix.rotateAxisAngle specific error').then(() => {
93
- try {
94
- // @ts-ignore
95
- new CSSMatrix().rotateAxisAngle('a','true','wombat','05');
96
- } catch (err) {
97
- expect(err).to.be.instanceOf(TypeError);
98
- expect(err).to.have.property('message', 'CSSMatrix: expecting 4 values');
99
- }
100
- });
101
-
102
- cy.log('CSSMatrix.rotate').then(() => {
103
- const d1 = new DOMMatrix().rotate(15);
104
- const m1 = new CSSMatrix().rotate(15);
105
-
106
- cy.get('.bg-primary').then(($el) => {
107
- $el[0].style.transform = m1.toString();
108
- })
109
- .get('.bg-secondary').then(($el) => {
110
- $el[0].style.transform = d1.toString();
111
- })
112
- expect(m1.isIdentity).to.equal(d1.isIdentity);
113
- expect(m1.is2D).to.equal(d1.is2D);
114
- expect(m1.toFloat32Array()).to.deep.equal(d1.toFloat32Array());
115
- expect(m1.toFloat64Array()).to.deep.equal(d1.toFloat64Array());
116
- });
117
-
118
- cy.log('CSSMatrix.rotate(x:25, y:15)').then(() => {
90
+ try {
91
+ // @ts-ignore
92
+ new CSSMatrix().rotateAxisAngle('a','true','wombat','05');
93
+ } catch (err) {
94
+ expect(err).to.be.instanceOf(TypeError);
95
+ expect(err).to.have.property('message', 'CSSMatrix: expecting 4 values');
96
+ }
97
+
98
+ const d1 = new DOMMatrix().rotate(15);
99
+ const m1 = new CSSMatrix().rotate(15);
100
+
101
+ const cssDiv = container.querySelector('.bg-primary') as HTMLElement;
102
+ const domDiv = container.querySelector('.bg-secondary') as HTMLElement;
103
+
104
+ console.log('Some initial testing');
105
+
106
+ cssDiv.style.transform = m1.toString();
107
+ domDiv.style.transform = d1.toString();
108
+ expect(m1.isIdentity).to.equal(d1.isIdentity);
109
+ expect(m1.is2D).to.equal(d1.is2D);
110
+
111
+ // for some reason DOMMatrix in
112
+ // expect(m1.toFloat32Array()).to.deep.equal(d1.toFloat32Array());
113
+ // expect(m1.toFloat64Array()).to.deep.equal(d1.toFloat64Array());
114
+ expect(Array.from(m1.toFloat32Array()).map(roundTo4))
115
+ .to.deep.equal(Array.from(d1.toFloat32Array()).map(roundTo4));
116
+ expect(Array.from(m1.toFloat64Array()).map(roundTo4))
117
+ .to.deep.equal(Array.from(d1.toFloat64Array()).map(roundTo4));
118
+
119
+ console.log('CSSMatrix.rotate(x:25, y:15)');
119
120
  const d2 = new DOMMatrix().rotate(25,15);
120
121
  const m2 = new CSSMatrix().rotate(25,15);
121
- cy.get('.bg-primary').then(($el) => {
122
- $el[0].style.transform = m2.toString();
123
- })
124
- .get('.bg-secondary').then(($el) => {
125
- $el[0].style.transform = d2.toString();
126
- })
122
+ cssDiv.style.transform = m2.toString();
123
+ domDiv.style.transform = d2.toString();
127
124
 
128
125
  expect(m2.isIdentity).to.equal(d2.isIdentity);
129
126
  expect(m2.is2D).to.equal(d2.is2D);
130
- expect(m2.toFloat32Array()).to.deep.equal(d2.toFloat32Array());
131
- expect(m2.toFloat64Array()).to.deep.equal(d2.toFloat64Array());
132
- });
133
127
 
134
- cy.log('CSSMatrix.translate(x:150)').then(() => {
128
+ // same here
129
+ // expect(m2.toFloat32Array()).to.deep.equal(d2.toFloat32Array());
130
+ // expect(m2.toFloat64Array()).to.deep.equal(d2.toFloat64Array());
131
+ expect(Array.from(m2.toFloat32Array()).map(roundTo4))
132
+ .to.deep.equal(Array.from(d2.toFloat32Array()).map(roundTo4));
133
+ expect(Array.from(m2.toFloat64Array()).map(roundTo4))
134
+ .to.deep.equal(Array.from(d2.toFloat64Array()).map(roundTo4));
135
+
136
+
137
+ console.log('CSSMatrix.translate(x:150)');
135
138
  const d3 = new DOMMatrix().translate(150);
136
139
  const m3 = new CSSMatrix().translate(150);
137
140
 
138
- cy.get('.bg-primary').then(($el) => {
139
- $el[0].style.transform = m3.toString();
140
- })
141
- .get('.bg-secondary').then(($el) => {
142
- $el[0].style.transform = d3.toString();
143
- })
141
+ cssDiv.style.transform = m3.toString();
142
+ domDiv.style.transform = d3.toString();
144
143
  expect(m3.isIdentity).to.equal(d3.isIdentity);
145
144
  expect(m3.is2D).to.equal(d3.is2D);
146
- expect(m3.toFloat32Array()).to.deep.equal(d3.toFloat32Array());
147
- expect(m3.toFloat64Array()).to.deep.equal(d3.toFloat64Array());
148
- });
149
-
150
- cy.log('CSSMatrix.skew(x:15, y:-20)').then(() => {
145
+ // expect(m3.toFloat32Array()).to.deep.equal(d3.toFloat32Array());
146
+ // expect(m3.toFloat64Array()).to.deep.equal(d3.toFloat64Array());
147
+ expect(Array.from(m3.toFloat32Array()).map(roundTo4))
148
+ .to.deep.equal(Array.from(d3.toFloat32Array()).map(roundTo4));
149
+ expect(Array.from(m3.toFloat64Array()).map(roundTo4))
150
+ .to.deep.equal(Array.from(d3.toFloat64Array()).map(roundTo4));
151
+
152
+ console.log('CSSMatrix.skew(x:15, y:-20)');
151
153
  const d4 = new DOMMatrix('skew(15deg, -20deg)');
152
154
  const m4 = new CSSMatrix().skew(15, -20);
153
- 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.')
154
- .get('.bg-primary').then(($el) => {
155
- $el[0].style.transform = m4.toString();
156
- })
157
- .get('.bg-secondary').then(($el) => {
158
- $el[0].style.transform = d4.toString();
159
- })
155
+ 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.');
156
+ cssDiv.style.transform = m4.toString();
157
+ domDiv.style.transform = d4.toString();
160
158
  expect(m4.isIdentity).to.equal(d4.isIdentity);
161
159
  expect(m4.is2D).to.equal(d4.is2D);
162
- expect(m4.toFloat32Array()).to.deep.equal(d4.toFloat32Array());
163
- expect(m4.toFloat64Array()).to.deep.equal(d4.toFloat64Array());
164
- });
165
-
166
- cy.log('CSSMatrix.scale(x:1.3)').then(() => {
160
+ // expect(m4.toFloat32Array()).to.deep.equal(d4.toFloat32Array());
161
+ // expect(m4.toFloat64Array()).to.deep.equal(d4.toFloat64Array());
162
+ expect(Array.from(m4.toFloat32Array()).map(roundTo4))
163
+ .to.deep.equal(Array.from(d4.toFloat32Array()).map(roundTo4));
164
+ expect(Array.from(m4.toFloat64Array()).map(roundTo4))
165
+ .to.deep.equal(Array.from(d4.toFloat64Array()).map(roundTo4));
166
+
167
+ console.log('CSSMatrix.scale(x:1.3)');
167
168
  const d5 = new DOMMatrix().scale(1.3);
168
169
  const m5 = new CSSMatrix().scale(1.3);
169
- cy.get('.bg-primary').then(($el) => {
170
- $el[0].style.transform = m5.toString();
171
- })
172
- .get('.bg-secondary').then(($el) => {
173
- $el[0].style.transform = d5.toString();
174
- })
170
+
171
+ cssDiv.style.transform = m5.toString();
172
+ domDiv.style.transform = d5.toString();
175
173
  expect(m5.isIdentity).to.equal(d5.isIdentity);
176
174
  expect(m5.is2D).to.equal(d5.is2D);
177
- expect(m5.toFloat32Array()).to.deep.equal(d5.toFloat32Array());
178
- expect(m5.toFloat64Array()).to.deep.equal(d5.toFloat64Array());
179
- });
180
-
181
- cy.log('CSSMatrix.scale(x:1.3,y:1.8)').then(() => {
175
+ // expect(m5.toFloat32Array()).to.deep.equal(d5.toFloat32Array());
176
+ // expect(m5.toFloat64Array()).to.deep.equal(d5.toFloat64Array());
177
+ expect(Array.from(m5.toFloat32Array()).map(roundTo4))
178
+ .to.deep.equal(Array.from(d5.toFloat32Array()).map(roundTo4));
179
+ expect(Array.from(m5.toFloat64Array()).map(roundTo4))
180
+ .to.deep.equal(Array.from(d5.toFloat64Array()).map(roundTo4));
181
+
182
+ console.log('CSSMatrix.scale(x:1.3,y:1.8)');
182
183
  const d6 = new DOMMatrix().scale(1.3,1.8);
183
184
  const m6 = new CSSMatrix().scale(1.3,1.8);
184
- cy.get('.bg-primary').then(($el) => {
185
- $el[0].style.transform = m6.toString();
186
- })
187
- .get('.bg-secondary').then(($el) => {
188
- $el[0].style.transform = d6.toString();
189
- })
185
+ cssDiv.style.transform = m6.toString();
186
+ domDiv.style.transform = d6.toString();
190
187
  expect(m6.isIdentity).to.equal(d6.isIdentity);
191
188
  expect(m6.is2D).to.equal(d6.is2D);
192
- expect(m6.toFloat32Array()).to.deep.equal(d6.toFloat32Array());
193
- expect(m6.toFloat64Array()).to.deep.equal(d6.toFloat64Array());
194
- });
195
-
196
- cy.log('CSSMatrix.transformPoint').then(() => {
189
+ // expect(m6.toFloat32Array()).to.deep.equal(d6.toFloat32Array());
190
+ // expect(m6.toFloat64Array()).to.deep.equal(d6.toFloat64Array());
191
+ expect(Array.from(m6.toFloat32Array()).map(roundTo4))
192
+ .to.deep.equal(Array.from(d6.toFloat32Array()).map(roundTo4));
193
+ expect(Array.from(m6.toFloat64Array()).map(roundTo4))
194
+ .to.deep.equal(Array.from(d6.toFloat64Array()).map(roundTo4));
195
+
196
+ console.log('CSSMatrix.transformPoint');
197
197
  const p1 = new DOMPoint(15, 20, 35, 1);
198
198
  const p2 = { x: 15, y: 20, z: 35, w: 1};
199
199
  const dp = new DOMMatrix().rotate(15).translate(15, 15);
200
200
  const mp = new CSSMatrix().rotate(15).translate(15, 15);
201
201
 
202
- cy.log('For some reason the native DOMMatrix again falsely claims **is2D** to be true');
202
+ console.log('For some reason the native DOMMatrix again falsely claims **is2D** to be true');
203
203
  expect(mp.isIdentity).to.equal(dp.isIdentity);
204
204
  expect(mp.is2D).to.equal(dp.is2D);
205
205
  expect(mp.toFloat32Array()).to.deep.equal(dp.toFloat32Array());
206
206
  expect(mp.toFloat64Array()).to.deep.equal(dp.toFloat64Array());
207
207
  expect(mp.transformPoint(p1)).to.deep.equal(dp.transformPoint(p1));
208
208
  expect(mp.transformPoint(p2)).to.deep.equal(dp.transformPoint(p2).toJSON());
209
- });
210
209
  });
211
210
 
212
211
  it('Test init a 6 values array', () => {
213
212
  const test = [0.9659, 0.25879, -0.2588, 0.9659, -1.53961, -1.53961] as Matrix;
214
213
  const m1 = new CSSMatrix(test);
215
214
  // const m2 = new CSSMatrix(...test);
216
- const m3 = new CSSMatrix([...test]);
215
+ const m3 = new CSSMatrix(test);
217
216
  const m4 = new DOMMatrix(test);
218
217
 
219
218
  expect(m1.toFloat64Array()).to.deep.equal(m3.toFloat64Array())
@@ -242,7 +241,7 @@ describe('DOMMatrix Class Test', () => {
242
241
  expect(CSSMatrix.fromMatrix(m.toJSON())).to.deep.equal(m);
243
242
 
244
243
  try {
245
- // @ts-ignore
244
+ // @ts-expect-error
246
245
  CSSMatrix.fromString(source);
247
246
  } catch (err) {
248
247
  expect(err).to.be.instanceOf(TypeError);
@@ -276,24 +275,25 @@ describe('DOMMatrix Class Test', () => {
276
275
  const str = testSamples[test];
277
276
  const css = new CSSMatrix(str);
278
277
  const dom = new DOMMatrix(str);
278
+ const cssDiv = container.querySelector('.bg-primary') as HTMLElement;
279
+ const domDiv = container.querySelector('.bg-secondary') as HTMLElement;
279
280
 
280
- cy.get('.bg-primary').then(($el) => {
281
- $el[0].style.transform = css.toString();
282
- });
283
- cy.get('.bg-secondary').then(($el) => {
284
- $el[0].style.transform = dom.toString();
285
- });
286
- cy.log('Due to the nature of the native DOMMatrix RegExp, for consistency reasons we\'re rounding numbers to 6 decimals in this test.')
287
-
288
- expect(Array.from(css.toFloat32Array()).map(x=> Math.floor(x * 10**6) / 10**6))
289
- .to.deep.equal(Array.from(dom.toFloat32Array()).map(x=> Math.floor(x * 10**6) / 10**6));
290
-
291
- cy.wrap(css).as('css')
292
- .log('The native `DOMMatrix` is a little weird when it comes to rotateAxisAngle, it falsely claims the identity matrix is NOT `is2D`')
293
- .get('@css').its('isIdentity').should((isIdentity) => expect(isIdentity).to.equal(dom.isIdentity))
294
- .get('@css').its('is2D').should((test === 'rotate3d1' ? 'not.equal' : 'equal'), dom.is2D);
295
- });
296
- })
281
+ cssDiv.style.transform = css.toString();
282
+ domDiv.style.transform = dom.toString();
283
+
284
+ console.log('Due to the nature of the native DOMMatrix RegExp, for consistency reasons we\'re rounding numbers to 6 decimals in this test.')
297
285
 
286
+ expect(Array.from(css.toFloat32Array()).map(roundTo4))
287
+ .to.deep.equal(Array.from(dom.toFloat32Array()).map(roundTo4));
298
288
 
299
- });
289
+ console.log('The native `DOMMatrix` is a little weird when it comes to rotateAxisAngle, it falsely claims the identity matrix is NOT `is2D`');
290
+
291
+ expect(css.isIdentity).to.equal(dom.isIdentity)
292
+ if (test === 'rotate3d1') {
293
+ expect(css.is2D).to.not.equal(dom.is2D)
294
+ } else {
295
+ expect(css.is2D).to.equal(dom.is2D)
296
+ }
297
+ })
298
+ })
299
+ });
@@ -1,35 +1,38 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
7
- <title>DOMMatrix Test</title>
8
- <meta name="description" content="DOMMatrix Shim Demo">
9
- <meta name="keywords" content="javascript,svg,svg path,dommatrix,cssmatrix">
10
- <meta name="author" content="thednp">
11
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
12
- <style>
13
- .box {height: 200px;}
14
- #dom, #css {transition: transform 0.5s ease;}
15
- </style>
16
- </head>
17
- <body class="container">
18
- <h1 class="mt-3 mt-md-5"><a class="text-decoration-none" href="https://github.com/thednp/DOMMatrix">DOMMatrix Shim Test</a></h1>
19
-
20
- <div class="row">
21
- <div id="css" class="col-12 col-md-6">
22
- <div class="box bg-primary text-white p-3 my-3 text-center align-self-center rounded">
23
- <b>CSSMatrix</b><br><span class="row"></span>
24
- </div>
25
- </div>
26
- <div id="dom" class="col-12 col-md-6">
27
- <div class="box bg-secondary text-white p-3 my-3 text-center align-self-center rounded">
28
- <b>DOMMatrix</b><br><span class="row"></span>
29
- </div>
30
- </div>
31
- </div>
32
-
33
- </body>
34
-
35
- </html>
1
+ export const getExampleDOM = () => {
2
+ // const CSS = await fetch("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css").then(r => r.text());
3
+ // This is just a raw example of setting up some DOM
4
+ // that we can interact with. Swap this with your UI
5
+ // framework of choice 😉
6
+ // const div = document.createElement('div');
7
+ const HTML = document.documentElement;
8
+ HTML.innerHTML =
9
+ `<head>
10
+ <meta charset="UTF-8">
11
+ <title>DOMMatrix Testing Page</title>
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
13
+ <style>
14
+ .box {height: 200px;}
15
+ #dom, #css {transition: transform 0.5s ease;}
16
+ </style>
17
+ </head>
18
+ <bo<body class="container">
19
+ <h1 class="mt-3 mt-md-5"><a class="text-decoration-none" href="https://github.com/thednp/DOMMatrix">DOMMatrix Shim Test</a></h1>
20
+
21
+ <div class="row">
22
+ <div id="css" class="col-12 col-md-6">
23
+ <div class="box bg-primary text-white p-3 my-3 text-center align-self-center rounded">
24
+ <b>CSSMatrix</b><br><span class="row"></span>
25
+ </div>
26
+ </div>
27
+ <div id="dom" class="col-12 col-md-6">
28
+ <div class="box bg-secondary text-white p-3 my-3 text-center align-self-center rounded">
29
+ <b>DOMMatrix</b><br><span class="row"></span>
30
+ </div>
31
+ </div>
32
+ </div>
33
+
34
+ </body>
35
+ `;
36
+
37
+ return HTML;
38
+ };
File without changes
package/tsconfig.json CHANGED
@@ -2,12 +2,12 @@
2
2
  // https://janessagarrow.com/blog/typescript-and-esbuild/
3
3
  "compilerOptions": {
4
4
  "lib": ["DOM", "ESNext", "DOM.Iterable"],
5
- "types": ["vite", "vite/client", "cypress"],
5
+ // "types": ["vite", "vite/client", "cypress"],
6
6
  "rootDir": "./src",
7
7
  "baseUrl": "./",
8
8
  "module": "ESNext",
9
9
  "target": "ESNext",
10
- "moduleResolution": "Node",
10
+ "moduleResolution": "Bundler",
11
11
  "allowJs": true,
12
12
  "forceConsistentCasingInFileNames": true,
13
13
  "useDefineForClassFields": true,
@@ -25,5 +25,5 @@
25
25
  "checkJs": true
26
26
  },
27
27
  "include": ["src/*"],
28
- "exclude": ["node_modules", "experiments", "coverage"],
28
+ "exclude": ["node_modules", "experiments", "coverage"]
29
29
  }
package/vite.config.ts CHANGED
File without changes
@@ -0,0 +1,21 @@
1
+ import { defineConfig } from "vitest/config";
2
+
3
+
4
+ export default defineConfig({
5
+ test: {
6
+ globals: true,
7
+ coverage: {
8
+ provider: "istanbul",
9
+ reporter: ["html", "text", "lcov"],
10
+ enabled: true,
11
+ include: ["src/**/*.{ts,tsx}"],
12
+ },
13
+ browser: {
14
+ provider: 'preview', // or 'webdriverio'
15
+ enabled: true,
16
+ headless: false,
17
+ name: 'chromium', // browser name is required
18
+ // enableUI: true
19
+ },
20
+ },
21
+ });
@@ -0,0 +1,19 @@
1
+ import { defineConfig } from "vitest/config";
2
+
3
+ export default defineConfig({
4
+ test: {
5
+ globals: true,
6
+ coverage: {
7
+ provider: "istanbul",
8
+ reporter: ["html", "text", "lcov"],
9
+ enabled: true,
10
+ include: ["src/**/*.{ts,tsx}"],
11
+ },
12
+ browser: {
13
+ provider: 'playwright', // or 'webdriverio'
14
+ enabled: true,
15
+ headless: true,
16
+ name: 'chromium', // browser name is required
17
+ },
18
+ },
19
+ });
@@ -1,50 +0,0 @@
1
- // sources
2
- // * https://github.com/enketo/enketo-express/blob/master/tools/esbuild-plugin-istanbul.js
3
- 'use strict';
4
- import esbuild from 'esbuild';
5
- import { promises } from 'fs';
6
- import { createInstrumenter } from 'istanbul-lib-instrument';
7
- import { extname, sep } from 'path';
8
- import tsCompile from './tsCompile';
9
-
10
- // import Cypress settings
11
- const sourceFolder = 'src';
12
- const [name] = process.cwd().split(sep).slice(-1);
13
-
14
- const sourceFilter = `${name}${sep}${sourceFolder}`;
15
- const instrumenter = createInstrumenter({
16
- compact: false,
17
- esModules: true,
18
- preserveComments: true,
19
- autoWrap: true,
20
- });
21
-
22
- const createEsbuildIstanbulPlugin = (): esbuild.Plugin => {
23
- return {
24
- name: 'istanbul',
25
- setup(build: esbuild.PluginBuild) {
26
- build.onLoad(
27
- { filter: /\.(ts|tsx)$/ },
28
- async ({ path }: esbuild.OnLoadArgs): Promise<{ contents: string } & Record<string, any>> => {
29
-
30
- if (!path.includes(sourceFilter)) {
31
- // console.log("> compiling typescript %s for output build", path);
32
- const contents = await promises.readFile(path, 'utf8');
33
- return {
34
- contents: ['.ts', '.tsx'].includes(extname(path)) ? tsCompile(path).outputText : contents,
35
- };
36
- }
37
-
38
- // console.log("🧡 instrumenting %s for output coverage", path);
39
- const { outputText, sourceMap } = tsCompile(path);
40
-
41
- return {
42
- contents: instrumenter.instrumentSync(outputText, path, sourceMap),
43
- };
44
- },
45
- );
46
- },
47
- };
48
- };
49
-
50
- export default createEsbuildIstanbulPlugin;
@@ -1,34 +0,0 @@
1
- // compile.ts
2
- import TypeScript from 'typescript';
3
- import { basename } from 'path';
4
- import { RawSourceMap } from 'source-map';
5
- import { readFileSync } from 'fs';
6
-
7
- export default function tsCompile(
8
- path: string,
9
- ops?: Partial<TypeScript.TranspileOptions>,
10
- ): TypeScript.TranspileOutput & { sourceMap: RawSourceMap } {
11
- // Default options -- you could also perform a merge, or use the project tsconfig.json
12
- const options: TypeScript.TranspileOptions = Object.assign(
13
- {
14
- compilerOptions: {
15
- allowJs: true,
16
- esModuleInterop: true,
17
- removeComments: false,
18
- target: 99, // ESNext
19
- allowSyntheticDefaultImports: true,
20
- isolatedModules: true,
21
- noEmitHelpers: true,
22
- sourceMap: true,
23
- } as Partial<TypeScript.CompilerOptions>,
24
- },
25
- ops,
26
- );
27
- const contents = readFileSync(path, { encoding: 'utf8' });
28
- const { outputText, sourceMapText } = TypeScript.transpileModule(contents, options);
29
- const sourceMap: RawSourceMap = JSON.parse(sourceMapText || '');
30
- sourceMap.file = basename(path);
31
- sourceMap.sources = [basename(path)];
32
-
33
- return { outputText, sourceMap, sourceMapText };
34
- }
@@ -1,37 +0,0 @@
1
- /// <reference types="cypress" />
2
- // ***********************************************
3
- // This example commands.ts shows you how to
4
- // create various custom commands and overwrite
5
- // existing commands.
6
- //
7
- // For more comprehensive examples of custom
8
- // commands please read more here:
9
- // https://on.cypress.io/custom-commands
10
- // ***********************************************
11
- //
12
- //
13
- // -- This is a parent command --
14
- // Cypress.Commands.add('login', (email, password) => { ... })
15
- //
16
- //
17
- // -- This is a child command --
18
- // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19
- //
20
- //
21
- // -- This is a dual command --
22
- // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23
- //
24
- //
25
- // -- This will overwrite an existing command --
26
- // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27
- //
28
- // declare global {
29
- // namespace Cypress {
30
- // interface Chainable {
31
- // login(email: string, password: string): Chainable<void>
32
- // drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33
- // dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34
- // visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35
- // }
36
- // }
37
- // }
@@ -1,21 +0,0 @@
1
- // ***********************************************************
2
- // This example support/e2e.ts is processed and
3
- // loaded automatically before your test files.
4
- //
5
- // This is a great place to put global configuration and
6
- // behavior that modifies Cypress.
7
- //
8
- // You can change the location of this file or turn off
9
- // automatically serving support files with the
10
- // 'supportFile' configuration option.
11
- //
12
- // You can read more here:
13
- // https://on.cypress.io/configuration
14
- // ***********************************************************
15
-
16
- // Import commands.js using ES2015 syntax:
17
- import "./commands";
18
-
19
- // Alternatively you can use CommonJS syntax:
20
- // require('./commands')
21
- import "@cypress/code-coverage/support";