updated tests

src/__tests__/components/inputField.test.tsx

@@ -29,7 +29,7 @@ describe("InputField", () => {
     );
 
     // Click the edit icon to render the inputs
-    fireEvent.click(screen.getByTestId("edit-icon"));
+    fireEvent.click(screen.getByTestId("view-form"));
 
     // Check if the form is rendered
     const formElement = container.querySelector("form");

src/__tests__/pages/network/[id].test.tsx

@@ -5,7 +5,8 @@ import NetworkById from "~/pages/network/[id]";
 import userEvent from "@testing-library/user-event";
 import { useRouter } from "next/router";
 import { api } from "../../../utils/api";
-
+import { NextIntlProvider } from "next-intl";
+import enTranslation from "~/locales/en/common.json";
 // function createTestContext(network?: Network) {
 //   return {
 //     db: prisma,
@@ -27,8 +28,29 @@ jest.mock("../../../utils/api", () => ({
                 { ipRangeStart: "10.0.0.1", ipRangeEnd: "10.0.0.254" },
               ],
               routes: [{ target: "10.0.0.0/24" }],
+              dns: {
+                domain: "",
+                servers: [],
+              },
+              tags: [],
+              multicastLimit: 32,
+              enableBroadcast: true,
+              rutes: [
+                {
+                  target: "172.25.28.0/24",
+                  via: null,
+                },
+              ],
+              rules: [
+                {
+                  not: false,
+                  or: false,
+                  type: "ACTION_ACCEPT",
+                },
+              ],
             },
             members: [],
+            zombieMembers: [],
           },
           isLoading: false,
           refetch: jest.fn(),
@@ -98,8 +120,11 @@ describe("NetworkById component", () => {
     });
     api.network.getNetworkById.useQuery = useQueryMock;
 
-    render(<NetworkById />);
-
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <NetworkById />
+      </NextIntlProvider>
+    );
     // expect(screen.getByText(/loading/i)).toBeInTheDocument();
     expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
@@ -123,7 +148,11 @@ describe("NetworkById component", () => {
     });
     api.network.getNetworkById.useQuery = useQueryMock;
 
-    render(<NetworkById />);
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <NetworkById />
+      </NextIntlProvider>
+    );
     // await waitForElementToBeRemoved(() => screen.queryByText(/loading/i));
 
     expect(screen.getByText(/Network ID:/i)).toBeInTheDocument();
@@ -133,25 +162,41 @@ describe("NetworkById component", () => {
   });
 
   test("renders Network Settings divider", () => {
-    render(<NetworkById />);
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <NetworkById />
+      </NextIntlProvider>
+    );
     expect(screen.getByText(/Network Settings/i)).toBeInTheDocument();
   });
 
   test("renders Network Members divider", () => {
-    render(<NetworkById />);
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <NetworkById />
+      </NextIntlProvider>
+    );
     const matches = screen.getAllByText(/Network Members/i);
     expect(matches.length).toBe(2);
   });
 
   test("renders Network Start, Network End, and Network Cidr labels", () => {
-    render(<NetworkById />);
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <NetworkById />
+      </NextIntlProvider>
+    );
     expect(screen.getByText(/Network Start:/i)).toBeInTheDocument();
     expect(screen.getByText(/Network End:/i)).toBeInTheDocument();
     expect(screen.getByText(/Network Cidr:/i)).toBeInTheDocument();
   });
 
   test("renders warning message", () => {
-    render(<NetworkById />);
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <NetworkById />
+      </NextIntlProvider>
+    );
     expect(
       screen.getByText(
         /Join this network ID and the device will automatically be displayed/
@@ -161,7 +206,11 @@ describe("NetworkById component", () => {
 
   test("edit network name", async () => {
     // screen.debug();
-    render(<NetworkById />);
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <NetworkById />
+      </NextIntlProvider>
+    );
     const editIcon = screen.getByTestId("changeNetworkName");
     await userEvent.click(editIcon);
 

src/__tests__/pages/network/index.test.tsx

@@ -4,6 +4,8 @@ import { useRouter } from "next/router";
 import userEvent from "@testing-library/user-event";
 import { api } from "../../../utils/api";
 import Networks from "~/pages/network";
+import { NextIntlProvider } from "next-intl";
+import enTranslation from "~/locales/en/common.json";
 
 jest.mock("../../../utils/api", () => ({
   api: {
@@ -39,8 +41,12 @@ describe("Networks page", () => {
       isLoading: true,
       refetch: jest.fn(),
     });
-    render(<Networks />);
-    expect(screen.getByText("loading")).toBeInTheDocument();
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <Networks />
+      </NextIntlProvider>
+    );
+    expect(screen.getByText("Loading")).toBeInTheDocument();
   });
 
   it("displays networks and handles add network button", async () => {
@@ -65,7 +71,11 @@ describe("Networks page", () => {
     //   },
     // });
 
-    render(<Networks />);
+    render(
+      <NextIntlProvider locale="en" messages={enTranslation}>
+        <Networks />
+      </NextIntlProvider>
+    );
 
     expect(screen.getByText("Network 1")).toBeInTheDocument();
     expect(screen.getByText("Network 2")).toBeInTheDocument();

src/components/elements/inputField.tsx

@@ -110,7 +110,11 @@ const InputField = ({
             </div>
           </div>
           <div>
-            <button onClick={handleEditClick} className={`btn btn-${size}`}>
+            <button
+              data-testid="view-form"
+              onClick={handleEditClick}
+              className={`btn btn-${size}`}
+            >
               Change
             </button>
           </div>

src/components/modules/networkMulticast.tsx

@@ -103,7 +103,7 @@ export const NetworkMulticast = () => {
               <div className="join">
                 <input
                   name="multicastLimit"
-                  value={state.multicastLimit}
+                  value={state.multicastLimit || 0}
                   onChange={onChangeHandler}
                   className="input join-item input-sm  w-full"
                   placeholder={t("networkMulticast.NumberPlaceholder")}
@@ -142,7 +142,7 @@ export const NetworkMulticast = () => {
               <input
                 type="checkbox"
                 name="enableBroadcast"
-                checked={state.enableBroadcast}
+                checked={state.enableBroadcast || false}
                 className="checkbox-primary checkbox checkbox-sm"
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                   updateNetwork(

src/pages/login/forgotpassword/index.tsx

@@ -6,7 +6,7 @@ import {
   type ErrorData,
   type ZodErrorFieldErrors,
 } from "~/types/errorHandling";
-import { type GetStaticPropsContext } from "next";
+import { type GetServerSidePropsContext } from "next";
 
 const ForgotPassword = () => {
   const router = useRouter();
@@ -109,14 +109,14 @@ const ForgotPassword = () => {
   );
 };
 
-export async function getStaticProps(context: GetStaticPropsContext) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
   return {
     props: {
       // You can get the messages from anywhere you like. The recommended
       // pattern is to put them in JSON files separated by locale and read
       // the desired one based on the `locale` received from Next.js.
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-      messages: (await import(`../../locales/${context.locale}/common.json`))
+      messages: (await import(`~/locales/${context.locale}/common.json`))
         .default,
     },
   };

src/pages/user-settings/account/index.tsx

@@ -136,12 +136,10 @@ const Account = () => {
             </span>
           </label>
           <select
+            defaultValue={locale} // use `defaultValue` here
             onChange={(e) => void ChangeLanguage(e.target.value)}
             className="select select-bordered"
           >
-            <option disabled selected>
-              {languageNames[locale]}
-            </option>
             {locales.map((language) => (
               <option key={language} value={language}>
                 {languageNames[language]}