Skip to content

Commit 3e6c762

Browse files
daniele-pelagattidaniele-pelagatti
committed
test: split integrated example tests
1 parent a5eb0e0 commit 3e6c762

File tree

6 files changed

+55
-130
lines changed

6 files changed

+55
-130
lines changed

‎tests/__snapshots__/examples/integrated-example-webgpu.test.ts/chromium-initial.png‎

351 KB
Loading

‎tests/__snapshots__/examples/integrated-example-webgpu.test.ts/chromium-zoomed-in.png‎

398 KB
Loading

‎tests/__snapshots__/examples/integrated-example-webgpu.test.ts/chromium-zoomed-out-from-above.png‎

520 KB
Loading

‎tests/examples/integrated-example-webgpu.test.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { expect } from '@playwright/test'
2+
3+
import { test } from '../testWithCoverage'
4+
import { setupRoutes } from './shared'
5+
6+
test('renders the WebGPU example correctly', async ({ page, context }) => {
7+
await setupRoutes(context)
8+
await page.goto('/examples/integrated/webgpu.html', { waitUntil: 'networkidle' })
9+
await expect(page.locator('canvas').first()).toBeAttached()
10+
await expect(page).toHaveScreenshot('initial.png')
11+
await page.mouse.wheel(0, -9000)
12+
await expect(page).toHaveScreenshot('zoomed-in.png')
13+
await page.mouse.wheel(0, 9000)
14+
await page.mouse.move(250, 250, { steps: 20 })
15+
await page.mouse.down({ button: 'left' })
16+
await page.mouse.move(250, 500, { steps: 20 })
17+
await page.mouse.up({ button: 'left' })
18+
await expect(page).toHaveScreenshot('zoomed-out-from-above.png')
19+
})

‎tests/examples/integrated-example.test.ts‎

Lines changed: 7 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,19 @@
11
import { expect } from '@playwright/test'
2-
import { readFile } from 'fs/promises'
3-
import { join } from 'path'
42

53
import { test } from '../testWithCoverage'
4+
import { setupRoutes } from './shared'
65

7-
// @ts-expect-error tsc throws "Named capturing groups are only available when targeting 'ES2018' or later." here
8-
const threeMatch = /https:\/\/unpkg\.com\/three(?<version>@[0-9.]+)?\/(?<path>.*)/
9-
// @ts-expect-error tsc throws "Named capturing groups are only available when targeting 'ES2018' or later." here
10-
const gainmapJSMatch = /https:\/\/unpkg\.com\/@monogrid\/gainmap-js(?<version>@[0-9.]+)?\/(?<path>.*)/
11-
12-
test('renders the example correctly', async ({ page, context }, testInfo) => {
13-
test.setTimeout(480_000) // TODO: understand why this got slow!
14-
15-
// Capture console messages
16-
page.on('console', msg => {
17-
const type = msg.type()
18-
const text = msg.text()
19-
const location = msg.location()
20-
console.log(`[Browser ${type.toUpperCase()}] ${text}`)
21-
if (location.url) {
22-
console.log(` at ${location.url}:${location.lineNumber}:${location.columnNumber}`)
23-
}
24-
})
25-
26-
await context.route(threeMatch, async (route, request) => {
27-
const match = threeMatch.exec(request.url())
28-
const path = match?.groups?.path
29-
if (path) {
30-
const body = await readFile(join('./node_modules/three/', path))
31-
return route.fulfill({ body, status: 200, contentType: 'application/javascript' })
32-
}
33-
return route.continue()
34-
})
35-
await context.route(gainmapJSMatch, async (route, request) => {
36-
const match = gainmapJSMatch.exec(request.url())
37-
const path = match?.groups?.path
38-
if (path) {
39-
const body = await readFile(join('.', path))
40-
return route.fulfill({ body, status: 200, contentType: 'application/javascript' })
41-
}
42-
return route.continue()
43-
})
44-
let startTime = performance.now()
45-
console.log(testInfo.title, '[DEBUG] going to page')
6+
test('renders the example correctly', async ({ page, context }) => {
7+
await setupRoutes(context)
468
await page.goto('/examples/integrated/', { waitUntil: 'networkidle' })
47-
console.log(testInfo.title, `[DEBUG] page loaded (${(performance.now() - startTime).toFixed(2)}ms), waiting for canvas to be attached`)
48-
startTime = performance.now()
49-
await expect(page.locator('canvas').first()).toBeAttached({ timeout: 480_000 })
50-
console.log(testInfo.title, `[DEBUG] canvas attached (${(performance.now() - startTime).toFixed(2)}ms), taking screenshot`)
51-
startTime = performance.now()
52-
await expect(page).toHaveScreenshot('initial.png', { timeout: 480_000 })
53-
console.log(testInfo.title, `[DEBUG] screenshot taken (${(performance.now() - startTime).toFixed(2)}ms), zooming in`)
54-
startTime = performance.now()
55-
await page.mouse.wheel(0, -9000)
56-
console.log(testInfo.title, `[DEBUG] zoomed in (${(performance.now() - startTime).toFixed(2)}ms), taking screenshot`)
57-
startTime = performance.now()
58-
await expect(page).toHaveScreenshot('zoomed-in.png', { timeout: 480_000 })
59-
console.log(testInfo.title, `[DEBUG] zoomed in, screenshot taken (${(performance.now() - startTime).toFixed(2)}ms), zooming out`)
60-
startTime = performance.now()
61-
await page.mouse.wheel(0, 9000)
62-
console.log(testInfo.title, `[DEBUG] zoomed out (${(performance.now() - startTime).toFixed(2)}ms), moving mouse to 250, 250`)
63-
startTime = performance.now()
64-
await page.mouse.move(250, 250, { steps: 20 })
65-
console.log(testInfo.title, `[DEBUG] moved mouse to 250, 250 (${(performance.now() - startTime).toFixed(2)}ms), pressing mouse button`)
66-
startTime = performance.now()
67-
await page.mouse.down({ button: 'left' })
68-
console.log(testInfo.title, `[DEBUG] clicked (${(performance.now() - startTime).toFixed(2)}ms), moving mouse to 250, 500`)
69-
startTime = performance.now()
70-
await page.mouse.move(250, 500, { steps: 20 })
71-
console.log(testInfo.title, `[DEBUG] moved mouse to 250, 500 (${(performance.now() - startTime).toFixed(2)}ms), releasing mouse button`)
72-
startTime = performance.now()
73-
await page.mouse.up({ button: 'left' })
74-
console.log(testInfo.title, `[DEBUG] zoomed out, screenshot taken, moving mouse to 250, 500, clicking (${(performance.now() - startTime).toFixed(2)}ms)`)
75-
startTime = performance.now()
76-
await expect(page).toHaveScreenshot('zoomed-out-from-above.png', { timeout: 480_000 })
77-
console.log(testInfo.title, `[DEBUG] final screenshot taken (${(performance.now() - startTime).toFixed(2)}ms)`)
78-
})
79-
80-
test('renders the WebGPU example correctly', async ({ page, context }, testInfo) => {
81-
test.setTimeout(480_000) // TODO: understand why this got slow!
82-
83-
// Capture console messages
84-
page.on('console', msg => {
85-
const type = msg.type()
86-
const text = msg.text()
87-
const location = msg.location()
88-
console.log(`[Browser ${type.toUpperCase()}] ${text}`)
89-
if (location.url) {
90-
console.log(` at ${location.url}:${location.lineNumber}:${location.columnNumber}`)
91-
}
92-
})
93-
await context.route(threeMatch, async (route, request) => {
94-
const match = threeMatch.exec(request.url())
95-
const path = match?.groups?.path
96-
if (path) {
97-
const body = await readFile(join('./node_modules/three/', path))
98-
return route.fulfill({ body, status: 200, contentType: 'application/javascript' })
99-
}
100-
return route.continue()
101-
})
102-
await context.route(gainmapJSMatch, async (route, request) => {
103-
const match = gainmapJSMatch.exec(request.url())
104-
const path = match?.groups?.path
105-
if (path) {
106-
const body = await readFile(join('.', path))
107-
return route.fulfill({ body, status: 200, contentType: 'application/javascript' })
108-
}
109-
return route.continue()
110-
})
111-
112-
let startTime = performance.now()
113-
console.log(testInfo.title, '[DEBUG] going to page')
114-
await page.goto('/examples/integrated/webgpu.html', { waitUntil: 'networkidle' })
115-
console.log(testInfo.title, `[DEBUG] page loaded (${(performance.now() - startTime).toFixed(2)}ms), waiting for canvas to be attached`)
116-
startTime = performance.now()
117-
await expect(page.locator('canvas').first()).toBeAttached({ timeout: 480_000 })
118-
console.log(testInfo.title, `[DEBUG] canvas attached (${(performance.now() - startTime).toFixed(2)}ms), taking screenshot`)
119-
startTime = performance.now()
120-
await expect(page).toHaveScreenshot('initial.png', { timeout: 480_000 })
121-
console.log(testInfo.title, `[DEBUG] screenshot taken (${(performance.now() - startTime).toFixed(2)}ms), zooming in`)
122-
startTime = performance.now()
9+
await expect(page.locator('canvas').first()).toBeAttached()
10+
await expect(page).toHaveScreenshot('initial.png')
12311
await page.mouse.wheel(0, -9000)
124-
console.log(testInfo.title, `[DEBUG] zoomed in (${(performance.now() - startTime).toFixed(2)}ms), taking screenshot`)
125-
startTime = performance.now()
12+
await expect(page).toHaveScreenshot('zoomed-in.png')
12613
await page.mouse.wheel(0, 9000)
127-
console.log(testInfo.title, `[DEBUG] zoomed out (${(performance.now() - startTime).toFixed(2)}ms), moving mouse to 250, 250`)
128-
startTime = performance.now()
12914
await page.mouse.move(250, 250, { steps: 20 })
130-
console.log(testInfo.title, `[DEBUG] moved mouse to 250, 250 (${(performance.now() - startTime).toFixed(2)}ms), pressing mouse button`)
131-
startTime = performance.now()
13215
await page.mouse.down({ button: 'left' })
133-
console.log(testInfo.title, `[DEBUG] clicked (${(performance.now() - startTime).toFixed(2)}ms), moving mouse to 250, 500`)
134-
startTime = performance.now()
13516
await page.mouse.move(250, 500, { steps: 20 })
136-
console.log(testInfo.title, `[DEBUG] moved mouse to 250, 500 (${(performance.now() - startTime).toFixed(2)}ms), releasing mouse button`)
137-
startTime = performance.now()
13817
await page.mouse.up({ button: 'left' })
139-
140-
console.log(testInfo.title, `[DEBUG] final screenshot taken (${(performance.now() - startTime).toFixed(2)}ms)`)
141-
await expect(page).toHaveScreenshot('zoomed-out-from-above.png', { timeout: 480_000 })
18+
await expect(page).toHaveScreenshot('zoomed-out-from-above.png')
14219
})

‎tests/examples/shared.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { BrowserContext } from '@playwright/test'
2+
import { readFile } from 'fs/promises'
3+
import { join } from 'path'
4+
5+
// @ts-expect-error tsc throws "Named capturing groups are only available when targeting 'ES2018' or later." here
6+
export const threeMatch = /https:\/\/unpkg\.com\/three(?<version>@[0-9.]+)?\/(?<path>.*)/
7+
// @ts-expect-error tsc throws "Named capturing groups are only available when targeting 'ES2018' or later." here
8+
export const gainmapJSMatch = /https:\/\/unpkg\.com\/@monogrid\/gainmap-js(?<version>@[0-9.]+)?\/(?<path>.*)/
9+
10+
export async function setupRoutes (context: BrowserContext) {
11+
await context.route(threeMatch, async (route, request) => {
12+
const match = threeMatch.exec(request.url())
13+
const path = match?.groups?.path
14+
if (path) {
15+
const body = await readFile(join('./node_modules/three/', path))
16+
return route.fulfill({ body, status: 200, contentType: 'application/javascript' })
17+
}
18+
return route.continue()
19+
})
20+
await context.route(gainmapJSMatch, async (route, request) => {
21+
const match = gainmapJSMatch.exec(request.url())
22+
const path = match?.groups?.path
23+
if (path) {
24+
const body = await readFile(join('.', path))
25+
return route.fulfill({ body, status: 200, contentType: 'application/javascript' })
26+
}
27+
return route.continue()
28+
})
29+
}

0 commit comments

Comments
 (0)