add tests and improve coverage

Author: b-yogesh

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

@@ -73,4 +73,30 @@ describe("Table", () => {
       },
     });
   });
+
+  it("should not render the Table component when no id provided", () => {
+    render(<Table type={"Table"} rows={rows} onChange={() => {}} />);
+
+    const table = screen.queryByRole("table");
+    expect(table).toBeNull();
+  });
+
+  it(
+    "should render the Table component with skeleton when skeletonProps are" +
+      " provided",
+    () => {
+      render(
+        <Table
+          id="table"
+          type={"Table"}
+          rows={rows}
+          onChange={() => {}}
+          skeletonProps={{ variant: "rectangular" }}
+        />,
+      );
+
+      const table = screen.queryByRole("table");
+      expect(table).toBeNull();
+    },
+  );
 });

chartlets.js/packages/lib/src/plugins/vega/VegaChart.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { render } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 // import { render, screen, fireEvent } from "@testing-library/react";
 import type { TopLevelSpec } from "vega-lite";
 import { createChangeHandler } from "@/plugins/mui/common.test";
@@ -21,7 +21,7 @@ describe("VegaChart", () => {
     expect(document.querySelector("#vc")).not.toBeUndefined();
   });
 
-  it("should render if chart is given", () => {
+  it("should render if chart is given", async () => {
     const { recordedEvents, onChange } = createChangeHandler();
     render(
       <VegaChart
@@ -35,12 +35,25 @@ describe("VegaChart", () => {
     // expect(document.body).toEqual({});
     expect(recordedEvents.length).toBe(0);
 
+    const test_chart = screen.queryByTestId("vega-test-id");
+    expect(test_chart).toBeDefined();
+    const canvas = await waitFor(() => screen.getByRole("graphics-document"));
+    expect(canvas).toBeInTheDocument();
+
     // TODO: all of the following doesn't work!
     // expect(document.querySelector("canvas")).toEqual({});
     // expect(screen.getByRole("canvas")).not.toBeUndefined();
     // fireEvent.click(screen.getByRole("canvas"));
     // expect(recordedEvents.length).toBe(1);
   });
+
+  it("should not render if id is not given", () => {
+    const { recordedEvents, onChange } = createChangeHandler();
+    render(<VegaChart type={"VegaChart"} chart={chart} onChange={onChange} />);
+    expect(recordedEvents.length).toBe(0);
+    const test_chart = screen.queryByTestId("vega-test-id");
+    expect(test_chart).toBeNull();
+  });
 });
 
 const chart: TopLevelSpec = {

chartlets.js/packages/lib/src/plugins/vega/VegaChart.tsx

@@ -42,21 +42,26 @@ export function VegaChart({
   }
 
   const chart: ReactElement | null = initialChart ? (
-   <div id="chart-container" ref={containerCallbackRef} style={style}>
-       <VegaLite
-          key={containerSizeKey}
-          theme={vegaTheme}
-          spec={initialChart}
-          signalListeners={signalListeners}
-          actions={false}
+    <div
+      id="chart-container"
+      ref={containerCallbackRef}
+      style={style}
+      data-testid={"vega-test-id"} // For testing purposes
+    >
+      <VegaLite
+        key={containerSizeKey}
+        theme={vegaTheme}
+        spec={initialChart}
+        signalListeners={signalListeners}
+        actions={false}
       />
-  </div>
+    </div>
   ) : (
-      <div id={id}/>
+    <div id={id} />
   );
   const isSkeletonRequired = skeletonProps !== undefined;
   if (!isSkeletonRequired) {
-      return chart;
+    return chart;
   }
   const skeletonId = id + "-skeleton";
   return (