1- import { describe , it , expect , vi , beforeEach } from ' vitest'
2- import { render , screen , fireEvent , waitFor } from ' @testing-library/react'
3- import { ConnectWalletButton } from ' @/components/layout/connect-wallet-button'
1+ import { describe , it , expect , vi , beforeEach } from " vitest" ;
2+ import { render , screen , fireEvent , waitFor } from " @testing-library/react" ;
3+ import { ConnectWalletButton } from " @/components/layout/connect-wallet-button" ;
44
55const mockUseWallet = vi . hoisted ( ( ) =>
66 vi . fn ( ( ) => ( {
7- address : null ,
7+ address : null as string | null ,
88 isConnected : false ,
99 connecting : false ,
1010 connect : vi . fn ( ) ,
1111 disconnect : vi . fn ( ) ,
12- walletId : null ,
13- } ) )
14- )
12+ walletId : null as string | null ,
13+ } ) ) ,
14+ ) ;
1515
16- vi . mock ( ' @/hooks/use-wallet' , ( ) => ( { useWallet : mockUseWallet } ) )
16+ vi . mock ( " @/hooks/use-wallet" , ( ) => ( { useWallet : mockUseWallet } ) ) ;
1717
18- vi . mock ( ' @/components/providers/wallet-provider' , ( ) => ( {
18+ vi . mock ( " @/components/providers/wallet-provider" , ( ) => ( {
1919 WALLET_OPTIONS : [
20- { id : 'freighter' , name : 'Freighter' , detail : 'Browser extension · stellar.org' } ,
21- { id : 'xbull' , name : 'xBull' , detail : 'Extension & web' } ,
20+ {
21+ id : "freighter" ,
22+ name : "Freighter" ,
23+ detail : "Browser extension · stellar.org" ,
24+ } ,
25+ { id : "xbull" , name : "xBull" , detail : "Extension & web" } ,
2226 ] ,
23- } ) )
27+ } ) ) ;
2428
25- describe ( ' ConnectWalletButton — disconnected' , ( ) => {
29+ describe ( " ConnectWalletButton — disconnected" , ( ) => {
2630 beforeEach ( ( ) => {
2731 mockUseWallet . mockReturnValue ( {
2832 address : null ,
@@ -31,56 +35,68 @@ describe('ConnectWalletButton — disconnected', () => {
3135 connect : vi . fn ( ) ,
3236 disconnect : vi . fn ( ) ,
3337 walletId : null ,
34- } )
35- } )
38+ } ) ;
39+ } ) ;
3640
3741 it ( 'renders "Connect wallet" button' , ( ) => {
38- render ( < ConnectWalletButton /> )
39- expect ( screen . getByRole ( 'button' , { name : / c o n n e c t w a l l e t / i } ) ) . toBeInTheDocument ( )
40- } )
42+ render ( < ConnectWalletButton /> ) ;
43+ expect (
44+ screen . getByRole ( "button" , { name : / c o n n e c t w a l l e t / i } ) ,
45+ ) . toBeInTheDocument ( ) ;
46+ } ) ;
4147
42- it ( ' opens wallet selection dialog on click' , async ( ) => {
43- render ( < ConnectWalletButton /> )
44- fireEvent . click ( screen . getByRole ( ' button' , { name : / c o n n e c t w a l l e t / i } ) )
48+ it ( " opens wallet selection dialog on click" , async ( ) => {
49+ render ( < ConnectWalletButton /> ) ;
50+ fireEvent . click ( screen . getByRole ( " button" , { name : / c o n n e c t w a l l e t / i } ) ) ;
4551 await waitFor ( ( ) =>
46- expect ( screen . getByText ( / c h o o s e a s t e l l a r w a l l e t / i) ) . toBeInTheDocument ( )
47- )
48- } )
52+ expect ( screen . getByText ( / c h o o s e a s t e l l a r w a l l e t / i) ) . toBeInTheDocument ( ) ,
53+ ) ;
54+ } ) ;
4955
50- it ( ' lists wallet options in dialog' , async ( ) => {
51- render ( < ConnectWalletButton /> )
52- fireEvent . click ( screen . getByRole ( ' button' , { name : / c o n n e c t w a l l e t / i } ) )
56+ it ( " lists wallet options in dialog" , async ( ) => {
57+ render ( < ConnectWalletButton /> ) ;
58+ fireEvent . click ( screen . getByRole ( " button" , { name : / c o n n e c t w a l l e t / i } ) ) ;
5359 await waitFor ( ( ) => {
54- expect ( screen . getByText ( ' Freighter' ) ) . toBeInTheDocument ( )
55- expect ( screen . getByText ( ' xBull' ) ) . toBeInTheDocument ( )
56- } )
57- } )
60+ expect ( screen . getByText ( " Freighter" ) ) . toBeInTheDocument ( ) ;
61+ expect ( screen . getByText ( " xBull" ) ) . toBeInTheDocument ( ) ;
62+ } ) ;
63+ } ) ;
5864
59- it ( ' calls connect with wallet id when option is clicked' , async ( ) => {
60- const connect = vi . fn ( )
65+ it ( " calls connect with wallet id when option is clicked" , async ( ) => {
66+ const connect = vi . fn ( ) ;
6167 mockUseWallet . mockReturnValue ( {
62- address : null , isConnected : false , connecting : false , connect, disconnect : vi . fn ( ) , walletId : null ,
63- } )
64- render ( < ConnectWalletButton /> )
65- fireEvent . click ( screen . getByRole ( 'button' , { name : / c o n n e c t w a l l e t / i } ) )
66- await waitFor ( ( ) => screen . getByText ( 'Freighter' ) )
67- fireEvent . click ( screen . getByText ( 'Freighter' ) . closest ( 'button' ) ! )
68- expect ( connect ) . toHaveBeenCalledWith ( 'freighter' )
69- } )
68+ address : null ,
69+ isConnected : false ,
70+ connecting : false ,
71+ connect,
72+ disconnect : vi . fn ( ) ,
73+ walletId : null ,
74+ } ) ;
75+ render ( < ConnectWalletButton /> ) ;
76+ fireEvent . click ( screen . getByRole ( "button" , { name : / c o n n e c t w a l l e t / i } ) ) ;
77+ await waitFor ( ( ) => screen . getByText ( "Freighter" ) ) ;
78+ fireEvent . click ( screen . getByText ( "Freighter" ) . closest ( "button" ) ! ) ;
79+ await waitFor ( ( ) => expect ( connect ) . toHaveBeenCalledWith ( "freighter" ) ) ;
80+ } ) ;
7081
71- it ( ' disables wallet buttons while connecting' , async ( ) => {
82+ it ( " disables wallet buttons while connecting" , async ( ) => {
7283 mockUseWallet . mockReturnValue ( {
73- address : null , isConnected : false , connecting : true , connect : vi . fn ( ) , disconnect : vi . fn ( ) , walletId : null ,
74- } )
75- render ( < ConnectWalletButton /> )
76- fireEvent . click ( screen . getByRole ( 'button' , { name : / c o n n e c t w a l l e t / i } ) )
77- await waitFor ( ( ) => screen . getByText ( 'Freighter' ) )
78- expect ( screen . getByText ( 'Freighter' ) . closest ( 'button' ) ) . toBeDisabled ( )
79- } )
80- } )
84+ address : null ,
85+ isConnected : false ,
86+ connecting : true ,
87+ connect : vi . fn ( ) ,
88+ disconnect : vi . fn ( ) ,
89+ walletId : null ,
90+ } ) ;
91+ render ( < ConnectWalletButton /> ) ;
92+ fireEvent . click ( screen . getByRole ( "button" , { name : / c o n n e c t w a l l e t / i } ) ) ;
93+ await waitFor ( ( ) => screen . getByText ( "Freighter" ) ) ;
94+ expect ( screen . getByText ( "Freighter" ) . closest ( "button" ) ) . toBeDisabled ( ) ;
95+ } ) ;
96+ } ) ;
8197
82- describe ( ' ConnectWalletButton — connected' , ( ) => {
83- const ADDR = ' GABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890AB'
98+ describe ( " ConnectWalletButton — connected" , ( ) => {
99+ const ADDR = " GABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890AB" ;
84100
85101 beforeEach ( ( ) => {
86102 mockUseWallet . mockReturnValue ( {
@@ -89,38 +105,49 @@ describe('ConnectWalletButton — connected', () => {
89105 connecting : false ,
90106 connect : vi . fn ( ) ,
91107 disconnect : vi . fn ( ) ,
92- walletId : ' freighter' ,
93- } )
94- } )
108+ walletId : " freighter" ,
109+ } ) ;
110+ } ) ;
95111
96- it ( 'renders shortened address instead of connect button' , ( ) => {
97- render ( < ConnectWalletButton /> )
98- expect ( screen . queryByRole ( 'button' , { name : / c o n n e c t w a l l e t / i } ) ) . not . toBeInTheDocument ( )
112+ it ( "renders shortened address instead of connect button" , ( ) => {
113+ render ( < ConnectWalletButton /> ) ;
114+ expect (
115+ screen . queryByRole ( "button" , { name : / c o n n e c t w a l l e t / i } ) ,
116+ ) . not . toBeInTheDocument ( ) ;
99117 // Shortened address is shown inside the dropdown trigger button
100- expect ( screen . getByRole ( ' button' ) ) . toBeInTheDocument ( )
101- } )
118+ expect ( screen . getByRole ( " button" ) ) . toBeInTheDocument ( ) ;
119+ } ) ;
102120
103- it ( 'shows disconnect option in dropdown' , async ( ) => {
104- render ( < ConnectWalletButton /> )
105- fireEvent . click ( screen . getByRole ( 'button' ) )
106- await waitFor ( ( ) => expect ( screen . getByText ( / d i s c o n n e c t / i) ) . toBeInTheDocument ( ) )
107- } )
121+ it ( "shows disconnect option in dropdown" , async ( ) => {
122+ render ( < ConnectWalletButton /> ) ;
123+ fireEvent . click ( screen . getByRole ( "button" ) ) ;
124+ await waitFor ( ( ) =>
125+ expect ( screen . getByText ( / d i s c o n n e c t / i) ) . toBeInTheDocument ( ) ,
126+ ) ;
127+ } ) ;
108128
109- it ( ' calls disconnect when disconnect is clicked' , async ( ) => {
110- const disconnect = vi . fn ( )
129+ it ( " calls disconnect when disconnect is clicked" , async ( ) => {
130+ const disconnect = vi . fn ( ) ;
111131 mockUseWallet . mockReturnValue ( {
112- address : ADDR , isConnected : true , connecting : false , connect : vi . fn ( ) , disconnect, walletId : 'freighter' ,
113- } )
114- render ( < ConnectWalletButton /> )
115- fireEvent . click ( screen . getByRole ( 'button' ) )
116- await waitFor ( ( ) => screen . getByText ( / d i s c o n n e c t / i) )
117- fireEvent . click ( screen . getByText ( / d i s c o n n e c t / i) )
118- expect ( disconnect ) . toHaveBeenCalled ( )
119- } )
132+ address : ADDR ,
133+ isConnected : true ,
134+ connecting : false ,
135+ connect : vi . fn ( ) ,
136+ disconnect,
137+ walletId : "freighter" ,
138+ } ) ;
139+ render ( < ConnectWalletButton /> ) ;
140+ fireEvent . click ( screen . getByRole ( "button" ) ) ;
141+ await waitFor ( ( ) => screen . getByText ( / d i s c o n n e c t / i) ) ;
142+ fireEvent . click ( screen . getByText ( / d i s c o n n e c t / i) ) ;
143+ expect ( disconnect ) . toHaveBeenCalled ( ) ;
144+ } ) ;
120145
121- it ( 'shows copy address option' , async ( ) => {
122- render ( < ConnectWalletButton /> )
123- fireEvent . click ( screen . getByRole ( 'button' ) )
124- await waitFor ( ( ) => expect ( screen . getByText ( / c o p y a d d r e s s / i) ) . toBeInTheDocument ( ) )
125- } )
126- } )
146+ it ( "shows copy address option" , async ( ) => {
147+ render ( < ConnectWalletButton /> ) ;
148+ fireEvent . click ( screen . getByRole ( "button" ) ) ;
149+ await waitFor ( ( ) =>
150+ expect ( screen . getByText ( / c o p y a d d r e s s / i) ) . toBeInTheDocument ( ) ,
151+ ) ;
152+ } ) ;
153+ } ) ;
0 commit comments