emil
1c38df7e74
Redesign DM Dashboard (/dm/, /ru/dm/) with purple-gold theme (#534AB7 + #c8a84b): Design System: - Update dm-theme.css with 49 purple-gold tokens (transitions, shadows, hover states) - Create DmTabs.astro with ARIA, keyboard nav, URL hash sync, localStorage persistence - Create DmSidebar.astro for desktop navigation - Redesign DmHeader with gold accent - Update DmButton, DmCard, DmInput primitives - Expand i18n to 47 strings Layout: - Redesign DmLayout with 3-column dashboard grid (sidebar|main|context) - Update /dm/index.astro and /ru/dm/index.astro with named slots Feature Components: - DiceRoller: empty state, ARIA live, color-coded history, storage key fallback - InitiativeTracker: HP editing, active highlighting, storage key fallback - Open5eReference: skeletons, debounce, error retry, gold tabs - NotesPanel: cross-tab sync, copy-to-clipboard, auto-save - AuthPanel: VK/Yandex brand colors, pill buttons Tests: - Add 50 Playwright E2E tests (smoke, dice, initiative, reference, notes, data-migration) Fixes: - Document Open5e client.ts URL bugfix - Add backward-compatible storage key fallback for dice/initiative - Preserve legacy sessionStorage data on load
51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
|
|
test.describe("Dice Roller", () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto("/dm/#dice");
|
|
});
|
|
|
|
test("all quick dice buttons work", async ({ page }) => {
|
|
const dice = ["d4", "d6", "d8", "d10", "d12", "d20", "d100"];
|
|
for (const die of dice) {
|
|
await page.click(`[data-dice="${die}"]`);
|
|
const result = await page.locator("[data-testid='dice-result']").textContent();
|
|
expect(result).toMatch(/\d+/);
|
|
}
|
|
});
|
|
|
|
test("custom notation works", async ({ page }) => {
|
|
await page.fill("[data-testid='dice-input']", "2d6+3");
|
|
await page.click("[data-testid='dice-roll-btn']");
|
|
const result = await page.locator("[data-testid='dice-result']").textContent();
|
|
expect(result).toMatch(/\d+/);
|
|
});
|
|
|
|
test("history tracks rolls", async ({ page }) => {
|
|
await page.click(`[data-dice="d20"]`);
|
|
await page.click(`[data-dice="d6"]`);
|
|
const historyItems = await page.locator("[data-testid='dice-history-item']").count();
|
|
expect(historyItems).toBeGreaterThanOrEqual(2);
|
|
});
|
|
|
|
test("clear button empties history", async ({ page }) => {
|
|
await page.click(`[data-dice="d20"]`);
|
|
await page.click("[data-testid='dice-clear-btn']");
|
|
const historyItems = await page.locator("[data-testid='dice-history-item']").count();
|
|
expect(historyItems).toBe(0);
|
|
await expect(page.locator("[data-testid='dice-empty-state']")).toBeVisible();
|
|
});
|
|
|
|
test("result color coding - normal", async ({ page }) => {
|
|
await page.click(`[data-dice="d20"]`);
|
|
const resultText = await page.locator("[data-testid='dice-result']").textContent();
|
|
expect(resultText).toMatch(/\d+/);
|
|
});
|
|
|
|
test("mobile viewport renders correctly", async ({ page }) => {
|
|
await page.setViewportSize({ width: 375, height: 812 });
|
|
await expect(page.locator("[data-testid='dice-section']")).toBeVisible();
|
|
await expect(page.locator(`[data-dice="d20"]`)).toBeVisible();
|
|
});
|
|
});
|