Fix tests with Collapse animations, ignore coverage folder

dobrac · Apr 18, 2024 · 6897ef1 · 6897ef1
1 parent f719bf0
commit 6897ef1
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 55 deletions.
diff --git a/.idea/grpcflair.iml b/.idea/grpcflair.iml
diff --git 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
@@ -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
@@ -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
@@ -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,
+  };
+});