11import { describe , expect , it } from 'vitest'
22import { createResolver } from '@nuxt/kit'
3- import { createPage , setup } from '@nuxt/test-utils/e2e'
3+ import { getBrowser , url , waitForHydration , setup } from '@nuxt/test-utils/e2e'
44import { parseURL } from 'ufo'
55
66const { resolve } = createResolver ( import . meta. url )
@@ -11,22 +11,43 @@ await setup({
1111 browser : true ,
1212} )
1313
14+ async function createPage ( path : string , options ?: any ) {
15+ const logs : { text : string , location : string } [ ] = [ ]
16+ const browser = await getBrowser ( )
17+ const page = await browser . newPage ( options )
18+ page . addListener ( 'console' , ( msg ) => {
19+ const location = `${ parseURL ( msg . location ( ) . url ) . pathname } :${ msg . location ( ) . lineNumber } `
20+ if ( ! location . startsWith ( '/_nuxt' ) ) {
21+ logs . push ( {
22+ text : msg . text ( ) ,
23+ location,
24+ } )
25+ }
26+ } )
27+ const _goto = page . goto . bind ( page )
28+ page . goto = async ( url2 , options2 ) => {
29+ const waitUntil = options2 ?. waitUntil
30+ if ( waitUntil && [ 'hydration' , 'route' ] . includes ( waitUntil ) ) {
31+ delete options2 . waitUntil
32+ }
33+ const res = await _goto ( url2 , options2 )
34+ await waitForHydration ( page , url2 , waitUntil )
35+ return res
36+ }
37+ if ( path ) {
38+ // @ts -expect-error untyped
39+ await page . goto ( url ( path ) , options ?. javaScriptEnabled === false ? { } : { waitUntil : 'hydration' } )
40+ }
41+ // @ts -expect-error untyped
42+ return { page, logs ( ) { return logs } }
43+ }
44+
1445describe ( 'basic' , ( ) => {
1546 it ( 'relative onNuxtReady' , async ( ) => {
16- const page = await createPage ( '/' )
17- const logs : { text : string , location : string } [ ] = [ ]
47+ const { page, logs } = await createPage ( '/' )
1848 // visit and collect all logs, we need to do a snapshot on them
19- page . addListener ( 'console' , ( msg ) => {
20- const location = `${ parseURL ( msg . location ( ) . url ) . pathname } :${ msg . location ( ) . lineNumber } `
21- if ( ! location . startsWith ( '/_nuxt' ) ) {
22- logs . push ( {
23- text : msg . text ( ) ,
24- location,
25- } )
26- }
27- } )
28- await page . waitForTimeout ( 5000 )
29- expect ( logs ) . toMatchInlineSnapshot ( `
49+ await page . waitForTimeout ( 500 )
50+ expect ( logs ( ) ) . toMatchInlineSnapshot ( `
3051 [
3152 {
3253 "location": "/myScript.js:1",
@@ -44,21 +65,13 @@ describe('basic', () => {
4465 ` )
4566 } )
4667 it ( 'relative manual' , async ( ) => {
47- const page = await createPage ( '/manual-trigger' )
48- const logs : { text : string , location : string } [ ] = [ ]
49- // visit and collect all logs, we need to do a snapshot on them
50- page . addListener ( 'console' , ( msg ) => {
51- logs . push ( {
52- text : msg . text ( ) ,
53- location : `${ parseURL ( msg . location ( ) . url ) . pathname } :${ msg . location ( ) . lineNumber } ` ,
54- } )
55- } )
68+ const { page, logs } = await createPage ( '/manual-trigger' )
5669 await page . waitForTimeout ( 500 )
57- expect ( logs . length ) . toBe ( 0 )
70+ expect ( logs ( ) . length ) . toBe ( 0 )
5871 // click button
5972 await page . click ( '#load-script' )
60- await page . waitForTimeout ( 5000 )
61- expect ( logs ) . toMatchInlineSnapshot ( `
73+ await page . waitForTimeout ( 500 )
74+ expect ( logs ( ) ) . toMatchInlineSnapshot ( `
6275 [
6376 {
6477 "location": "/myScript.js:1",
@@ -76,24 +89,16 @@ describe('basic', () => {
7689 ` )
7790 } )
7891 it ( 'relative visibility' , async ( ) => {
79- const page = await createPage ( '/visibility-trigger' )
80- const logs : { text : string , location : string } [ ] = [ ]
81- // visit and collect all logs, we need to do a snapshot on them
82- page . addListener ( 'console' , ( msg ) => {
83- logs . push ( {
84- text : msg . text ( ) ,
85- location : `${ parseURL ( msg . location ( ) . url ) . pathname } :${ msg . location ( ) . lineNumber } ` ,
86- } )
87- } )
92+ const { page, logs } = await createPage ( '/visibility-trigger' )
8893 await page . waitForTimeout ( 500 )
89- expect ( logs . length ) . toBe ( 0 )
94+ expect ( logs ( ) . length ) . toBe ( 0 )
9095 // scroll to element
9196 await page . evaluate ( ( ) => {
9297 const el = document . querySelector ( '#el-trigger' ) as HTMLElement
9398 el . scrollIntoView ( )
9499 } )
95- await page . waitForTimeout ( 5000 )
96- expect ( logs ) . toMatchInlineSnapshot ( `
100+ await page . waitForTimeout ( 500 )
101+ expect ( logs ( ) ) . toMatchInlineSnapshot ( `
97102 [
98103 {
99104 "location": "/myScript.js:1",
@@ -111,20 +116,12 @@ describe('basic', () => {
111116 ` )
112117 } )
113118 it ( 'relative mouseover' , async ( ) => {
114- const page = await createPage ( '/mouseover-trigger' )
115- const logs : { text : string , location : string } [ ] = [ ]
116- // visit and collect all logs, we need to do a snapshot on them
117- page . addListener ( 'console' , ( msg ) => {
118- logs . push ( {
119- text : msg . text ( ) ,
120- location : `${ parseURL ( msg . location ( ) . url ) . pathname } :${ msg . location ( ) . lineNumber } ` ,
121- } )
122- } )
119+ const { page, logs } = await createPage ( '/mouseover-trigger' )
123120 await page . waitForTimeout ( 500 )
124- expect ( logs . length ) . toBe ( 0 )
121+ expect ( logs ( ) . length ) . toBe ( 0 )
125122 await page . hover ( '#el-trigger' )
126- await page . waitForTimeout ( 5000 )
127- expect ( logs ) . toMatchInlineSnapshot ( `
123+ await page . waitForTimeout ( 500 )
124+ expect ( logs ( ) ) . toMatchInlineSnapshot ( `
128125 [
129126 {
130127 "location": "/myScript.js:1",
@@ -142,19 +139,18 @@ describe('basic', () => {
142139 ` )
143140 } )
144141 it ( 'bundle' , async ( ) => {
145- const page = await createPage ( '/bundle-use-script' )
146- await page . waitForTimeout ( 500 )
142+ const { page } = await createPage ( '/bundle-use-script' )
147143 // get content of #script-src
148144 const text = await page . $eval ( '#script-src' , el => el . textContent )
149- expect ( text ) . toMatchInlineSnapshot ( `"/_scripts/6nd5bD9YCW .js"` )
145+ expect ( text ) . toMatchInlineSnapshot ( `"/_scripts/6bEy8slcRmYcRT4E2QbQZ1CMyWw9PpHA7L87BtvSs2U .js"` )
150146 } )
151147} )
152148
153149describe ( 'third-party-capital' , ( ) => {
154150 it ( 'expect GA to collect data' , {
155151 timeout : 10000 ,
156152 } , async ( ) => {
157- const page = await createPage ( '/tpc/ga' )
153+ const { page } = await createPage ( '/tpc/ga' )
158154 await page . waitForTimeout ( 500 )
159155
160156 // wait for the collect request or timeout
@@ -169,7 +165,7 @@ describe('third-party-capital', () => {
169165 it ( 'expect GTM to work collect data' , {
170166 timeout : 10000 ,
171167 } , async ( ) => {
172- const page = await createPage ( '/tpc/gtm' )
168+ const { page } = await createPage ( '/tpc/gtm' )
173169 await page . waitForTimeout ( 500 )
174170
175171 // wait for the collect request
0 commit comments