tests cleanup

tests/e2e/m18h1-deferred-comments.spec.ts

@@ -0,0 +1,68 @@
+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([])
+  })
+})