refactor: multipay recipients in review step

ArdentHQ · Oct 22, 2024 · f665484 · f665484
1 parent e1948e1
commit f665484
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 13 deletions.
diff --git a/src/domains/transaction/components/RecipientsModal/RecipientsModal.tsx b/src/domains/transaction/components/RecipientsModal/RecipientsModal.tsx
@@ -33,7 +33,13 @@ export const RecipientsModal: React.FC<Properties> = ({ isOpen, onClose, recipie
 	const { isMdAndAbove } = useBreakpoint();
 
 	return (
-		<Modal isOpen={isOpen} size="3xl" title={<ModalTitle count={recipients.length} />} onClose={onClose} noButtons>
+		<Modal
+			isOpen={isOpen}
+			size="3xl"
+			title={<ModalTitle count={recipients.length} />}
+			onClose={onClose} noButtons
+			data-testid="RecipientsModal"
+		>
 			<div className="mt-4">
 				{isMdAndAbove ? (
 					<RecipientsTable recipients={recipients} ticker={ticker} />

diff --git a/...ansaction/components/TransactionDetail/TransactionAddresses/TransactionAddresses.test.tsx b/...ansaction/components/TransactionDetail/TransactionAddresses/TransactionAddresses.test.tsx
@@ -1,18 +1,23 @@
 import React from "react";
 import { Contracts } from "@ardenthq/sdk-profiles";
-import { RecipientProperties } from "./SearchRecipient.contracts";
-import { env, getDefaultProfileId, screen, renderResponsive } from "@/utils/testing-library";
+import {env, getDefaultProfileId, screen, renderResponsive, render} from "@/utils/testing-library";
 import { TransactionAddresses } from "./TransactionAddresses";
 import { translations } from "@/app/i18n/common/i18n";
+import {RecipientProperties} from "../../SearchRecipient/SearchRecipient.contracts";
+import {expect} from "vitest";
+import userEvent from "@testing-library/user-event";
 
 describe("TransactionAddresses", () => {
 	let profile: Contracts.IProfile;
 	let recipients: RecipientProperties[];
+	let wallet: Contracts.IReadWriteWallet;
 
 	beforeAll(() => {
 		profile = env.profiles().findById(getDefaultProfileId());
 		const wallets: Contracts.IReadWriteWallet[] = profile.wallets().values();
 
+		wallet = wallets[0];
+
 		recipients = wallets.map((wallet) => ({
 			address: wallet.address(),
 			alias: wallet.alias(),
@@ -24,8 +29,6 @@ describe("TransactionAddresses", () => {
 	});
 
 	it.each(["sm", "md", "lg"])("should render in %s", (breakpoint: string) => {
-		const wallet = profile.wallets().first();
-
 		renderResponsive(
 			<TransactionAddresses
 				senderAddress={wallet.address()}
@@ -42,14 +45,37 @@ describe("TransactionAddresses", () => {
 		expect(screen.getByText(recipients[1].address)).toBeInTheDocument();
 	});
 
-	it("should default to empty array if recipients is undefined", (breakpoint: string) => {
-		const wallet = profile.wallets().first();
-		renderResponsive(
-			<TransactionAddresses senderAddress={wallet.address()} network={wallet.network()} profile={profile} />,
-			breakpoint,
-		);
+	it("should default to empty array if recipients is undefined", () => {
+		render(<TransactionAddresses senderAddress={wallet.address()} network={wallet.network()} profile={profile} />);
 
 		expect(screen.getByTestId("DetailWrapper")).toBeInTheDocument();
 		expect(screen.queryByTestId(recipients[0].address)).not.toBeInTheDocument();
 	});
+
+	it("should render `View recipients list` if there are more than 1 recipient", () => {
+		render(<TransactionAddresses
+			senderAddress={wallet.address()}
+			network={wallet.network()}
+			profile={profile}
+			recipients={recipients}
+		/>);
+
+		expect(screen.getByTestId("TransactionRecipientsModal--ShowList")).toBeInTheDocument();
+		expect(screen.getByTestId("TransactionRecipientsModal--RecipientsCount")).toHaveTextContent(recipients.length)
+	});
+
+	it("should show recipients modal", async () => {
+		render(<TransactionAddresses
+			senderAddress={wallet.address()}
+			network={wallet.network()}
+			profile={profile}
+			recipients={recipients}
+		/>);
+
+		await userEvent.click(screen.getByTestId("TransactionRecipientsModal--ShowList"));
+		expect(screen.getByTestId("RecipientsModal")).toBeInTheDocument();
+
+		await userEvent.click(screen.getByTestId("Modal__close-button"));
+		expect(screen.queryByTestId("RecipientsModal")).not.toBeInTheDocument();
+	});
 });
diff --git a/...ns/transaction/components/TransactionDetail/TransactionAddresses/TransactionRecipient.tsx b/...ns/transaction/components/TransactionDetail/TransactionAddresses/TransactionRecipient.tsx
@@ -103,7 +103,7 @@ export const TransactionRecipientsModal = ({
 	recipients: RecipientItem[];
 	labelClassName?: string;
 	ticker: string;
-}) => {
+}): JSX.Element => {
 	const { t } = useTranslation();
 
 	const [showModal, setShowModal] = useState(false);
@@ -126,7 +126,10 @@ export const TransactionRecipientsModal = ({
 				<div className="flex items-center">
 					<span className="text-sm font-semibold leading-[17px] sm:text-base sm:leading-5">
 						<span>{t("COMMON.MULTIPLE")} </span>
-						<span className="text-theme-secondary-700 dark:text-theme-secondary-500">
+						<span
+							className="text-theme-secondary-700 dark:text-theme-secondary-500"
+							data-testid="TransactionRecipientsModal--RecipientsCount"
+						>
 							({recipients.length}){" "}
 						</span>
 					</span>
@@ -137,6 +140,7 @@ export const TransactionRecipientsModal = ({
 					<Button
 						onClick={() => setShowModal(true)}
 						variant="transparent"
+						data-testid="TransactionRecipientsModal--ShowList"
 						className="p-0 text-sm leading-[17px] text-theme-navy-600 underline decoration-theme-navy-600 decoration-dashed decoration-1 underline-offset-4 sm:text-base sm:leading-5"
 					>
 						{t("TRANSACTION.VIEW_RECIPIENTS_LIST")}