whalehunting/tests/e2e/game-flow.spec.js

import { test, expect } from '@playwright/test';

test.describe('Whale Hunting Game - Main Flow', () => {
  test('should load the intro scene', async ({ page }) => {
    await page.goto('/');

    // Wait for Phaser to load
    await page.waitForTimeout(2000);

    // Check that the game canvas exists
    const canvas = page.locator('canvas');
    await expect(canvas).toBeVisible();

    // Check page title
    await expect(page).toHaveTitle(/Whale Hunting/);
  });

  test('should start game from intro scene', async ({ page }) => {
    await page.goto('/');
    await page.waitForTimeout(2000);

    // Click on the canvas where the "SET SAIL" button should be (center area)
    const canvas = page.locator('canvas');
    await canvas.click({ position: { x: 400, y: 400 } });

    // Wait for scene transition
    await page.waitForTimeout(1000);

    // Game should still be running
    await expect(canvas).toBeVisible();
  });

  test('should navigate to map scene', async ({ page }) => {
    await page.goto('/');
    await page.waitForTimeout(2000);

    const canvas = page.locator('canvas');

    // Click SET SAIL
    await canvas.click({ position: { x: 400, y: 400 } });
    await page.waitForTimeout(1000);

    // Click on ship's wheel (around x:550, y:200)
    await canvas.click({ position: { x: 550, y: 200 } });
    await page.waitForTimeout(1000);

    // Should now be in map scene
    await expect(canvas).toBeVisible();
  });

  test('should navigate to hunting grounds', async ({ page }) => {
    await page.goto('/');
    await page.waitForTimeout(2000);

    const canvas = page.locator('canvas');

    // Start game
    await canvas.click({ position: { x: 400, y: 400 } });
    await page.waitForTimeout(1000);

    // Go to map
    await canvas.click({ position: { x: 550, y: 200 } });
    await page.waitForTimeout(1000);

    // Click hunting grounds marker (around x:250, y:200)
    await canvas.click({ position: { x: 250, y: 200 } });
    await page.waitForTimeout(1000);

    // Should show transition scene
    await expect(canvas).toBeVisible();

    // Click continue button
    await canvas.click({ position: { x: 400, y: 540 } });
    await page.waitForTimeout(1000);

    // Should now be in hunting scene
    await expect(canvas).toBeVisible();
  });

  test('should return to ship from map', async ({ page }) => {
    await page.goto('/');
    await page.waitForTimeout(2000);

    const canvas = page.locator('canvas');

    // Start game
    await canvas.click({ position: { x: 400, y: 400 } });
    await page.waitForTimeout(1000);

    // Go to map
    await canvas.click({ position: { x: 550, y: 200 } });
    await page.waitForTimeout(1000);

    // Click CLOSE button (top right)
    await canvas.click({ position: { x: 750, y: 50 } });
    await page.waitForTimeout(1000);

    // Should be back at ship deck
    await expect(canvas).toBeVisible();
  });
});

test.describe('Whale Hunting Scene', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForTimeout(2000);

    const canvas = page.locator('canvas');

    // Navigate to hunting scene
    await canvas.click({ position: { x: 400, y: 400 } }); // SET SAIL
    await page.waitForTimeout(1000);
    await canvas.click({ position: { x: 550, y: 200 } }); // Ship wheel
    await page.waitForTimeout(1000);
    await canvas.click({ position: { x: 250, y: 200 } }); // Hunting grounds
    await page.waitForTimeout(1000);
    await canvas.click({ position: { x: 400, y: 540 } }); // Continue
    await page.waitForTimeout(1000);
  });

  test('should allow shooting harpoons', async ({ page }) => {
    const canvas = page.locator('canvas');

    // Click to shoot harpoon
    await canvas.click({ position: { x: 400, y: 300 } });
    await page.waitForTimeout(500);

    // Game should still be running
    await expect(canvas).toBeVisible();
  });

  test('should return to map from hunting scene', async ({ page }) => {
    const canvas = page.locator('canvas');

    // Click RETURN button (top right area)
    await canvas.click({ position: { x: 750, y: 30 } });
    await page.waitForTimeout(1000);

    // Should be back at map
    await expect(canvas).toBeVisible();
  });
});

test.describe('Mobile Compatibility', () => {
  test.use({
    viewport: { width: 375, height: 667 },
    isMobile: true,
  });

  test('should work on mobile viewport', async ({ page }) => {
    await page.goto('/');
    await page.waitForTimeout(2000);

    const canvas = page.locator('canvas');
    await expect(canvas).toBeVisible();

    // Should be scaled to fit
    const canvasBox = await canvas.boundingBox();
    expect(canvasBox?.width).toBeLessThanOrEqual(375);
  });

  test('should handle touch interactions', async ({ page }) => {
    await page.goto('/');
    await page.waitForTimeout(2000);

    const canvas = page.locator('canvas');

    // Tap to start game
    await canvas.tap({ position: { x: 200, y: 300 } });
    await page.waitForTimeout(1000);

    await expect(canvas).toBeVisible();
  });
});

test.describe('Desktop Scaling', () => {
  test.use({
    viewport: { width: 1920, height: 1080 },
  });

  test('should scale properly on desktop', async ({ page }) => {
    await page.goto('/');
    await page.waitForTimeout(2000);

    const canvas = page.locator('canvas');
    await expect(canvas).toBeVisible();

    // Canvas should be visible and scaled
    const canvasBox = await canvas.boundingBox();
    expect(canvasBox).toBeTruthy();
    expect(canvasBox?.width).toBeGreaterThan(0);
  });
});