test server target

Author: mayank1513

lib/nthul/src/server/server-target/server-target.test.tsx

@@ -1,12 +1,30 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
 import { ServerTarget } from "./server-target";
+import { DEFAULT_ID } from "../../constants";
 
-describe.concurrent("server-target", () => {
+describe("server-target", () => {
   afterEach(cleanup);
 
-  test("check if h1 heading exists", ({ expect }) => {
+  test("test default tag", ({ expect }) => {
     render(<ServerTarget />);
-    expect(screen.getByTestId("server-target-h1").textContent).toBe("server-target");
+    expect(screen.getByTestId("server-target").tagName).toBe("DIV");
+  });
+
+  test("test custom tag", ({ expect }) => {
+    render(<ServerTarget tag="h1" />);
+    expect(screen.getByTestId("server-target").tagName).toBe("H1");
+  });
+
+  test("test classes from cookies", ({ expect }) => {
+    const THEME = "my-theme";
+    const COLOR_SCHEME = "dark";
+    globalThis.cookies = {
+      [DEFAULT_ID]: {
+        value: `${THEME},${COLOR_SCHEME}`,
+      },
+    };
+    render(<ServerTarget />);
+    expect(screen.getByTestId("server-target").className).toBe(`th-${THEME} ${COLOR_SCHEME}`);
   });
 });

lib/nthul/src/server/server-target/server-target.tsx

@@ -22,5 +22,5 @@ export function ServerTarget({ tag, targetId }: ServerTargetProps) {
   const cls = `th-${theme} ${cs}`;
 
   const Tag = tag ?? "div";
-  return <Tag className={cls} data-nth="next" id={key} />;
+  return <Tag className={cls} data-nth="next" data-testid="server-target" id={key} />;
 }