69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
const artworkPath = '/art/56897/the-park-in-fall'
|
|
|
|
test.describe('M18H.1 deferred artwork comments', () => {
|
|
test('keeps comments deferred, then loads exactly once on approach', async ({ page }) => {
|
|
test.setTimeout(60000)
|
|
|
|
const commentsRequests: string[] = []
|
|
const commentsStatuses: number[] = []
|
|
const consoleErrors: string[] = []
|
|
const pageErrors: string[] = []
|
|
|
|
page.on('request', (request) => {
|
|
if (/\/api\/artworks\/\d+\/comments(?:\?|$)/.test(request.url())) {
|
|
commentsRequests.push(request.url())
|
|
}
|
|
})
|
|
page.on('response', (response) => {
|
|
if (/\/api\/artworks\/\d+\/comments(?:\?|$)/.test(response.url())) commentsStatuses.push(response.status())
|
|
})
|
|
page.on('console', (message) => {
|
|
if (message.type() === 'error') consoleErrors.push(message.text())
|
|
})
|
|
page.on('pageerror', (error) => pageErrors.push(error.message))
|
|
|
|
await page.setViewportSize({ width: 375, height: 320 })
|
|
await page.addInitScript(() => {
|
|
if (window.location.hostname !== 'skinbase26.test') return
|
|
window.__m18h1Observers = []
|
|
window.IntersectionObserver = class {
|
|
constructor(callback, options) {
|
|
this.callback = callback
|
|
this.options = options
|
|
window.__m18h1Observers.push(this)
|
|
}
|
|
observe() {}
|
|
disconnect() {}
|
|
}
|
|
})
|
|
const response = await page.goto(artworkPath, { waitUntil: 'domcontentloaded' })
|
|
expect(response?.status()).toBe(200)
|
|
await expect(page.locator('main').first()).toBeVisible()
|
|
|
|
const controlledObserver = await page.evaluate(() => Array.isArray(window.__m18h1Observers))
|
|
await page.waitForTimeout(1500)
|
|
if (controlledObserver) expect(commentsRequests).toHaveLength(0)
|
|
else expect(commentsRequests.length).toBeLessThanOrEqual(1)
|
|
|
|
const comments = page.locator('section[aria-label="Comments"]')
|
|
if (controlledObserver) {
|
|
await comments.scrollIntoViewIfNeeded()
|
|
await page.evaluate(() => window.__m18h1Observers.forEach((observer) => observer.callback([{ isIntersecting: true }])))
|
|
await expect.poll(() => commentsRequests.length, { timeout: 10000 }).toBe(1)
|
|
await expect.poll(() => commentsStatuses.length, { timeout: 10000 }).toBe(1)
|
|
expect(commentsStatuses[0]).toBe(200)
|
|
} else {
|
|
await expect.poll(() => commentsRequests.length, { timeout: 10000 }).toBe(1)
|
|
await expect.poll(() => commentsStatuses.length, { timeout: 10000 }).toBe(1)
|
|
expect(commentsStatuses[0]).toBe(200)
|
|
}
|
|
|
|
await page.waitForTimeout(500)
|
|
expect(commentsRequests).toHaveLength(1)
|
|
expect(consoleErrors).toEqual([])
|
|
expect(pageErrors).toEqual([])
|
|
})
|
|
})
|