Skip to content

Commit

Permalink
test(packages/ui): Add more unit tests for EtherDeposit form
Browse files Browse the repository at this point in the history
  • Loading branch information
@nevendyulgerov
nevendyulgerov committed Mar 11, 2024
1 parent c801648 commit 1c4d663
Showing 1 changed file with 154 additions and 42 deletions.
196 changes: 154 additions & 42 deletions packages/ui/test/EtherDepositForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
import { afterAll, describe, it } from "vitest";
import { EtherDepositForm } from "../src/EtherDepositForm";
import withMantineTheme from "./utils/WithMantineTheme";
import { getAddress } from "viem";

const Component = withMantineTheme(EtherDepositForm);

Expand Down Expand Up @@ -50,12 +51,20 @@ vi.mock("viem", async () => {
};
});

vi.mock("@mantine/form", async () => {
const actual = await vi.importActual("@mantine/form");
return {
...(actual as any),
useForm: (actual as any).useForm,
};
});

describe("Rollups EtherDepositForm", () => {
afterAll(() => {
vi.restoreAllMocks();
});

describe("Textarea", () => {
describe("Extra data textarea", () => {
it("should display correct label", () => {
render(<Component {...defaultProps} />);

Expand Down Expand Up @@ -89,6 +98,56 @@ describe("Rollups EtherDepositForm", () => {
expect(textarea.getAttribute("aria-invalid")).toBe("true");
expect(screen.getByText("Invalid hex string")).toBeInTheDocument();
});

it("should not display error when value is hex", () => {
const { container } = render(<Component {...defaultProps} />);
const textarea = container.querySelector(
"textarea",
) as HTMLTextAreaElement;

fireEvent.change(textarea, {
target: {
value: "0x123123",
},
});

fireEvent.blur(textarea);

expect(textarea.getAttribute("aria-invalid")).toBe("false");
expect(() => screen.getByText("Invalid hex string")).toThrow(
"Unable to find an element",
);
});

it("should correctly format extra data", async () => {
const rollupsWagmi = await import("@cartesi/rollups-wagmi");
const mockedHook = vi.fn().mockReturnValue({
...rollupsWagmi.usePrepareEtherPortalDepositEther,
loading: false,
error: null,
});
rollupsWagmi.usePrepareEtherPortalDepositEther = vi
.fn()
.mockImplementation(mockedHook);

const { container } = render(<Component {...defaultProps} />);
const execLayerDataInput = container.querySelector(
"textarea",
) as HTMLTextAreaElement;

const hexValue = "0x123123";
fireEvent.change(execLayerDataInput, {
target: {
value: hexValue,
},
});

expect(mockedHook).toHaveBeenLastCalledWith({
args: ["0x0000000000000000000000000000000000000000", hexValue],
enabled: false,
value: undefined,
});
});
});

describe("Send button", () => {
Expand Down Expand Up @@ -172,35 +231,16 @@ describe("Rollups EtherDepositForm", () => {

expect(onSearchApplicationsMock).toHaveBeenCalledWith("");
});

it("should invoke onSearchApplications function after successful submission", async () => {
const wagmi = await import("wagmi");
wagmi.useWaitForTransaction = vi.fn().mockReturnValue({
...wagmi.useWaitForTransaction,
error: null,
status: "success",
});

const onSearchApplicationsMock = vi.fn();
render(
<Component
{...defaultProps}
onSearchApplications={onSearchApplicationsMock}
/>,
);

expect(onSearchApplicationsMock).toHaveBeenCalledWith("");
});
});

describe("ApplicationAutocomplete", () => {
it("should display correct label", () => {
it("should display correct label for applications input", () => {
render(<Component {...defaultProps} />);

expect(screen.getByText("Application")).toBeInTheDocument();
});

it("should display correct description", () => {
it("should display correct description for applications input", () => {
render(<Component {...defaultProps} />);

expect(
Expand Down Expand Up @@ -231,10 +271,24 @@ describe("Rollups EtherDepositForm", () => {
),
).toBeInTheDocument();
});
});

describe("Amount input", () => {
it("should correctly process small decimal numbers", async () => {
it("should display error when application is invalid", () => {
const { container } = render(<Component {...defaultProps} />);
const input = container.querySelector("input") as HTMLInputElement;

fireEvent.change(input, {
target: {
value: "0x60a7048c3136293071605a4eaffef49923e981ccffffffff",
},
});

fireEvent.blur(input);

expect(input.getAttribute("aria-invalid")).toBe("true");
expect(screen.getByText("Invalid application")).toBeInTheDocument();
});

it("should correctly format address", async () => {
const rollupsWagmi = await import("@cartesi/rollups-wagmi");
const mockedHook = vi.fn().mockReturnValue({
...rollupsWagmi.usePrepareEtherPortalDepositEther,
Expand All @@ -246,26 +300,56 @@ describe("Rollups EtherDepositForm", () => {
.mockImplementation(mockedHook);

const { container } = render(<Component {...defaultProps} />);
const amountInput = container.querySelector(
'[type="number"]',
) as HTMLInputElement;
const input = container.querySelector("input") as HTMLInputElement;

fireEvent.change(amountInput, {
const [application] = applications;
fireEvent.change(input, {
target: {
value: "0.0000001",
value: application,
},
});

expect(mockedHook).toHaveBeenLastCalledWith({
args: ["0x0000000000000000000000000000000000000000", "0x"],
args: [getAddress(application), "0x"],
enabled: false,
value: 100000000000n,
value: undefined,
});
});
});

describe("Extra data input", () => {
it("should correctly format extra data", async () => {
describe("Alerts", () => {
it("should display alert for successful transaction", async () => {
const wagmi = await import("wagmi");
wagmi.useWaitForTransaction = vi.fn().mockReturnValue({
...wagmi.useWaitForTransaction,
error: null,
status: "success",
});

render(<Component {...defaultProps} />);
expect(
screen.getByText("Ether deposited successfully!"),
).toBeInTheDocument();
});

it("should display alert for failed transaction", async () => {
const wagmi = await import("wagmi");
const message = "User declined the transaction";
wagmi.useWaitForTransaction = vi.fn().mockReturnValue({
...wagmi.useWaitForTransaction,
error: {
message,
},
status: "error",
});

render(<Component {...defaultProps} />);
expect(screen.getByText(message)).toBeInTheDocument();
});
});

describe("Amount input", () => {
it("should correctly process small decimal numbers", async () => {
const rollupsWagmi = await import("@cartesi/rollups-wagmi");
const mockedHook = vi.fn().mockReturnValue({
...rollupsWagmi.usePrepareEtherPortalDepositEther,
Expand All @@ -277,22 +361,50 @@ describe("Rollups EtherDepositForm", () => {
.mockImplementation(mockedHook);

const { container } = render(<Component {...defaultProps} />);
const execLayerDataInput = container.querySelector(
"textarea",
) as HTMLTextAreaElement;
const amountInput = container.querySelector(
'[type="number"]',
) as HTMLInputElement;

const hexValue = "0x123123";
fireEvent.change(execLayerDataInput, {
fireEvent.change(amountInput, {
target: {
value: hexValue,
value: "0.0000001",
},
});

expect(mockedHook).toHaveBeenLastCalledWith({
args: ["0x0000000000000000000000000000000000000000", hexValue],
args: ["0x0000000000000000000000000000000000000000", "0x"],
enabled: false,
value: undefined,
value: 100000000000n,
});
});
});

describe("Form", () => {
it("should reset form after successful submission", async () => {
const mantineForm = await import("@mantine/form");
const [application] = applications;
const resetMock = vi.fn();
vi.spyOn(mantineForm, "useForm").mockReturnValue({
getTransformedValues: () => ({
address: getAddress(application),
rawInput: "0x",
}),
isValid: () => true,
getInputProps: () => {},
errors: {},
setFieldValue: () => "",
reset: resetMock,
} as any);

const wagmi = await import("wagmi");
wagmi.useWaitForTransaction = vi.fn().mockReturnValue({
...wagmi.useWaitForTransaction,
error: null,
status: "success",
});

render(<Component {...defaultProps} />);
expect(resetMock).toHaveBeenCalled();
});
});
});

0 comments on commit 1c4d663

Please sign in to comment.