abort.spec.ts

import { expect, test } from "@playwright/test"

/**
 * route.abort() drops a request entirely — the browser receives a network
 * error for that request. Use it to block unwanted traffic or test fallbacks.
 */

test("block analytics calls so tests don't pollute real data", async ({ page }) => {
  const blockedRequests: string[] = []

  await page.route("**/analytics/**", async (route) => {
    blockedRequests.push(route.request().url())
    await route.abort()
  })

  await page.setContent(`
    <button id="purchase">Buy now</button>
    <p id="confirmation" hidden>Order confirmed!</p>
    <script>
      document.getElementById('purchase').onclick = async () => {
        fetch('http://analytics.test/analytics/events', {
          method: 'POST',
          body: JSON.stringify({ event: 'purchase_clicked' })
        }).catch(() => {})

        document.getElementById('confirmation').hidden = false
      }
    </script>
  `)

  await page.getByRole("button", { name: "Buy now" }).click()

  await expect(page.locator("#confirmation")).toBeVisible()
  expect(blockedRequests.length).toBe(1)
  expect(blockedRequests[0]).toContain("/analytics/events")
})

test("block image requests to focus on page text structure", async ({ page }) => {
  let imageRequestCount = 0

  await page.route("**/*.{png,jpg,jpeg,gif,webp,svg}", async (route) => {
    imageRequestCount++
    await route.abort()
  })

  await page.setContent(`
    <h1>Product Catalog</h1>
    <article>
      <img src="http://cdn.test/images/product-1.jpg" alt="Wireless headphones" />
      <h2>Wireless Headphones</h2>
      <p>Premium sound quality</p>
    </article>
    <article>
      <img src="http://cdn.test/images/product-2.png" alt="Mechanical keyboard" />
      <h2>Mechanical Keyboard</h2>
      <p>Tactile typing experience</p>
    </article>
  `)

  await expect(page.getByRole("heading", { name: "Product Catalog" })).toBeVisible()
  await expect(page.getByRole("heading", { name: "Wireless Headphones" })).toBeVisible()
  await expect(page.getByRole("heading", { name: "Mechanical Keyboard" })).toBeVisible()

  expect(imageRequestCount).toBe(2)
})

test("test app behavior when a required service is unavailable", async ({ page }) => {
  await page.route("**/api/feature-flags", async (route) => {
    await route.abort()
  })

  await page.setContent(`
    <div id="app">Loading...</div>
    <script>
      async function init() {
        let flags = { newDashboard: false }

        try {
          const res = await fetch('http://mock.test/api/feature-flags')
          flags = await res.json()
        } catch {
          // Feature flag service is down — fall back to safe defaults
        }

        const app = document.getElementById('app')
        app.textContent = flags.newDashboard ? 'New Dashboard (beta)' : 'Classic Dashboard'
      }

      init()
    </script>
  `)

  await expect(page.locator("#app")).toHaveText("Classic Dashboard")
})