From 26abe59372cb2258c20ed6c782180d0194b7e5f6 Mon Sep 17 00:00:00 2001 From: seveibar Date: Wed, 14 May 2025 15:35:13 -0700 Subject: [PATCH 1/3] add backgroundColor option to matcher --- lib/matcher.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/lib/matcher.ts b/lib/matcher.ts index 637583e..ff76368 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 } } From 0b715a58e3e0a91ec5ddacc6bffc24c1a59ddb90 Mon Sep 17 00:00:00 2001 From: seveibar Date: Wed, 14 May 2025 16:38:17 -0700 Subject: [PATCH 2/3] format and fix types --- README.md | 45 +++++++++++++++++++++++--------- tests/toMatchGraphicsSvg.test.ts | 7 +++-- 2 files changed, 36 insertions(+), 16 deletions(-) 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/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) }) From 88e519348646656da8f7cbdd9b92c108678aaf20 Mon Sep 17 00:00:00 2001 From: seveibar Date: Wed, 14 May 2025 16:39:39 -0700 Subject: [PATCH 3/3] more type fixes --- lib/matcher.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/matcher.ts b/lib/matcher.ts index ff76368..da26eac 100644 --- a/lib/matcher.ts +++ b/lib/matcher.ts @@ -19,7 +19,7 @@ async function toMatchGraphicsSvg( this: any, receivedMaybePromise: GraphicsObject | Promise, testPathOriginal: string, - opts: { backgroundColor?: string; svgName?: string }, + opts: { backgroundColor?: string; svgName?: string } = {}, ): Promise { const received = await receivedMaybePromise const testPath = testPathOriginal.replace(/\.test\.tsx?$/, "") @@ -95,7 +95,7 @@ declare module "bun:test" { interface Matchers { toMatchGraphicsSvg( testPath: string, - opts: { backgroundColor?: string; svgName?: string }, + opts?: { backgroundColor?: string; svgName?: string }, ): Promise } }