board-game-engine-react 0.0.15 → 0.0.17

package/e2e/coverage.js

@@ -0,0 +1,28 @@
+/**
+ * Playwright test with optional coverage collection for Firefox e2e.
+ * When COVERAGE=1, after each test we collect window.__coverage__ from the page
+ * (from the instrumented bundle) and write it to .nyc_output/run/ for later merge.
+ */
+import { test as base } from '@playwright/test'
+import { mkdirSync, writeFileSync } from 'fs'
+import { join } from 'path'
+
+export const test = base.extend({
+  page: async ({ page }, use, testInfo) => {
+    await use(page)
+    if (!process.env.COVERAGE || !page) return
+    try {
+      const coverage = await page.evaluate(() => window.__coverage__)
+      if (coverage && typeof coverage === 'object' && Object.keys(coverage).length > 0) {
+        const dir = join(process.cwd(), '.nyc_output', 'run')
+        mkdirSync(dir, { recursive: true })
+        const file = join(dir, `cov-${testInfo.workerIndex}-${testInfo.testId}.json`)
+        writeFileSync(file, JSON.stringify(coverage), 'utf8')
+      }
+    } catch (_) {
+      // page may be closed or __coverage__ not present
+    }
+  },
+})
+
+export { expect } from '@playwright/test'

package/e2e/harness.spec.js

@@ -0,0 +1,73 @@
+/** E2E tests for test-app harness (Board Game Engine React) – game selector and local mode. */
+import { test, expect } from './coverage.js'
+
+const HARNESS_URL = '/'
+
+test.describe('Harness', () => {
+  test('harness loads with title and game selector', async ({ page }) => {
+    await page.goto(HARNESS_URL, { waitUntil: 'load' })
+    await expect(page.getByTestId('harness-title')).toHaveText(/Board Game Engine React/i)
+    await expect(page.getByTestId('game-select')).toHaveValue('tic-tac-toe')
+    await expect(page.getByTestId('start-btn')).toHaveText(/Start \/ Reset Game/i)
+  })
+
+  test('can select different games from dropdown', async ({ page }) => {
+    await page.goto(HARNESS_URL, { waitUntil: 'load' })
+    await page.getByTestId('game-select').selectOption('connect-four')
+    await expect(page.getByTestId('game-select')).toHaveValue('connect-four')
+    await page.getByTestId('game-select').selectOption('reversi')
+    await expect(page.getByTestId('game-select')).toHaveValue('reversi')
+  })
+
+  test('can start tic-tac-toe in local mode', async ({ page }) => {
+    await page.goto(HARNESS_URL, { waitUntil: 'load' })
+    await expect(page.getByTestId('game-select')).toHaveValue('tic-tac-toe')
+    await page.getByTestId('start-btn').click()
+    await expect(page.getByTestId('start-btn')).not.toHaveText(/Loading/)
+    await expect(page.getByTestId('harness-game').locator('.game')).toBeVisible({ timeout: 5000 })
+  })
+
+  test('can start connect-four and see game', async ({ page }) => {
+    await page.goto(HARNESS_URL, { waitUntil: 'load' })
+    await page.getByTestId('game-select').selectOption('connect-four')
+    await page.getByTestId('start-btn').click()
+    await expect(page.getByTestId('harness-game').locator('.game')).toBeVisible({ timeout: 5000 })
+    await expect(page.getByTestId('harness-game').locator('.shared-board')).toBeAttached()
+  })
+
+  test('tic-tac-toe shows game content after start', async ({ page }) => {
+    await page.goto(HARNESS_URL, { waitUntil: 'load' })
+    await page.getByTestId('start-btn').click()
+    const gameArea = page.getByTestId('harness-game').locator('.game')
+    await expect(gameArea).toBeVisible({ timeout: 5000 })
+    await expect(gameArea.locator('.grid, .shared-board').first()).toBeAttached({ timeout: 3000 })
+  })
+
+  test('tic-tac-toe: click one space and an entity appears in that space', async ({ page }) => {
+    await page.goto(HARNESS_URL, { waitUntil: 'load' })
+    await page.getByTestId('start-btn').click()
+    const gameArea = page.getByTestId('harness-game').locator('.game')
+    await expect(gameArea).toBeVisible({ timeout: 5000 })
+    const cells = gameArea.locator('.grid__cell')
+    await expect(cells).toHaveCount(9, { timeout: 3000 })
+    const firstCell = cells.nth(0)
+    await firstCell.locator('.space').first().click()
+    await expect(firstCell.locator('.entity')).toBeVisible({ timeout: 2000 })
+  })
+
+  test('plays a full game of tic-tac-toe and game ends', async ({ page }) => {
+    await page.goto(HARNESS_URL, { waitUntil: 'load' })
+    await page.getByTestId('start-btn').click()
+    const gameArea = page.getByTestId('harness-game').locator('.game')
+    await expect(gameArea).toBeVisible({ timeout: 5000 })
+    await expect(gameArea.locator('.grid__cell')).toHaveCount(9, { timeout: 3000 })
+    const moveOrder = [0, 3, 1, 4, 2]
+    for (const index of moveOrder) {
+      const cell = gameArea.locator('.grid__cell').nth(index)
+      await cell.locator('.space').first().click()
+      await page.waitForTimeout(200)
+    }
+    await expect(gameArea.locator('.game-status')).toBeVisible({ timeout: 5000 })
+    await expect(gameArea.locator('.game-status')).toHaveText(/Wins!|Draw!/)
+  })
+})