EventHub/EventHubFrontAdmin
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): E2E content/system mock-сьюты, row testids, IFT smoke. Refs EventHub/EventHubFrontAdmin#33 #37 #38 #39

Browse Source
This commit is contained in:
Aleksey Sabilin
2026-07-14 22:44:22 +03:00
parent a3468518b3
commit 836e4a7eea
23 changed files with 831 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/TESTIDS.md
+12 -13
View File
@@ -6,21 +6,20 @@
| Pattern | Example |
|---------|---------|
| `page-{name}` | `page-login`, `page-users` |
| `nav-{slug}` | `nav-users` (slug = path without `/`) |
| `{entity}-row-{id}` | `user-row-{uuid}` |
| `{entity}-detail` | `user-detail` |
| `{entity}-filter-{field}` | `event-filter-status` |
| `btn-{action}` | `btn-login`, `btn-save`, `btn-delete-confirm` |
| `page-{name}` | `page-login`, `page-users`, `page-inbox-reports` |
| `nav-{slug}` | `nav-users` |
| `row-{id}` | dense list / DataTable rows |
| `row-activate-{id}` | dense list main click target |
| `{entity}-row-{id}` | inbox-specific (`report-row-*`) |
| `btn-{action}` | `btn-login`, `btn-save-profile` |
| `dialog-{name}` | `dialog-edit-user` |
| `menu-user` | avatar dropdown |
| `palette-input` | command palette |
| `filter-{name}` | `filter-users-search` |
| `menu-user` / `lang-ru` | avatar dropdown |
Helper in app: `src/lib/testid.ts` → `testid(['user-row', id])`.
Helper: `src/lib/testid.ts`.
## Rules
- kebab-case only
- Dynamic id segment = real API entity id
- Prefer roles/labels for login email/password and primary submit when i18n fixed to `ru` in mock suite
- Do not decorate every layout div — only interaction anchors
- kebab-case; dynamic id = API entity id (or banned word)
- Prefer a11y for login fields
- Do not decorate decorative wrappers
e2e/mocks/adminApi.ts
+11 -18
View File
@@ -1,5 +1,7 @@
import type { Page, Route } from '@playwright/test';
import { createModerationSeed, type ModerationState } from './moderationSeed';
import { createContentSeed } from './contentSeed';
import { tryHandleContentApi } from './handleContentApi';
export type MockAdmin = {
id: string;
@@ -43,6 +45,7 @@ type MockOptions = {
export async function installAdminApiMocks(page: Page, options: MockOptions = {}) {
let currentUser: MockAdmin = { ...MOCK_ADMIN, ...options.user };
const moderation: ModerationState | null = options.moderation === false ? null : createModerationSeed();
const content = createContentSeed();
await page.route('**/v1/admin/**', async (route) => {
const req = route.request();
@@ -111,6 +114,12 @@ export async function installAdminApiMocks(page: Page, options: MockOptions = {}
}
if (method === 'GET' && path.includes('/v1/admin/nodes/metrics')) {
// Prefer content seed with sample node (monitoring)
if (
await tryHandleContentApi(route, method, path, url, content, json, () => req.postDataJSON())
) {
return;
}
await json(route, 200, { nodes: [] });
return;
}
@@ -267,27 +276,11 @@ export async function installAdminApiMocks(page: Page, options: MockOptions = {}
return;
}
}
}
// soft stubs for linked entities in inbox
if (method === 'GET' && /\/v1\/admin\/users\/[^/]+$/.test(path)) {
await json(route, 200, {
id: 'user-1',
email: 'user1@eventhub.local',
nickname: 'User One',
role: 'user',
status: 'active',
});
if (await tryHandleContentApi(route, method, path, url, content, json, () => req.postDataJSON())) {
return;
}
if (method === 'GET' && /\/v1\/admin\/events\/[^/]+$/.test(path)) {
await json(route, 200, {
id: 'evt-1',
title: 'E2E Event',
status: 'active',
});
return;
}
}
if (method === 'GET') {
await json(route, 200, [], { 'X-Total-Count': '0' });
e2e/mocks/contentSeed.ts
+148
View File
@@ -0,0 +1,148 @@
/** Content/system seed data for mock E2E (users, calendars, events, …). */
const now = '2026-07-14T12:00:00Z';
export function createContentSeed() {
const users = [
{
id: 'user-e2e-1',
email: 'alice@eventhub.local',
nickname: 'Alice',
role: 'user',
status: 'active',
language: 'ru',
phone: null,
avatar_url: null,
last_login: now,
created_at: now,
updated_at: now,
},
{
id: 'user-e2e-2',
email: 'bob@eventhub.local',
nickname: 'Bob',
role: 'user',
status: 'frozen',
language: 'en',
phone: null,
avatar_url: null,
last_login: now,
created_at: now,
updated_at: now,
},
];
const calendars = [
{
id: 'cal-e2e-1',
title: 'E2E Calendar',
description: 'for tests',
type: 'personal',
category: 'sport',
owner_id: 'user-e2e-1',
status: 'active',
reason: null,
tags: [],
color: '#3366ff',
image_url: '',
rating_avg: 4.5,
rating_count: 2,
short_name: 'e2ecal',
confirmation: 'none',
settings: null,
created_at: now,
updated_at: now,
},
];
const events = [
{
id: 'evt-e2e-1',
calendar_id: 'cal-e2e-1',
title: 'E2E Workout',
description: 'test event',
event_type: 'single',
start_time: '2026-01-01T10:00:00Z',
duration: 60,
recurrence: null,
master_id: null,
is_instance: false,
specialist_id: null,
location: null,
tags: [],
capacity: 10,
online_link: null,
status: 'active',
reason: null,
rating_avg: 5,
rating_count: 1,
created_at: now,
updated_at: now,
},
];
const subscriptions = [
{
id: 'sub-e2e-1',
user_id: 'user-e2e-1',
plan: 'pro',
status: 'active',
started_at: now,
expires_at: '2027-01-01T00:00:00Z',
auto_renew: true,
created_at: now,
updated_at: now,
},
];
const bannedWords = [
{ word: 'spamword', added_by: 'admin-e2e-1', created_at: now },
{ word: 'badword', added_by: 'admin-e2e-1', created_at: now },
];
const admins = [
{
id: 'admin-e2e-1',
email: 'e2e@eventhub.local',
nickname: 'E2E Admin',
role: 'superadmin',
language: 'ru',
phone: null,
avatar_url: null,
timezone: 'Europe/Moscow',
created_at: now,
updated_at: now,
last_login: now,
},
{
id: 'admin-e2e-2',
email: 'mod@eventhub.local',
nickname: 'Mod Admin',
role: 'moderator',
language: 'ru',
phone: null,
avatar_url: null,
timezone: 'UTC',
created_at: now,
updated_at: now,
last_login: now,
},
];
const audit = [
{
id: 'audit-e2e-1',
admin_id: 'admin-e2e-1',
action: 'user.update',
target_type: 'user',
target_id: 'user-e2e-1',
details: { status: 'frozen' },
ip: '127.0.0.1',
created_at: now,
},
];
return { users, calendars, events, subscriptions, bannedWords, admins, audit };
}
export type ContentState = ReturnType<typeof createContentSeed>;
e2e/mocks/handleContentApi.ts
+313
View File
@@ -0,0 +1,313 @@
import type { Route } from '@playwright/test';
import type { ContentState } from './contentSeed';
type JsonFn = (
route: Route,
status: number,
body: unknown,
headers?: Record<string, string>
) => Promise<void>;
function listSlice<T>(items: T[], url: URL): { rows: T[]; total: number } {
const limit = Number(url.searchParams.get('limit') || 50);
const offset = Number(url.searchParams.get('offset') || 0);
const q = (url.searchParams.get('q') || '').toLowerCase();
let rows = items;
if (q) {
rows = items.filter((item) => JSON.stringify(item).toLowerCase().includes(q));
}
const status = url.searchParams.get('status');
if (status && rows.length && typeof (rows[0] as { status?: string }).status === 'string') {
rows = rows.filter((item) => (item as { status?: string }).status === status);
}
const plan = url.searchParams.get('plan');
if (plan) {
rows = rows.filter((item) => (item as { plan?: string }).plan === plan);
}
const type = url.searchParams.get('type');
if (type) {
rows = rows.filter((item) => (item as { type?: string }).type === type);
}
return { rows: rows.slice(offset, offset + limit), total: rows.length };
}
/** Returns true if the request was handled. */
export async function tryHandleContentApi(
route: Route,
method: string,
path: string,
url: URL,
content: ContentState,
json: JsonFn,
postData: () => unknown
): Promise<boolean> {
// ---- users ----
if (method === 'GET' && path.endsWith('/v1/admin/users/stats')) {
await json(route, 200, {
total_users: content.users.length,
users_by_role: {},
users_by_status: {},
pending_users: 0,
});
return true;
}
if (method === 'GET' && path.endsWith('/v1/admin/users')) {
const page = listSlice(content.users, url);
await json(route, 200, page.rows, { 'X-Total-Count': String(page.total) });
return true;
}
{
const m = path.match(/\/v1\/admin\/users\/([^/]+)$/);
if (m) {
const id = decodeURIComponent(m[1]);
const idx = content.users.findIndex((u) => u.id === id);
if (idx < 0) {
await json(route, 404, { error: 'not_found' });
return true;
}
if (method === 'GET') {
await json(route, 200, content.users[idx]);
return true;
}
if (method === 'PUT') {
content.users[idx] = { ...content.users[idx], ...(postData() as object) };
await json(route, 200, content.users[idx]);
return true;
}
if (method === 'DELETE') {
content.users.splice(idx, 1);
await json(route, 200, { ok: true });
return true;
}
}
}
// ---- calendars ----
if (method === 'GET' && path.endsWith('/v1/admin/calendars/stats')) {
await json(route, 200, {
total_calendars: content.calendars.length,
calendars_by_type: {},
calendars_by_status: {},
top_calendars_by_reviews: [],
top_calendars_by_positive_reviews: [],
top_calendars_by_negative_reviews: [],
top_calendars_by_rating: [],
});
return true;
}
if (method === 'GET' && path.endsWith('/v1/admin/calendars')) {
const page = listSlice(content.calendars, url);
await json(route, 200, page.rows, { 'X-Total-Count': String(page.total) });
return true;
}
{
const m = path.match(/\/v1\/admin\/calendars\/([^/]+)$/);
if (m) {
const id = decodeURIComponent(m[1]);
const idx = content.calendars.findIndex((c) => c.id === id);
if (idx < 0) {
await json(route, 404, { error: 'not_found' });
return true;
}
if (method === 'GET') {
await json(route, 200, content.calendars[idx]);
return true;
}
if (method === 'PUT') {
content.calendars[idx] = { ...content.calendars[idx], ...(postData() as object) };
await json(route, 200, content.calendars[idx]);
return true;
}
if (method === 'DELETE') {
content.calendars.splice(idx, 1);
await json(route, 200, { ok: true });
return true;
}
}
}
// ---- events ----
if (method === 'GET' && path.endsWith('/v1/admin/events/stats')) {
await json(route, 200, {
total_events: content.events.length,
events_by_type: {},
events_by_status: {},
top_events_by_rating: [],
});
return true;
}
if (method === 'GET' && path.endsWith('/v1/admin/events')) {
const page = listSlice(content.events, url);
await json(route, 200, page.rows, { 'X-Total-Count': String(page.total) });
return true;
}
{
const m = path.match(/\/v1\/admin\/events\/([^/]+)$/);
if (m) {
const id = decodeURIComponent(m[1]);
const idx = content.events.findIndex((e) => e.id === id);
if (idx < 0) {
await json(route, 404, { error: 'not_found' });
return true;
}
if (method === 'GET') {
await json(route, 200, content.events[idx]);
return true;
}
if (method === 'PUT') {
content.events[idx] = { ...content.events[idx], ...(postData() as object) };
await json(route, 200, content.events[idx]);
return true;
}
if (method === 'DELETE') {
content.events.splice(idx, 1);
await json(route, 200, { ok: true });
return true;
}
}
}
// ---- subscriptions ----
if (method === 'GET' && path.endsWith('/v1/admin/subscriptions/stats')) {
await json(route, 200, {
total_subscriptions: content.subscriptions.length,
subscriptions_by_plan: {},
subscriptions_by_status: {},
trial_subscriptions: 0,
ending_paid_subscriptions: [],
});
return true;
}
if (method === 'GET' && path.endsWith('/v1/admin/subscriptions')) {
const page = listSlice(content.subscriptions, url);
await json(route, 200, page.rows, { 'X-Total-Count': String(page.total) });
return true;
}
{
const m = path.match(/\/v1\/admin\/subscriptions\/([^/]+)$/);
if (m) {
const id = decodeURIComponent(m[1]);
const idx = content.subscriptions.findIndex((s) => s.id === id);
if (idx < 0) {
await json(route, 404, { error: 'not_found' });
return true;
}
if (method === 'GET') {
await json(route, 200, content.subscriptions[idx]);
return true;
}
if (method === 'PUT') {
content.subscriptions[idx] = { ...content.subscriptions[idx], ...(postData() as object) };
await json(route, 200, content.subscriptions[idx]);
return true;
}
if (method === 'DELETE') {
content.subscriptions.splice(idx, 1);
await json(route, 200, { ok: true });
return true;
}
}
}
// ---- banned words ----
if (method === 'GET' && path.endsWith('/v1/admin/banned-words')) {
const page = listSlice(
content.bannedWords.map((w) => ({ ...w, id: w.word })),
url
);
await json(route, 200, page.rows, { 'X-Total-Count': String(page.total) });
return true;
}
if (method === 'POST' && path.endsWith('/v1/admin/banned-words')) {
const payload = postData() as { word?: string };
const word = (payload.word || '').trim();
if (word) content.bannedWords.push({ word, added_by: 'admin-e2e-1', created_at: '2026-07-14T12:00:00Z' });
await json(route, 200, { ok: true });
return true;
}
{
const m = path.match(/\/v1\/admin\/banned-words\/([^/]+)$/);
if (m && method === 'DELETE') {
const word = decodeURIComponent(m[1]);
content.bannedWords = content.bannedWords.filter((w) => w.word !== word);
await json(route, 200, { ok: true });
return true;
}
}
// ---- admins ----
if (method === 'GET' && path.endsWith('/v1/admin/admins')) {
const page = listSlice(content.admins, url);
await json(route, 200, page.rows, { 'X-Total-Count': String(page.total) });
return true;
}
if (method === 'POST' && path.endsWith('/v1/admin/admins')) {
const payload = postData() as Record<string, unknown>;
const created = {
id: `admin-new-${content.admins.length + 1}`,
email: String(payload.email || 'new@eventhub.local'),
nickname: String(payload.nickname || 'New Admin'),
role: String(payload.role || 'admin'),
language: 'ru',
phone: null,
avatar_url: null,
timezone: 'UTC',
created_at: '2026-07-14T12:00:00Z',
updated_at: '2026-07-14T12:00:00Z',
last_login: null,
};
content.admins.push(created);
await json(route, 200, created);
return true;
}
{
const m = path.match(/\/v1\/admin\/admins\/([^/]+)$/);
if (m) {
const id = decodeURIComponent(m[1]);
const idx = content.admins.findIndex((a) => a.id === id);
if (idx < 0) {
await json(route, 404, { error: 'not_found' });
return true;
}
if (method === 'GET') {
await json(route, 200, content.admins[idx]);
return true;
}
if (method === 'PUT') {
content.admins[idx] = { ...content.admins[idx], ...(postData() as object) };
await json(route, 200, content.admins[idx]);
return true;
}
if (method === 'DELETE') {
content.admins.splice(idx, 1);
await json(route, 200, { ok: true });
return true;
}
}
}
// ---- audit ----
if (method === 'GET' && path.endsWith('/v1/admin/audit')) {
const page = listSlice(content.audit, url);
await json(route, 200, page.rows, { 'X-Total-Count': String(page.total) });
return true;
}
// ---- monitoring enrichment ----
if (method === 'GET' && path.includes('/v1/admin/nodes/metrics')) {
await json(route, 200, {
nodes: [
{
node: 'node-a',
cpu: 12,
memory_used_mb: 512,
memory_total_mb: 2048,
ts: '2026-07-14T12:00:00Z',
},
],
});
return true;
}
return false;
}
e2e/tests/content.spec.ts
+50
View File
@@ -0,0 +1,50 @@
import { test, expect } from '@playwright/test';
import { seedAuthenticatedSession } from '../helpers/session';
test.describe('content explore (mock)', () => {
test.beforeEach(async ({ page }) => {
await seedAuthenticatedSession(page);
});
test('users: список, поиск, detail', async ({ page }) => {
await page.goto('/users');
await expect(page.getByTestId('page-users')).toBeVisible();
await expect(page.getByTestId('row-user-e2e-1')).toBeVisible();
await page.getByTestId('filter-users-search-input').fill('Alice');
await page.getByTestId('filter-users-search').locator('button[type="submit"]').click();
await expect(page.getByTestId('row-user-e2e-1')).toBeVisible();
await page.goto('/users/user-e2e-1');
await expect(page.getByTestId('page-user-detail')).toBeVisible();
});
test('calendars: список и detail', async ({ page }) => {
await page.goto('/calendars');
await expect(page.getByTestId('page-calendars')).toBeVisible();
await expect(page.getByTestId('row-cal-e2e-1')).toBeVisible();
await page.goto('/calendars/cal-e2e-1');
await expect(page.getByTestId('page-calendar-detail')).toBeVisible();
});
test('events: список и detail', async ({ page }) => {
await page.goto('/events');
await expect(page.getByTestId('page-events')).toBeVisible();
await expect(page.getByTestId('row-evt-e2e-1')).toBeVisible();
await page.goto('/events/evt-e2e-1');
await expect(page.getByTestId('page-event-detail')).toBeVisible();
});
test('subscriptions: список', async ({ page }) => {
await page.goto('/subscriptions');
await expect(page.getByTestId('page-subscriptions')).toBeVisible();
await expect(page.getByTestId('row-sub-e2e-1')).toBeVisible();
});
test('banned-words: список и add', async ({ page }) => {
await page.goto('/banned-words');
await expect(page.getByTestId('page-banned-words')).toBeVisible();
await expect(page.getByTestId('row-spamword')).toBeVisible();
await page.getByTestId('input-banned-word').fill('newbad');
await page.getByTestId('btn-add-banned-word').click();
await expect(page.getByTestId('row-newbad')).toBeVisible();
});
});
e2e/tests/ift/smoke.spec.ts
+15 -5
View File
@@ -1,10 +1,20 @@
import { test } from '@playwright/test';
import { test, expect } from '@playwright/test';
/** IFT smoke project placeholder — filled in phase 6. */
/**
* IFT smoke — заполняется секретами E2E_ADMIN_EMAIL / E2E_ADMIN_PASSWORD.
* Запуск: `npm run test:e2e:ift` (без моков).
*/
test.describe('IFT smoke', () => {
test.skip(!process.env.E2E_ADMIN_EMAIL, 'Set E2E_ADMIN_EMAIL / E2E_ADMIN_PASSWORD for IFT');
test.skip(!process.env.E2E_ADMIN_EMAIL || !process.env.E2E_ADMIN_PASSWORD, 'E2E_ADMIN_* secrets required');
test('placeholder', async () => {
// Implemented in E2E phase 6
test('login → dashboard → logout', async ({ page }) => {
await page.goto('/login');
await page.getByLabel(/email/i).fill(process.env.E2E_ADMIN_EMAIL!);
await page.getByLabel(/пароль|password/i).fill(process.env.E2E_ADMIN_PASSWORD!);
await page.getByTestId('btn-login').click();
await expect(page.getByTestId('layout-shell')).toBeVisible({ timeout: 30_000 });
await page.getByTestId('menu-user').click();
await page.getByTestId('btn-logout').click();
await expect(page.getByTestId('page-login')).toBeVisible();
});
});
e2e/tests/system.spec.ts
+59
View File
@@ -0,0 +1,59 @@
import { test, expect } from '@playwright/test';
import { seedAuthenticatedSession } from '../helpers/session';
test.describe('system / overview (mock)', () => {
test.beforeEach(async ({ page }) => {
await seedAuthenticatedSession(page);
});
test('admins: список, create dialog, detail', async ({ page }) => {
await page.goto('/admins');
await expect(page.getByTestId('page-admins')).toBeVisible();
await expect(page.getByTestId('row-admin-e2e-2')).toBeVisible();
await page.getByTestId('btn-create-admin').click();
await expect(page.getByTestId('dialog-create-admin')).toBeVisible();
await page.goto('/admins/admin-e2e-2');
await expect(page.getByTestId('page-admin-detail')).toBeVisible();
await expect(page.getByTestId('btn-edit-admin')).toBeVisible();
});
test('audit: страница и фильтры', async ({ page }) => {
await page.goto('/audit');
await expect(page.getByTestId('page-audit')).toBeVisible();
await expect(page.getByTestId('filter-audit')).toBeVisible();
await expect(page.getByTestId('row-audit-e2e-1')).toBeVisible();
});
test('monitoring: страница и range', async ({ page }) => {
await page.goto('/monitoring');
await expect(page.getByTestId('page-monitoring')).toBeVisible();
await page.getByTestId('filter-monitoring-range-30').click();
await expect(page.getByTestId('filter-monitoring-range-30')).toBeVisible();
});
test('profile: view и edit', async ({ page }) => {
await page.goto('/profile');
await expect(page.getByTestId('page-profile')).toBeVisible();
await page.getByTestId('btn-edit-profile').click();
await expect(page.getByTestId('btn-save-profile')).toBeVisible();
await page.getByTestId('btn-cancel-profile').click();
await expect(page.getByTestId('btn-edit-profile')).toBeVisible();
});
test('dashboard остаётся доступен', async ({ page }) => {
await page.goto('/dashboard');
await expect(page.getByTestId('page-dashboard')).toBeVisible();
});
});
test.describe('i18n (mock)', () => {
test('переключение языка через меню', async ({ page }) => {
await seedAuthenticatedSession(page);
await page.goto('/dashboard');
await page.getByTestId('menu-user').click();
await page.getByTestId('lang-en').click();
// profile language mutation returns user with language=en; menu stays open or reopens
await page.getByTestId('menu-user').click().catch(() => undefined);
await expect(page.getByTestId('lang-en')).toBeVisible();
});
});
src/components/data-table/DataTable.tsx
+7 -3
View File
@@ -126,15 +126,19 @@ export function DataTable<TData, TParams extends ServerTableParams>({
</TableRow>
))
) : table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>
table.getRowModel().rows.map((row) => {
const original = row.original as { id?: string; word?: string };
const rowKey = original.id ?? original.word;
return (
<TableRow key={row.id} data-testid={rowKey ? `row-${rowKey}` : undefined}>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
);
})
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
src/components/explore/DenseRowList.tsx
+2 -1
View File
@@ -60,7 +60,7 @@ export function DenseRowList<TParams extends ServerTableParams>({
) : (
<ul className="divide-y">
{items.map((item) => (
<li key={item.id}>
<li key={item.id} data-testid={`row-${item.id}`}>
<div
className={cn(
'group flex items-start gap-3 px-4 py-3 transition-colors',
@@ -69,6 +69,7 @@ export function DenseRowList<TParams extends ServerTableParams>({
>
<button
type="button"
data-testid={`row-activate-${item.id}`}
className={cn(
'min-w-0 flex-1 text-left',
!item.onActivate && 'cursor-default'
src/components/explore/ExploreSearch.tsx
+4
View File
@@ -11,6 +11,7 @@ interface ExploreSearchProps {
placeholder?: string;
className?: string;
children?: React.ReactNode;
'data-testid'?: string;
}
export function ExploreSearch({
@@ -20,10 +21,12 @@ export function ExploreSearch({
placeholder,
className,
children,
'data-testid': dataTestId,
}: ExploreSearchProps) {
const { t } = useTranslation();
return (
<form
data-testid={dataTestId}
className={cn('flex flex-wrap items-center gap-2', className)}
onSubmit={(e) => {
e.preventDefault();
@@ -33,6 +36,7 @@ export function ExploreSearch({
<div className="relative min-w-[200px] max-w-md flex-1">
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
data-testid={dataTestId ? `${dataTestId}-input` : undefined}
className="pl-8"
placeholder={placeholder ?? t('common.searchPlaceholder')}
value={value}
src/pages/admins/AdminDetailPage.tsx
+9 -4
View File
@@ -118,7 +118,7 @@ const AdminDetailPage: React.FC = () => {
const titleName = !isBadValue(admin.nickname) ? admin.nickname : admin.email || admin.id;
return (
<>
<div data-testid="page-admin-detail">
<PageHeader
title={t('admins.detailTitle', { name: titleName })}
breadcrumbs={[
@@ -127,11 +127,16 @@ const AdminDetailPage: React.FC = () => {
]}
actions={
<>
<Button variant="outline" size="sm" onClick={() => setEditModal(true)}>
<Button
variant="outline"
size="sm"
data-testid="btn-edit-admin"
onClick={() => setEditModal(true)}
>
<Pencil className="h-4 w-4" />
{t('common.edit')}
</Button>
<Button variant="outline" onClick={() => navigate('/admins')}>
<Button variant="outline" data-testid="btn-back" onClick={() => navigate('/admins')}>
<ArrowLeft className="h-4 w-4" />
{t('common.backToList')}
</Button>
@@ -301,7 +306,7 @@ const AdminDetailPage: React.FC = () => {
</DialogFooter>
</DialogContent>
</Dialog>
</>
</div>
);
};
src/pages/admins/AdminListPage.tsx
+3 -2
View File
@@ -236,12 +236,13 @@ const AdminListPage: React.FC = () => {
return (
<>
<ExploreListShell
data-testid="page-admins"
title={t('admins.title')}
stats={exploreStats}
viewMode={viewMode}
onViewModeChange={setViewMode}
actions={
<Button onClick={() => setCreateModal(true)}>
<Button data-testid="btn-create-admin" onClick={() => setCreateModal(true)}>
<Plus className="mr-2 h-4 w-4" />
{t('admins.add')}
</Button>
@@ -261,7 +262,7 @@ const AdminListPage: React.FC = () => {
</ExploreListShell>
<Dialog open={createModal} onOpenChange={setCreateModal}>
<DialogContent>
<DialogContent data-testid="dialog-create-admin">
<DialogHeader>
<DialogTitle>{t('admins.createTitle')}</DialogTitle>
</DialogHeader>
src/pages/audit/AuditPage.tsx
+3 -2
View File
@@ -186,13 +186,14 @@ const AuditPage: React.FC = () => {
);
return (
<div className="space-y-6">
<div data-testid="page-audit" className="space-y-6">
<ListPageHeader title={t('audit.title')} description={t('audit.description')} />
<div className="flex flex-wrap items-end gap-4">
<div className="flex flex-wrap items-end gap-4" data-testid="filter-audit">
<div className="space-y-2">
<Label>{t('audit.searchAdmin')}</Label>
<Input
data-testid="filter-audit-admin-search"
placeholder={t('audit.searchAdminPlaceholder')}
value={adminSearch}
onChange={(e) => setAdminSearch(e.target.value)}
src/pages/banned-words/BannedWordsPage.tsx
+15 -3
View File
@@ -118,7 +118,7 @@ const BannedWordsPage: React.FC = () => {
);
return (
<div className="space-y-6">
<div data-testid="page-banned-words" className="space-y-6">
<ListPageHeader
title={t('bannedWords.title')}
description={t('bannedWords.description')}
@@ -126,24 +126,36 @@ const BannedWordsPage: React.FC = () => {
<div className="flex flex-wrap items-center gap-2">
<Input
data-testid="input-banned-word"
placeholder={t('bannedWords.placeholder')}
value={newWord}
onChange={(e) => setNewWord(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
className="w-[200px]"
/>
<Button onClick={handleAdd} disabled={addWord.isPending || !newWord.trim()}>
<Button
data-testid="btn-add-banned-word"
onClick={handleAdd}
disabled={addWord.isPending || !newWord.trim()}
>
{t('common.add')}
</Button>
<div className="flex items-center gap-2">
<Input
data-testid="filter-banned-words-search"
placeholder={t('explore.searchWord')}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
className="w-[200px]"
/>
<Button variant="outline" size="icon" className="h-9 w-9" onClick={handleSearch}>
<Button
data-testid="btn-search-banned-words"
variant="outline"
size="icon"
className="h-9 w-9"
onClick={handleSearch}
>
<Search className="h-4 w-4" />
</Button>
</div>
src/pages/calendars/CalendarDetailPage.tsx
+3 -3
View File
@@ -50,7 +50,7 @@ const CalendarDetailPage: React.FC = () => {
const titleLabel = calendar.title || calendar.id;
return (
const { t } = useTranslation();
<div data-testid="page-calendar-detail">
<PageHeader
title={t('calendars.detailTitle', { name: titleLabel })}
breadcrumbs={[
@@ -58,7 +58,7 @@ const CalendarDetailPage: React.FC = () => {
{ label: String(titleLabel) },
]}
actions={
<Button variant="outline" data-testid="btn-back" onClick={() => navigate('/calendars')}>
<ArrowLeft className="h-4 w-4" />
{t('common.backToList')}
</Button>
@@ -151,7 +151,7 @@ const CalendarDetailPage: React.FC = () => {
</CardContent>
</Card>
</div>
);
};
src/pages/calendars/CalendarListPage.tsx
+2
View File
@@ -286,12 +286,14 @@ const CalendarListPage: React.FC = () => {
return (
<>
<ExploreListShell
data-testid="page-calendars"
title={t('calendars.title')}
stats={exploreStats}
viewMode={viewMode}
onViewModeChange={setViewMode}
toolbar={
<ExploreSearch
data-testid="filter-calendars-search"
value={searchDraft}
onChange={setSearchDraft}
onSubmit={applySearch}
src/pages/events/EventDetailPage.tsx
+3 -3
View File
@@ -61,7 +61,7 @@ const EventDetailPage: React.FC = () => {
const titleLabel = event.title || event.id;
return (
<>
<div data-testid="page-event-detail">
<PageHeader
title={t('events.detailTitle', { name: titleLabel })}
breadcrumbs={[
@@ -69,7 +69,7 @@ const EventDetailPage: React.FC = () => {
{ label: String(titleLabel) },
]}
actions={
<Button variant="outline" onClick={() => navigate('/events')}>
<Button variant="outline" data-testid="btn-back" onClick={() => navigate('/events')}>
<ArrowLeft className="h-4 w-4" />
{t('common.backToList')}
</Button>
@@ -190,7 +190,7 @@ const EventDetailPage: React.FC = () => {
</CardContent>
</Card>
</>
</div>
);
};
src/pages/events/EventListPage.tsx
+2
View File
@@ -376,6 +376,7 @@ const EventListPage: React.FC = () => {
return (
<>
<ExploreListShell
data-testid="page-events"
title={t('events.title')}
stats={exploreStats}
viewMode={viewMode}
@@ -384,6 +385,7 @@ const EventListPage: React.FC = () => {
<div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
<div className="min-w-0 flex-1">
<ExploreSearch
data-testid="filter-events-search"
value={searchDraft}
onChange={setSearchDraft}
onSubmit={applySearch}
src/pages/monitoring/MonitoringPage.tsx
+3 -2
View File
@@ -286,7 +286,7 @@ const MonitoringPage: React.FC = () => {
const healthy = summary.online > 0 && summary.cpuPeak < 85;
return (
<div className="space-y-6">
<div data-testid="page-monitoring" className="space-y-6">
<div className="flex flex-wrap items-start justify-between gap-3">
<div>
<div className="flex flex-wrap items-center gap-2">
@@ -303,11 +303,12 @@ const MonitoringPage: React.FC = () => {
{t('monitoring.subtitle', { minutes })}
</p>
</div>
<div className="flex flex-wrap gap-1.5">
<div className="flex flex-wrap gap-1.5" data-testid="filter-monitoring-range">
{TIME_RANGE_KEYS.map((r) => (
<Button
key={r.value}
size="sm"
data-testid={`filter-monitoring-range-${r.value}`}
variant={minutes === r.value ? 'default' : 'outline'}
onClick={() => setMinutes(r.value)}
>
src/pages/profile/ProfilePage.tsx
+4 -4
View File
@@ -150,7 +150,7 @@ const ProfilePage: React.FC = () => {
const emDash = t('common.emDash');
return (
<Card className="max-w-2xl">
<Card data-testid="page-profile" className="max-w-2xl">
<CardHeader>
<CardTitle>{t('profile.title')}</CardTitle>
<CardDescription>{t('profile.description')}</CardDescription>
@@ -232,7 +232,7 @@ const ProfilePage: React.FC = () => {
</div>
</dl>
<Button onClick={startEditing}>
<Button data-testid="btn-edit-profile" onClick={startEditing}>
<Pencil className="h-4 w-4" />
{t('profile.edit')}
</Button>
@@ -309,10 +309,10 @@ const ProfilePage: React.FC = () => {
)}
</div>
<div className="flex gap-2">
<Button type="submit" disabled={updateProfile.isPending}>
<Button type="submit" data-testid="btn-save-profile" disabled={updateProfile.isPending}>
{updateProfile.isPending ? t('common.saving') : t('common.save')}
</Button>
<Button type="button" variant="outline" onClick={() => setEditing(false)}>
<Button type="button" data-testid="btn-cancel-profile" variant="outline" onClick={() => setEditing(false)}>
{t('common.cancel')}
</Button>
</div>
src/pages/subscriptions/SubscriptionListPage.tsx
+2 -1
View File
@@ -277,12 +277,13 @@ const SubscriptionListPage: React.FC = () => {
return (
<>
<ExploreListShell
data-testid="page-subscriptions"
title={t('subscriptions.title')}
stats={exploreStats}
viewMode={viewMode}
onViewModeChange={setViewMode}
toolbar={
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-2" data-testid="filter-subscriptions">
<Select
value={params.plan ?? ALL}
onValueChange={(val) =>
src/pages/users/UserDetailPage.tsx
+2 -2
View File
@@ -62,7 +62,7 @@ const UserDetailPage: React.FC = () => {
const emDash = t('common.emDash');
return (
<div>
<div data-testid="page-user-detail">
<PageHeader
title={String(titleName)}
description={`ID ${user.id}`}
@@ -71,7 +71,7 @@ const UserDetailPage: React.FC = () => {
{ label: String(titleName) },
]}
actions={
<Button variant="outline" onClick={() => navigate('/users')}>
<Button variant="outline" data-testid="btn-back" onClick={() => navigate('/users')}>
<ArrowLeft className="h-4 w-4" />
{t('common.backToList')}
</Button>
src/pages/users/UserListPage.tsx
+3 -1
View File
@@ -329,12 +329,14 @@ const UserListPage: React.FC = () => {
return (
<>
<ExploreListShell
data-testid="page-users"
title={t('users.title')}
stats={exploreStats}
viewMode={viewMode}
onViewModeChange={setViewMode}
toolbar={
<ExploreSearch
data-testid="filter-users-search"
value={searchDraft}
onChange={setSearchDraft}
onSubmit={applySearch}
@@ -356,7 +358,7 @@ const UserListPage: React.FC = () => {
</ExploreListShell>
<Dialog open={editModal.open} onOpenChange={(open) => !open && setEditModal({ open: false, userId: null })}>
<DialogContent>
<DialogContent data-testid="dialog-edit-user">
<DialogHeader>
<DialogTitle>{t('users.editTitle')}</DialogTitle>
</DialogHeader>