Merge pull request #835 from ACOB-DEV/codex/fe-user-permissions-optimistic-a11y-tests-payment-success-state

feat: improve User Permissions UX and Payment Success state logic

Author: emdevelopa

frontend/src/components/PaymentSuccessAnimation.test.tsx

@@ -1,250 +1,74 @@
-import React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import "@testing-library/jest-dom";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import confetti from "canvas-confetti";
 import { PaymentSuccessAnimation } from "./PaymentSuccessAnimation";
-import { NextIntlClientProvider } from "next-intl";
-
-// Mock framer-motion
-jest.mock("framer-motion", () => ({
-  motion: {
-    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-    button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
-  },
-  AnimatePresence: ({ children }: any) => <>{children}</>,
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
 }));
 
-// Mock canvas-confetti
-jest.mock("canvas-confetti", () => jest.fn());
-
-// Mock next-intl
-jest.mock("next-intl", () => ({
-  useTranslations: () => (key: string) => {
-    const translations: Record<string, string> = {
-      "payment.successAnnounce": "Payment successful! {amount} {asset} has been received.",
-      "common.close": "Close",
-      "payment.amountReceived": "Amount Received",
-      "payment.successMessage": "Your payment has been processed successfully.",
-      "payment.transactionId": "Transaction ID",
-      "common.continue": "Continue",
-      "payment.successHint": "Press the continue button or close button to dismiss this success message.",
-    };
-    return translations[key] || key;
-  },
+vi.mock("canvas-confetti", () => ({
+  default: vi.fn(),
 }));
 
 describe("PaymentSuccessAnimation", () => {
-  const defaultProps = {
-    show: true,
-    onComplete: jest.fn(),
-    amount: "100",
-    asset: "XLM",
-    txId: "tx123",
-  };
-
-  const renderComponent = (props = {}) => {
-    const messages = {
-      "payment.successAnnounce": "Payment successful! {amount} {asset} has been received.",
-      "common.close": "Close",
-      "payment.amountReceived": "Amount Received",
-      "payment.successMessage": "Your payment has been processed successfully.",
-      "payment.transactionId": "Transaction ID",
-      "common.continue": "Continue",
-      "payment.successHint": "Press the continue button or close button to dismiss this success message.",
-    };
-
-    return render(
-      <NextIntlClientProvider messages={messages} locale="en">
-        <PaymentSuccessAnimation {...defaultProps} {...props} />
-      </NextIntlClientProvider>
-    );
-  };
-
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
+    vi.useRealTimers();
   });
 
-  describe("Rendering", () => {
-    it("renders nothing when show is false", () => {
-      renderComponent({ show: false });
-      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-    });
-
-    it("renders success animation when show is true", () => {
-      renderComponent();
-      expect(screen.getByRole("dialog")).toBeInTheDocument();
-      expect(screen.getByText("Payment Successful!")).toBeInTheDocument();
-      expect(screen.getByText("100 XLM")).toBeInTheDocument();
-    });
-
-    it("displays correct amount and asset", () => {
-      renderComponent({ amount: "500", asset: "USD" });
-      expect(screen.getByText("500 USD")).toBeInTheDocument();
-    });
-
-    it("displays transaction ID when provided", () => {
-      renderComponent();
-      expect(screen.getByText("tx123")).toBeInTheDocument();
-    });
-
-    it("does not display transaction ID when not provided", () => {
-      renderComponent({ txId: undefined });
-      expect(screen.queryByText("Transaction ID")).not.toBeInTheDocument();
-    });
+  it("renders nothing when show is false", () => {
+    render(<PaymentSuccessAnimation show={false} />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
-  describe("Accessibility", () => {
-    it("has correct ARIA attributes", () => {
-      renderComponent();
-      const dialog = screen.getByRole("dialog");
-      expect(dialog).toHaveAttribute("aria-modal", "true");
-      expect(dialog).toHaveAttribute("aria-labelledby", "payment-success-title");
-      expect(dialog).toHaveAttribute("aria-describedby", "payment-success-description");
-    });
-
-    it("has screen reader announcement", () => {
-      renderComponent();
-      const announcement = screen.getByRole("status");
-      expect(announcement).toHaveAttribute("aria-live", "assertive");
-      expect(announcement).toHaveAttribute("aria-atomic", "true");
-      expect(announcement).toHaveTextContent("Payment successful! 100 XLM has been received.");
-    });
-
-    it("has accessible close button", () => {
-      renderComponent();
-      const closeButton = screen.getByLabelText("Close");
-      expect(closeButton).toBeInTheDocument();
-    });
-
-    it("has accessible continue button", () => {
-      renderComponent();
-      const continueButton = screen.getByLabelText("Continue");
-      expect(continueButton).toBeInTheDocument();
-    });
-
-    it("has screen reader hint", () => {
-      renderComponent();
-      const hint = screen.getByText("Press the continue button or close button to dismiss this success message.");
-      expect(hint).toHaveClass("sr-only");
-    });
-  });
+  it("renders dialog content when show is true", () => {
+    render(<PaymentSuccessAnimation show amount="100" asset="XLM" txId="tx123" />);
 
-  describe("Interactions", () => {
-    it("calls onComplete when close button is clicked", () => {
-      renderComponent();
-      const closeButton = screen.getByLabelText("Close");
-      fireEvent.click(closeButton);
-      expect(defaultProps.onComplete).toHaveBeenCalledTimes(1);
-    });
-
-    it("calls onComplete when continue button is clicked", () => {
-      renderComponent();
-      const continueButton = screen.getByLabelText("Continue");
-      fireEvent.click(continueButton);
-      expect(defaultProps.onComplete).toHaveBeenCalledTimes(1);
-    });
-
-    it("calls onComplete after animation timeout", async () => {
-      renderComponent();
-      await waitFor(() => {
-        expect(defaultProps.onComplete).toHaveBeenCalledTimes(1);
-      }, { timeout: 4100 });
-    });
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("payment.successTitle")).toBeInTheDocument();
+    expect(screen.getByText("100 XLM")).toBeInTheDocument();
+    expect(screen.getByText("tx123")).toBeInTheDocument();
   });
 
-  describe("Confetti Animation", () => {
-    it("triggers confetti on mount when show is true", () => {
-      const mockConfetti = require("canvas-confetti");
-      renderComponent();
-      expect(mockConfetti).toHaveBeenCalled();
-    });
-
-    it("does not trigger confetti when show is false", () => {
-      const mockConfetti = require("canvas-confetti");
-      renderComponent({ show: false });
-      expect(mockConfetti).not.toHaveBeenCalled();
-    });
-
-    it("does not trigger confetti again on re-render", () => {
-      const mockConfetti = require("canvas-confetti");
-      const { rerender } = renderComponent();
-      rerender(
-        <NextIntlClientProvider messages={{}} locale="en">
-          <PaymentSuccessAnimation {...defaultProps} show={true} />
-        </NextIntlClientProvider>
-      );
-      expect(mockConfetti).toHaveBeenCalledTimes(1);
-    });
+  it("triggers confetti once on show", () => {
+    const { rerender } = render(<PaymentSuccessAnimation show amount="1" asset="XLM" />);
+    rerender(<PaymentSuccessAnimation show amount="1" asset="XLM" />);
+
+    expect(confetti).toHaveBeenCalledTimes(1);
   });
 
-  describe("Animation States", () => {
-    it("resets announcement state after timeout", async () => {
-      renderComponent();
-      // First render should set hasAnnounced to true
-      await waitFor(() => {
-        expect(screen.getByRole("status")).toBeInTheDocument();
-      });
-
-      // Wait for reset timeout
-      await new Promise(resolve => setTimeout(resolve, 1100));
-
-      // Re-render to check if it would announce again
-      const { rerender } = render(
-        <NextIntlClientProvider messages={{}} locale="en">
-          <PaymentSuccessAnimation {...defaultProps} show={false} />
-        </NextIntlClientProvider>
-      );
-
-      rerender(
-        <NextIntlClientProvider messages={{}} locale="en">
-          <PaymentSuccessAnimation {...defaultProps} show={true} />
-        </NextIntlClientProvider>
-      );
-
-      // Should announce again after reset
-      expect(screen.getByRole("status")).toBeInTheDocument();
-    });
+  it("calls onComplete from buttons", async () => {
+    const onComplete = vi.fn();
+    render(<PaymentSuccessAnimation show onComplete={onComplete} />);
+
+    await userEvent.click(screen.getByLabelText("common.close"));
+    await userEvent.click(screen.getByLabelText("common.continue"));
+
+    expect(onComplete).toHaveBeenCalledTimes(2);
   });
 
-  describe("Props Handling", () => {
-    it("uses default values for optional props", () => {
-      renderComponent({
-        show: true,
-        onComplete: jest.fn(),
-        amount: undefined,
-        asset: undefined,
-        txId: undefined,
-      });
-      expect(screen.getByText("0 XLM")).toBeInTheDocument();
-    });
-
-    it("handles custom onComplete callback", () => {
-      const customOnComplete = jest.fn();
-      renderComponent({ onComplete: customOnComplete });
-
-      const continueButton = screen.getByLabelText("Continue");
-      fireEvent.click(continueButton);
-
-      expect(customOnComplete).toHaveBeenCalledTimes(1);
-    });
+  it("calls onComplete after timeout", () => {
+    const onComplete = vi.fn();
+    vi.useFakeTimers();
+    render(<PaymentSuccessAnimation show onComplete={onComplete} />);
+
+    vi.advanceTimersByTime(4000);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+    vi.useRealTimers();
   });
 
-  describe("Translation Integration", () => {
-    it("uses translated text for UI elements", () => {
-      renderComponent();
-      expect(screen.getByText("Amount Received")).toBeInTheDocument();
-      expect(screen.getByText("Your payment has been processed successfully.")).toBeInTheDocument();
-    });
-
-    it("falls back to keys when translations are missing", () => {
-      const messages = {};
-      const { rerender } = render(
-        <NextIntlClientProvider messages={messages} locale="en">
-          <PaymentSuccessAnimation {...defaultProps} />
-        </NextIntlClientProvider>
-      );
-
-      // Should still render with fallback keys
-      expect(screen.getByRole("dialog")).toBeInTheDocument();
-    });
+  it("has expected screen reader semantics", () => {
+    render(<PaymentSuccessAnimation show amount="20" asset="USDC" />);
+
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toHaveAttribute("aria-labelledby", "payment-success-title");
+    expect(dialog).toHaveAttribute("aria-describedby", "payment-success-description");
+
+    const status = screen.getByRole("status");
+    expect(status).toHaveAttribute("aria-live", "assertive");
+    expect(status).toHaveTextContent("payment.successAnnounce");
   });
-});
+});