🧪 test(user-preferences): update theme tests

src/__tests__/_/api-handlers/index.ts

@@ -10,6 +10,7 @@ import { integrationsApiHandlers } from "./integrations";
 import { versionApiHandlers } from "./versions";
 import { portalApiHandlers } from "./portal";
 import { menuApiHandlers } from "./menu";
+import { userPreferencesApiHandlers } from "./user-preferences";
 
 export const apiHandlers = [
   ...setupApiHandlers,
@@ -24,4 +25,5 @@ export const apiHandlers = [
   ...versionApiHandlers,
   ...portalApiHandlers,
   ...menuApiHandlers,
+  ...userPreferencesApiHandlers,
 ];

src/__tests__/_/api-handlers/user-preferences.ts

@@ -0,0 +1,24 @@
+import { rest } from "msw";
+import { BASE_TEST_URL } from "./_utils";
+
+const USER_PREFERENCES = {
+  theme: "dark",
+};
+
+export const userPreferencesApiHandlers = [
+  rest.get(
+    BASE_TEST_URL("/api/user-preferences/:key"),
+    async (req, res, ctx) => {
+      return res(
+        ctx.json({ data: USER_PREFERENCES[req.params.key as string] })
+      );
+    }
+  ),
+  rest.put(
+    BASE_TEST_URL("/api/user-preferences/:key"),
+    async (req, res, ctx) => {
+      USER_PREFERENCES[req.params.key as string] = (await req.json()).data;
+      return res(ctx.status(201));
+    }
+  ),
+];

src/__tests__/account/password.spec.tsx

@@ -56,6 +56,8 @@ describe("pages/account/password", () => {
       </ApplicationRoot>
     );
 
+    await userEvent.click(screen.getByRole("button", { name: "Close Toast" }));
+
     await userEvent.type(
       await screen.findByLabelText("Old Password"),
       "Old Password"
@@ -70,7 +72,7 @@ describe("pages/account/password", () => {
       screen.getByRole("button", { name: "Update Password" })
     );
 
-    expect((await screen.findAllByRole("status"))[0]).toHaveTextContent(
+    expect(await screen.findByRole("status")).toHaveTextContent(
       "Password will not be changed on demo account"
     );
   });

src/__tests__/account/preferences.spec.tsx

@@ -42,7 +42,7 @@ describe("pages/account/preferences", () => {
     );
 
     expect(await screen.findByRole("status")).toHaveTextContent(
-      "Account Preferences Saved Successfully"
+      "Theme Preference Saved Successfully"
     );
   });
 

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

@@ -75,14 +75,16 @@ describe("pages/admin/[entity]/config/presentation", () => {
       </ApplicationRoot>
     );
 
+    await userEvent.click(screen.getByRole("button", { name: "Close Toast" }));
+
     await userEvent.type(screen.getByLabelText("Script"), "invalid");
 
     await userEvent.click(
       screen.getByRole("button", {
         name: "Save Presentation Scripts",
       })
     );
-    expect((await screen.findAllByRole("status"))[0]).toHaveTextContent(
+    expect(await screen.findByRole("status")).toHaveTextContent(
       "Expression: •JS-Error: SyntaxError: Unexpected identifier"
     );
   });
@@ -108,14 +110,16 @@ describe("pages/admin/[entity]/config/presentation", () => {
       </ApplicationRoot>
     );
 
+    await userEvent.click(screen.getByRole("button", { name: "Close Toast" }));
+
     await userEvent.clear(screen.getByLabelText("Script"));
 
     await userEvent.click(
       screen.getByRole("button", {
         name: "Save Presentation Scripts",
       })
     );
-    expect((await screen.findAllByRole("status"))[0]).toHaveTextContent(
+    expect(await screen.findByRole("status")).toHaveTextContent(
       "Presentation Scripts Saved Successfully"
     );
   });

src/__tests__/admin/settings/theme.spec.tsx

@@ -47,7 +47,7 @@ describe("pages/admin/settings/theme", () => {
     );
 
     expect((await screen.findAllByRole("status"))[1]).toHaveTextContent(
-      "Theme Settings Saved Successfully"
+      "Theme Preference Saved Successfully"
     );
   });
 
@@ -95,11 +95,11 @@ describe("pages/admin/settings/theme", () => {
     );
 
     expect((await screen.findAllByRole("status"))[2]).toHaveTextContent(
-      "Account Preferences Saved Successfully"
+      "Theme Settings Saved Successfully"
     );
 
     expect((await screen.findAllByRole("status"))[3]).toHaveTextContent(
-      "Theme Settings Saved Successfully"
+      "Theme Preference Saved Successfully"
     );
   });
 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 
 import UpdateDashboardWidget from "pages/dashboard/[dashboardId]/widget/[widgetId]/index";
@@ -110,7 +110,9 @@ describe("pages/dashboard/[dashboardId]/widget/[widgetId]/index", () => {
       screen.getByRole("button", { name: "Update Dashboard Widget" })
     );
 
-    expect(await screen.findAllByRole("status")).toHaveLength(2);
+    await waitFor(async () => {
+      expect(await screen.findAllByRole("status")).toHaveLength(2);
+    });
   });
 
   it("should render error when widget is not present", async () => {

src/__tests__/dashboard/[dashboardId]/widget/create.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 
 import CreateDashboardWidget from "pages/dashboard/[dashboardId]/widget/create";
@@ -114,6 +114,8 @@ describe("pages/dashboard/[dashboardId]/widget/create", () => {
       screen.getByRole("button", { name: "Create Dashboard Widget" })
     );
 
-    expect(await screen.findAllByRole("status")).toHaveLength(2);
+    await waitFor(async () => {
+      expect(await screen.findAllByRole("status")).toHaveLength(2);
+    });
   });
 });

src/__tests__/dashboard/manage__actions.spec.tsx

@@ -85,7 +85,7 @@ describe("pages/admin/settings/dashboard", () => {
         await within(confirmBox).findByRole("button", { name: "Confirm" })
       );
 
-      expect((await screen.findAllByRole("status"))[0]).toHaveTextContent(
+      expect(await screen.findByRole("status")).toHaveTextContent(
         "Widget Deleted Successfully"
       );
 

src/__tests__/integrations/variables__constants.spec.tsx

@@ -107,6 +107,10 @@ describe("pages/integrations/variables => constants", () => {
         </ApplicationRoot>
       );
 
+      await userEvent.click(
+        screen.getByRole("button", { name: "Close Toast" })
+      );
+
       const table = screen.getByRole("table");
 
       const tableRows = await within(table).findAllByRole("row");
@@ -129,7 +133,7 @@ describe("pages/integrations/variables => constants", () => {
         within(dialog).getByRole("button", { name: "Update Constant" })
       );
 
-      expect((await screen.findAllByRole("status"))[0]).toHaveTextContent(
+      expect(await screen.findByRole("status")).toHaveTextContent(
         "Constant Saved Successfully"
       );
     });
@@ -159,6 +163,10 @@ describe("pages/integrations/variables => constants", () => {
         </ApplicationRoot>
       );
 
+      await userEvent.click(
+        screen.getByRole("button", { name: "Close Toast" })
+      );
+
       const table = screen.getByRole("table");
 
       const tableRows = await within(table).findAllByRole("row");
@@ -181,7 +189,7 @@ describe("pages/integrations/variables => constants", () => {
 
       expect(await within(table).findAllByRole("row")).toHaveLength(4);
 
-      expect((await screen.findAllByRole("status"))[0]).toHaveTextContent(
+      expect(await screen.findByRole("status")).toHaveTextContent(
         "Constant Deleted Successfully"
       );
     });

src/backend/data/data-access/_Base.ts

@@ -56,7 +56,6 @@ export abstract class BaseDataAccessService<T> {
       return query;
     }
 
-    // :eyes
     if (operator !== FilterOperators.IS_NULL && !value) {
       return query;
     }

src/frontend/hooks/auth/preferences.store.ts

@@ -17,8 +17,8 @@ const userPrefrencesApiPath = (key: UserPreferencesKeys) => {
 export const MAKE_USER_PREFERENCE_CRUD_CONFIG = (key: UserPreferencesKeys) => {
   return MAKE_CRUD_CONFIG({
     path: "N/A",
-    plural: USER_PREFERENCES_CONFIG[key].label,
-    singular: USER_PREFERENCES_CONFIG[key].label,
+    plural: `${USER_PREFERENCES_CONFIG[key].label} Preference `,
+    singular: `${USER_PREFERENCES_CONFIG[key].label} Preference `,
   });
 };
 

src/frontend/hooks/configuration/configuration.store.ts

@@ -10,7 +10,6 @@ import { AppStorage } from "frontend/lib/storage/app";
 import { isRouterParamEnabled } from "..";
 import { MAKE_APP_CONFIGURATION_CRUD_CONFIG } from "./configuration.constant";
 
-// :eyes
 export const configurationApiPath = (
   key: AppConfigurationKeys,
   entity?: string,

src/frontend/lib/toast/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import toast from "react-hot-toast";
-
+import toast, { Toast } from "react-hot-toast";
+import { X } from "react-feather";
 import { getBestErrorMessage } from "./utils";
 
 const COLORS = {
@@ -14,29 +14,53 @@ const toastStyle = (color: keyof typeof COLORS) => ({
   maxWidth: "550px",
 });
 
+function ToastMessage({ message, toastT }: { message: string; toastT: Toast }) {
+  return (
+    <span
+      style={{
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <span>{message}</span>
+      <X
+        size="18"
+        role="button"
+        style={{
+          cursor: "pointer",
+          marginLeft: "12px",
+        }}
+        aria-label="Close Toast"
+        onClick={() => {
+          toast.dismiss(toastT.id);
+        }}
+      />
+    </span>
+  );
+}
+
 export const ToastService = {
   success: (
     message:
       | string
       | { message: string; action: { label: string; action: () => void } }
   ) => {
     if (typeof message === "string") {
-      toast.success(message as string, {
+      toast.success((t) => <ToastMessage message={message} toastT={t} />, {
         style: toastStyle("success"),
+        duration: 7000,
       });
       return;
     }
 
     toast.success(
       (t) => (
         <div>
-          <span>{message.message}</span>
-          <br />
+          <ToastMessage message={message.message} toastT={t} />
           <div
             style={{
               display: "flex",
-              justifyContent: "end",
-              flexDirection: "row",
+              justifyContent: "center",
             }}
           >
             <button
@@ -46,13 +70,14 @@ export const ToastService = {
                 toast.dismiss(t.id);
               }}
               style={{
+                cursor: "pointer",
                 border: 0,
                 display: "inline-block",
                 background: "inherit",
                 padding: 0,
                 color: COLORS.success,
-                fontSize: 14,
-                marginTop: 4,
+                fontSize: 15,
+                marginTop: 8,
               }}
             >
               {message.action.label}
@@ -68,7 +93,11 @@ export const ToastService = {
   },
 
   error: (message: unknown) =>
-    toast.error(getBestErrorMessage(message), {
-      style: toastStyle("danger"),
-    }),
+    toast.error(
+      (t) => <ToastMessage message={getBestErrorMessage(message)} toastT={t} />,
+      {
+        style: toastStyle("danger"),
+        duration: 7000,
+      }
+    ),
 };

src/pages/api/account/index.ts

@@ -8,7 +8,6 @@ export default requestHandler({
     return await usersApiController.listUsers();
   },
 
-  // :eyes
   POST: async (getValidatedRequest) => {
     const validatedRequest = await getValidatedRequest([
       {

src/shared/user-preferences/constants.ts

@@ -1,4 +1,3 @@
-import { z } from "zod";
 import { BaseUserPreferencesKeys } from "./base-types";
 import { PortalUserPreferencesKeys, PORTAL_CONFIGURATION_KEYS } from "./portal";
 import { IUserPreferencesBag } from "./types";
@@ -15,6 +14,5 @@ export const USER_PREFERENCES_CONFIG: Record<
   theme: {
     label: "Theme",
     defaultValue: "light",
-    validation: z.enum(["light", "dark"]),
   },
 };

src/shared/user-preferences/types.ts

@@ -1,7 +1,4 @@
-import { z } from "zod";
-
 export interface IUserPreferencesBag {
   defaultValue: unknown;
   label: string;
-  validation?: z.ZodType;
 }