11import { test , expect } from '@playwright/test' ;
22
3- // Table-driven so every toggle runs in its own fresh browser context.
43const scenarios = [
54 { toggle : 'theme-toggle' , attr : 'data-theme' } ,
65 { toggle : 'theme-toggle-secondary' , attr : 'data-theme-2' } ,
76 { toggle : 'theme-toggle-3' , attr : 'data-theme-three' } ,
87] ;
98
10- test . describe ( 'Zero-UI Next Integration' , ( ) => {
9+ test . describe . configure ( { mode : 'serial' } ) ; // run one after another
10+ test . describe ( 'Zero-UI Next.js integration' , ( ) => {
1111 for ( const { toggle, attr } of scenarios ) {
12- test ( `toggles <${ attr } > from light → dark` , async ( { page } ) => {
13- // 1️⃣ Load fully hydrated page
12+ test ( `starts "light" and flips <${ attr } > → "dark"` , async ( { page } ) => {
1413 await page . goto ( '/' , { waitUntil : 'networkidle' } ) ;
15- await page . locator ( 'body' ) . waitFor ( { state : 'visible' , timeout : 5000 } ) ;
16- console . log ( `✅ page loaded testing ${ attr } from light → dark` ) ;
1714
1815 const body = page . locator ( 'body' ) ;
1916 const button = page . getByTestId ( toggle ) ;
2017
21-
22- // 2️⃣ Assert initial state
23- await expect . poll ( async ( ) => await body . getAttribute ( attr ) ) . toBe ( 'light' ) ;
24- await expect . poll ( async ( ) => await button . isVisible ( ) ) . toBe ( true ) ; // auto-retries until true
25-
26-
27- // 3️⃣ Action
28- await button . click ( ( console . log ( `✅ ${ button } clicked` ) ) ) ;
29-
30- // 4️⃣ Final state
31- await expect . poll ( async ( ) => await body . getAttribute ( attr ) ) . toBe ( 'dark' ) ;
18+ /* ① Wait until the attribute exists at all */
19+ await expect . poll ( async ( ) => {
20+ const v = await body . getAttribute ( attr ) ;
21+ return v !== null ;
22+ } ) . toBe ( true ) ; // attribute now present (any value)
23+
24+ /* ② Now assert it is "light" */
25+ await expect ( body ) . toHaveAttribute ( attr , 'light' ) ;
26+
27+ /* ③ Click & assert "dark" */
28+ await button . click ( ) ;
29+ await expect . poll ( async ( ) => {
30+ const v = await body . getAttribute ( attr ) ;
31+ return v !== null ;
32+ } ) . toBe ( true ) ;
33+ await expect ( body ) . toHaveAttribute ( attr , 'dark' ) ;
3234 } ) ;
3335 }
34- } ) ;
36+ } ) ;
0 commit comments