From 69182ba9ff94faa3bcb86d16db2c73f61bb7ec3f Mon Sep 17 00:00:00 2001 From: Pedro Rezende Date: Thu, 26 Sep 2024 18:40:24 -0300 Subject: [PATCH] feat: adding more tests --- apps/namadillo/src/App/Transfer/AssetCard.tsx | 7 +- .../src/App/Transfer/__mocks__/assets.tsx | 19 ++++++ .../App/Transfer/__tests__/AssetCard.test.tsx | 23 +++++++ .../App/Transfer/__tests__/ChainCard.test.tsx | 18 ++++++ .../__tests__/SelectAssetModal.test.tsx | 64 +++++++++++++++++++ .../Transfer/__tests__/SelectedAsset.test.tsx | 17 ++--- 6 files changed, 135 insertions(+), 13 deletions(-) create mode 100644 apps/namadillo/src/App/Transfer/__mocks__/assets.tsx create mode 100644 apps/namadillo/src/App/Transfer/__tests__/AssetCard.test.tsx create mode 100644 apps/namadillo/src/App/Transfer/__tests__/ChainCard.test.tsx create mode 100644 apps/namadillo/src/App/Transfer/__tests__/SelectAssetModal.test.tsx diff --git a/apps/namadillo/src/App/Transfer/AssetCard.tsx b/apps/namadillo/src/App/Transfer/AssetCard.tsx index 7f48a72c1..ced7a5cbd 100644 --- a/apps/namadillo/src/App/Transfer/AssetCard.tsx +++ b/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" /> - : } + : Logo not available + } {asset.name} ); diff --git a/apps/namadillo/src/App/Transfer/__mocks__/assets.tsx b/apps/namadillo/src/App/Transfer/__mocks__/assets.tsx new file mode 100644 index 000000000..bbd2c859d --- /dev/null +++ b/apps/namadillo/src/App/Transfer/__mocks__/assets.tsx @@ -0,0 +1,19 @@ +import { Asset } from "@chain-registry/types"; + +export const assetMock: Partial = { + name: "Ethereum", + symbol: "ETH", + logo_URIs: { + svg: "https://example.com/eth-icon.png", + }, +}; + +export const assetMock2: Partial = { + name: "Bitcoin", + symbol: "BTC", + logo_URIs: { svg: "btc.svg" }, +}; + +export const assetMockList: Array> = [assetMock, assetMock2]; + +export const assetWithoutLogo: Partial = { ...assetMock, logo_URIs: {} }; diff --git a/apps/namadillo/src/App/Transfer/__tests__/AssetCard.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/AssetCard.test.tsx new file mode 100644 index 000000000..813bfd155 --- /dev/null +++ b/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(); + expect(screen.getByText("Ethereum")).toBeInTheDocument(); + }); + + it("should render asset logo if available", () => { + render(); + 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(); + expect(screen.getByAltText(/logo not available/i)).toBeInTheDocument(); + }); +}); diff --git a/apps/namadillo/src/App/Transfer/__tests__/ChainCard.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/ChainCard.test.tsx new file mode 100644 index 000000000..42c2da8fd --- /dev/null +++ b/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(); + expect(screen.getByText(randomChainMock.pretty_name!)).toBeInTheDocument(); + }); + + it("renders the chain's logo", () => { + render(); + const logo = screen.getByAltText(`${randomChainMock.pretty_name!} logo`); + expect(logo).toBeInTheDocument(); + expect(logo).toHaveAttribute("src", randomChainMock.logo_URIs?.svg); + }); +}); diff --git a/apps/namadillo/src/App/Transfer/__tests__/SelectAssetModal.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/SelectAssetModal.test.tsx new file mode 100644 index 000000000..dc41cce87 --- /dev/null +++ b/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( + + ); + expect(screen.getByText("Select Asset")).toBeInTheDocument(); + }); + + it("should render all assets", () => { + render( + + ); + expect(screen.getByText("Bitcoin")).toBeInTheDocument(); + expect(screen.getByText("Ethereum")).toBeInTheDocument(); + }); + + it("should filter assets based on search input", async () => { + render( + + ); + 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( + + ); + fireEvent.click(screen.getByText("Bitcoin")); + expect(onSelectMock).toHaveBeenCalledWith(assetMockList[1]); + expect(onCloseMock).toHaveBeenCalled(); + }); +}); diff --git a/apps/namadillo/src/App/Transfer/__tests__/SelectedAsset.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/SelectedAsset.test.tsx index 386206ce7..c60b8f3a1 100644 --- a/apps/namadillo/src/App/Transfer/__tests__/SelectedAsset.test.tsx +++ b/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 = { - name: "Ethereum", - symbol: "ETH", - logo_URIs: { - svg: "https://example.com/eth-icon.png", - }, - }; - it("renders with no chain and disables the button", () => { render(); const button = screen.getByRole("button"); @@ -38,7 +31,7 @@ describe("SelectedAsset", () => { render( ); @@ -46,11 +39,11 @@ describe("SelectedAsset", () => { 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);