update test

yukukotani · Oct 14, 2024 · b59c216 · b59c216
1 parent 9065029
commit b59c216
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/src/__snapshots__/styled.test.tsx.snap b/src/__snapshots__/styled.test.tsx.snap
@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`styled > renders dynamic style 1`] = `".j1dqz { color: red; }"`;
+
+exports[`styled > renders dynamic style 2`] = `".jyt81 { gap: var(--j-spaces-md); }"`;
+
+exports[`styled > renders dynamic style 3`] = `".j1o5l { background-color: gray; }"`;
+
+exports[`styled > renders style tag in head 1`] = `".j1dqz { color: red; }"`;
+
+exports[`styled > renders style tag in head 2`] = `".jyt81 { gap: var(--j-spaces-md); }"`;
diff --git a/src/styled.test.tsx b/src/styled.test.tsx
@@ -7,19 +7,21 @@ describe("styled", async () => {
 	test("renders style tag in head", async () => {
 		const RedDiv = styled("div", {
 			color: "red",
+			gap: "$spaces.md",
 		});
 
 		render(<RedDiv data-testid="red-div">RedDiv</RedDiv>);
 
 		await waitFor(() => {
-			const styleTag = Array.from(document.getElementsByTagName("style")).find(
-				(e) => e.dataset.href != null,
-			);
-			expect(styleTag).toBeDefined();
-			// biome-ignore lint/style/noNonNullAssertion: <explanation>
-			expect(document.head).toContainElement(styleTag!);
-			expect(styleTag).toHaveAttribute("data-precedence", "medium");
-			expect(styleTag).not.toBeEmptyDOMElement();
+			const styleTags = Array.from(
+				document.getElementsByTagName("style"),
+			).filter((e) => e.dataset.href != null);
+			expect(styleTags).toHaveLength(2);
+			for (const styleTag of styleTags) {
+				expect(document.head).toContainElement(styleTag);
+				expect(styleTag).toHaveAttribute("data-precedence", "medium");
+				expect(styleTag.textContent).toMatchSnapshot();
+			}
 		});
 	});
 
@@ -29,7 +31,10 @@ describe("styled", async () => {
 		});
 
 		render(
-			<RedDiv data-testid="red-div" style={{ backgroundColor: "gray" }}>
+			<RedDiv
+				data-testid="red-div"
+				style={{ backgroundColor: "gray", gap: "$spaces.md" }}
+			>
 				RedDiv
 			</RedDiv>,
 		);
@@ -38,11 +43,11 @@ describe("styled", async () => {
 			const styleTags = Array.from(
 				document.getElementsByTagName("style"),
 			).filter((e) => e.dataset.href != null);
-			expect(styleTags).toHaveLength(2);
+			expect(styleTags).toHaveLength(3);
 			for (const styleTag of styleTags) {
 				expect(document.head).toContainElement(styleTag);
 				expect(styleTag).toHaveAttribute("data-precedence", "medium");
-				expect(styleTag).not.toBeEmptyDOMElement();
+				expect(styleTag.textContent).toMatchSnapshot();
 			}
 		});
 	});