fix: scope visible error mutation scans

Author: benjcooley

browser_tests/fixtures/utils/errorSurfaces.ts

@@ -36,30 +36,55 @@ function installVisibleErrorRecorder(
   const seen = new Set<string>()
   const errors: VisibleError[] = []
   target.__cnVisibleErrors = errors
-  const sample = () => {
+  const record = (surface: string, element: Element) => {
+    if (
+      !(element instanceof HTMLElement) ||
+      !element.checkVisibility({
+        checkOpacity: true,
+        checkVisibilityCSS: true
+      })
+    )
+      return
+    const text = (element.innerText || element.textContent || '')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .slice(0, 300)
+    const key = `${surface}\u0000${text}`
+    if (seen.has(key)) return
+    seen.add(key)
+    errors.push({ surface, text })
+  }
+  const sampleElement = (element: Element, includeDescendants: boolean) => {
     for (const { surface, selector } of selectors) {
-      for (const element of document.querySelectorAll(selector)) {
-        if (
-          !(element instanceof HTMLElement) ||
-          !element.checkVisibility({
-            checkOpacity: true,
-            checkVisibilityCSS: true
-          })
-        )
-          continue
-        const text = (element.innerText || element.textContent || '')
-          .replace(/\s+/g, ' ')
-          .trim()
-          .slice(0, 300)
-        const key = `${surface}\u0000${text}`
-        if (seen.has(key)) continue
-        seen.add(key)
-        errors.push({ surface, text })
-      }
+      const closest = element.closest(selector)
+      if (closest) record(surface, closest)
+      if (!includeDescendants) continue
+      for (const descendant of element.querySelectorAll(selector))
+        record(surface, descendant)
     }
   }
-  sample()
-  new MutationObserver(sample).observe(document, {
+  for (const { surface, selector } of selectors)
+    for (const element of document.querySelectorAll(selector))
+      record(surface, element)
+  new MutationObserver((mutations) => {
+    const exact = new Set<Element>()
+    const subtrees = new Set<Element>()
+    for (const mutation of mutations) {
+      if (mutation.type === 'childList') {
+        if (mutation.target instanceof Element) exact.add(mutation.target)
+        for (const node of mutation.addedNodes) {
+          if (node instanceof Element) subtrees.add(node)
+          else if (node.parentElement) exact.add(node.parentElement)
+        }
+      } else if (mutation.target instanceof Element) {
+        subtrees.add(mutation.target)
+      } else if (mutation.target.parentElement) {
+        exact.add(mutation.target.parentElement)
+      }
+    }
+    for (const element of exact) sampleElement(element, false)
+    for (const element of subtrees) sampleElement(element, true)
+  }).observe(document, {
     attributes: true,
     characterData: true,
     childList: true,

browser_tests/tests/customNodes/errorSurfaces.pure.spec.ts

@@ -51,10 +51,12 @@ test('a closed page fails immediately with the real reason, not the sentinel', a
 test('a visible error toast fails after it clears before the assertion', async ({
   page
 }) => {
-  const html =
-    '<div id="t" class="p-toast-message-error">momentary</div>' +
-    '<script>setTimeout(() => document.getElementById("t").remove(), 800)</script>'
-  await page.goto(`data:text/html,${encodeURIComponent(html)}`)
+  await page.setContent('<div id="t">momentary</div>')
+  await page.evaluate(() => {
+    const toast = document.getElementById('t')!
+    toast.classList.add('p-toast-message-error')
+    setTimeout(() => toast.remove(), 800)
+  })
   await expect(page.locator('#t')).toHaveCount(0)
   const failure = await expectNoVisibleErrors(page, 'transient').then(
     () => undefined,
@@ -63,3 +65,32 @@ test('a visible error toast fails after it clears before the assertion', async (
   expect(failure).toBeInstanceOf(Error)
   expect(String(failure)).toContain('momentary')
 })
+
+test('unrelated mutations do not rescan the full document', async ({
+  page
+}) => {
+  await page.setContent('<main id="root"></main>')
+  const fullDocumentQueries = await page.evaluate(async () => {
+    const original = document.querySelectorAll.bind(document)
+    let calls = 0
+    document.querySelectorAll = ((selector: string) => {
+      calls += 1
+      return original(selector)
+    }) as typeof document.querySelectorAll
+    const root = document.getElementById('root')!
+    for (let index = 0; index < 1_000; index += 1) {
+      const child = document.createElement('span')
+      root.append(child)
+      child.dataset.index = String(index)
+      child.textContent = String(index)
+      await Promise.resolve()
+    }
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    return calls
+  })
+
+  expect(fullDocumentQueries).toBe(0)
+  await expect(
+    expectNoVisibleErrors(page, 'after DOM churn')
+  ).resolves.toBeUndefined()
+})