1
1
import { describe , expect , it } from 'vitest'
2
2
import { createResolver } from '@nuxt/kit'
3
- import { createPage , setup } from '@nuxt/test-utils/e2e'
3
+ import { getBrowser , url , waitForHydration , setup } from '@nuxt/test-utils/e2e'
4
4
import { parseURL } from 'ufo'
5
5
6
6
const { resolve } = createResolver ( import . meta. url )
@@ -11,22 +11,43 @@ await setup({
11
11
browser : true ,
12
12
} )
13
13
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
+
14
45
describe ( 'basic' , ( ) => {
15
46
it ( 'relative onNuxtReady' , async ( ) => {
16
- const page = await createPage ( '/' )
17
- const logs : { text : string , location : string } [ ] = [ ]
47
+ const { page, logs } = await createPage ( '/' )
18
48
// 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 ( `
30
51
[
31
52
{
32
53
"location": "/myScript.js:1",
@@ -44,21 +65,13 @@ describe('basic', () => {
44
65
` )
45
66
} )
46
67
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' )
56
69
await page . waitForTimeout ( 500 )
57
- expect ( logs . length ) . toBe ( 0 )
70
+ expect ( logs ( ) . length ) . toBe ( 0 )
58
71
// click button
59
72
await page . click ( '#load-script' )
60
- await page . waitForTimeout ( 5000 )
61
- expect ( logs ) . toMatchInlineSnapshot ( `
73
+ await page . waitForTimeout ( 500 )
74
+ expect ( logs ( ) ) . toMatchInlineSnapshot ( `
62
75
[
63
76
{
64
77
"location": "/myScript.js:1",
@@ -76,24 +89,16 @@ describe('basic', () => {
76
89
` )
77
90
} )
78
91
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' )
88
93
await page . waitForTimeout ( 500 )
89
- expect ( logs . length ) . toBe ( 0 )
94
+ expect ( logs ( ) . length ) . toBe ( 0 )
90
95
// scroll to element
91
96
await page . evaluate ( ( ) => {
92
97
const el = document . querySelector ( '#el-trigger' ) as HTMLElement
93
98
el . scrollIntoView ( )
94
99
} )
95
- await page . waitForTimeout ( 5000 )
96
- expect ( logs ) . toMatchInlineSnapshot ( `
100
+ await page . waitForTimeout ( 500 )
101
+ expect ( logs ( ) ) . toMatchInlineSnapshot ( `
97
102
[
98
103
{
99
104
"location": "/myScript.js:1",
@@ -111,20 +116,12 @@ describe('basic', () => {
111
116
` )
112
117
} )
113
118
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' )
123
120
await page . waitForTimeout ( 500 )
124
- expect ( logs . length ) . toBe ( 0 )
121
+ expect ( logs ( ) . length ) . toBe ( 0 )
125
122
await page . hover ( '#el-trigger' )
126
- await page . waitForTimeout ( 5000 )
127
- expect ( logs ) . toMatchInlineSnapshot ( `
123
+ await page . waitForTimeout ( 500 )
124
+ expect ( logs ( ) ) . toMatchInlineSnapshot ( `
128
125
[
129
126
{
130
127
"location": "/myScript.js:1",
@@ -142,19 +139,18 @@ describe('basic', () => {
142
139
` )
143
140
} )
144
141
it ( 'bundle' , async ( ) => {
145
- const page = await createPage ( '/bundle-use-script' )
146
- await page . waitForTimeout ( 500 )
142
+ const { page } = await createPage ( '/bundle-use-script' )
147
143
// get content of #script-src
148
144
const text = await page . $eval ( '#script-src' , el => el . textContent )
149
- expect ( text ) . toMatchInlineSnapshot ( `"/_scripts/6nd5bD9YCW .js"` )
145
+ expect ( text ) . toMatchInlineSnapshot ( `"/_scripts/6bEy8slcRmYcRT4E2QbQZ1CMyWw9PpHA7L87BtvSs2U .js"` )
150
146
} )
151
147
} )
152
148
153
149
describe ( 'third-party-capital' , ( ) => {
154
150
it ( 'expect GA to collect data' , {
155
151
timeout : 10000 ,
156
152
} , async ( ) => {
157
- const page = await createPage ( '/tpc/ga' )
153
+ const { page } = await createPage ( '/tpc/ga' )
158
154
await page . waitForTimeout ( 500 )
159
155
160
156
// wait for the collect request or timeout
@@ -169,7 +165,7 @@ describe('third-party-capital', () => {
169
165
it ( 'expect GTM to work collect data' , {
170
166
timeout : 10000 ,
171
167
} , async ( ) => {
172
- const page = await createPage ( '/tpc/gtm' )
168
+ const { page } = await createPage ( '/tpc/gtm' )
173
169
await page . waitForTimeout ( 500 )
174
170
175
171
// wait for the collect request
0 commit comments