Mana-Loop/e2e/equipment.spec.ts

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

/**
 * E2E tests for equipment management:
 * - Navigating to Equipment tab
 * - 2-handed weapon blocking offhand slot
 * - Equipment slots visible with labels
 */

test.describe('Equipment Management', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.evaluate(() => {
      Object.keys(localStorage)
        .filter((k) => k.startsWith('mana-loop-'))
        .forEach((k) => localStorage.removeItem(k));
    });
    await page.reload();
    await page.waitForLoadState('networkidle');
  });

  test('can navigate to Equipment tab', async ({ page }) => {
    // Use the tab with the shield icon
    const gearTab = page.getByRole('tab').filter({ hasText: '🛡️' });
    await expect(gearTab).toBeVisible();
    await gearTab.click();

    // Verify we're on the equipment tab by checking for section headers
    await expect(page.getByText('Equipped Gear')).toBeVisible({ timeout: 5000 });
  });

  test('shows equipment slots with labels', async ({ page }) => {
    await page.goto('/');
    await page.evaluate(() => {
      Object.keys(localStorage)
        .filter((k) => k.startsWith('mana-loop-'))
        .forEach((k) => localStorage.removeItem(k));
    });
    await page.reload();
    await page.waitForLoadState('networkidle');

    await page.getByRole('tab').filter({ hasText: '🛡️' }).click();

    // Check for the grouped slot labels
    await expect(page.getByText('Weapon & Shield')).toBeVisible();
    await expect(page.getByText('Armor')).toBeVisible();
    await expect(page.getByText('Accessories')).toBeVisible();

    // Individual slot labels within groups
    const slotLabels = ['Main Hand', 'Off Hand', 'Head', 'Body', 'Hands', 'Feet', 'Accessory 1', 'Accessory 2'];
    for (const label of slotLabels) {
      const loc = page.getByText(label).first();
      await expect(loc).toBeVisible();
    }
  });

  test('shows starting equipment already equipped', async ({ page }) => {
    await page.goto('/');
    await page.evaluate(() => {
      Object.keys(localStorage)
        .filter((k) => k.startsWith('mana-loop-'))
        .forEach((k) => localStorage.removeItem(k));
    });
    await page.reload();
    await page.waitForLoadState('networkidle');

    await page.getByRole('tab').filter({ hasText: '🛡️' }).click();

    // The player starts with Basic Staff in main hand
    // Check that main hand slot contains an item with a name
    const mainHandSlot = page.locator('text=Main Hand').first();
    await expect(mainHandSlot).toBeVisible();

    // Body slot should have civilian clothing
    const bodySlot = page.locator('text=Body').first();
    await expect(bodySlot).toBeVisible();
  });

  test('2-handed weapon blocks offhand slot', async ({ page }) => {
    await page.goto('/');
    await page.evaluate(() => {
      Object.keys(localStorage)
        .filter((k) => k.startsWith('mana-loop-'))
        .forEach((k) => localStorage.removeItem(k));
    });
    await page.reload();
    await page.waitForLoadState('networkidle');

    await page.getByRole('tab').filter({ hasText: '🛡️' }).click();

    // The starting basic staff is 2-handed (twoHanded: true)
    // The Off Hand slot should show the "Occupied — 2H Weapon" badge
    const offHandBlocker = page.locator('text=Occupied').first();
    await expect(offHandBlocker).toBeVisible({ timeout: 5000 });

    // Also check the blocked slot has the right tooltip/message
    const twoHWeaponBadge = page.locator('text=2-Handed').first();
    await expect(twoHWeaponBadge).toBeVisible({ timeout: 5000 });
  });
});