chore: add test click flag row (#34)

Signed-off-by: Thomas Poignant <[email protected]>

Author: thomaspoignant

client/src/routes/authenticatedRoutes/flags/flagRow.test.tsx

@@ -15,6 +15,7 @@ vi.mock("../../../api/goffApi.ts", () => ({
   updateFeatureFlagStatusById: vi.fn(),
   deleteFeatureFlagById: vi.fn(),
 }));
+const mockedUsedNavigate = vi.fn();
 
 describe("flag row", () => {
   const handleDelete = vi.fn();
@@ -53,6 +54,40 @@ describe("flag row", () => {
       version: "0.0.1",
     };
   });
+
+  describe("click flag details", () => {
+    it("should redirect to the flag details page by clicking on the row", async () => {
+      vi.mock("react-router-dom", async () => {
+        const actual = await vi.importActual("react-router-dom");
+        return {
+          ...actual,
+          useNavigate: () => mockedUsedNavigate,
+        };
+      });
+
+      render(
+        <MemoryRouter>
+          <Table hoverable>
+            <TableBody className="divide-y">
+              <FlagRow
+                handleDelete={handleDelete}
+                handleDisable={handleDisable}
+                flag={defaultFlag}
+              />
+            </TableBody>
+          </Table>
+        </MemoryRouter>,
+      );
+      expect(screen.getByText(defaultFlag.name ?? "")).toBeVisible();
+      await userEvent.click(screen.getByText(defaultFlag.name ?? ""), {
+        delay: 100,
+      });
+      expect(mockedUsedNavigate).toHaveBeenCalledWith(
+        `/flags/${defaultFlag.id}`,
+      );
+    });
+  });
+
   describe("labels", () => {
     it("should display a labels (version, variations, type) of the flag", () => {
       render(

client/src/routes/authenticatedRoutes/flags/flagRow.tsx

@@ -119,7 +119,11 @@ export function FlagRow({
       <TableCell className={"max-w-fit"}>
         <div className={"right-1 flex justify-end"}>
           <Link to={flagDetailsPageLocation}>
-            <Button size="sm" className={"mr-5"}>
+            <Button
+              size="sm"
+              className={"mr-5"}
+              data-testid={"flag-row-info-button"}
+            >
               <Tooltip content={t(`${translationBaseKey}.tooltip.info`)}>
                 <HiInformationCircle className="h-4 w-4" />
               </Tooltip>