@kiwa-test/visual 0.1.0 → 0.1.1
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.
- package/README.md +69 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# @kiwa-test/visual
|
|
2
|
+
|
|
3
|
+
Visual regression test adapter for the [kiwa](https://github.com/cardene777/kiwa) framework. Pixel-level PNG diff backed by [pixelmatch](https://github.com/mapbox/pixelmatch) + [pngjs](https://github.com/lukeapage/pngjs).
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add -D @kiwa-test/visual pixelmatch pngjs
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
`pixelmatch` と `pngjs` は peer/optional 扱い、 必ず一緒に install してください。
|
|
12
|
+
|
|
13
|
+
## Quickstart
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { readFileSync } from 'node:fs';
|
|
17
|
+
import { expect, test } from 'vitest';
|
|
18
|
+
import { expectNoVisualDiff } from '@kiwa-test/visual';
|
|
19
|
+
|
|
20
|
+
test('header snapshot matches', () => {
|
|
21
|
+
const baseline = readFileSync('tests/fixtures/header.baseline.png');
|
|
22
|
+
const actual = readFileSync('tests/fixtures/header.actual.png');
|
|
23
|
+
|
|
24
|
+
expectNoVisualDiff({ baseline, actual }, expect, {
|
|
25
|
+
threshold: 0.1, // pixelmatch threshold (0..1)
|
|
26
|
+
maxDiffPixels: 50, // 50 ピクセル超でテスト失敗
|
|
27
|
+
diffOutputPath: 'tests/fixtures/header.diff.png', // 差分 PNG を書出 (任意)
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## API
|
|
33
|
+
|
|
34
|
+
| 関数 | 用途 |
|
|
35
|
+
|---|---|
|
|
36
|
+
| `comparePngBuffers(baseline, actual, options?)` | 2 枚の PNG Buffer を比較し `CompareResult` ({ diffPixels, totalPixels, diffPng }) を返す |
|
|
37
|
+
| `expectNoVisualDiff({ baseline, actual }, expect, options)` | `maxDiffPixels` 以下なら PASS、 超過なら詳細メッセージ throw + diff PNG 書出 (`diffOutputPath` 指定時) |
|
|
38
|
+
|
|
39
|
+
### `CompareOptions`
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
interface CompareOptions {
|
|
43
|
+
threshold?: number; // pixelmatch 互換 (default 0.1)
|
|
44
|
+
includeAA?: boolean; // anti-alias を diff に含めるか (default false)
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### `CompareResult`
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
interface CompareResult {
|
|
52
|
+
diffPixels: number;
|
|
53
|
+
totalPixels: number;
|
|
54
|
+
width: number;
|
|
55
|
+
height: number;
|
|
56
|
+
diffPng: Buffer; // 差分強調 PNG (赤色オーバーレイ)
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## ベースライン更新ワークフロー
|
|
61
|
+
|
|
62
|
+
1. 初回 — `actual.png` を生成 → `baseline.png` として commit
|
|
63
|
+
2. 回帰検出時 — diff PNG を visual で確認、 意図した変更なら `actual.png` を `baseline.png` に上書きして commit
|
|
64
|
+
|
|
65
|
+
PNG snapshot は git LFS に乗せるか、 専用 baseline branch を切ると履歴肥大を抑えられる。
|
|
66
|
+
|
|
67
|
+
## ライセンス
|
|
68
|
+
|
|
69
|
+
MIT
|