Merge pull request #2 from dobrac/user-testing/fixes

User Testing Fixes
dobrac · Apr 18, 2024 · 9d56b3a · 9d56b3a
2 parents 60ccf2f + a4b5c9a
commit 9d56b3a
Show file tree

Hide file tree

Showing 27 changed files with 728 additions and 168 deletions.
diff --git a/.idea/grpcflair.iml b/.idea/grpcflair.iml
diff --git a/web/__tests__/components/CollapsibleHeader.test.tsx b/web/__tests__/components/CollapsibleHeader.test.tsx
@@ -0,0 +1,31 @@
+import { act, render } from "@testing-library/react";
+import CollapsibleHeader from "@/components/CollapsibleHeader";
+
+describe("CollapsibleHeader", () => {
+  it("renders - expanded", async () => {
+    const onClick = jest.fn();
+    const elementRendered = await act(async () => {
+      return render(
+        <CollapsibleHeader onClick={onClick} open={true}>
+          Header
+        </CollapsibleHeader>,
+      );
+    });
+
+    const element = elementRendered.container.firstChild;
+    expect(element).toBeInTheDocument();
+  });
+  it("renders - collapsed", async () => {
+    const onClick = jest.fn();
+    const elementRendered = await act(async () => {
+      return render(
+        <CollapsibleHeader onClick={onClick} open={false}>
+          Header
+        </CollapsibleHeader>,
+      );
+    });
+
+    const element = elementRendered.container.firstChild;
+    expect(element).toBeInTheDocument();
+  });
+});
diff --git a/web/__tests__/components/Endpoints.test.tsx b/web/__tests__/components/Endpoints.test.tsx
@@ -1,3 +1,4 @@
+import "../../tests/mocks/react-bootstrap";
 import { act, render, screen } from "@testing-library/react";
 import Endpoints from "@/components/Endpoints";
 import { SourceContext } from "@/contexts/SourceContext";
@@ -7,7 +8,7 @@ import { context } from "../../tests/protobufjs-source";
 describe("Endpoints", () => {
   beforeEach(async () => {
     await act(async () => {
-      render(
+      return render(
         <SourceContext.Provider
           value={{
             hostname: DEFAULT_HOSTNAME,
@@ -38,4 +39,105 @@ describe("Endpoints", () => {
     const services = screen.getByTestId("enums");
     expect(services).toBeInTheDocument();
   });
+
+  it("collapse services", async () => {
+    const services = screen.getByTestId("services");
+    expect(services).toBeVisible();
+
+    const button = screen.getByText("Services");
+    expect(button).toBeInTheDocument();
+    if (!button) {
+      throw new Error("Button not found");
+    }
+
+    await act(async () => {
+      button.click();
+    });
+
+    expect(services).not.toBeVisible();
+  });
+
+  it("collapse types", async () => {
+    const types = screen.getByTestId("types");
+    expect(types).toBeVisible();
+
+    const button = screen.getByText("Types");
+    expect(button).toBeInTheDocument();
+    if (!button) {
+      throw new Error("Button not found");
+    }
+
+    await act(async () => {
+      button.click();
+    });
+
+    expect(types).not.toBeVisible();
+  });
+
+  it("collapse enums", async () => {
+    const enums = screen.getByTestId("enums");
+    expect(enums).toBeVisible();
+
+    const button = screen.getByText("Enums");
+    expect(button).toBeInTheDocument();
+    if (!button) {
+      throw new Error("Button not found");
+    }
+
+    await act(async () => {
+      button.click();
+    });
+
+    expect(enums).not.toBeVisible();
+  });
+});
+
+describe("Endpoints Errors", () => {
+  it("renders error", async () => {
+    const errorMessage = "Test error";
+    const rendered = await act(async () => {
+      return render(
+        <SourceContext.Provider
+          value={{
+            hostname: DEFAULT_HOSTNAME,
+            setHostname: jest.fn(),
+            context: undefined,
+            setContext: jest.fn(),
+            error: new Error(errorMessage),
+            setError: jest.fn(),
+          }}
+        >
+          <Endpoints />
+        </SourceContext.Provider>,
+      );
+    });
+
+    const containerElement = rendered.container.firstChild;
+    expect(containerElement).toHaveTextContent(errorMessage);
+
+    const services = rendered.queryByTestId("services");
+    expect(services).not.toBeInTheDocument();
+  });
+
+  it("renders no context", async () => {
+    const rendered = await act(async () => {
+      return render(
+        <SourceContext.Provider
+          value={{
+            hostname: DEFAULT_HOSTNAME,
+            setHostname: jest.fn(),
+            context: undefined,
+            setContext: jest.fn(),
+            error: undefined,
+            setError: jest.fn(),
+          }}
+        >
+          <Endpoints />
+        </SourceContext.Provider>,
+      );
+    });
+
+    const services = rendered.queryByTestId("services");
+    expect(services).not.toBeInTheDocument();
+  });
 });
diff --git a/web/__tests__/components/metadata/Metadata.tsx b/web/__tests__/components/metadata/Metadata.tsx
@@ -6,7 +6,11 @@ import {
   MetadataContext,
   MetadataContextData,
 } from "@/contexts/MetadataContext";
-import { AUTHORIZATION_METADATA_KEY } from "@/types/constants";
+import {
+  AuthorizationType,
+  typeToKey,
+  typeToPrefix,
+} from "@/components/metadata/Authorization";
 
 describe("Metadata", () => {
   const service = context.lookupService("helloworld.Greeter");
@@ -158,43 +162,49 @@ describe("Metadata", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders - add authorization", async () => {
-    let metadata: Metadata = {};
-    const contextMetadata: MetadataContextData = {
-      metadata: metadata,
-      setMetadata: (fun) => {
-        if (typeof fun !== "function") {
-          metadata = { ...metadata, ...fun };
-        } else {
-          metadata = { ...fun(metadata) };
-        }
-        return metadata;
-      },
-    };
-
-    await act(async () => {
-      render(
-        <MetadataContext.Provider value={contextMetadata}>
-          <MetadataModal show={true} onHide={() => {}} />
-        </MetadataContext.Provider>,
+  const authorizationTypes = Object.values(AuthorizationType);
+  authorizationTypes.forEach((type) => {
+    it(`renders - add authorization - ${type}`, async () => {
+      let metadata: Metadata = {};
+      const contextMetadata: MetadataContextData = {
+        metadata: metadata,
+        setMetadata: (fun) => {
+          if (typeof fun !== "function") {
+            metadata = { ...metadata, ...fun };
+          } else {
+            metadata = { ...fun(metadata) };
+          }
+          return metadata;
+        },
+      };
+
+      await act(async () => {
+        render(
+          <MetadataContext.Provider value={contextMetadata}>
+            <MetadataModal show={true} onHide={() => {}} />
+          </MetadataContext.Provider>,
+        );
+      });
+
+      const element = screen.getByTestId("metadata-modal");
+      expect(element).toBeInTheDocument();
+
+      const select = screen.getByTestId("metadata-authorization-select");
+      const input = screen.getByTestId("metadata-authorization-input");
+      const button = screen.getByTestId("metadata-authorization-set");
+
+      const myPrivateToken = "MyPrivateToken";
+
+      await act(async () => {
+        fireEvent.change(select, { target: { value: type } });
+        fireEvent.change(input, { target: { value: myPrivateToken } });
+        button.click();
+      });
+
+      expect(select).toHaveTextContent(type);
+      expect(metadata[typeToKey[type]]).toBe(
+        `${typeToPrefix[type]} ${myPrivateToken}`.trim(),
       );
     });
-
-    const element = screen.getByTestId("metadata-modal");
-    expect(element).toBeInTheDocument();
-
-    const input = screen.getByTestId("metadata-authorization-input");
-    const button = screen.getByTestId("metadata-authorization-set");
-
-    const myPrivateToken = "MyPrivateToken";
-
-    await act(async () => {
-      fireEvent.change(input, { target: { value: myPrivateToken } });
-      button.click();
-    });
-
-    expect(metadata[AUTHORIZATION_METADATA_KEY]).toBe(
-      `Bearer ${myPrivateToken}`,
-    );
   });
 });
diff --git a/web/__tests__/components/parts/method/__snapshots__/Method.test.tsx.snap b/web/__tests__/components/parts/method/__snapshots__/Method.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`Method renders - execution 1`] = `
     </pre>
   </div>
   <pre
-    class="bg-dark text-light rounded-1 m-0 py-1 px-2 text-break "
+    class="bg-body text-dark rounded-1 m-0 py-1 px-2 text-break "
     data-testid="json-block"
     style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(248, 248, 255);"
   >