mirror of
https://github.com/BradGroux/veritas-kanban.git
synced 2026-08-28 02:44:59 +00:00
97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { bypassAuth, seedTestTask, deleteTask, cleanupRoutes } from './helpers/auth';
|
|
|
|
test.describe('Task Detail Panel', () => {
|
|
let testTaskId: string | null = null;
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await bypassAuth(page);
|
|
});
|
|
|
|
test.afterEach(async ({ page }) => {
|
|
if (testTaskId) {
|
|
await deleteTask(page, testTaskId).catch(() => {});
|
|
testTaskId = null;
|
|
}
|
|
await cleanupRoutes(page);
|
|
});
|
|
|
|
test('clicking a task opens the detail panel', async ({ page }) => {
|
|
// Seed a task to click on
|
|
const task = await seedTestTask(page, {
|
|
title: 'E2E Detail Test Task',
|
|
description: 'Detail panel test description',
|
|
status: 'todo',
|
|
priority: 'high',
|
|
});
|
|
testTaskId = (task as { id: string }).id;
|
|
|
|
await page.goto('/');
|
|
|
|
// Click the task card
|
|
const taskCard = page.locator('text=E2E Detail Test Task').first();
|
|
await expect(taskCard).toBeVisible({ timeout: 10_000 });
|
|
await taskCard.click();
|
|
|
|
// The detail panel drawer should open
|
|
const detailPanel = page.locator('[role="dialog"]');
|
|
await expect(detailPanel).toBeVisible({ timeout: 5_000 });
|
|
await expect(page.locator('.mantine-Drawer-content')).toBeVisible();
|
|
await expect(detailPanel.locator('.mantine-Tabs-root').first()).toBeVisible();
|
|
await expect(page.locator('[data-slot="sheet-content"]')).toHaveCount(0);
|
|
|
|
// Verify the task title is shown in the panel — it's an input field
|
|
const titleInput = detailPanel.locator('input').first();
|
|
await expect(titleInput).toHaveValue('E2E Detail Test Task');
|
|
});
|
|
|
|
test('detail panel shows task information', async ({ page }) => {
|
|
const task = await seedTestTask(page, {
|
|
title: 'E2E Info Panel Task',
|
|
description: 'Description for detail panel verification',
|
|
status: 'todo',
|
|
priority: 'high',
|
|
});
|
|
testTaskId = (task as { id: string }).id;
|
|
|
|
await page.goto('/');
|
|
|
|
// Click the task to open the detail panel
|
|
const taskCard = page.locator('text=E2E Info Panel Task').first();
|
|
await expect(taskCard).toBeVisible({ timeout: 10_000 });
|
|
await taskCard.click();
|
|
|
|
const detailPanel = page.locator('[role="dialog"]');
|
|
await expect(detailPanel).toBeVisible({ timeout: 5_000 });
|
|
|
|
// The details tab should be active by default and show task info
|
|
await expect(detailPanel.getByRole('tab', { name: 'Details' })).toBeVisible();
|
|
await expect(detailPanel.locator('.mantine-Select-root').first()).toBeVisible();
|
|
|
|
// The task title should be editable (it's an input in non-readOnly mode)
|
|
const titleInput = detailPanel.locator('input').first();
|
|
await expect(titleInput).toHaveValue('E2E Info Panel Task');
|
|
});
|
|
|
|
test('detail panel closes on Escape', async ({ page }) => {
|
|
const task = await seedTestTask(page, {
|
|
title: 'E2E Close Panel Task',
|
|
status: 'todo',
|
|
});
|
|
testTaskId = (task as { id: string }).id;
|
|
|
|
await page.goto('/');
|
|
|
|
// Open the detail panel
|
|
const taskCard = page.locator('text=E2E Close Panel Task').first();
|
|
await expect(taskCard).toBeVisible({ timeout: 10_000 });
|
|
await taskCard.click();
|
|
|
|
const detailPanel = page.locator('[role="dialog"]');
|
|
await expect(detailPanel).toBeVisible({ timeout: 5_000 });
|
|
|
|
// Press Escape to close
|
|
await page.keyboard.press('Escape');
|
|
await expect(detailPanel).not.toBeVisible({ timeout: 3_000 });
|
|
});
|
|
});
|