Switched to coverage with instanbul because it can ignore type-only modules; more types test

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

@@ -18,8 +18,8 @@ describe("Children", () => {
     // 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);
+    expect(document.body.firstElementChild!.tagName).toBe("DIV");
+    expect(document.body.firstElementChild!.firstElementChild).toBe(null);
   }
 
   it("should not render undefined nodes", () => {
@@ -33,13 +33,13 @@ describe("Children", () => {
   });
 
   it("should render all child types", () => {
-    const Div: FC<ComponentProps & { text: string }> = ({ text }) => (
-      <div>{text}</div>
-    );
-    registry.register("Div", Div);
+    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: () => {},
     };

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

@@ -27,10 +27,11 @@ describe("Component", () => {
   });
 
   it("should render a known component", () => {
-    const Div: FC<ComponentProps & { text: string }> = ({ text }) => (
-      <div>{text}</div>
-    );
-    registry.register("Div", Div);
+    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",

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

@@ -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,46 @@
+import { describe, it, expect } from "vitest";
+import {
+  isComponentChannel,
+  isContainerChannel,
+  isHostChannel,
+} from "./channel";
+
+describe("Test that isComponentChannel()", () => {
+  it("works", () => {
+    expect(isComponentChannel({ id: "ok_btn", property: "checked" })).toBe(
+      true,
+    );
+    expect(isComponentChannel({ id: "@container", property: "visible" })).toBe(
+      false,
+    );
+    expect(
+      isComponentChannel({ id: "@app", property: "selectedDatasetId" }),
+    ).toBe(false);
+  });
+});
+
+describe("Test that isContainerChannel()", () => {
+  it("works", () => {
+    expect(isContainerChannel({ id: "ok_btn", property: "checked" })).toBe(
+      false,
+    );
+    expect(isContainerChannel({ id: "@container", property: "visible" })).toBe(
+      true,
+    );
+    expect(
+      isContainerChannel({ id: "@app", property: "selectedDatasetId" }),
+    ).toBe(false);
+  });
+});
+
+describe("Test that isHostChannel()", () => {
+  it("works", () => {
+    expect(isHostChannel({ id: "ok_btn", property: "checked" })).toBe(false);
+    expect(isHostChannel({ id: "@container", property: "visible" })).toBe(
+      false,
+    );
+    expect(isHostChannel({ id: "@app", property: "selectedDatasetId" })).toBe(
+      true,
+    );
+  });
+});

chartlets.js/packages/lib/src/types/model/channel.test.ts

@@ -8,6 +8,8 @@ describe("isComponentState", () => {
     expect(isComponentState({})).toBe(false);
     expect(isComponentState("Button")).toBe(false);
     expect(isComponentState({ type: 2 })).toBe(false);
+    expect(isComponentState(new Event("click"))).toBe(false);
+    expect(isComponentState(<span />)).toBe(false);
   });
 });
 
@@ -18,5 +20,7 @@ describe("isContainerState", () => {
     expect(isContainerState({})).toBe(false);
     expect(isContainerState("Button")).toBe(false);
     expect(isContainerState({ type: 2 })).toBe(false);
+    expect(isComponentState(new Event("click"))).toBe(false);
+    expect(isComponentState(<span />)).toBe(false);
   });
 });

…es/lib/src/types/state/component.test.ts …s/lib/src/types/state/component.test.tsxchartlets.js/packages/lib/src/types/state/component.test.ts renamed to chartlets.js/packages/lib/src/types/state/component.test.tsx chartlets.js/packages/lib/src/types/state/component.test.ts renamed to chartlets.js/packages/lib/src/types/state/component.test.tsx

@@ -2,14 +2,6 @@ import { type CSSProperties } from "react";
 import { isObject } from "@/utils/isObject";
 import { isString } from "@/utils/isString";
 
-export type ComponentType =
-  | "Box"
-  | "Button"
-  | "Checkbox"
-  | "Plot"
-  | "Select"
-  | "Typography";
-
 export type ComponentNode =
   | ComponentState
   | string
@@ -38,7 +30,14 @@ export interface ContainerState extends ComponentState {
 }
 
 export function isComponentState(object: unknown): object is ComponentState {
-  return isObject(object) && isString(object.type);
+  return (
+    isObject(object) &&
+    isString(object.type) &&
+    // objects that are not created from classes
+    object.constructor.name === "Object" &&
+    // not React elements
+    !object["$$typeof"]
+  );
 }
 
 export function isContainerState(object: unknown): object is ContainerState {

chartlets.js/packages/lib/src/types/state/component.ts

@@ -1,21 +1,26 @@
 import { describe, it, expect } from "vitest";
-import { isMutableHostStore } from "./options";
+import {
+  type HostStore,
+  type MutableHostStore,
+  isHostStore,
+  isMutableHostStore,
+} from "./options";
 
-const hostStore = {
+const hostStore: HostStore = {
   get: (name: string) => name,
   subscribe: (_cb: () => void) => {},
 };
 
-const mutableHostStore = {
+const mutableHostStore: MutableHostStore = {
   ...hostStore,
   set: (_name: string, _value: unknown) => {},
 };
 
 describe("isHostStore", () => {
   it("should work", () => {
-    expect(isMutableHostStore({})).toBe(false);
-    expect(isMutableHostStore(hostStore)).toBe(true);
-    expect(isMutableHostStore(mutableHostStore)).toBe(true);
+    expect(isHostStore({})).toBe(false);
+    expect(isHostStore(hostStore)).toBe(true);
+    expect(isHostStore(mutableHostStore)).toBe(true);
   });
 });