test: Add initial cases for InputDetails.

cartesi · Sep 27, 2023 · 3a953a1 · 3a953a1
1 parent 2c85908
commit 3a953a1
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 12 deletions.
diff --git a/packages/ui/src/InputDetails/InputDetailsContext.tsx b/packages/ui/src/InputDetails/InputDetailsContext.tsx
@@ -104,11 +104,6 @@ export const useSupportedTabs = () => {
     return result;
 };
 
-export const useAvailableContent = () => {
-    const [result] = useSelector(prop("availableContent"));
-    return result;
-};
-
 export const useInputDetailsState = () => {
     const ctx = useContext(InputDetailsContext);
     return ctx.state;

diff --git a/packages/ui/src/InputDetails/NoticeContent.tsx b/packages/ui/src/InputDetails/NoticeContent.tsx
@@ -4,8 +4,13 @@ import { PageableContent, PageableContentProps } from "./PageableContent";
 
 export interface NoticeContentType extends FC<PageableContentProps> {}
 
-const NoticeContent: NoticeContentType = (props) => PageableContent(props);
+const DISPLAY_NAME = "NoticeContent" as const;
 
-NoticeContent.displayName = "NoticeContent";
+const NoticeContent: NoticeContentType = (props) => {
+    PageableContent.displayName = DISPLAY_NAME;
+    return PageableContent(props);
+};
+
+NoticeContent.displayName = DISPLAY_NAME;
 
 export default NoticeContent;
diff --git a/packages/ui/src/InputDetails/PageableContent.tsx b/packages/ui/src/InputDetails/PageableContent.tsx
@@ -104,6 +104,7 @@ export const PageableContent: FunctionComponent<PageableContentProps> = ({
     return (
         <Box pos="relative" h="100%">
             <LoadingOverlay
+                data-testid={`loading-overlay-${PageableContent.displayName?.toLowerCase()}`}
                 visible={isLoading}
                 zIndex={1000}
                 overlayProps={{ blur: 2 }}

diff --git a/packages/ui/src/InputDetails/ReportContent.tsx b/packages/ui/src/InputDetails/ReportContent.tsx
@@ -4,8 +4,13 @@ import { PageableContent, PageableContentProps } from "./PageableContent";
 
 export interface ReportContentType extends FC<PageableContentProps> {}
 
-const ReportContent: ReportContentType = (props) => PageableContent(props);
+const DISPLAY_NAME = "ReportContent" as const;
 
-ReportContent.displayName = "ReportContent";
+const ReportContent: ReportContentType = (props) => {
+    PageableContent.displayName = DISPLAY_NAME;
+    return PageableContent(props);
+};
+
+ReportContent.displayName = DISPLAY_NAME;
 
 export default ReportContent;
diff --git a/packages/ui/src/InputDetails/VoucherContent.tsx b/packages/ui/src/InputDetails/VoucherContent.tsx
@@ -4,8 +4,13 @@ import { PageableContent, PageableContentProps } from "./PageableContent";
 
 export interface VoucherContentType extends FC<PageableContentProps> {}
 
-const VoucherContent: VoucherContentType = (props) => PageableContent(props);
+const DISPLAY_NAME = "VoucherContent" as const;
 
-VoucherContent.displayName = "VoucherContent";
+const VoucherContent: VoucherContentType = (props) => {
+    PageableContent.displayName = DISPLAY_NAME;
+    return PageableContent(props);
+};
+
+VoucherContent.displayName = DISPLAY_NAME;
 
 export default VoucherContent;
diff --git a/packages/ui/src/InputDetails/index.tsx b/packages/ui/src/InputDetails/index.tsx
@@ -103,7 +103,7 @@ const InputDetailsContent: FC = () => {
                 return !childComp ? (
                     <Fragment key={tab.label} />
                 ) : (
-                    <Tabs.Panel key={`panel-${tab.label}`} value={tab.label}>
+                    <Tabs.Panel key={`panel-${tab.label}`} value={tab.label} data-testid={`panel-${tab.label.toLowerCase()}`} >
                         {childComp}
                     </Tabs.Panel>
                 );

diff --git a/packages/ui/test/InputDetails/InputDetails.test.tsx b/packages/ui/test/InputDetails/InputDetails.test.tsx
@@ -0,0 +1,182 @@
+import {
+    cleanup,
+    fireEvent,
+    getByDisplayValue,
+    getByLabelText,
+    getByTestId,
+    getByText,
+    queryByText,
+    render,
+    screen,
+    waitFor,
+} from "@testing-library/react";
+import { act } from "react-dom/test-utils";
+import { describe, expect, it } from "vitest";
+import {
+    InputContent,
+    InputDetails,
+    NoticeContent,
+    ReportContent,
+    VoucherContent,
+} from "../../src/InputDetails/index";
+import withMantineTheme from "../utils/WithMantineTheme";
+import { jsonWithdraw0, queryContentAsHex, reportText } from "./mocks";
+
+const InputDetailsE = withMantineTheme(InputDetails);
+
+describe("Rollups InputDetails", () => {
+    beforeEach(() => cleanup());
+
+    it("Should render all the tabs and contents", () => {
+        render(
+            <InputDetailsE>
+                <InputContent content={queryContentAsHex} contentType="raw" />
+                <VoucherContent content={jsonWithdraw0} contentType="json" />
+                <NoticeContent content={reportText} contentType="text" />
+                <ReportContent content={reportText} contentType="text" />
+            </InputDetailsE>,
+        );
+
+        expect(screen.getByText("Input")).toBeInTheDocument();
+        expect(screen.getByText("Vouchers")).toBeInTheDocument();
+        expect(screen.getByText("Reports")).toBeInTheDocument();
+        expect(screen.getByText("Notices")).toBeInTheDocument();
+
+        const inputContentArea = screen.getByRole("tabpanel");
+        expect(getByText(inputContentArea, "Raw")).toBeInTheDocument();
+        expect(getByText(inputContentArea, "As Text")).toBeInTheDocument();
+        expect(getByText(inputContentArea, "As JSON")).toBeInTheDocument();
+        expect(
+            getByDisplayValue(inputContentArea, queryContentAsHex),
+        ).toBeInTheDocument();
+    });
+
+    it("should disable the tabs when an specific content is logically not rendered", () => {
+        render(
+            <InputDetailsE>
+                <InputContent content={queryContentAsHex} contentType="raw" />
+                <VoucherContent content={jsonWithdraw0} contentType="json" />
+            </InputDetailsE>,
+        );
+
+        expect(screen.getByText("Reports")).toBeInTheDocument();
+        expect(screen.getByText("Notices")).toBeInTheDocument();
+
+        expect(screen.getByText("Reports").closest("button")).toBeDisabled();
+        expect(screen.getByText("Notices").closest("button")).toBeDisabled();
+    });
+
+    it("should display paging information when available", async () => {
+        const onNext = vi.fn();
+        const onPrev = vi.fn();
+        render(
+            <InputDetailsE>
+                <InputContent content={queryContentAsHex} contentType="raw" />
+                <VoucherContent
+                    content={jsonWithdraw0}
+                    contentType="json"
+                    paging={{
+                        onNextPage: onNext,
+                        onPreviousPage: onPrev,
+                        total: 3,
+                    }}
+                />
+            </InputDetailsE>,
+        );
+
+        act(() => {
+            fireEvent.click(screen.getByText("Vouchers"));
+        });
+
+        await waitFor(() =>
+            expect(screen.getByTestId("panel-vouchers")).not.toHaveStyle(
+                "display: none",
+            ),
+        );
+
+        const voucherPanel = screen.getByTestId("panel-vouchers");
+
+        expect(getByText(voucherPanel, "1 of 3")).toBeInTheDocument();
+        expect(
+            getByLabelText(voucherPanel, "Button to load the previous content"),
+        ).toBeInTheDocument();
+
+        expect(
+            getByLabelText(voucherPanel, "Button to load the previous content"),
+        ).toBeDisabled();
+
+        expect(
+            getByLabelText(voucherPanel, "Button to load the next content"),
+        ).toBeInTheDocument();
+    });
+
+    it("should display a connect button when voucher|notice|report is disconnected and fire onConnect when clicked", async () => {
+        const onConnect = vi.fn();
+        render(
+            <InputDetailsE>
+                <InputContent content={queryContentAsHex} contentType="raw" />
+                <VoucherContent
+                    isConnected={false}
+                    onConnect={onConnect}
+                    content={jsonWithdraw0}
+                    contentType="json"
+                />
+            </InputDetailsE>,
+        );
+
+        act(() => {
+            fireEvent.click(screen.getByText("Vouchers"));
+        });
+
+        await waitFor(() =>
+            expect(screen.getByTestId("panel-vouchers")).not.toHaveStyle(
+                "display: none",
+            ),
+        );
+
+        const voucherPanel = screen.getByTestId("panel-vouchers");
+
+        act(() => {
+            fireEvent.click(getByText(voucherPanel, "Connect"));
+        });
+
+        expect(queryByText(voucherPanel, "Raw")).not.toBeInTheDocument();
+        expect(queryByText(voucherPanel, "As Text")).not.toBeInTheDocument();
+        expect(queryByText(voucherPanel, "As JSON")).not.toBeInTheDocument();
+        expect(getByText(voucherPanel, "Connect")).toBeInTheDocument();
+
+        expect(onConnect).toHaveBeenCalledTimes(1);
+    });
+
+    it("should display a overlay spinner when the content is loading", async () => {
+        render(
+            <InputDetailsE>
+                <InputContent content={queryContentAsHex} contentType="raw" />
+                <VoucherContent
+                    isLoading={true}
+                    content={""}
+                    contentType="json"
+                />
+                <ReportContent content="" contentType="raw" isLoading={true} />
+            </InputDetailsE>,
+        );
+
+        const panelName = "panel-vouchers";
+
+        act(() => {
+            fireEvent.click(screen.getByText("Vouchers"));
+        });
+
+        await waitFor(() =>
+            expect(screen.getByTestId(panelName)).not.toHaveStyle(
+                "display: none",
+            ),
+        );
+
+        const voucherPanel = screen.getByTestId(panelName);
+
+        expect(
+            getByTestId(voucherPanel, "loading-overlay-vouchercontent"),
+        ).toBeInTheDocument();
+    });
+});
diff --git a/packages/ui/test/InputDetails/mocks.ts b/packages/ui/test/InputDetails/mocks.ts
@@ -0,0 +1,9 @@
+
+export const reportText = "0x6f696969";
+export const jsonWithdraw0 =
+    "0x7b0a20202020226d6574686f64223a202265726332307769746864726177616c222c0a202020202261726773223a207b0a2020202020202020226572633230223a2022307830353963373530374239373364313531323736386330366633326138313342433933443833454232222c0a202020202020202022616d6f756e74223a203130300a202020207d0a7d";
+export const jsonWithdraw1 =
+    "0x7b0a20202020226d6574686f64223a202265726332307769746864726177616c222c0a202020202261726773223a207b0a2020202020202020226572633230223a2022307835396236373065396641394430413432373735314166323031443637363731396139373038353762222c0a202020202020202022616d6f756e74223a203130300a202020207d0a7d";
+export const jsonWithdraw2 =
+    "0x7b0a20202020226d6574686f64223a202265726332307769746864726177616c222c0a202020202261726773223a207b0a2020202020202020226572633230223a2022307835396236373065396641394430413432373735314166323031443637363731396139373038353762222c0a202020202020202022616d6f756e74223a2031303030303030303030303030303030303030300a202020207d0a7d";
+export const queryContentAsHex = `0x494e5345525420494e544f20636572746966696572202056414c554553202827307866434432423566316346353562353643306632323464614439394331346234454530393237346433272c3130202c273078664344324235663163463535623536433066323234646144393943313462344545303932373464332729`;