@@ -24,32 +24,35 @@ testWithRouter('navigating to a page updates the URL', async ({ render, app }) =
2424 await unmount ( ) ;
2525} ) ;
2626
27- testWithRouter ( 'the active link swaps when navigating to a different page' , async ( { render, app } ) => {
28- const { getByText, unmount } = await render ( < Navigation /> ) ;
29-
30- // active state is only reflected as a styled-components color, not a DOM attribute
31- const colorOf = ( label : string ) => getComputedStyle ( getByText ( label ) . element ( ) ) . color ;
32-
33- // navigate via the router's own click handler first, so its internal location is
34- // guaranteed to be in sync rather than relying on the initial location above
35- await getByText ( 'Home' ) . click ( ) ;
36- await vi . waitFor ( ( ) => expect ( app . navigation . path . pathname ) . toBe ( '/' ) ) ;
37-
38- // Users is never navigated to in this test, so its color is a stable "inactive" reference
39- const inactiveColor = colorOf ( 'Users' ) ;
40- await vi . waitFor ( ( ) => {
41- expect ( colorOf ( 'Home' ) ) . not . toBe ( inactiveColor ) ;
42- expect ( colorOf ( 'Products' ) ) . toBe ( inactiveColor ) ;
43- } ) ;
44-
45- await getByText ( 'Products' ) . click ( ) ;
46-
47- // the URL changes synchronously on click, so styling lags at least one render behind it —
48- // retry on the color itself rather than on the pathname, which would resolve too early
49- await vi . waitFor ( ( ) => {
50- expect ( colorOf ( 'Home' ) ) . toBe ( inactiveColor ) ;
51- expect ( colorOf ( 'Products' ) ) . not . toBe ( inactiveColor ) ;
52- } ) ;
53-
54- await unmount ( ) ;
55- } ) ;
27+ testWithRouter (
28+ 'the active link swaps when navigating to a different page' ,
29+ async ( { render, app } ) => {
30+ const { getByText, unmount } = await render ( < Navigation /> ) ;
31+
32+ // active state is only reflected as a styled-components color, not a DOM attribute
33+ const colorOf = ( label : string ) => getComputedStyle ( getByText ( label ) . element ( ) ) . color ;
34+
35+ // navigate via the router's own click handler first, so its internal location is
36+ // guaranteed to be in sync rather than relying on the initial location above
37+ await getByText ( 'Home' ) . click ( ) ;
38+ await vi . waitFor ( ( ) => expect ( app . navigation . path . pathname ) . toBe ( '/' ) ) ;
39+
40+ // Users is never navigated to in this test, so its color is a stable "inactive" reference
41+ const inactiveColor = colorOf ( 'Users' ) ;
42+ await vi . waitFor ( ( ) => {
43+ expect ( colorOf ( 'Home' ) ) . not . toBe ( inactiveColor ) ;
44+ expect ( colorOf ( 'Products' ) ) . toBe ( inactiveColor ) ;
45+ } ) ;
46+
47+ await getByText ( 'Products' ) . click ( ) ;
48+
49+ // the URL changes synchronously on click, so styling lags at least one render behind it —
50+ // retry on the color itself rather than on the pathname, which would resolve too early
51+ await vi . waitFor ( ( ) => {
52+ expect ( colorOf ( 'Home' ) ) . toBe ( inactiveColor ) ;
53+ expect ( colorOf ( 'Products' ) ) . not . toBe ( inactiveColor ) ;
54+ } ) ;
55+
56+ await unmount ( ) ;
57+ } ,
58+ ) ;
0 commit comments