bun-match-svg 0.0.1 → 0.0.3

package/.github/workflows/CODEOWNERS

@@ -0,0 +1 @@
+* @seveibar @tscircuit/core

package/.github/workflows/bun-formatcheck.yml

@@ -0,0 +1,26 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Format Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  format-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Run format check
+        run: bun run format:check

package/.github/workflows/bun-pver-release.yml

@@ -0,0 +1,25 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Publish to npm
+on:
+  push:
+    branches:
+      - main
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm install -g pver
+      - run: bun install --frozen-lockfile
+      - run: bun run build
+      - run: pver release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/bun-test.yml

@@ -0,0 +1,24 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Bun Test
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Run tests
+        run: bun test

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 tscircuit Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,23 +1,85 @@
 # bun-match-svg
 
+A custom matcher for Bun tests to compare SVG snapshots.
+
+## Installation
+
+```bash
+bun add -D bun-match-svg
+```
+
 ## Usage
 
+### Basic Usage
+
+Import the library in your test file:
+
 ```ts
 import "bun-match-svg"
 
-test("getAllDimensionsForSchematicBox 1", () => {
-  const params: Parameters<typeof getAllDimensionsForSchematicBox>[0] = {
-    schWidth: 1,
-    schPinSpacing: 0.2,
-    schPinStyle: {},
-    pinCount: 8,
-  }
+test("your SVG test", () => {
+  const svgContent = generateSomeSvg() // Your function to generate SVG
+  expect(svgContent).toMatchSvgSnapshot(import.meta.path, "uniqueName")
+})
+```
 
-  const dimensions = getAllDimensionsForSchematicBox(params)
+The `toMatchSvgSnapshot` matcher takes two arguments:
 
-  expect(getSchematicBoxSvg(dimensions)).toMatchSvgSnapshot(
-    import.meta.path,
-    "schematicbox1"
-  )
-})
+1. `import.meta.path`: The path of the current test file.
+2. `uniqueName` (optional): A unique name for the snapshot. If not provided, it will use the test file name.
+
+### Automatically Preload
+
+To make `toMatchSvgSnapshot` available in all your test files without importing it in each one:
+
+1. Create a file `tests/fixtures/preload.ts` with the following content:
+
+```ts
+import "bun-match-svg"
+```
+
+2. Define a `bunfig.toml` file in your project root with:
+
+```toml
+[test]
+preload = ["./tests/fixtures/preload.ts"]
 ```
+
+Now `toMatchSvgSnapshot` will be automatically available in every test file.
+
+## How It Works
+
+- On first run, it creates a snapshot of your SVG.
+- On subsequent runs, it compares the current SVG with the snapshot.
+- If differences are found, it generates a diff image.
+
+## Updating Snapshots
+
+To update existing snapshots, run your tests with:
+
+```bash
+bun test --update-snapshots
+```
+
+Or set the environment variable:
+
+```bash
+BUN_UPDATE_SNAPSHOTS=1 bun test
+```
+
+## Configuration
+
+The matcher uses `looks-same` for comparison with these default settings:
+
+- `strict: false`
+- `tolerance: 2`
+
+There currently isn't a way to configure this, but PRs welcome!
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is open source and available under the [MIT License](LICENSE).

package/index.ts

@@ -6,10 +6,11 @@ import looksSame from "looks-same"
 async function toMatchSvgSnapshot(
   // biome-ignore lint/suspicious/noExplicitAny: bun doesn't expose
   this: any,
-  received: string,
+  receivedMaybePromise: string | Promise<string>,
   testPathOriginal: string,
   svgName?: string,
 ): Promise<MatcherResult> {
+  const received = await receivedMaybePromise
   const testPath = testPathOriginal.replace(/\.test\.tsx?$/, "")
   const snapshotDir = path.join(path.dirname(testPath), "__snapshots__")
   const snapshotName = svgName
@@ -67,9 +68,96 @@ async function toMatchSvgSnapshot(
   }
 }
 
+async function toMatchMultipleSvgSnapshots(
+  // biome-ignore lint/suspicious/noExplicitAny: bun doesn't expose
+  this: any,
+  receivedMaybePromise: string[] | Promise<string[]>,
+  testPathOriginal: string,
+  svgNames: string[],
+): Promise<MatcherResult> {
+  const passed = []
+  const failed = []
+  for (let index = 0; index < svgNames.length; index++) {
+    const svgName = svgNames[index]
+    const received = await receivedMaybePromise
+    const testPath = testPathOriginal.replace(/\.test\.tsx?$/, "")
+    const snapshotDir = path.join(path.dirname(testPath), "__snapshots__")
+    const snapshotName = svgName
+      ? `${svgName}.snap.svg`
+      : `${path.basename(testPath)}.snap.svg`
+    const filePath = path.join(snapshotDir, snapshotName)
+
+    if (!fs.existsSync(snapshotDir)) {
+      fs.mkdirSync(snapshotDir, { recursive: true })
+    }
+
+    const updateSnapshot =
+      process.argv.includes("--update-snapshots") ||
+      process.argv.includes("-u") ||
+      Boolean(process.env.BUN_UPDATE_SNAPSHOTS)
+
+    if (!fs.existsSync(filePath) || updateSnapshot) {
+      console.log("Writing snapshot to", filePath)
+      fs.writeFileSync(filePath, received[index])
+      passed.push({
+        message: `Snapshot ${svgName} created at ${filePath}`,
+        pass: true,
+      })
+      continue
+    }
+
+    const existingSnapshot = fs.readFileSync(filePath, "utf-8")
+
+    const result = await looksSame(
+      Buffer.from(received[index]),
+      Buffer.from(existingSnapshot),
+      {
+        strict: false,
+        tolerance: 2,
+      },
+    )
+
+    if (result.equal) {
+      passed.push({
+        message: `Snapshot ${svgName} matches`,
+        pass: true,
+      })
+      continue
+    }
+
+    const diffPath = filePath.replace(".snap.svg", ".diff.png")
+    await looksSame.createDiff({
+      reference: Buffer.from(existingSnapshot),
+      current: Buffer.from(received[index]),
+      diff: diffPath,
+      highlightColor: "#ff00ff",
+    })
+
+    failed.push({
+      message: `Snapshot ${svgName} does not match. Diff saved at ${diffPath}`,
+      pass: false,
+    })
+  }
+  let aggregatedMessage = ""
+  if (failed.length === 0) {
+    for (const result of passed) aggregatedMessage += `${result.message}\n`
+    return {
+      pass: true,
+      message: () => aggregatedMessage,
+    }
+  }
+  for (const result of failed) aggregatedMessage += `${result.message}\n`
+  return {
+    pass: false,
+    message: () => aggregatedMessage,
+  }
+}
+
 expect.extend({
   // biome-ignore lint/suspicious/noExplicitAny:
   toMatchSvgSnapshot: toMatchSvgSnapshot as any,
+  // biome-ignore lint/suspicious/noExplicitAny:
+  toMatchMultipleSvgSnapshots: toMatchMultipleSvgSnapshots as any,
 })
 
 declare module "bun:test" {
@@ -78,5 +166,9 @@ declare module "bun:test" {
       testPath: string,
       svgName?: string,
     ): Promise<MatcherResult>
+    toMatchMultipleSvgSnapshots(
+      testPath: string,
+      svgNames?: string[],
+    ): Promise<MatcherResult>
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bun-match-svg",
   "module": "index.ts",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "devDependencies": {
     "@types/bun": "latest"
@@ -13,6 +13,7 @@
     "looks-same": "^9.0.1"
   },
   "scripts": {
-    "test": "bun test"
+    "test": "bun test",
+    "build": "echo 'no build step'"
   }
-}
+}

package/tests/toMatchMultipleSvgSnapshots.test.ts

@@ -0,0 +1,59 @@
+import { expect, test, beforeAll, afterAll } from "bun:test"
+import * as fs from "node:fs"
+import * as path from "node:path"
+import "../index"
+
+const testSvgs = [
+  `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+</svg>`,
+  `<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="patt1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+      <circle cx="10" cy="10" r="10" fill="red" />
+    </pattern>
+  </defs>
+
+  <rect width="200" height="100" x="0" y="0" stroke="black" fill="url(#patt1)" />
+</svg>
+`,
+  `<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="100,10 150,190 50,190" style="fill:lime;stroke:purple;stroke-width:3" />
+</svg>`,
+]
+
+const svgNames: string[] = []
+for (let i = 0; i < testSvgs.length; i++) svgNames.push(`test${i + 1}`)
+
+const snapshotDir = path.join(__dirname, "__snapshots__")
+const snapshotPaths = svgNames.map((svgName) =>
+  path.join(snapshotDir, `${svgName}.snap.svg`),
+)
+
+beforeAll(() => {
+  if (!fs.existsSync(snapshotDir)) {
+    fs.mkdirSync(snapshotDir, { recursive: true })
+  }
+})
+
+afterAll(() => {
+  for (const snapshotPath of snapshotPaths)
+    if (fs.existsSync(snapshotPath)) {
+      fs.unlinkSync(snapshotPath)
+    }
+  if (fs.existsSync(snapshotDir)) {
+    fs.rmdirSync(snapshotDir, { recursive: true })
+  }
+})
+
+test("toMatchMultipleSvgSnapshots creates and matches snapshots", async () => {
+  // First run: create snapshot
+  await expect(testSvgs).toMatchMultipleSvgSnapshots(import.meta.path, svgNames)
+
+  // Verify snapshot was created
+  for (const snapshotPath of snapshotPaths)
+    expect(fs.existsSync(snapshotPath)).toBe(true)
+
+  // Second run: match existing snapshot
+  await expect(testSvgs).toMatchMultipleSvgSnapshots(import.meta.path, svgNames)
+})