Skip to content

Commit 7418806

Browse files
mateuszJSmateuszJS
authored
fix: add eslint and tests (#1)
* Add integration tests * update screenshot tests and github actions * fix inconsitent screenshots names * update screenshot * Add flag to enable WebGPU on linux * fix issue with zero workers * MORE FLAGS * Try to run webkit instead of chromium * test with gpu checker * fix webkit test run flags * another shot * fix command * try to emulate gpu with CPU * create env file * remove unused screenshots, didsable playwright github action, rename itnegration tests command in package.json * add eslint * Small linting refactor
1 parent 5b05b5f commit 7418806

File tree

28 files changed

+8222
-2823
lines changed

28 files changed

+8222
-2823
lines changed

‎.github/workflows/playwright.yml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: Playwright Integration Tests
2+
on: {} # disabled workflow until GPU is supported or emulated in github actions
3+
# on:
4+
# pull_request:
5+
# branches: [main, next]
6+
jobs:
7+
test:
8+
timeout-minutes: 10
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v4
12+
- uses: actions/setup-node@v4
13+
with:
14+
node-version: lts/*
15+
- name: Install dependencies
16+
run: npm ci
17+
- name: Install Playwright Browsers
18+
run: npx playwright install --with-deps
19+
- name: Run Playwright tests
20+
env:
21+
CI: true
22+
run: npx playwright test
23+
- uses: actions/upload-artifact@v4
24+
if: always()
25+
with:
26+
name: playwright-report
27+
path: playwright-report/
28+
retention-days: 1

‎.gitignore‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,10 @@ crate/target
66
crate/wasm-pack.log
77
**/.DS_Store
88
.env
9-
.npmrc
9+
.npmrc
10+
11+
# Playwright
12+
/test-results/
13+
/playwright-report/
14+
/blob-report/
15+
/playwright/.cache/

‎.vscode/settings.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"[javascript]": {
3+
"editor.formatOnSave": true
4+
},
5+
"[typescript]": {
6+
"editor.formatOnSave": true
7+
},
8+
"editor.codeActionsOnSave": {
9+
"source.fixAll.eslint": "explicit",
10+
"source.fixAll": "explicit"
11+
},
12+
"eslint.format.enable": true,
13+
}

‎ADRs/no WebGPU tests on CI‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Unfortunately currently I'd need to pay for github actions to get a machine with GPU support, otehrwise WebGPU cannot run(I assume WebGL can be imitated by CPU implementation). So All tests related ot running WebGPU gonna be skipped.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
_Hello there!_
22

33
```bash
4-
npm install @mateuszjs/visual-components
4+
npm i @mateuszjs/magic-render
55
```

‎eslint.config.mjs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// @ts-check
2+
3+
import eslint from "@eslint/js";
4+
import tseslint from "typescript-eslint";
5+
import stylisticJs from "@stylistic/eslint-plugin-js";
6+
7+
export default tseslint.config(
8+
eslint.configs.recommended,
9+
tseslint.configs.recommended,
10+
{
11+
rules: {
12+
"no-multiple-empty-lines": "error",
13+
},
14+
plugins: {
15+
"@stylistic/js": stylisticJs,
16+
},
17+
}
18+
);

‎integration-tests/image-sample.png‎

577 KB
Loading

‎integration-tests/index.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
import initCreator from "../src/index"
3+
4+
async function test() {
5+
const canvas = document.querySelector<HTMLCanvasElement>("canvas")!
6+
const creator = await initCreator(canvas)
7+
8+
const fileInput = document.querySelector<HTMLInputElement>('input')!
9+
fileInput.addEventListener('change', (event) => {
10+
const { files } = (event.target as HTMLInputElement);
11+
if (!files) return;
12+
13+
const img = new Image()
14+
img.src = URL.createObjectURL(files[0]);
15+
img.onload = () => {
16+
creator.addImage(img)
17+
};
18+
})
19+
20+
let offset = 100
21+
const updateImgPositionBtn = document.querySelector<HTMLButtonElement>('#img-position')!
22+
updateImgPositionBtn.addEventListener('click', () => {
23+
creator.updatePoints(0, [
24+
{ x: offset, y: offset },
25+
{ x: offset + 400, y: offset },
26+
{ x: offset + 400, y: offset + 400 },
27+
{ x: offset, y: offset + 400 },
28+
])
29+
offset += 10
30+
})
31+
}
32+
33+
test()

‎src/index.html‎ renamed to ‎integration-tests/template.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<body>
2828
<aside>
2929
<input type="file" />
30+
<button id="img-position">Update image position</button>
3031
</aside>
3132
<canvas></canvas>
3233
</body>

‎integration-tests/tests/creator.spec.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { test, expect } from '@playwright/test';
2+
import path from 'path';
3+
4+
test('visible image after upload', async ({ page }, testinfo) => {
5+
if (process.env.CI) {
6+
test.skip();
7+
return;
8+
}
9+
10+
testinfo.snapshotSuffix = ''; // by default is `process.platform`
11+
// and it produces different screenshot name base on operating system
12+
// while we want to make app consistent on all operating systems
13+
14+
// To finally check fi WebGPU is supported
15+
// await page.goto('https://webgpureport.org/');
16+
// await expect(page).toHaveScreenshot('webgpu-report.png');
17+
18+
await page.goto('http://127.0.0.1:3000')
19+
20+
const fileInput = page.locator('input[type="file"]');
21+
const testImagePath = path.join(__dirname, '../image-sample.png');
22+
await fileInput.setInputFiles(testImagePath);
23+
24+
const canvas = page.locator('canvas');
25+
await expect(canvas).toBeVisible()
26+
27+
await expect(canvas).toHaveScreenshot(['after-upload.png'])
28+
29+
const moveImgBtn = page.locator('#img-position')
30+
await moveImgBtn.click()
31+
await expect(canvas).toHaveScreenshot('after-move.png')
32+
});
33+
34+
35+
/*
36+
npx playwright test
37+
Runs the end-to-end tests.
38+
39+
npx playwright test --ui
40+
Starts the interactive UI mode.
41+
42+
npx playwright test --project=chromium
43+
Runs the tests only on Desktop Chrome.
44+
45+
npx playwright test example
46+
Runs the tests in a specific file.
47+
48+
npx playwright test --debug
49+
Runs the tests in debug mode.
50+
51+
npx playwright codegen
52+
Auto generate tests with Codegen.
53+
54+
We suggest that you begin by typing:
55+
56+
npx playwright test
57+
*/

0 commit comments

Comments
 (0)