🧪 test(general): fix more tests

src/__tests__/_/api/handlers/dashboard.ts

@@ -53,8 +53,8 @@ export const dashboardApiHandlers = [
       if (
         req.params.dashboardId === "test-dashboard-id" &&
         [
-          `{"icon":"Download","title":"New Summary Card","_type":"summary-card","entity":"entity-1","color":"green","script":"return 1","span":"3","height":"4","id":"new_id_1"}`,
-          `{"icon":"ShoppingCart","title":"New Table","_type":"table","entity":"entity-1","span":"2","height":"3","script":"return 1","id":"new_id_2"}`,
+          '{"icon":"Download","title":"New Summary Card","_type":"summary-card","entity":"entity-1","span":"3","height":"4","queryId":"foo","script":"return 1","color":"green","id":"new_id_1"}',
+          `{"icon":"Activity","title":"New Table","_type":"table","entity":"entity-1","span":"2","queryId":"bar","height":"3","script":"return 2","id":"new_id_2"}`,
         ].includes(JSON.stringify(requestBody))
       ) {
         DASHBOARD_WIDGETS.push(requestBody);

src/__tests__/_/api/handlers/setup.ts

@@ -17,12 +17,12 @@ export const setupApiHandlers = [
     const reqBody = JSON.stringify(await req.json());
     if (
       [
-        `{"port":8080,"dataSourceType":"postgres","host":"127.0.0.1","user":"root","password":"password","database":"dashpress"}`,
-        `{"port":5432,"dataSourceType":"postgres","connectionString":"some-connection-url"}`,
-        `{"port":8080,"dataSourceType":"mysql","host":"127.0.0.1","user":"root","password":"password","database":"dashpress"}`,
-        `{"port":3306,"dataSourceType":"mysql","connectionString":"some-connection-url"}`,
-        `{"port":8080,"dataSourceType":"mssql","host":"127.0.0.1","user":"root","password":"password","database":"dashpress"}`,
-        `{"port":1433,"dataSourceType":"mssql","connectionString":"some-connection-url"}`,
+        `{"port":8080,"dataSourceType":"postgres","ssl":false,"host":"127.0.0.1","user":"root","password":"password","database":"dashpress"}`,
+        `{"port":5432,"dataSourceType":"postgres","ssl":false,"connectionString":"some-connection-url"}`,
+        `{"port":8080,"dataSourceType":"mysql","ssl":false,"host":"127.0.0.1","user":"root","password":"password","database":"dashpress"}`,
+        `{"port":3306,"dataSourceType":"mysql","ssl":false,"connectionString":"some-connection-url"}`,
+        `{"port":8080,"dataSourceType":"mssql","ssl":false,"host":"127.0.0.1","user":"root","password":"password","database":"dashpress"}`,
+        `{"port":1433,"dataSourceType":"mssql","ssl":false,"connectionString":"some-connection-url"}`,
         `{"dataSourceType":"sqlite","filename":"some-sqlite-file-name"}`,
       ].includes(reqBody)
     ) {

src/__tests__/_/setupAfterEnv.ts

@@ -2,6 +2,26 @@ import "@testing-library/jest-dom/extend-expect";
 
 import { cleanup } from "@testing-library/react";
 
+class MockPointerEvent extends Event {
+  button: number;
+
+  ctrlKey: boolean;
+
+  pointerType: string;
+
+  constructor(type: string, props: PointerEventInit) {
+    super(type, props);
+    this.button = props.button || 0;
+    this.ctrlKey = props.ctrlKey || false;
+    this.pointerType = props.pointerType || "mouse";
+  }
+}
+
+window.PointerEvent = MockPointerEvent as any;
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+window.HTMLElement.prototype.releasePointerCapture = jest.fn();
+window.HTMLElement.prototype.hasPointerCapture = jest.fn();
+
 afterEach(() => {
   cleanup();
 });

src/__tests__/_/utils/index.ts

@@ -1,4 +1,4 @@
-import { screen, within } from "@testing-library/react";
+import { screen, waitFor, within } from "@testing-library/react";
 import userEvent, {
   PointerEventsCheckLevel,
 } from "@testing-library/user-event";
@@ -7,6 +7,12 @@ export const closeAllToasts = async () => {
   await userEvent.keyboard("{Escape}");
 };
 
+export const waitForSkeletonsToVanish = async () => {
+  await waitFor(() => {
+    expect(screen.queryAllByRole("progressbar")).toHaveLength(0);
+  });
+};
+
 export const getToastMessage = async () => {
   return (await within(screen.getByRole("region")).findByRole("status"))
     .textContent;
@@ -34,3 +40,11 @@ export const getTableRows = async (widget: HTMLElement) => {
       .join("|");
   });
 };
+
+export const selectCombobox = async (label: string, value: string) => {
+  await userEvent.click(screen.getByRole("combobox", { name: label }));
+
+  await userEvent.click(screen.getByRole("option", { name: value }), {
+    pointerEventsCheck: PointerEventsCheckLevel.Never,
+  });
+};

src/__tests__/account/preferences.spec.tsx

@@ -1,12 +1,12 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import UserPreferences from "@/pages/account/preferences";
 import { USE_ROUTER_PARAMS } from "@/tests/constants";
 import { TestProviders } from "@/tests/Provider";
 import { setupApiHandlers } from "@/tests/setupApihandlers";
 
-import { getToastMessage } from "../_/utils";
+import { selectCombobox, waitForSkeletonsToVanish } from "../_/utils";
 
 setupApiHandlers();
 
@@ -16,46 +16,31 @@ describe("pages/account/preferences", () => {
     useRouter.mockImplementation(USE_ROUTER_PARAMS({}));
   });
 
-  it("should display user preferences", async () => {
+  it("should display and update user preferences", async () => {
     render(
       <TestProviders>
         <UserPreferences />
       </TestProviders>
     );
-    await waitFor(() => {
-      expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
-        "Dark"
-      );
-    });
-  });
 
-  it("should update user preference", async () => {
-    render(
-      <TestProviders>
-        <UserPreferences />
-      </TestProviders>
+    await waitForSkeletonsToVanish();
+
+    expect(localStorage.getItem("theme")).toBeNull();
+
+    expect(screen.getByRole("combobox", { name: "Theme" })).toHaveTextContent(
+      "System"
     );
-    await userEvent.click(screen.getByRole("option", { name: "Light" }));
+
+    await selectCombobox("Theme", "Light");
 
     await userEvent.click(
       screen.getByRole("button", { name: "Save Account Preferences" })
     );
 
-    expect(await getToastMessage()).toBe(
-      "Account Preferences Saved Successfully"
+    expect(screen.getByRole("combobox", { name: "Theme" })).toHaveTextContent(
+      "Light"
     );
-  });
 
-  it("should display updated preference", async () => {
-    render(
-      <TestProviders>
-        <UserPreferences />
-      </TestProviders>
-    );
-    await waitFor(() => {
-      expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
-        "Light"
-      );
-    });
+    expect(localStorage.getItem("theme")).toBe("light");
   });
 });

src/__tests__/admin/[entity]/config/actions.spec.tsx

@@ -10,6 +10,7 @@ import {
   confirmDelete,
   getTableRows,
   getToastMessage,
+  selectCombobox,
 } from "@/tests/utils";
 
 setupApiHandlers();
@@ -60,8 +61,7 @@ describe("pages/admin/[entity]/config/actions", () => {
 
     const dialog = screen.getByRole("dialog");
 
-    await userEvent.type(within(dialog).getByLabelText("Trigger"), "On Create");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Trigger", "On Create");
 
     await userEvent.click(
       within(dialog).getByRole("option", { name: "Slack" })
@@ -71,11 +71,7 @@ describe("pages/admin/[entity]/config/actions", () => {
       within(dialog).queryByRole("option", { name: "Non Activated Actions" })
     ).not.toBeInTheDocument();
 
-    await userEvent.type(
-      within(dialog).getByLabelText("Action"),
-      "Send Message"
-    );
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Action", "Send Message");
 
     await userEvent.type(
       await within(dialog).findByLabelText("Slack: Channel"),
@@ -132,17 +128,28 @@ describe("pages/admin/[entity]/config/actions", () => {
 
     const dialog = screen.getByRole("dialog");
     //
+
     expect(
-      within(dialog).getByTestId("react-select__trigger")
+      within(dialog).getByRole("combobox", { name: "Trigger" })
     ).toHaveTextContent("On Create");
 
     expect(
       within(dialog).getByRole("option", { selected: true })
     ).toHaveTextContent("Slack");
 
+    // expect(
+    //   within(dialog).getByTestId("react-select__action")
+    // ).toHaveTextContent("Send Message - slack");
+
+    // await selectCombobox("Action", "Send Message");
+
     expect(
-      within(dialog).getByTestId("react-select__action")
-    ).toHaveTextContent("Send Message - slack");
+      within(dialog).getByRole("combobox", { name: "Action" })
+    ).toHaveTextContent("Send Message");
+
+    expect(
+      within(dialog).getByRole("combobox", { name: "Trigger" })
+    ).toHaveTextContent("On Create");
 
     expect(await within(dialog).findByLabelText("Slack: Channel")).toHaveValue(
       "{ CONSTANTS.SLACK_CHANNEL }}"
@@ -172,13 +179,11 @@ describe("pages/admin/[entity]/config/actions", () => {
 
     const dialog = screen.getByRole("dialog");
 
-    await userEvent.type(within(dialog).getByLabelText("Trigger"), "On Delete");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Trigger", "On Delete");
 
     await userEvent.click(within(dialog).getByRole("option", { name: "SMTP" }));
 
-    await userEvent.type(within(dialog).getByLabelText("Action"), "Send Mail");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Action", "Send Mail");
 
     await userEvent.type(
       await within(dialog).findByLabelText("SMTP: From"),

src/__tests__/admin/[entity]/config/crud__tab.spec.tsx

@@ -66,12 +66,12 @@ describe("pages/admin/[entity]/config/crud", () => {
         <EntityCrudSettings />
       </TestProviders>
     );
+
     expect(
-      await screen.findByRole("button", {
+      screen.queryByRole("button", {
         name: `Enable ${tab} Functionality`,
-        hidden: true,
       })
-    ).not.toBeVisible();
+    ).not.toBeInTheDocument();
 
     await userEvent.click(screen.getByRole("tab", { name: tab }));
 
@@ -81,7 +81,7 @@ describe("pages/admin/[entity]/config/crud", () => {
       await screen.findByRole("button", {
         name: `Enable ${tab} Functionality`,
       })
-    ).toBeVisible();
+    ).toBeInTheDocument();
 
     expect(replaceMock).toHaveBeenCalledWith(
       `/hello-there?foo=bar&tab=${sluggify(tab)}`
@@ -111,7 +111,7 @@ describe("pages/admin/[entity]/config/crud", () => {
       await screen.findByRole("button", {
         name: "Enable Delete Functionality",
       })
-    ).toBeVisible();
+    ).toBeInTheDocument();
 
     expect(
       screen.getByRole("tab", {
@@ -128,9 +128,8 @@ describe("pages/admin/[entity]/config/crud", () => {
     expect(
       screen.queryByRole("button", {
         name: "Enable Delete Functionality",
-        hidden: true,
       })
-    ).not.toBeVisible();
+    ).not.toBeInTheDocument();
 
     expect(
       screen.getByRole("tab", {

src/__tests__/admin/[entity]/config/form.spec.tsx

@@ -114,7 +114,7 @@ describe("pages/admin/[entity]/config/form", () => {
       );
 
       expect(await getToastMessage()).toBe(
-        "Expression: •JS-Error: SyntaxError: Unexpected identifier"
+        "Could not parse Javascript•Expression: \\n•JS-Error: SyntaxError: Unexpected identifier"
       );
 
       await closeAllToasts();

src/__tests__/admin/index.spec.tsx

@@ -61,9 +61,8 @@ describe("pages/admin", () => {
       "100%"
     );
 
-    expect(within(widget).getByLabelText("Relative Direction")).toHaveAttribute(
-      "color",
-      "#03d87f"
+    expect(within(widget).getByLabelText("Relative Direction")).toHaveClass(
+      "bg-green-100"
     );
 
     expect(within(widget).getByRole("link", { name: "View" })).toHaveAttribute(

src/__tests__/dashboard/[dashboardId]/widget/[widgetId]/index.spec.tsx

@@ -5,7 +5,12 @@ import UpdateDashboardWidget from "@/pages/dashboard/[dashboardId]/widget/[widge
 import { USE_ROUTER_PARAMS } from "@/tests/constants";
 import { TestProviders } from "@/tests/Provider";
 import { setupApiHandlers } from "@/tests/setupApihandlers";
-import { closeAllToasts, getToastMessage } from "@/tests/utils";
+import {
+  closeAllToasts,
+  getToastMessage,
+  selectCombobox,
+  waitForSkeletonsToVanish,
+} from "@/tests/utils";
 
 setupApiHandlers();
 
@@ -28,33 +33,23 @@ describe("pages/dashboard/[dashboardId]/widget/[widgetId]/index", () => {
       </TestProviders>
     );
 
+    await waitForSkeletonsToVanish();
+
     await userEvent.type(await screen.findByLabelText("Title"), "Updated");
 
-    await userEvent.type(screen.getByLabelText("Type"), "Summary Card");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Type", "Summary Card");
 
-    await userEvent.type(
-      screen.getByLabelText("Link Entity"),
-      "Plural entity-2"
-    );
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Link Entity", "Plural entity-2");
 
-    await userEvent.type(
-      await screen.findByLabelText("Entity Tab"),
-      "User Entity View"
-    );
-    await userEvent.keyboard("{Enter}");
+    await userEvent.click(screen.getByRole("button", { name: "red" }));
 
-    await userEvent.type(screen.getByLabelText("Color"), "red");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Entity Tab", "User Entity View");
 
     await userEvent.type(screen.getByLabelText("SVG"), "<p>Custom Icon</p>");
 
-    await userEvent.type(screen.getByLabelText("Width"), "3 Units");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Width", "3 Units");
 
-    await userEvent.type(screen.getByLabelText("Height"), "4 Units");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Height", "4 Units");
 
     await userEvent.type(screen.getByLabelText("Script"), "return 1");
 
@@ -87,26 +82,15 @@ describe("pages/dashboard/[dashboardId]/widget/[widgetId]/index", () => {
 
     await userEvent.type(await screen.findByLabelText("Title"), "Updated");
 
-    await userEvent.type(screen.getByLabelText("Type"), "Table");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Type", "Table");
 
-    await userEvent.type(
-      screen.getByLabelText("Link Entity"),
-      "Plural entity-2"
-    );
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Link Entity", "Plural entity-2");
 
-    await userEvent.type(
-      screen.getByLabelText("Entity Tab"),
-      "Verified Entity View"
-    );
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Entity Tab", "Verified Entity View");
 
-    await userEvent.type(screen.getByLabelText("Width"), "1 Unit");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Width", "1 Unit");
 
-    await userEvent.type(screen.getByLabelText("Height"), "2 Units");
-    await userEvent.keyboard("{Enter}");
+    await selectCombobox("Height", "2 Units");
 
     await userEvent.type(screen.getByLabelText("Script"), "return 1");