Skip to content

Commit f332e47

Browse files
ElasticBottleElasticBottle
committed
test: add linkedProfileScreen test
1 parent f194f17 commit f332e47

File tree

3 files changed

+185
-52
lines changed

3 files changed

+185
-52
lines changed

‎.changeset/strong-snails-jam.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ For typescript users, the following code snippet is a simple example of how it'd
1111
```typescript
1212
import { inAppWallet } from "thirdweb/wallets";
1313

14-
const wallet = inAppWallet();
15-
wallet.connect({ strategy: "google" });
16-
17-
const profiles = await getProfiles({
18-
client,
19-
});
20-
21-
const updatedProfiles = await unlinkProfile({
22-
* client,
23-
* profileToUnlink: profiles[1],// assuming there is more than 1 profile linked to the user.
24-
* });
25-
```
14+
const wallet = inAppWallet();
15+
wallet.connect({ strategy: "google" });
16+
17+
const profiles = await getProfiles({
18+
client,
19+
});
20+
21+
const updatedProfiles = await unlinkProfile({
22+
client,
23+
profileToUnlink: profiles[1],// assuming there is more than 1 profile linked to the user.
24+
});
25+
```

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.test.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { beforeEach } from "node:test";
2+
import {
3+
QueryClient,
4+
QueryClientProvider,
5+
type UseQueryResult,
6+
} from "@tanstack/react-query";
7+
import { describe, expect, it, vi } from "vitest";
8+
import { render, screen } from "~test/react-render.js";
9+
import { TEST_CLIENT } from "~test/test-clients.js";
10+
import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
11+
import { useSocialProfiles } from "../../../../../react/core/social/useSocialProfiles.js";
12+
import type { SocialProfile } from "../../../../../social/types.js";
13+
import { shortenAddress } from "../../../../../utils/address.js";
14+
import type { Profile } from "../../../../../wallets/in-app/core/authentication/types.js";
15+
import { useProfiles } from "../../../hooks/wallets/useProfiles.js";
16+
import type { ConnectLocale } from "../locale/types.js";
17+
import { LinkedProfilesScreen } from "./LinkedProfilesScreen.js";
18+
19+
vi.mock("../../../hooks/wallets/useProfiles");
20+
vi.mock("../../../../../react/core/social/useSocialProfiles");
21+
22+
describe("LinkedProfile component", () => {
23+
const locale = {
24+
manageWallet: {
25+
linkedProfiles: "Linked Profiles",
26+
linkProfile: "Link Profile",
27+
},
28+
} as ConnectLocale;
29+
const queryClient = new QueryClient();
30+
beforeEach(() => {
31+
vi.resetAllMocks();
32+
});
33+
34+
it("should render email profile correctly", () => {
35+
vi.mocked(useProfiles).mockReturnValue({
36+
data: [{ type: "email", details: { email: "[email protected]" } }],
37+
isLoading: false,
38+
} as UseQueryResult<Profile[]>);
39+
vi.mocked(useSocialProfiles).mockReturnValue({
40+
data: [],
41+
isLoading: false,
42+
} as unknown as UseQueryResult<SocialProfile[]>);
43+
44+
render(
45+
<QueryClientProvider client={queryClient}>
46+
<LinkedProfilesScreen
47+
onBack={() => {}}
48+
setScreen={() => {}}
49+
locale={locale}
50+
client={TEST_CLIENT}
51+
/>
52+
</QueryClientProvider>,
53+
);
54+
55+
expect(screen.getByText("[email protected]")).toBeInTheDocument();
56+
});
57+
58+
it("should render wallet address profile correctly", () => {
59+
vi.mocked(useProfiles).mockReturnValue({
60+
data: [{ type: "wallet", details: { address: TEST_ACCOUNT_A.address } }],
61+
isLoading: false,
62+
} as UseQueryResult<Profile[]>);
63+
vi.mocked(useSocialProfiles).mockReturnValue({
64+
data: [],
65+
isLoading: false,
66+
} as unknown as UseQueryResult<SocialProfile[]>);
67+
68+
render(
69+
<QueryClientProvider client={queryClient}>
70+
<LinkedProfilesScreen
71+
onBack={() => {}}
72+
setScreen={() => {}}
73+
locale={locale}
74+
client={TEST_CLIENT}
75+
/>
76+
</QueryClientProvider>,
77+
);
78+
79+
expect(
80+
screen.getByText(shortenAddress(TEST_ACCOUNT_A.address, 6)),
81+
).toBeInTheDocument();
82+
});
83+
84+
it("should render unlink button when enableUnlinking is true", () => {
85+
vi.mocked(useProfiles).mockReturnValue({
86+
data: [
87+
{ type: "email", details: { email: "[email protected]" } },
88+
{ type: "google", details: { email: "[email protected]" } },
89+
],
90+
isLoading: false,
91+
} as UseQueryResult<Profile[]>);
92+
vi.mocked(useSocialProfiles).mockReturnValue({
93+
data: [],
94+
isLoading: false,
95+
} as unknown as UseQueryResult<SocialProfile[]>);
96+
97+
render(
98+
<QueryClientProvider client={queryClient}>
99+
<LinkedProfilesScreen
100+
onBack={() => {}}
101+
setScreen={() => {}}
102+
locale={locale}
103+
client={TEST_CLIENT}
104+
/>
105+
</QueryClientProvider>,
106+
);
107+
108+
expect(screen.getAllByRole("button", { name: "Unlink" })).toHaveLength(2);
109+
});
110+
111+
it("should not render unlink button when enableUnlinking is false", () => {
112+
vi.mocked(useProfiles).mockReturnValue({
113+
data: [{ type: "email", details: { email: "[email protected]" } }],
114+
isLoading: false,
115+
} as UseQueryResult<Profile[]>);
116+
vi.mocked(useSocialProfiles).mockReturnValue({
117+
data: [],
118+
isLoading: false,
119+
} as unknown as UseQueryResult<SocialProfile[]>);
120+
121+
render(
122+
<QueryClientProvider client={queryClient}>
123+
<LinkedProfilesScreen
124+
onBack={() => {}}
125+
setScreen={() => {}}
126+
locale={locale}
127+
client={TEST_CLIENT}
128+
/>
129+
</QueryClientProvider>,
130+
);
131+
132+
expect(
133+
screen.queryByRole("button", { name: "Unlink" }),
134+
).not.toBeInTheDocument();
135+
});
136+
});

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx‎

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -77,46 +77,43 @@ export function LinkedProfilesScreen(props: {
7777
/>
7878
</Container>
7979
<Line />
80-
{isLoading ? (
81-
<LoadingScreen />
82-
) : (
83-
<Container
84-
scrollY
85-
style={{
86-
height: "300px",
87-
}}
88-
>
89-
<Spacer y="md" />
90-
<Container px="sm">
91-
<MenuButton
92-
onClick={() => {
93-
props.setScreen("link-profile");
94-
}}
95-
style={{
96-
fontSize: fontSize.sm,
97-
}}
98-
>
99-
<AddUserIcon size={iconSize.lg} />
100-
<Text color="primaryText">
101-
{props.locale.manageWallet.linkProfile}
102-
</Text>
103-
</MenuButton>
104-
<Spacer y="xs" />
105-
{/* Exclude guest as a profile */}
106-
{connectedProfiles
107-
?.filter((profile) => profile.type !== "guest")
108-
.map((profile) => (
109-
<LinkedProfile
110-
key={`${JSON.stringify(profile)}`}
111-
enableUnlinking={connectedProfiles.length > 1}
112-
profile={profile}
113-
client={props.client}
114-
/>
115-
))}
116-
</Container>
117-
<Spacer y="md" />
80+
81+
<Container
82+
scrollY
83+
style={{
84+
height: "300px",
85+
}}
86+
>
87+
<Spacer y="md" />
88+
<Container px="sm">
89+
<MenuButton
90+
onClick={() => {
91+
props.setScreen("link-profile");
92+
}}
93+
style={{
94+
fontSize: fontSize.sm,
95+
}}
96+
>
97+
<AddUserIcon size={iconSize.lg} />
98+
<Text color="primaryText">
99+
{props.locale.manageWallet.linkProfile}
100+
</Text>
101+
</MenuButton>
102+
<Spacer y="xs" />
103+
{/* Exclude guest as a profile */}
104+
{connectedProfiles
105+
?.filter((profile) => profile.type !== "guest")
106+
.map((profile) => (
107+
<LinkedProfile
108+
key={`${JSON.stringify(profile)}`}
109+
enableUnlinking={connectedProfiles.length > 1}
110+
profile={profile}
111+
client={props.client}
112+
/>
113+
))}
118114
</Container>
119-
)}
115+
<Spacer y="md" />
116+
</Container>
120117
</Container>
121118
);
122119
}
@@ -241,7 +238,7 @@ function LinkedProfile({
241238
<IconButton
242239
autoFocus
243240
type="button"
244-
aria-label="Close"
241+
aria-label="Unlink"
245242
onClick={() => unlinkProfileMutation()}
246243
style={{
247244
pointerEvents: "auto",

0 commit comments

Comments
 (0)