feat: adding more tests

apps/namadillo/src/App/Transfer/AssetCard.tsx

@@ -19,7 +19,12 @@ export const AssetCard = ({ asset }: AssetCardProps): JSX.Element => {
           alt={asset.name + ` logo`}
           className="w-full aspect-square"
         />
-      : <i className="bg-neutral-800 rounded-full aspect-square w-full" />}
+      : <img
+          className="bg-neutral-800 rounded-full aspect-square w-full"
+          alt="Logo not available"
+          role="img"
+        />
+      }
       <span className="text-left">{asset.name}</span>
     </span>
   );

apps/namadillo/src/App/Transfer/__mocks__/assets.tsx

@@ -0,0 +1,19 @@
+import { Asset } from "@chain-registry/types";
+
+export const assetMock: Partial<Asset> = {
+  name: "Ethereum",
+  symbol: "ETH",
+  logo_URIs: {
+    svg: "https://example.com/eth-icon.png",
+  },
+};
+
+export const assetMock2: Partial<Asset> = {
+  name: "Bitcoin",
+  symbol: "BTC",
+  logo_URIs: { svg: "btc.svg" },
+};
+
+export const assetMockList: Array<Partial<Asset>> = [assetMock, assetMock2];
+
+export const assetWithoutLogo: Partial<Asset> = { ...assetMock, logo_URIs: {} };

apps/namadillo/src/App/Transfer/__tests__/AssetCard.test.tsx

@@ -0,0 +1,23 @@
+import { Asset } from "@chain-registry/types";
+import { render, screen } from "@testing-library/react";
+import { AssetCard } from "App/Transfer/AssetCard";
+import { assetMock, assetWithoutLogo } from "App/Transfer/__mocks__/assets";
+
+describe("Component: AssetCard", () => {
+  it("should render asset name", () => {
+    render(<AssetCard asset={assetMock as Asset} />);
+    expect(screen.getByText("Ethereum")).toBeInTheDocument();
+  });
+
+  it("should render asset logo if available", () => {
+    render(<AssetCard asset={assetMock as Asset} />);
+    const logo = screen.getByAltText("Ethereum logo");
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute("src", assetMock.logo_URIs?.svg);
+  });
+
+  it("should render placeholder if logo is not available", () => {
+    render(<AssetCard asset={assetWithoutLogo as Asset} />);
+    expect(screen.getByAltText(/logo not available/i)).toBeInTheDocument();
+  });
+});

apps/namadillo/src/App/Transfer/__tests__/ChainCard.test.tsx

@@ -0,0 +1,18 @@
+import { Chain } from "@chain-registry/types";
+import { render, screen } from "@testing-library/react";
+import { ChainCard } from "App/Transfer/ChainCard";
+import { randomChainMock } from "../__mocks__/chains";
+
+describe("Component: ChainCard", () => {
+  it("renders the chain's name", () => {
+    render(<ChainCard chain={randomChainMock as Chain} />);
+    expect(screen.getByText(randomChainMock.pretty_name!)).toBeInTheDocument();
+  });
+
+  it("renders the chain's logo", () => {
+    render(<ChainCard chain={randomChainMock as Chain} />);
+    const logo = screen.getByAltText(`${randomChainMock.pretty_name!} logo`);
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute("src", randomChainMock.logo_URIs?.svg);
+  });
+});

apps/namadillo/src/App/Transfer/__tests__/SelectAssetModal.test.tsx

@@ -0,0 +1,64 @@
+import { Asset } from "@chain-registry/types";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { SelectAssetModal } from "App/Transfer/SelectAssetModal";
+import { assetMockList } from "../__mocks__/assets";
+
+describe("SelectAssetModal", () => {
+  const onCloseMock = jest.fn();
+  const onSelectMock = jest.fn();
+
+  it("should render the modal title", () => {
+    render(
+      <SelectAssetModal
+        onClose={onCloseMock}
+        onSelect={onSelectMock}
+        assets={assetMockList as Asset[]}
+      />
+    );
+    expect(screen.getByText("Select Asset")).toBeInTheDocument();
+  });
+
+  it("should render all assets", () => {
+    render(
+      <SelectAssetModal
+        onClose={onCloseMock}
+        onSelect={onSelectMock}
+        assets={assetMockList as Asset[]}
+      />
+    );
+    expect(screen.getByText("Bitcoin")).toBeInTheDocument();
+    expect(screen.getByText("Ethereum")).toBeInTheDocument();
+  });
+
+  it("should filter assets based on search input", async () => {
+    render(
+      <SelectAssetModal
+        onClose={onCloseMock}
+        onSelect={onSelectMock}
+        assets={assetMockList as Asset[]}
+      />
+    );
+    fireEvent.change(screen.getByPlaceholderText(/search/i, { exact: false }), {
+      target: { value: "Bit" },
+    });
+
+    // Event is debounced
+    waitFor(() => {
+      expect(screen.getByText("Bitcoin")).toBeInTheDocument();
+      expect(screen.queryByText("Ethereum")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should call onSelect and onClose when an asset is selected", () => {
+    render(
+      <SelectAssetModal
+        onClose={onCloseMock}
+        onSelect={onSelectMock}
+        assets={assetMockList as Asset[]}
+      />
+    );
+    fireEvent.click(screen.getByText("Bitcoin"));
+    expect(onSelectMock).toHaveBeenCalledWith(assetMockList[1]);
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+});

apps/namadillo/src/App/Transfer/__tests__/SelectedAsset.test.tsx

@@ -2,17 +2,10 @@ import { Asset, Chain } from "@chain-registry/types";
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { SelectedAsset } from "App/Transfer/SelectedAsset"; // Adjust the path accordingly
+import { assetMock } from "../__mocks__/assets";
 import { randomChainMock } from "../__mocks__/chains";
 
 describe("SelectedAsset", () => {
-  const mockAsset: Partial<Asset> = {
-    name: "Ethereum",
-    symbol: "ETH",
-    logo_URIs: {
-      svg: "https://example.com/eth-icon.png",
-    },
-  };
-
   it("renders with no chain and disables the button", () => {
     render(<SelectedAsset />);
     const button = screen.getByRole("button");
@@ -38,19 +31,19 @@ describe("SelectedAsset", () => {
     render(
       <SelectedAsset
         chain={randomChainMock as Chain}
-        asset={mockAsset as Asset}
+        asset={assetMock as Asset}
         onClick={handleClick}
       />
     );
 
     const button = screen.getByRole("button");
     expect(button).toBeEnabled();
 
-    const assetDenomination = screen.getByText(mockAsset.symbol!);
+    const assetDenomination = screen.getByText(assetMock.symbol!);
     expect(assetDenomination).toBeInTheDocument();
 
-    const assetImage = screen.getByAltText(`${mockAsset.name} image`);
-    expect(assetImage).toHaveAttribute("src", mockAsset.logo_URIs?.svg);
+    const assetImage = screen.getByAltText(`${assetMock.name} image`);
+    expect(assetImage).toHaveAttribute("src", assetMock.logo_URIs?.svg);
 
     fireEvent.click(button);
     expect(handleClick).toHaveBeenCalledTimes(1);