Merge pull request #70 from bcdev/forman-33-even_more_tests

Even more tests

Author: forman

chartlets.js/package-lock.json

@@ -43,7 +43,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/coverage-istanbul": "^2.1.8",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.12",

chartlets.js/packages/demo/package.json

@@ -82,7 +82,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/coverage-istanbul": "^2.1.8",
     "canvas": "^2.11.2",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",

chartlets.js/packages/lib/package.json

@@ -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", () => {
+    interface DivProps extends ComponentProps {
+      text: string;
+    }
+    const Div: FC<DivProps> = ({ text }) => <div>{text}</div>;
+    registry.register("Div", Div as FC<ComponentProps>);
+    const divProps = {
+      type: "Div",
+      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/Children.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Component, type ComponentProps } from "./Component";
+import { registry } from "@/component/Registry";
+import type { FC } from "react";
+
+describe("Component", () => {
+  beforeEach(() => {
+    registry.clear();
+  });
+
+  afterEach(() => {
+    registry.clear();
+  });
+
+  it("should not render unknown Component types", () => {
+    const boxProps = {
+      type: "Box",
+      id: "bx",
+      children: ["Hello!", "World!"],
+      onChange: () => {},
+    };
+    render(<Component {...boxProps} />);
+    // to inspect rendered component, do:
+    // expect(document.body).toEqual({});
+    expect(document.querySelector("#bx")).toBe(null);
+  });
+
+  it("should render a known component", () => {
+    interface DivProps extends ComponentProps {
+      text: string;
+    }
+    const Div: FC<DivProps> = ({ text }) => <div>{text}</div>;
+    registry.register("Div", Div as FC<ComponentProps>);
+    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/Component.test.tsx

@@ -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.test.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());
   }

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

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { Box } from "./Box";
 import type { ComponentChangeHandler } from "@/types/state/event";
+import { Box } from "./Box";
 
 describe("Box", () => {
   it("should render the Box component", () => {

chartlets.js/packages/lib/src/plugins/mui/Box.test.tsx

@@ -0,0 +1,17 @@
+import { describe, it, expect } from "vitest";
+import mui from "./index";
+
+describe("mui Plugin", () => {
+  it("registers components", () => {
+    const plugin = mui();
+    expect(plugin).toBeTypeOf("object");
+    expect(Array.isArray(plugin.components)).toBe(true);
+    expect(plugin.components?.length).toBeGreaterThan(0);
+    plugin.components?.forEach((componentRegistration) => {
+      expect(componentRegistration).toHaveLength(2);
+      const [name, component] = componentRegistration;
+      expect(name).toBeTypeOf("string");
+      expect(component).toBeTypeOf("function");
+    });
+  });
+});

chartlets.js/packages/lib/src/plugins/mui/index.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from "vitest";
+import vega from "./index";
+
+describe("vega Plugin", () => {
+  it("registers components", () => {
+    const plugin = vega();
+    expect(plugin).toBeTypeOf("object");
+    expect(Array.isArray(plugin.components)).toBe(true);
+    expect(plugin.components?.length).toBeGreaterThan(0);
+    plugin.components?.forEach((componentRegistration) => {
+      expect(componentRegistration).toHaveLength(2);
+      const [name, component] = componentRegistration;
+      expect(name).toBeTypeOf("string");
+      expect(component).toBeTypeOf("function");
+    });
+  });
+});