more components tests

Author: forman

chartlets.js/packages/lib/src/component/Children.test.tsx

@@ -0,0 +1,63 @@
+import type { FC } from "react";
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { registry } from "@/component/Registry";
+import { type ComponentProps } from "./Component";
+import { Children } from "./Children";
+
+describe("Children", () => {
+  beforeEach(() => {
+    registry.clear();
+  });
+
+  afterEach(() => {
+    registry.clear();
+  });
+
+  function expectDocumentIsEmpty() {
+    // Note, the following 3 lines test that document is empty
+    // but there is always one empty "div" in it.
+    expect(document.body.firstElementChild).not.toBe(null);
+    expect(document.body.firstElementChild.tagName).toBe("DIV");
+    expect(document.body.firstElementChild.firstElementChild).toBe(null);
+  }
+
+  it("should not render undefined nodes", () => {
+    render(<Children onChange={() => {}} />);
+    expectDocumentIsEmpty();
+  });
+
+  it("should not render empty nodes", () => {
+    render(<Children nodes={[]} onChange={() => {}} />);
+    expectDocumentIsEmpty();
+  });
+
+  it("should render all child types", () => {
+    const Div: FC<ComponentProps & { text: string }> = ({ text }) => (
+      <div>{text}</div>
+    );
+    registry.register("Div", Div);
+    const divProps = {
+      type: "Div",
+      id: "root",
+      text: "Hello",
+      onChange: () => {},
+    };
+    render(
+      <Children
+        nodes={[
+          divProps, // ok, regular component
+          "World", // ok, text
+          null, // ok, not rendered
+          undefined, // ok, not rendered
+          <div />, // not ok, emits warning, not rendered
+        ]}
+        onChange={() => {}}
+      />,
+    );
+    // to inspect rendered component, do:
+    // expect(document.body).toEqual({});
+    expect(screen.getByText("Hello")).not.toBeUndefined();
+    expect(screen.getByText("World")).not.toBeUndefined();
+  });
+});

chartlets.js/packages/lib/src/component/Component.test.tsx

@@ -1,9 +1,19 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { Component } from "./Component";
+import { Component, type ComponentProps } from "./Component";
+import { registry } from "@/component/Registry";
+import type { FC } from "react";
 
 describe("Component", () => {
-  it("should render the Component component", () => {
+  beforeEach(() => {
+    registry.clear();
+  });
+
+  afterEach(() => {
+    registry.clear();
+  });
+
+  it("should not render unknown Component types", () => {
     const boxProps = {
       type: "Box",
       id: "bx",
@@ -13,6 +23,23 @@ describe("Component", () => {
     render(<Component {...boxProps} />);
     // to inspect rendered component, do:
     // expect(document.body).toEqual({});
-    expect(screen.getByText("World!")).toBeUndefined();
+    expect(document.querySelector("#bx")).toBe(null);
+  });
+
+  it("should render a known component", () => {
+    const Div: FC<ComponentProps & { text: string }> = ({ text }) => (
+      <div>{text}</div>
+    );
+    registry.register("Div", Div);
+    const divProps = {
+      type: "Div",
+      id: "root",
+      text: "Hello!",
+      onChange: () => {},
+    };
+    render(<Component {...divProps} />);
+    // to inspect rendered component, do:
+    // expect(document.body).toEqual({});
+    expect(screen.getByText("Hello!")).not.toBeUndefined();
   });
 });

chartlets.js/packages/lib/src/component/Registry.test.ts

@@ -50,4 +50,17 @@ describe("Test that RegistryImpl", () => {
     expect(registry.lookup("C")).toBeUndefined();
     expect(registry.types).toEqual([]);
   });
+
+  it("clears", () => {
+    const registry = new RegistryImpl();
+    const A = () => void 0;
+    const B = () => void 0;
+    const C = () => void 0;
+    registry.register("A", A);
+    registry.register("B", B);
+    registry.register("C", C);
+    expect(registry.types.length).toBe(3);
+    registry.clear();
+    expect(registry.types).toEqual([]);
+  });
 });

chartlets.js/packages/lib/src/component/Registry.ts

@@ -32,6 +32,12 @@ export interface Registry {
    */
   lookup(type: string): ComponentType<ComponentProps> | undefined;
 
+  /**
+   * Clears the registry.
+   * For testing only.
+   */
+  clear(): void;
+
   /**
    * Get the type names of all registered components.
    */
@@ -58,6 +64,10 @@ export class RegistryImpl implements Registry {
     return this.components.get(type);
   }
 
+  clear() {
+    this.components.clear();
+  }
+
   get types(): string[] {
     return Array.from(this.components.keys());
   }