test: admin options render

components/admins/components/__tests__/adminOptions.test.tsx

@@ -0,0 +1,58 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import React from "react";
+import { screen, cleanup, within } from "@testing-library/react";
+import AdminOptions from "@/components/admins/components/adminOptions";
+import matchers from "@testing-library/jest-dom/matchers";
+import { renderWithChainProvider } from "@/tests/render";
+import { mockPoaParams, mockGroup } from "@/tests/mock";
+
+expect.extend(matchers);
+
+const renderWithProps = (props = {}) => {
+  const defaultProps = {
+    poaParams: mockPoaParams,
+    group: mockGroup,
+    isLoading: false,
+    address: "test_address",
+    admin: "admin1",
+  };
+  return renderWithChainProvider(<AdminOptions {...defaultProps} {...props} />);
+};
+
+describe("AdminOptions", () => {
+  afterEach(cleanup);
+
+  test("renders loading state correctly", () => {
+    renderWithProps({ isLoading: true });
+    expect(screen.getByText("Admin")).toBeInTheDocument();
+  });
+
+  test("renders admin details correctly when not loading", () => {
+    renderWithProps();
+    expect(screen.getByText("Admin")).toBeInTheDocument();
+    expect(screen.getByAltText("Profile Avatar")).toBeInTheDocument();
+    const titleContainer = screen.getByLabelText("title");
+    expect(within(titleContainer).getByText("title1")).toBeInTheDocument();
+    const detailsContainer = screen.getByLabelText("details");
+    expect(within(detailsContainer).getByText("details1")).toBeInTheDocument();
+  });
+
+  test("opens update modal on button click", () => {
+    renderWithProps();
+    const updateAdminButtonContainer = screen.getByLabelText("update admin");
+    const updateButton = within(updateAdminButtonContainer).getByText("Update Admin");
+    updateButton.click();
+    const modal = document.getElementById("update-admin-modal") as HTMLDialogElement;
+    expect(modal).toBeInTheDocument();
+    expect(modal.open).toBe(true);
+  });
+
+  test("opens description modal on button click", () => {
+    renderWithProps();
+    const descriptionButton = screen.getByLabelText("three-dots");
+    descriptionButton.click();
+    const modal = document.getElementById("description-modal") as HTMLDialogElement;
+    expect(modal).toBeInTheDocument();
+    expect(modal.open).toBe(true);
+  });
+});

components/admins/components/adminOptions.tsx

@@ -97,16 +97,17 @@ export default function AdminOptions({
               size={64}
             />
           </div>
-          <a className="lg:text-2xl text-xl leading-6 -mt-2">
+          <a className="lg:text-2xl text-xl leading-6 -mt-2" aria-label="title">
             {group?.ipfsMetadata?.title}
           </a>
 
-          <a className="text-sm leading-tight flex-wrap text-center text-neutral-content max-h-10 max-w-96 overflow-y-auto -mt-6">
+          <a className="text-sm leading-tight flex-wrap text-center text-neutral-content max-h-10 max-w-96 overflow-y-auto -mt-6" aria-label="details">
             {group?.ipfsMetadata?.details}
           </a>
           <button
             className="btn btn-sm btn-ghost absolute right-2 bottom-17"
             onClick={handleDescription}
+            aria-label="three-dots"
           >
             <BsThreeDots />
           </button>
@@ -121,6 +122,7 @@ export default function AdminOptions({
             <button
               className="btn hidden lg:block btn-primary btn-sm w-2/6"
               onClick={handleOpen}
+              aria-label="update admin"
             >
               Update Admin
             </button>

tests/mock.ts

@@ -2,6 +2,7 @@ import {Chain} from "@chain-registry/types";
 import {BondStatus, ParamsSDKType} from "@chalabi/manifestjs/dist/codegen/cosmos/staking/v1beta1/staking";
 import {ExtendedValidatorSDKType, TransactionGroup} from "@/components";
 import {CombinedBalanceInfo} from "@/pages/bank";
+import {ExtendedGroupType} from "@/hooks";
 
 export const mockBalances: CombinedBalanceInfo[] = [
   {
@@ -182,3 +183,28 @@ export const mockStakingParams: ParamsSDKType = {
   historical_entries: 200,
 };
 
+// TODO: Not compatible with alpha.12 as poaParams is not defined in the current version
+export const mockPoaParams = {
+  admins: ["admin1"],
+  allow_validator_self_exit: true,
+};
+
+export const mockGroup : ExtendedGroupType = {
+  id: 1n,
+  admin: "admin1",
+  metadata: "metadata1",
+  version: 1n,
+  created_at: new Date(),
+  ipfsMetadata: {
+    title: "title1",
+    summary: "summary1",
+    details: "details1",
+    authors: "author1",
+    proposalForumURL: "forum1.com",
+    voteOptionContext: "context1",
+  },
+  total_weight: "456",
+  policies: ["policy1"],
+  members: ["foo", "bar"],
+};
+