diff --git a/README.md b/README.md index d9c8b04..e290e95 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,6 @@ Don't have access to the cli? Paste into the online version: https://graphicsdeb https://github.com/user-attachments/assets/9f3f41e6-b0fe-416a-a551-ba5c5b920cad - ## Format The `graphics` json object is very simple, here's the basic schema: @@ -167,9 +166,20 @@ import { getSvgFromGraphicsObject } from "graphics-debug" // Create your graphics object const graphicsObject = { - points: [{ x: 0, y: 0, label: "Origin" }, { x: 100, y: 100, color: "red" }], - lines: [{ points: [{ x: 0, y: 0 }, { x: 100, y: 100 }], strokeColor: "blue" }], - title: "My Graph" + points: [ + { x: 0, y: 0, label: "Origin" }, + { x: 100, y: 100, color: "red" }, + ], + lines: [ + { + points: [ + { x: 0, y: 0 }, + { x: 100, y: 100 }, + ], + strokeColor: "blue", + }, + ], + title: "My Graph", } // Generate SVG string directly from the object @@ -192,22 +202,35 @@ Then use the matcher in your tests: ```tsx import { expect, test } from "bun:test" import "graphics-debug/matcher" -import type { GraphicsObject } from "graphics-debug" +import type { GraphicsObject } from "graphics-debug" // Your test graphics object const graphicsObject: GraphicsObject = { - points: [{ x: 0, y: 0, label: "Origin" }, { x: 100, y: 100, color: "red" }], - lines: [{ points: [{ x: 0, y: 0 }, { x: 100, y: 100 }], strokeColor: "blue" }], - title: "My Test Graphics" + points: [ + { x: 0, y: 0, label: "Origin" }, + { x: 100, y: 100, color: "red" }, + ], + lines: [ + { + points: [ + { x: 0, y: 0 }, + { x: 100, y: 100 }, + ], + strokeColor: "blue", + }, + ], + title: "My Test Graphics", } test("should match the expected visualization", async () => { // First run creates the snapshot // Subsequent runs will compare against saved snapshot await expect(graphicsObject).toMatchGraphicsSvg(import.meta.path) - + // You can also provide a custom name for the snapshot: - await expect(graphicsObject).toMatchGraphicsSvg(import.meta.path, "custom-name") + await expect(graphicsObject).toMatchGraphicsSvg(import.meta.path, { + svgName: "custom-name", + }) }) ``` @@ -250,5 +273,3 @@ Here is the content of the `exampleGraphics.json` file: ``` You can load this example into the application to visualize the graphics objects and understand how the `graphics-debug` module works. - - diff --git a/lib/matcher.ts b/lib/matcher.ts index 637583e..da26eac 100644 --- a/lib/matcher.ts +++ b/lib/matcher.ts @@ -19,13 +19,13 @@ async function toMatchGraphicsSvg( this: any, receivedMaybePromise: GraphicsObject | Promise, testPathOriginal: string, - svgName?: string, + opts: { backgroundColor?: string; svgName?: string } = {}, ): Promise { const received = await receivedMaybePromise const testPath = testPathOriginal.replace(/\.test\.tsx?$/, "") const snapshotDir = path.join(path.dirname(testPath), "__snapshots__") - const snapshotName = svgName - ? `${svgName}.snap.svg` + const snapshotName = opts.svgName + ? `${opts.svgName}.snap.svg` : `${path.basename(testPath)}.snap.svg` const filePath = path.join(snapshotDir, snapshotName) @@ -34,7 +34,9 @@ async function toMatchGraphicsSvg( } // Convert GraphicsObject to SVG - const receivedSvg = getSvgFromGraphicsObject(received) + const receivedSvg = getSvgFromGraphicsObject(received, { + backgroundColor: opts.backgroundColor, + }) const updateSnapshot = process.argv.includes("--update-snapshots") || @@ -93,7 +95,7 @@ declare module "bun:test" { interface Matchers { toMatchGraphicsSvg( testPath: string, - svgName?: string, + opts?: { backgroundColor?: string; svgName?: string }, ): Promise } } diff --git a/tests/toMatchGraphicsSvg.test.ts b/tests/toMatchGraphicsSvg.test.ts index 65eb8fb..741ed19 100644 --- a/tests/toMatchGraphicsSvg.test.ts +++ b/tests/toMatchGraphicsSvg.test.ts @@ -73,9 +73,8 @@ test("toMatchGraphicsSvg with custom name", async () => { }) // Create and match with custom name - await expect(testGraphicsObject).toMatchGraphicsSvg( - import.meta.path, - "custom-name", - ) + await expect(testGraphicsObject).toMatchGraphicsSvg(import.meta.path, { + svgName: "custom-name", + }) expect(fs.existsSync(customNamePath)).toBe(true) })