Update EditNetworkMenu tests

trilitech · Oct 4, 2024 · 60ae1cd · 60ae1cd
1 parent 29cf685
commit 60ae1cd
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 38 deletions.
diff --git a/apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.test.tsx b/apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.test.tsx
@@ -13,6 +13,14 @@ beforeEach(() => {
 
 describe("<EditNetworkMenu />", () => {
   describe("edit mode", () => {
+    const updatedNetwork = {
+      ...customNetwork,
+      rpcUrl: "https://rpc.com",
+      tzktApiUrl: "https://tzkt.com",
+      tzktExplorerUrl: "https://explorer.com",
+      buyTezUrl: "",
+    };
+
     beforeEach(() => {
       store.dispatch(networksActions.upsertNetwork(customNetwork));
     });
@@ -27,14 +35,6 @@ describe("<EditNetworkMenu />", () => {
       const user = userEvent.setup();
       await renderInDrawer(<EditNetworkMenu network={customNetwork} />, store);
 
-      const updatedNetwork = {
-        ...customNetwork,
-        rpcUrl: "https://rpc",
-        tzktApiUrl: "https://tzkt",
-        tzktExplorerUrl: "https://explorer",
-        buyTezUrl: "",
-      };
-
       await act(() => user.clear(screen.getByLabelText("RPC URL")));
       await act(() => user.clear(screen.getByLabelText("Tzkt API URL")));
       await act(() => user.clear(screen.getByLabelText("Tzkt Explorer URL")));
@@ -45,7 +45,9 @@ describe("<EditNetworkMenu />", () => {
         user.type(screen.getByLabelText("Tzkt Explorer URL"), updatedNetwork.tzktExplorerUrl)
       );
 
-      expect(screen.getByText("Save changes")).toBeEnabled();
+      await waitFor(() => {
+        expect(screen.getByText("Save changes")).toBeEnabled();
+      });
 
       await act(() => user.click(screen.getByText("Save changes")));
       expect(store.getState().networks.available).toEqual([MAINNET, GHOSTNET, updatedNetwork]);
@@ -55,14 +57,6 @@ describe("<EditNetworkMenu />", () => {
       const user = userEvent.setup();
       await renderInDrawer(<EditNetworkMenu network={customNetwork} />, store);
 
-      const updatedNetwork = {
-        ...customNetwork,
-        rpcUrl: "https://rpc",
-        tzktApiUrl: "https://tzkt",
-        tzktExplorerUrl: "https://explorer",
-        buyTezUrl: "",
-      };
-
       await act(() => user.clear(screen.getByLabelText("RPC URL")));
       await act(() => user.clear(screen.getByLabelText("Tzkt API URL")));
       await act(() => user.clear(screen.getByLabelText("Tzkt Explorer URL")));
@@ -105,6 +99,51 @@ describe("<EditNetworkMenu />", () => {
       });
     });
 
+    describe("URL fields validation", () => {
+      const urlFields = [
+        { label: "RPC URL", required: true },
+        { label: "Tzkt API URL", required: true },
+        { label: "Tzkt Explorer URL", required: true },
+        { label: "Buy Tez URL", required: false },
+      ];
+
+      it.each(urlFields)("validates $label field", async ({ label, required }) => {
+        const user = userEvent.setup();
+        await renderInDrawer(<EditNetworkMenu />, store);
+
+        // Test invalid URL
+        await user.type(screen.getByLabelText(label), "invalid-url");
+        await user.tab(); // Trigger blur event
+
+        await waitFor(() => {
+          expect(screen.getByText(`Enter a valid ${label}`)).toBeVisible();
+        });
+
+        // Test empty field
+        await user.clear(screen.getByLabelText(label));
+        await user.tab(); // Trigger blur event
+
+        if (required) {
+          await waitFor(() => {
+            expect(screen.getByText(`${label} is required`)).toBeVisible();
+          });
+        } else {
+          await waitFor(() => {
+            expect(screen.queryByText(`${label} is required`)).not.toBeInTheDocument();
+          });
+        }
+
+        // Test valid URL
+        await user.type(screen.getByLabelText(label), "https://valid-url.com");
+        await user.tab(); // Trigger blur event
+
+        await waitFor(() => {
+          expect(screen.queryByText(`Enter a valid ${label}`)).not.toBeInTheDocument();
+        });
+        expect(screen.queryByText(`${label} is required`)).not.toBeInTheDocument();
+      });
+    });
+
     it("validates RPC URL field presence", async () => {
       await renderInDrawer(<EditNetworkMenu />, store);
       fireEvent.blur(screen.getByLabelText("RPC URL"));

diff --git a/apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.tsx b/apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.tsx
@@ -14,16 +14,24 @@ type EditNetworkMenuProps = {
 
 const removeTrailingSlashes = (url: string) => url.replace(/\/+$/g, "");
 
-const networkSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  rpcUrl: z.string().min(1, "RPC URL is required").url("Enter a valid RPC URL"),
-  tzktApiUrl: z.string().min(1, "Tzkt API URL is required").url("Enter a valid Tzkt API URL"),
-  tzktExplorerUrl: z
-    .string()
-    .min(1, "Tzkt Explorer URL is required")
-    .url("Enter a valid Tzkt Explorer URL"),
-  buyTezUrl: z.string().url("Enter a valid Buy Tez URL").or(z.literal("")),
-});
+const getNetworkSchema = (availableNetworks: Network[], network?: Network) =>
+  z.object({
+    name: network
+      ? z.string().optional()
+      : z
+          .string()
+          .min(1, "Name is required")
+          .refine(name => !availableNetworks.find(n => n.name === name), {
+            message: "Network with this name already exists",
+          }),
+    rpcUrl: z.string().min(1, "RPC URL is required").url("Enter a valid RPC URL"),
+    tzktApiUrl: z.string().min(1, "Tzkt API URL is required").url("Enter a valid Tzkt API URL"),
+    tzktExplorerUrl: z
+      .string()
+      .min(1, "Tzkt Explorer URL is required")
+      .url("Enter a valid Tzkt Explorer URL"),
+    buyTezUrl: z.string().url("Enter a valid Buy Tez URL").or(z.literal("")),
+  });
 
 export const EditNetworkMenu = ({ network }: EditNetworkMenuProps) => {
   const { goBack } = useDynamicDrawerContext();
@@ -37,7 +45,7 @@ export const EditNetworkMenu = ({ network }: EditNetworkMenuProps) => {
   } = useForm<Network>({
     mode: "onBlur",
     defaultValues: network,
-    resolver: zodResolver(networkSchema),
+    resolver: zodResolver(getNetworkSchema(availableNetworks, network)),
   });
 
   const onSubmit = (network: Network) => {
@@ -52,16 +60,7 @@ export const EditNetworkMenu = ({ network }: EditNetworkMenuProps) => {
           {!network && (
             <FormControl isInvalid={!!errors.name}>
               <FormLabel>Name</FormLabel>
-              <Input
-                placeholder="mainnet"
-                {...register("name", {
-                  validate: name => {
-                    if (availableNetworks.find(n => n.name === name)) {
-                      return "Network with this name already exists";
-                    }
-                  },
-                })}
-              />
+              <Input placeholder="mainnet" {...register("name")} />
               {errors.name && <FormErrorMessage>{errors.name.message}</FormErrorMessage>}
             </FormControl>
           )}