Transfer NFTs

__tests__/components/6529Gradient/GradientPage.test.tsx

@@ -1,6 +1,7 @@
 import { mockGradientCollection } from "@/__tests__/fixtures/gradientFixtures";
 import GradientPageComponent from "@/components/6529Gradient/GradientPage";
 import { AuthContext } from "@/components/auth/Auth";
+import { SeizeConnectProvider } from "@/components/auth/SeizeConnectContext";
 import { CookieConsentProvider } from "@/components/cookies/CookieConsentContext";
 import { GRADIENT_CONTRACT } from "@/constants";
 import { TitleProvider } from "@/contexts/TitleContext";
@@ -58,6 +59,20 @@ jest.mock("@/components/latest-activity/LatestActivityRow", () => ({
 }));
 jest.mock("@/hooks/useCapacitor", () => () => ({ isIos: false }));
 
+jest.mock("@/components/auth/SeizeConnectContext", () => ({
+  useSeizeConnectContext: jest.fn(() => ({
+    isAuthenticated: false,
+    seizeConnect: jest.fn(),
+    seizeAcceptConnection: jest.fn(),
+    address: undefined,
+    hasInitializationError: false,
+    initializationError: null,
+  })),
+  SeizeConnectProvider: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
 const routerReplace = jest.fn();
 (useRouter as jest.Mock).mockReturnValue({
   replace: routerReplace,
@@ -89,7 +104,9 @@ function renderPage(wallet: string = "0x1") {
       <AuthContext.Provider
         value={{ connectedProfile: { wallets: [{ wallet }] } } as any}>
         <CookieConsentProvider>
-          <GradientPageComponent id="1" />
+          <SeizeConnectProvider>
+            <GradientPageComponent id="1" />
+          </SeizeConnectProvider>
         </CookieConsentProvider>
       </AuthContext.Provider>
     </TitleProvider>

__tests__/components/NftNavigation.test.tsx

@@ -1,32 +1,54 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import NftNavigation from '@/components/nft-navigation/NftNavigation';
-import { enterArtFullScreen, fullScreenSupported } from '@/helpers/Helpers';
+import NftNavigation from "@/components/nft-navigation/NftNavigation";
+import { enterArtFullScreen, fullScreenSupported } from "@/helpers/Helpers";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ReadonlyURLSearchParams } from "next/navigation";
 
-jest.mock('next/link', () => ({ __esModule: true, default: ({ href, children, className, ...props }: any) => <a href={href} className={className} {...props}>{children}</a> }));
-jest.mock('@fortawesome/react-fontawesome', () => ({ FontAwesomeIcon: (props: any) => <svg data-testid="icon" onClick={props.onClick} /> }));
+const makeParams = (query: string = "") =>
+  new URLSearchParams(query) as unknown as ReadonlyURLSearchParams;
 
-jest.mock('@/helpers/Helpers', () => ({
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({ href, children, className, ...props }: any) => (
+    <a href={href} className={className} {...props}>
+      {children}
+    </a>
+  ),
+}));
+jest.mock("@fortawesome/react-fontawesome", () => ({
+  FontAwesomeIcon: (props: any) => (
+    <svg data-testid="icon" onClick={props.onClick} />
+  ),
+}));
+
+jest.mock("@/helpers/Helpers", () => ({
   enterArtFullScreen: jest.fn(),
   fullScreenSupported: jest.fn(),
 }));
 
 const enterArtFullScreenMock = enterArtFullScreen as jest.Mock;
 const fullScreenSupportedMock = fullScreenSupported as jest.Mock;
 
-describe('NftNavigation', () => {
+describe("NftNavigation", () => {
   beforeEach(() => jest.clearAllMocks());
 
-  it('disables previous link when at first item', () => {
+  it("disables previous link when at first item", () => {
     fullScreenSupportedMock.mockReturnValue(false);
-    render(<NftNavigation nftId={1} path="/art" startIndex={1} endIndex={3} />);
-    const links = screen.getAllByRole('link');
+    render(
+      <NftNavigation
+        nftId={1}
+        path="/art"
+        startIndex={1}
+        endIndex={3}
+        params={makeParams()}
+      />
+    );
+    const links = screen.getAllByRole("link");
     expect(links[0].className).toMatch(/tw-pointer-events-none/);
     expect(links[1].className).not.toMatch(/tw-pointer-events-none/);
   });
 
-  it('shows fullscreen icon and triggers fullscreen', async () => {
+  it("shows fullscreen icon and triggers fullscreen", async () => {
     fullScreenSupportedMock.mockReturnValue(true);
     render(
       <NftNavigation
@@ -35,11 +57,31 @@ describe('NftNavigation', () => {
         startIndex={1}
         endIndex={3}
         fullscreenElementId="art-1"
+        params={makeParams()}
       />
     );
-    const icons = screen.getAllByTestId('icon');
+    const icons = screen.getAllByTestId("icon");
     expect(icons).toHaveLength(3);
     await userEvent.click(icons[2]);
-    expect(enterArtFullScreenMock).toHaveBeenCalledWith('art-1');
+    expect(enterArtFullScreenMock).toHaveBeenCalledWith("art-1");
+  });
+
+  it("preserves query params in navigation links", () => {
+    fullScreenSupportedMock.mockReturnValue(false);
+    const params = makeParams("foo=bar&mode=light");
+    render(
+      <NftNavigation
+        nftId={2}
+        path="/art"
+        startIndex={1}
+        endIndex={3}
+        params={params}
+      />
+    );
+    const links = screen.getAllByRole("link");
+    expect(links.length).toBeGreaterThan(0);
+    for (const a of links) {
+      expect(a.getAttribute("href") || "").toContain("foo=bar");
+    }
   });
 });

__tests__/components/common/TabToggleWithOverflow.test.tsx

@@ -1,17 +1,29 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { TabToggleWithOverflow } from '@/components/common/TabToggleWithOverflow';
+import { TabToggleWithOverflow } from "@/components/common/TabToggleWithOverflow";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-describe('TabToggleWithOverflow', () => {
+describe("TabToggleWithOverflow", () => {
   const options = [
-    { key: 'a', label: 'A' },
-    { key: 'b', label: 'B' },
-    { key: 'c', label: 'C' },
-    { key: 'd', label: 'D' },
+    { key: "a", label: "A" },
+    { key: "b", label: "B" },
+    { key: "c", label: "C" },
+    { key: "d", label: "D" },
   ];
 
-  it('shows overflow items and handles selection', async () => {
+  const delay = (ms: number) =>
+    new Promise((resolve) => setTimeout(resolve, ms));
+
+  const ensureButtonFocused = async (button: HTMLElement) => {
+    await act(async () => {
+      button.focus();
+      await delay(50);
+      if (document.activeElement !== button) {
+        button.focus();
+      }
+    });
+  };
+
+  it("shows overflow items and handles selection", async () => {
     const onSelect = jest.fn();
     const user = userEvent.setup();
     render(
@@ -24,22 +36,24 @@ describe('TabToggleWithOverflow', () => {
     );
 
     // visible tabs
-    expect(screen.getByText('A')).toBeInTheDocument();
-    expect(screen.getByText('B')).toBeInTheDocument();
+    expect(screen.getByText("A")).toBeInTheDocument();
+    expect(screen.getByText("B")).toBeInTheDocument();
 
     // open overflow dropdown
-    await user.click(screen.getByRole('button', { name: 'More tabs' }));
-    const optionC = screen.getByRole('menuitem', { name: 'C' });
+    await user.click(screen.getByRole("button", { name: "More tabs" }));
+    const optionC = screen.getByRole("menuitem", { name: "C" });
     expect(optionC).toBeInTheDocument();
 
     await user.click(optionC);
-    expect(onSelect).toHaveBeenCalledWith('c');
+    expect(onSelect).toHaveBeenCalledWith("c");
     await waitFor(() =>
-      expect(screen.queryByRole('menuitem', { name: 'C' })).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole("menuitem", { name: "C" })
+      ).not.toBeInTheDocument()
     );
   });
 
-  it('shows active label when active tab is in overflow', () => {
+  it("shows active label when active tab is in overflow", () => {
     render(
       <TabToggleWithOverflow
         options={options}
@@ -50,10 +64,10 @@ describe('TabToggleWithOverflow', () => {
     );
 
     // Button label should show active label
-    expect(screen.getByText('D')).toBeInTheDocument();
+    expect(screen.getByText("D")).toBeInTheDocument();
   });
 
-  it('applies ARIA roles to visible tabs', () => {
+  it("applies ARIA roles to visible tabs", () => {
     render(
       <TabToggleWithOverflow
         options={options}
@@ -63,18 +77,18 @@ describe('TabToggleWithOverflow', () => {
       />
     );
 
-    expect(screen.getByRole('tablist')).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: 'A' })).toHaveAttribute(
-      'aria-selected',
-      'true'
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "A" })).toHaveAttribute(
+      "aria-selected",
+      "true"
     );
-    expect(screen.getByRole('tab', { name: 'B' })).toHaveAttribute(
-      'aria-selected',
-      'false'
+    expect(screen.getByRole("tab", { name: "B" })).toHaveAttribute(
+      "aria-selected",
+      "false"
     );
   });
 
-  it('toggles the overflow menu with keyboard interactions', async () => {
+  it("toggles the overflow menu with keyboard interactions", async () => {
     const user = userEvent.setup();
     render(
       <TabToggleWithOverflow
@@ -85,36 +99,46 @@ describe('TabToggleWithOverflow', () => {
       />
     );
 
-    const moreButton = screen.getByRole('button', { name: 'More tabs' });
-    expect(moreButton).toHaveAttribute('aria-expanded', 'false');
+    const moreButton = screen.getByRole("button", { name: "More tabs" });
+    expect(moreButton).toHaveAttribute("aria-expanded", "false");
 
-    await user.tab(); // focus first tab
-    await user.tab(); // focus second tab
-    moreButton.focus();
-    expect(moreButton).toHaveFocus();
-    await user.keyboard('{Enter}');
+    await waitFor(() => {
+      const activeTab = screen.getByRole("tab", { name: "A" });
+      expect(activeTab).toHaveFocus();
+    });
+
+    await ensureButtonFocused(moreButton);
+
+    await waitFor(() => expect(moreButton).toHaveFocus(), { timeout: 2000 });
+
+    await user.keyboard("{Enter}");
     await waitFor(() =>
-      expect(moreButton).toHaveAttribute('aria-expanded', 'true')
+      expect(moreButton).toHaveAttribute("aria-expanded", "true")
     );
-    const optionC = await screen.findByRole('menuitem', { name: 'C' });
+    const optionC = await screen.findByRole("menuitem", { name: "C" });
     expect(optionC).toBeInTheDocument();
 
-    await user.keyboard('{Escape}');
+    await user.keyboard("{Escape}");
     await waitFor(() =>
-      expect(moreButton).toHaveAttribute('aria-expanded', 'false')
+      expect(moreButton).toHaveAttribute("aria-expanded", "false")
     );
     await waitFor(() => {
-      expect(screen.queryByRole('menuitem', { name: 'C' })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("menuitem", { name: "C" })
+      ).not.toBeInTheDocument();
     });
 
-    await user.keyboard(' ');
+    await ensureButtonFocused(moreButton);
+
+    await waitFor(() => expect(moreButton).toHaveFocus(), { timeout: 2000 });
+    await user.keyboard(" ");
     await waitFor(() =>
-      expect(moreButton).toHaveAttribute('aria-expanded', 'true')
+      expect(moreButton).toHaveAttribute("aria-expanded", "true")
     );
-    await screen.findByRole('menuitem', { name: 'C' });
+    await screen.findByRole("menuitem", { name: "C" });
   });
 
-  it('indicates overflow active state via data attribute when opened', async () => {
+  it("indicates overflow active state via data attribute when opened", async () => {
     const user = userEvent.setup();
     render(
       <TabToggleWithOverflow
@@ -125,16 +149,16 @@ describe('TabToggleWithOverflow', () => {
       />
     );
 
-    const moreButton = screen.getByRole('button', { name: 'More tabs' });
+    const moreButton = screen.getByRole("button", { name: "More tabs" });
     await user.click(moreButton);
 
-    expect(screen.getByRole('menuitem', { name: 'D' })).toHaveAttribute(
-      'data-active',
-      'true'
+    expect(screen.getByRole("menuitem", { name: "D" })).toHaveAttribute(
+      "data-active",
+      "true"
     );
-    expect(screen.getByRole('menuitem', { name: 'C' })).toHaveAttribute(
-      'data-active',
-      'false'
+    expect(screen.getByRole("menuitem", { name: "C" })).toHaveAttribute(
+      "data-active",
+      "false"
     );
   });
 });