From 6897ef1c1c2a8afa35a87f7c9ec38af456a7666d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Dobr=C3=BD?= <jakub.dobry8@gmail.com>
Date: Thu, 18 Apr 2024 05:04:20 +0200
Subject: [PATCH] Fix tests with Collapse animations, ignore coverage folder

---
 .idea/grpcflair.iml                         |  1 +
 web/__tests__/components/Endpoints.test.tsx | 61 ++++-----------------
 web/src/components/Endpoints.tsx            | 12 ++--
 web/src/components/parts/Type.tsx           |  1 +
 web/tests/mocks/react-bootstrap.tsx         | 15 +++++
 5 files changed, 35 insertions(+), 55 deletions(-)
 create mode 100644 web/tests/mocks/react-bootstrap.tsx

diff --git a/.idea/grpcflair.iml b/.idea/grpcflair.iml
index 8c20726..dde29ad 100644
--- a/.idea/grpcflair.iml
+++ b/.idea/grpcflair.iml
@@ -6,6 +6,7 @@
       <excludeFolder url="file://$MODULE_DIR$/temp" />
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
       <excludeFolder url="file://$MODULE_DIR$/out" />
+      <excludeFolder url="file://$MODULE_DIR$/web/coverage" />
       <excludeFolder url="file://$MODULE_DIR$/web/out" />
       <excludeFolder url="file://$MODULE_DIR$/proto-to-json/coverage" />
       <excludeFolder url="file://$MODULE_DIR$/reflection-to-json/coverage" />
diff --git a/web/__tests__/components/Endpoints.test.tsx b/web/__tests__/components/Endpoints.test.tsx
index 27574e2..30aef64 100644
--- a/web/__tests__/components/Endpoints.test.tsx
+++ b/web/__tests__/components/Endpoints.test.tsx
@@ -1,11 +1,10 @@
+import "../../tests/mocks/react-bootstrap";
 import { act, render, screen } from "@testing-library/react";
 import Endpoints from "@/components/Endpoints";
 import { SourceContext } from "@/contexts/SourceContext";
 import { DEFAULT_HOSTNAME } from "@/types/constants";
 import { context } from "../../tests/protobufjs-source";
 
-const COLLAPSE_TIMEOUT = 2000;
-
 describe("Endpoints", () => {
   beforeEach(async () => {
     await act(async () => {
@@ -43,89 +42,53 @@ describe("Endpoints", () => {
 
   it("collapse services", async () => {
     const services = screen.getByTestId("services");
+    expect(services).toBeVisible();
 
-    const button = services.querySelector("button");
+    const button = screen.getByText("Services");
     expect(button).toBeInTheDocument();
     if (!button) {
       throw new Error("Button not found");
     }
 
-    const detailsVisible = screen.queryAllByTestId("service-detail");
-    detailsVisible.forEach((detail) => {
-      expect(detail).toBeVisible();
-    });
-
     await act(async () => {
       button.click();
     });
 
-    new Promise((resolve) => {
-      setTimeout(() => {
-        const detailsHidden = screen.queryAllByTestId("service-detail");
-        detailsHidden.forEach((detail) => {
-          expect(detail).not.toBeVisible();
-        });
-        resolve(undefined);
-      }, COLLAPSE_TIMEOUT);
-    });
+    expect(services).not.toBeVisible();
   });
 
   it("collapse types", async () => {
-    const services = screen.getByTestId("types");
+    const types = screen.getByTestId("types");
+    expect(types).toBeVisible();
 
-    const button = services.querySelector("button");
+    const button = screen.getByText("Types");
     expect(button).toBeInTheDocument();
     if (!button) {
       throw new Error("Button not found");
     }
 
-    const detailsVisible = screen.queryAllByTestId("type-detail");
-    detailsVisible.forEach((detail) => {
-      expect(detail).toBeVisible();
-    });
-
     await act(async () => {
       button.click();
     });
 
-    new Promise((resolve) => {
-      setTimeout(() => {
-        const detailsHidden = screen.queryAllByTestId("type-detail");
-        detailsHidden.forEach((detail) => {
-          expect(detail).not.toBeVisible();
-        });
-        resolve(undefined);
-      }, COLLAPSE_TIMEOUT);
-    });
+    expect(types).not.toBeVisible();
   });
 
   it("collapse enums", async () => {
-    const services = screen.getByTestId("enums");
+    const enums = screen.getByTestId("enums");
+    expect(enums).toBeVisible();
 
-    const button = services.querySelector("button");
+    const button = screen.getByText("Enums");
     expect(button).toBeInTheDocument();
     if (!button) {
       throw new Error("Button not found");
     }
 
-    const detailsVisible = screen.queryAllByTestId("enum-detail");
-    detailsVisible.forEach((detail) => {
-      expect(detail).toBeVisible();
-    });
-
     await act(async () => {
       button.click();
     });
 
-    new Promise((resolve) => {
-      setTimeout(() => {
-        const detailsHidden = screen.queryAllByTestId("enum-detail");
-        detailsHidden.forEach((detail) => {
-          expect(detail).not.toBeVisible();
-        });
-        resolve(undefined);
-      }, COLLAPSE_TIMEOUT);
-    });
+    expect(enums).not.toBeVisible();
   });
 });
 
diff --git a/web/src/components/Endpoints.tsx b/web/src/components/Endpoints.tsx
index 558209a..a2214f5 100644
--- a/web/src/components/Endpoints.tsx
+++ b/web/src/components/Endpoints.tsx
@@ -82,7 +82,7 @@ export default function Endpoints() {
 
   return (
     <div>
-      <div data-testid="services">
+      <div>
         <CollapsibleHeader
           className={categoryClasses}
           open={openState[Category.SERVICES]}
@@ -93,7 +93,7 @@ export default function Endpoints() {
           <span className="h4 mb-0">Services</span>
         </CollapsibleHeader>
         <Collapse in={openState[Category.SERVICES]}>
-          <div>
+          <div data-testid="services">
             {services.map((service) => (
               <Service key={service.fullName} service={service} />
             ))}
@@ -103,7 +103,7 @@ export default function Endpoints() {
           </div>
         </Collapse>
       </div>
-      <div data-testid="types" className="mt-5">
+      <div className="mt-5">
         <CollapsibleHeader
           className={categoryClasses + " mb-2"}
           open={openState[Category.TYPES]}
@@ -114,7 +114,7 @@ export default function Endpoints() {
           <span className="h4 mb-0">Types</span>
         </CollapsibleHeader>
         <Collapse in={openState[Category.TYPES]}>
-          <div>
+          <div data-testid="types">
             <div className="d-grid gap-2">
               {types.map((type) => (
                 <Type key={type.fullName} type={type} />
@@ -126,7 +126,7 @@ export default function Endpoints() {
           </div>
         </Collapse>
       </div>
-      <div data-testid="enums" className="mt-5">
+      <div className="mt-5">
         <CollapsibleHeader
           className={categoryClasses + " mb-2"}
           open={openState[Category.ENUMS]}
@@ -137,7 +137,7 @@ export default function Endpoints() {
           <span className="h4 mb-0">Enums</span>
         </CollapsibleHeader>
         <Collapse in={openState[Category.ENUMS]}>
-          <div>
+          <div data-testid="enums">
             <div className="d-grid gap-2">
               {enums.map((enumType) => (
                 <EnumType key={enumType.fullName} enumType={enumType} />
diff --git a/web/src/components/parts/Type.tsx b/web/src/components/parts/Type.tsx
index d6d0af6..827f779 100644
--- a/web/src/components/parts/Type.tsx
+++ b/web/src/components/parts/Type.tsx
@@ -45,6 +45,7 @@ export default function Type({ type, dark, expanded }: TypeProps) {
         dark ? "bg-dark text-light" : "",
       ].join(" ")}
       data-testid="type-detail"
+      data-type-name={type.fullName}
     >
       <button
         className={[
diff --git a/web/tests/mocks/react-bootstrap.tsx b/web/tests/mocks/react-bootstrap.tsx
new file mode 100644
index 0000000..1252593
--- /dev/null
+++ b/web/tests/mocks/react-bootstrap.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+jest.mock("react-bootstrap", () => {
+  const Collapse = (props: { in: boolean; children: ReactNode }) => {
+    return (
+      <div style={{ display: props.in ? "block" : "none" }}>
+        {props.children}
+      </div>
+    );
+  };
+  return {
+    ...jest.requireActual("react-bootstrap"),
+    Collapse,
+  };
+});