add ssr tests

jest.setup.ts

@@ -1 +1,3 @@
 import "@testing-library/jest-dom";
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+global.TextEncoder = require("util").TextEncoder;

src/components/accordion/Accordion.test.tsx

@@ -2,6 +2,7 @@ import { screen } from "@testing-library/react";
 import Accordion from "./Accordion";
 import Panel from "./Panel";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 const text = "Text";
 
@@ -17,5 +18,13 @@ describe("Accordion", () => {
     expect(accordionContent).toBeInTheDocument();
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(
+      <Accordion renderAll>
+        <Panel title="Panel 1">{text}</Panel>
+      </Accordion>
+    );
+  });
+
   // Add more tests as needed
 });

src/components/badge/Badge.test.tsx

@@ -2,6 +2,7 @@ import { screen } from "@testing-library/react";
 import Badge from "./Badge";
 import { BADGE_COLOR } from "./types";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 const content = "Badge";
 
@@ -13,5 +14,21 @@ describe("Badge", () => {
     expect(badgeElement).toBeInTheDocument();
   });
 
+  it("handles color prop", () => {
+    const { rerender } = render(<Badge content={content} color={BADGE_COLOR.accent} />);
+
+    let badgeElement = screen.getByText(content);
+    expect(badgeElement).toBeInTheDocument();
+
+    rerender(<Badge content={content} color={BADGE_COLOR.positive} />);
+
+    badgeElement = screen.getByText(content);
+    expect(badgeElement).toBeInTheDocument();
+  });
+
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(<Badge content={content} color={BADGE_COLOR.accent} />);
+  });
+
   // Add more tests as needed
 });

src/components/breadcrumbs/Breadcrumbs.test.tsx

@@ -1,6 +1,7 @@
 import { render } from "../../test-utils/render";
 import Breadcrumbs from "./Breadcrumbs";
 import BreadcrumbsItem from "./BreadcrumbsItem";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("Breadcrumbs", () => {
   it("renders without crashing", () => {
@@ -13,5 +14,15 @@ describe("Breadcrumbs", () => {
     );
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(
+      <Breadcrumbs>
+        <BreadcrumbsItem href="#">Parent Page</BreadcrumbsItem>
+        <BreadcrumbsItem href="#">Sub-Parent Page</BreadcrumbsItem>
+        <BreadcrumbsItem isActive>Current Page</BreadcrumbsItem>
+      </Breadcrumbs>
+    );
+  });
+
   // Add more tests as needed
 });

src/components/button-icon/ButtonIcon.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import ButtonIcon from "./ButtonIcon";
 import { BUTTON_SIZE } from "../button/types";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("ButtonIcon", () => {
   it("renders without crashing", () => {
@@ -22,5 +23,11 @@ describe("ButtonIcon", () => {
     await waitFor(() => expect(handleClick).toHaveBeenCalledTimes(1));
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(
+      <ButtonIcon size={BUTTON_SIZE.default} data-testid="Test Button" icon={<span>Icon</span>}></ButtonIcon>
+    );
+  });
+
   // Add more tests as needed
 });

src/components/button/Button.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import Button from "./Button";
 import { BUTTON_KIND } from "./types";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("Button", () => {
   it("renders without crashing", () => {
@@ -22,5 +23,9 @@ describe("Button", () => {
     await waitFor(() => expect(handleClick).toHaveBeenCalledTimes(1));
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(<Button kind={BUTTON_KIND.secondary}>Test Button</Button>);
+  });
+
   // Add more tests as needed
 });

src/components/card/Card.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from "@testing-library/react";
 import Card from "./Card";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("Card", () => {
   it("renders without crashing", () => {
@@ -10,5 +11,9 @@ describe("Card", () => {
     expect(cardElement).toBeInTheDocument();
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(<Card>Test Card</Card>);
+  });
+
   // Add more tests as needed
 });

src/components/chart/Chart.test.tsx

@@ -3,6 +3,7 @@ import Chart from "./ChartWrapper";
 import { LineSeries } from "./series";
 import { MockViewport, mockViewport } from "jsdom-testing-mocks";
 import { setupJestCanvasMock } from "jest-canvas-mock";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 let viewport: MockViewport;
 
@@ -44,5 +45,13 @@ describe("Chart", () => {
     );
   });
 
+  it("renders without crashing in SSR", () => {
+    createComponentSSRTest(
+      <Chart height={400}>
+        <LineSeries data={lineData} />
+      </Chart>
+    );
+  });
+
   // Add more tests as needed
 });

src/components/checkbox/Checkbox.test.tsx

@@ -2,6 +2,7 @@ import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import Checkbox, { LABEL_PLACEMENT } from "./Checkbox";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("Checkbox", () => {
   it("renders without crashing", () => {
@@ -21,5 +22,9 @@ describe("Checkbox", () => {
     await waitFor(() => expect(handleChange).toHaveBeenCalledTimes(1));
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(<Checkbox labelPlacement={LABEL_PLACEMENT.right}>Test Checkbox</Checkbox>);
+  });
+
   // Add more tests as needed
 });

src/components/codefield/CodeField.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from "@testing-library/react";
 import CodeField from "./CodeField";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("CodeField", () => {
   it("renders without crashing", () => {
@@ -10,5 +11,9 @@ describe("CodeField", () => {
     expect(codeElement).toBeInTheDocument();
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(<CodeField code="Test Code" />);
+  });
+
   // Add more tests as needed
 });

src/components/drawer/Drawer.test.tsx

@@ -2,6 +2,7 @@ import { screen } from "@testing-library/react";
 import Drawer from "./Drawer";
 import { ANCHOR, SIZE } from "baseui/drawer";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("Drawer", () => {
   it("renders without crashing", () => {
@@ -15,5 +16,33 @@ describe("Drawer", () => {
     expect(drawerElement).toBeInTheDocument();
   });
 
+  it("handles custom anchor and size", async () => {
+    const { rerender } = render(
+      <Drawer isOpen anchor={ANCHOR.right} size={SIZE.default}>
+        Test Drawer
+      </Drawer>
+    );
+
+    let drawerElement = screen.getByText(/Test Drawer/i);
+    expect(drawerElement).toBeInTheDocument();
+
+    rerender(
+      <Drawer isOpen anchor={ANCHOR.left} size={SIZE.full}>
+        Test Drawer
+      </Drawer>
+    );
+
+    drawerElement = screen.getByText(/Test Drawer/i);
+    expect(drawerElement).toBeInTheDocument();
+  });
+
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(
+      <Drawer isOpen anchor={ANCHOR.right} size={SIZE.default}>
+        Test Drawer
+      </Drawer>
+    );
+  });
+
   // Add more tests as needed
 });

src/components/error-page/ErrorPage.test.tsx

@@ -2,6 +2,7 @@ import { screen } from "@testing-library/react";
 import ErrorPage from "./ErrorPage";
 import { MockViewport, mockViewport } from "jsdom-testing-mocks";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 let viewport: MockViewport;
 
@@ -24,5 +25,11 @@ describe("ErrorPage", () => {
     expect(errorDescriptionElement).toBeInTheDocument();
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(
+      <ErrorPage errorCode={404} errorDescription="Page not found" redirectTitle="Go back" redirectPath="/" />
+    );
+  });
+
   // Add more tests as needed
 });

src/components/error-page/useIsMobile.ts

@@ -1,31 +1,30 @@
-import { useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import { mobileScreenMaxWidth } from "./styles";
-import { debounce } from "../../shared/utils/debounce";
-import { useOnWindowResize } from "../../shared/hooks/useOnWindowResize";
-import { isBrowser } from "../../shared/utils/isBrowser";
 
 const getUniversalMediaQueryMobile = () => {
-  if (!isBrowser()) {
-    return null;
-  }
-
   return window.matchMedia(`(max-width: ${mobileScreenMaxWidth}px)`);
 };
 
-const getisMobile = (): boolean => {
-  const mediaQueryMobile = getUniversalMediaQueryMobile();
-  return mediaQueryMobile ? mediaQueryMobile.matches : false;
-};
-
 export const useIsMobile = () => {
-  const [isMobile, setIsMobile] = useState<boolean>(getisMobile());
+  const [isMobile, setIsMobile] = useState<boolean>(true);
+
+  useLayoutEffect(() => {
+    const mediaQueryMobile = getUniversalMediaQueryMobile();
+
+    if (!mediaQueryMobile) {
+      return;
+    }
+
+    const listener = () => {
+      setIsMobile(mediaQueryMobile.matches);
+    };
 
-  const resize = debounce(() => {
-    const newIsMobileValue = getisMobile();
-    isMobile !== newIsMobileValue && setIsMobile(newIsMobileValue);
-  }, 100);
+    mediaQueryMobile.addEventListener("change", listener);
 
-  useOnWindowResize(resize);
+    return () => {
+      mediaQueryMobile.removeEventListener("change", listener);
+    };
+  }, []);
 
   return isMobile;
 };

src/components/file-uploader/FileUploader.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from "@testing-library/react";
 import FileUploader from "./FileUploader";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("FileUploader", () => {
   it("renders without crashing", () => {
@@ -9,5 +10,10 @@ describe("FileUploader", () => {
     const fileUploaderElement = screen.getByRole("button");
     expect(fileUploaderElement).toBeInTheDocument();
   });
+
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(<FileUploader />);
+  });
+
   // Add more tests as needed
 });

src/components/form-control/FormControl.test.tsx

@@ -2,6 +2,7 @@ import { screen } from "@testing-library/react";
 import FormControl from "./FormControl";
 import { INPUT_SIZE, Input } from "../input";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("FormControl", () => {
   it("renders without crashing", async () => {
@@ -15,5 +16,33 @@ describe("FormControl", () => {
     expect(formControlElement).toBeInTheDocument();
   });
 
+  it("handles custom size", async () => {
+    const { rerender } = render(
+      <FormControl size={INPUT_SIZE.medium}>
+        <Input placeholder="Test FormControl" />
+      </FormControl>
+    );
+
+    let formControlElement = screen.getByPlaceholderText(/Test FormControl/i);
+    expect(formControlElement).toBeInTheDocument();
+
+    rerender(
+      <FormControl size={INPUT_SIZE.small}>
+        <Input placeholder="Test FormControl" />
+      </FormControl>
+    );
+
+    formControlElement = screen.getByPlaceholderText(/Test FormControl/i);
+    expect(formControlElement).toBeInTheDocument();
+  });
+
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(
+      <FormControl size={INPUT_SIZE.medium}>
+        <Input placeholder="Test FormControl" />
+      </FormControl>
+    );
+  });
+
   // Add more tests as needed
 });

src/components/input/Input.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import Input from "./Input";
 import { INPUT_KIND, INPUT_SIZE } from "./types";
 import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../createComponentSSRTest";
 
 describe("Input", () => {
   it("renders without crashing", () => {
@@ -22,5 +23,9 @@ describe("Input", () => {
     await waitFor(() => expect(handleChange).toHaveBeenCalledTimes(1));
   });
 
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(<Input size={INPUT_SIZE.medium} kind={INPUT_KIND.primary}></Input>);
+  });
+
   // Add more tests as needed
 });