From d5a68c85111809bf39e57f5fb39b5458c1f3fe9a Mon Sep 17 00:00:00 2001 From: gregfromstl Date: Tue, 10 Dec 2024 01:53:37 +0000 Subject: [PATCH] [SDK] Fix: Custom auth profile label (#5660) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## PR-Codex overview This PR focuses on improving the display of linked profiles in the `LinkedProfilesScreen` component by correctly handling the "Custom Auth" profile type and enhancing unit tests for various profile types. ### Detailed summary - Updated the label for the "Custom Auth" profile type to "Custom Profile". - Added unit tests for various profile types including email, google, phone, wallet address, cognito, custom_auth_endpoint, and unknown types. - Ensured guest profiles are not displayed. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .changeset/breezy-birds-glow.md | 5 + .../screens/LinkedProfilesScreen.test.tsx | 135 ++++++++++++++++++ .../screens/LinkedProfilesScreen.tsx | 2 + 3 files changed, 142 insertions(+) create mode 100644 .changeset/breezy-birds-glow.md create mode 100644 packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.test.tsx diff --git a/.changeset/breezy-birds-glow.md b/.changeset/breezy-birds-glow.md new file mode 100644 index 00000000000..bff6018ec7d --- /dev/null +++ b/.changeset/breezy-birds-glow.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Fix: Correctly cleans the "Custom Auth" profile type label diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.test.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.test.tsx new file mode 100644 index 00000000000..de2b9e8e9b1 --- /dev/null +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.test.tsx @@ -0,0 +1,135 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; +import { render, screen } from "../../../../../../test/src/react-render.js"; +import { useSocialProfiles } from "../../../../core/social/useSocialProfiles.js"; +import { useProfiles } from "../../../hooks/wallets/useProfiles.js"; +import { LinkedProfilesScreen } from "./LinkedProfilesScreen.jsx"; + +// Mock the hooks +vi.mock("../../../hooks/wallets/useProfiles"); +vi.mock("../../../../core/social/useSocialProfiles"); +vi.mock("../../components/Img", () => ({ + Img: () =>
Mock Image
, +})); + +describe("LinkedProfilesScreen", () => { + const mockClient = { + clientId: "test-client-id", + secretKey: undefined, + }; + + const mockProps = { + onBack: vi.fn(), + setScreen: vi.fn(), + locale: { + manageWallet: { + linkedProfiles: "Linked Profiles", + linkProfile: "Link Profile", + }, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any, + client: mockClient, + }; + + beforeEach(() => { + vi.mocked(useSocialProfiles).mockReturnValue({ + data: undefined, + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + }); + + describe("getProfileDisplayName", () => { + it("should display email for email profile type", () => { + vi.mocked(useProfiles).mockReturnValue({ + data: [{ type: "email", details: { email: "test@example.com" } }], + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + + render(); + expect(screen.getByText("test@example.com")).toBeInTheDocument(); + }); + + it("should display email for google profile type", () => { + vi.mocked(useProfiles).mockReturnValue({ + data: [{ type: "google", details: { email: "google@example.com" } }], + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + + render(); + expect(screen.getByText("google@example.com")).toBeInTheDocument(); + }); + + it("should display phone number for phone profile type", () => { + vi.mocked(useProfiles).mockReturnValue({ + data: [{ type: "phone", details: { phone: "+1234567890" } }], + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + + render(); + expect(screen.getByText("+1234567890")).toBeInTheDocument(); + }); + + it("should display shortened address when address is present", () => { + vi.mocked(useProfiles).mockReturnValue({ + data: [ + { + type: "wallet", + details: { address: "0x1234567890abcdef1234567890abcdef12345678" }, + }, + ], + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + + render(); + expect(screen.getByText("0x123456...345678")).toBeInTheDocument(); + }); + + it("should display email for cognito profile type", () => { + vi.mocked(useProfiles).mockReturnValue({ + data: [{ type: "cognito", details: { email: "cognito@example.com" } }], + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + + render(); + expect(screen.getByText("cognito@example.com")).toBeInTheDocument(); + }); + + it("should display Custom Profile for custom_auth_endpoint", () => { + vi.mocked(useProfiles).mockReturnValue({ + data: [{ type: "Custom_auth_endpoint", details: {} }], + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + + render(); + expect(screen.getByText("Custom Profile")).toBeInTheDocument(); + }); + + it("should capitalize unknown profile types", () => { + vi.mocked(useProfiles).mockReturnValue({ + data: [{ type: "unknown", details: {} }], + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + + render(); + expect(screen.getByText("Unknown")).toBeInTheDocument(); + }); + + it("should not display guest profiles", () => { + vi.mocked(useProfiles).mockReturnValue({ + data: [{ type: "guest", details: {} }], + isLoading: false, + // biome-ignore lint/suspicious/noExplicitAny: Mocking data + } as any); + + render(); + expect(screen.queryByText("Guest")).not.toBeInTheDocument(); + }); + }); +}); diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx index e8e7327dcad..c9b3128edee 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx @@ -33,6 +33,8 @@ function getProfileDisplayName(profile: Profile) { case (profile.type as string) === "cognito" && profile.details.email !== undefined: return profile.details.email; + case (profile.type as string).toLowerCase() === "custom_auth_endpoint": + return "Custom Profile"; default: return profile.type.slice(0, 1).toUpperCase() + profile.type.slice(1); }