fix(web): unwrap CacheMetaInterceptor envelope + dev port migration + homepage diacritic
Several fixes discovered while smoke-testing the homepage under the new
port layout (web 3200 / api 3201) to avoid clashing with a sibling project:
- analytics-api: add `unwrap<T>()` helper for the `{ data, cacheMeta }`
envelope the backend CacheMetaInterceptor appends to every
`/analytics/*` response. Apply to all 9 analytics methods. Without this
`data.activeCount` (etc.) were `undefined`, crashing KpiStrip with
`TypeError: Cannot read properties of undefined (reading 'toLocaleString')`.
- public page: hard-coded `city = 'Ho Chi Minh'` returned 0 rows because
the DB stores `'Hồ Chí Minh'` and the SQL filter is case-insensitive but
not diacritic-insensitive. Use the accented spelling.
- use-analytics hooks: add `useAuthedAnalytics()` gate so unauthenticated
visitors on public routes no longer fire 401s from analytics queries.
- next.config.js CSP: add localhost:3200/3201 (http + ws) to connect-src so
the web origin can reach the relocated API. Without this fetches hit
`TypeError: Failed to fetch` on login.
- .claude/launch.json + package.json: web → 3200, api → 3201 (was 3000/3001,
conflicting with the sibling psyforge project also using 3000).
- Minor follow-ups from parallel QA work on this branch (analytics modules,
notifications gateway, auth test fixtures, trending-areas handler + DTO
+ tests, a few E2E smoke specs).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ho Ngoc Hai
188
e2e/web/agents.spec.ts
Normal file
188
e2e/web/agents.spec.ts
Normal file
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* Agents Page E2E Tests
|
||||
*
|
||||
* Tests the agent profile page at /agents/[id].
|
||||
* The app does not have a public agent listing page, only individual agent profiles.
|
||||
* Tests use route mocking to avoid API dependency.
|
||||
*/
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
const mockAgent = {
|
||||
id: 'agent-1',
|
||||
fullName: 'Nguyễn Văn Minh',
|
||||
avatarUrl: null,
|
||||
phone: '0912345678',
|
||||
email: 'minh@goodgo.vn',
|
||||
agency: 'GoodGo Realty',
|
||||
licenseNumber: 'GPHN-2025-001',
|
||||
bio: 'Chuyên viên tư vấn bất động sản khu vực Quận 7 và Quận 2 với hơn 5 năm kinh nghiệm.',
|
||||
qualityScore: 88,
|
||||
totalDeals: 45,
|
||||
isVerified: true,
|
||||
serviceAreas: ['Quận 7', 'Quận 2', 'Nhà Bè'],
|
||||
memberSince: '2023-06-15T00:00:00Z',
|
||||
activeListings: [
|
||||
{
|
||||
id: 'listing-1',
|
||||
transactionType: 'SALE',
|
||||
priceVND: '5000000000',
|
||||
status: 'ACTIVE',
|
||||
property: {
|
||||
id: 'prop-1',
|
||||
title: 'Căn hộ cao cấp Quận 7',
|
||||
propertyType: 'APARTMENT',
|
||||
address: '123 Nguyễn Thị Thập',
|
||||
district: 'Quận 7',
|
||||
city: 'Hồ Chí Minh',
|
||||
areaM2: 75,
|
||||
bedrooms: 2,
|
||||
bathrooms: 2,
|
||||
imageUrl: null,
|
||||
},
|
||||
},
|
||||
],
|
||||
avgReviewRating: 4.8,
|
||||
totalReviews: 12,
|
||||
};
|
||||
|
||||
const mockReviews = {
|
||||
data: [
|
||||
{
|
||||
id: 'review-1',
|
||||
userId: 'user-1',
|
||||
userName: 'Trần Thị B',
|
||||
targetType: 'AGENT',
|
||||
targetId: 'agent-1',
|
||||
rating: 5,
|
||||
comment: 'Môi giới tận tình, hỗ trợ nhiệt tình.',
|
||||
createdAt: '2026-03-01T00:00:00Z',
|
||||
},
|
||||
],
|
||||
stats: {
|
||||
targetType: 'AGENT',
|
||||
targetId: 'agent-1',
|
||||
averageRating: 4.8,
|
||||
totalReviews: 12,
|
||||
distribution: { 5: 10, 4: 2 },
|
||||
},
|
||||
};
|
||||
|
||||
test.describe('Agent Profile Page', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route('**/agents/agent-1', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mockAgent),
|
||||
}),
|
||||
);
|
||||
await page.route('**/agents/agent-1/reviews**', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mockReviews),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
test('renders agent name and verified badge', async ({ page }) => {
|
||||
await page.goto('/agents/agent-1');
|
||||
|
||||
await expect(page.getByText('Nguyễn Văn Minh')).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('shows agent agency and contact info', async ({ page }) => {
|
||||
await page.goto('/agents/agent-1');
|
||||
|
||||
await expect(page.getByText('Nguyễn Văn Minh')).toBeVisible({ timeout: 10_000 });
|
||||
await expect(page.getByText(/GoodGo Realty/)).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows active listings section', async ({ page }) => {
|
||||
await page.goto('/agents/agent-1');
|
||||
|
||||
await expect(page.getByText('Nguyễn Văn Minh')).toBeVisible({ timeout: 10_000 });
|
||||
// Listing should appear
|
||||
await expect(page.getByText(/Căn hộ cao cấp Quận 7/)).toBeVisible();
|
||||
});
|
||||
|
||||
test('has breadcrumb back to homepage', async ({ page }) => {
|
||||
await page.goto('/agents/agent-1');
|
||||
|
||||
await expect(page.getByText('Nguyễn Văn Minh')).toBeVisible({ timeout: 10_000 });
|
||||
await expect(page.getByRole('link', { name: /Trang chủ/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('renders without critical console errors', async ({ page }) => {
|
||||
const criticalErrors: string[] = [];
|
||||
page.on('console', (msg) => {
|
||||
if (msg.type() === 'error') {
|
||||
const text = msg.text();
|
||||
if (
|
||||
text.includes('mapbox') ||
|
||||
text.includes('NEXT_PUBLIC') ||
|
||||
text.includes('net::ERR') ||
|
||||
text.includes('Failed to load resource')
|
||||
) {
|
||||
return;
|
||||
}
|
||||
criticalErrors.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto('/agents/agent-1');
|
||||
await page.waitForLoadState('networkidle', { timeout: 15_000 }).catch(() => {});
|
||||
|
||||
expect(criticalErrors).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('handles 404 for unknown agent gracefully', async ({ page }) => {
|
||||
await page.route('**/agents/nonexistent**', (route) =>
|
||||
route.fulfill({ status: 404, body: JSON.stringify({ message: 'Not found' }) }),
|
||||
);
|
||||
|
||||
const res = await page.goto('/agents/nonexistent-agent-id');
|
||||
const status = res?.status();
|
||||
if (status && status >= 500) {
|
||||
throw new Error(`Agent page returned ${status} for unknown ID (expected 404 or redirect)`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Agent Profile — Responsive', () => {
|
||||
const viewports = [
|
||||
{ label: '375px (mobile)', width: 375, height: 667 },
|
||||
{ label: '768px (tablet)', width: 768, height: 1024 },
|
||||
{ label: '1280px (laptop)', width: 1280, height: 800 },
|
||||
{ label: '1920px (desktop)', width: 1920, height: 1080 },
|
||||
];
|
||||
|
||||
for (const vp of viewports) {
|
||||
test(`renders at ${vp.label}`, async ({ page }) => {
|
||||
await page.route('**/agents/agent-1', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mockAgent),
|
||||
}),
|
||||
);
|
||||
await page.route('**/agents/agent-1/reviews**', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mockReviews),
|
||||
}),
|
||||
);
|
||||
|
||||
await page.setViewportSize({ width: vp.width, height: vp.height });
|
||||
await page.goto('/agents/agent-1');
|
||||
|
||||
await expect(page.getByText('Nguyễn Văn Minh')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// No horizontal overflow (layout break indicator)
|
||||
const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
|
||||
const viewportWidth = await page.evaluate(() => window.innerWidth);
|
||||
expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 2); // 2px tolerance
|
||||
});
|
||||
}
|
||||
});
|
||||
331
e2e/web/trading-floor-regression.spec.ts
Normal file
331
e2e/web/trading-floor-regression.spec.ts
Normal file
@@ -0,0 +1,331 @@
|
||||
/**
|
||||
* [TEC-3078] Visual/density regression — breakpoint 1920/1440/1280/1024/768px
|
||||
* [TEC-3079] Console errors = 0 và network 4xx/5xx = 0
|
||||
* [TEC-3080] Interaction: sort/filter bảng, ticker, chart render
|
||||
*
|
||||
* Goodgo Platform AI — sàn giao dịch refactor QA
|
||||
* Chạy E2E với backend thật. Không stub/mock.
|
||||
*
|
||||
* npx playwright test --project=web e2e/web/trading-floor-regression.spec.ts
|
||||
*/
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const BREAKPOINTS = [
|
||||
{ name: '1920p', width: 1920, height: 1080 },
|
||||
{ name: '1440p', width: 1440, height: 900 },
|
||||
{ name: '1280p', width: 1280, height: 800 },
|
||||
{ name: '1024p', width: 1024, height: 768 },
|
||||
{ name: '768p', width: 768, height: 1024 },
|
||||
] as const;
|
||||
|
||||
function attachNetworkMonitor(page: import('@playwright/test').Page) {
|
||||
const consoleErrors: string[] = [];
|
||||
const networkErrors: { url: string; status: number }[] = [];
|
||||
|
||||
page.on('console', (msg) => {
|
||||
if (msg.type() === 'error') {
|
||||
const text = msg.text();
|
||||
if (
|
||||
text.includes('mapbox') ||
|
||||
text.includes('NEXT_PUBLIC_MAPBOX') ||
|
||||
text.includes('Failed to load resource') ||
|
||||
text.includes('net::ERR')
|
||||
) return;
|
||||
consoleErrors.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
page.on('response', (res) => {
|
||||
const status = res.status();
|
||||
const url = res.url();
|
||||
if (status >= 400 && (url.includes('/api/v1') || url.includes('localhost'))) {
|
||||
networkErrors.push({ url, status });
|
||||
}
|
||||
});
|
||||
|
||||
return { consoleErrors, networkErrors };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// [TEC-3078] Breakpoint regression
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('Breakpoint regression — sàn giao dịch', () => {
|
||||
for (const bp of BREAKPOINTS) {
|
||||
test(`/ home dashboard — ${bp.name} (${bp.width}×${bp.height})`, async ({ page }) => {
|
||||
await page.setViewportSize({ width: bp.width, height: bp.height });
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Không crash
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
|
||||
// Main content vẫn visible ở mọi breakpoint
|
||||
await expect(page.locator('main').or(page.locator('#__next'))).toBeVisible();
|
||||
|
||||
// Không có horizontal overflow (scrollWidth > clientWidth = layout break)
|
||||
const hasHorizontalOverflow = await page.evaluate(() => {
|
||||
return document.documentElement.scrollWidth > document.documentElement.clientWidth + 2;
|
||||
});
|
||||
expect(
|
||||
hasHorizontalOverflow,
|
||||
`Horizontal overflow tại ${bp.name} — kiểm tra CSS layout`,
|
||||
).toBeFalsy();
|
||||
});
|
||||
|
||||
test(`/listings board — ${bp.name} (${bp.width}×${bp.height})`, async ({ page }) => {
|
||||
await page.setViewportSize({ width: bp.width, height: bp.height });
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
|
||||
// Bảng hoặc card listings phải visible
|
||||
const listingEl = page
|
||||
.locator('table')
|
||||
.or(page.locator('[data-testid="data-table"]'))
|
||||
.or(page.locator('[class*="listing"]'))
|
||||
.or(page.getByRole('grid'));
|
||||
await expect(listingEl.first()).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// [TEC-3079] Console errors = 0 / Network 4xx/5xx = 0
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('Zero console errors & zero 4xx/5xx — các route chính', () => {
|
||||
const ROUTES = ['/', '/listings', '/login'] as const;
|
||||
|
||||
for (const route of ROUTES) {
|
||||
test(`${route} — không có console error và không có API 5xx`, async ({ page }) => {
|
||||
const { consoleErrors, networkErrors } = attachNetworkMonitor(page);
|
||||
|
||||
await page.goto(route);
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
expect(
|
||||
consoleErrors,
|
||||
`Console errors tại ${route}: ${consoleErrors.join(' | ')}`,
|
||||
).toHaveLength(0);
|
||||
|
||||
const fiveXX = networkErrors.filter((e) => e.status >= 500);
|
||||
expect(
|
||||
fiveXX,
|
||||
`Network 5xx tại ${route}: ${fiveXX.map((e) => `${e.status} ${e.url}`).join(' | ')}`,
|
||||
).toHaveLength(0);
|
||||
});
|
||||
}
|
||||
|
||||
test('/listings — không có API 4xx (unauthorized ngoại lệ cho /admin)', async ({ page }) => {
|
||||
const { networkErrors } = attachNetworkMonitor(page);
|
||||
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
const unexpectedFourXX = networkErrors.filter(
|
||||
(e) =>
|
||||
e.status >= 400 &&
|
||||
e.status < 500 &&
|
||||
// Bỏ qua 401 cho các endpoint yêu cầu auth (bình thường khi chưa đăng nhập)
|
||||
e.status !== 401 &&
|
||||
// Bỏ qua preflight OPTIONS
|
||||
!e.url.includes('OPTIONS'),
|
||||
);
|
||||
|
||||
expect(
|
||||
unexpectedFourXX,
|
||||
`Unexpected 4xx tại /listings: ${unexpectedFourXX.map((e) => `${e.status} ${e.url}`).join(' | ')}`,
|
||||
).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// [TEC-3080] Interaction: sort/filter bảng, DensityToggle, preview panel
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('Interaction — Listings board (sort, filter, density, preview)', () => {
|
||||
test('sort cột giá hoạt động (click header)', async ({ page }) => {
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Tìm header cột giá trong DataTable
|
||||
const priceHeader = page
|
||||
.getByRole('columnheader', { name: /giá|price/i })
|
||||
.or(page.locator('th').filter({ hasText: /giá|price/i }));
|
||||
|
||||
if (await priceHeader.first().isVisible({ timeout: 5_000 }).catch(() => false)) {
|
||||
await priceHeader.first().click();
|
||||
// Sau click không crash
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
// Table vẫn hiện
|
||||
await expect(
|
||||
page.locator('table').or(page.getByRole('grid')).first(),
|
||||
).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('DensityToggle compact/comfortable chuyển đổi không crash', async ({ page }) => {
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
const toggle = page
|
||||
.locator('[data-testid="density-toggle"]')
|
||||
.or(page.getByRole('button', { name: /compact|comfortable|density/i }))
|
||||
.or(page.locator('button[class*="density"]'));
|
||||
|
||||
if (await toggle.first().isVisible({ timeout: 5_000 }).catch(() => false)) {
|
||||
// Click 2 lần (compact → comfortable → compact)
|
||||
await toggle.first().click();
|
||||
await page.waitForTimeout(300);
|
||||
await toggle.first().click();
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('click row điều hướng đến listing detail (hoặc mở PreviewPanel)', async ({ page }) => {
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Tìm row đầu tiên trong table
|
||||
const firstRow = page
|
||||
.locator('tbody tr')
|
||||
.or(page.locator('[role="row"]').nth(1)) // nth(0) là header
|
||||
.first();
|
||||
|
||||
if (await firstRow.isVisible({ timeout: 10_000 }).catch(() => false)) {
|
||||
// Design hiện tại: click row → router.push('/listings/{id}') → navigate sang detail page
|
||||
// Có thể trong tương lai sẽ mở PreviewPanel thay thế
|
||||
await Promise.race([
|
||||
firstRow.click({ timeout: 5_000 }),
|
||||
page.waitForURL(/\/listings\/[\w-]+/, { timeout: 10_000 }).catch(() => {}),
|
||||
]).catch(() => {});
|
||||
|
||||
// Sau khi click: hoặc đang ở detail page, hoặc panel mở, hoặc vẫn ở /listings
|
||||
// Không quan trọng outcome — chỉ cần không crash 500
|
||||
await page.waitForLoadState('domcontentloaded', { timeout: 10_000 }).catch(() => {});
|
||||
|
||||
// Kiểm tra side panel nếu có (design tương lai)
|
||||
const panel = page
|
||||
.locator('[data-testid="listing-preview-panel"]')
|
||||
.or(page.locator('[class*="preview-panel"]'))
|
||||
.or(page.locator('[class*="PreviewPanel"]'))
|
||||
.or(page.locator('[role="dialog"]'));
|
||||
|
||||
const panelVisible = await panel.first().isVisible({ timeout: 2_000 }).catch(() => false);
|
||||
if (panelVisible) {
|
||||
await expect(panel.first()).toBeVisible();
|
||||
}
|
||||
|
||||
// Không crash dù navigate hay panel
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// [TEC-3080] Interaction — Home dashboard ticker
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('Interaction — Home dashboard ticker & market data', () => {
|
||||
test('ticker hoặc market data section render đúng', async ({ page }) => {
|
||||
const { consoleErrors } = attachNetworkMonitor(page);
|
||||
|
||||
await page.goto('/');
|
||||
// Đợi ticker animation hoặc data load
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
await page.waitForTimeout(1_000); // cho animation chạy 1 giây
|
||||
|
||||
// Ticker hoặc market section phải visible
|
||||
const ticker = page
|
||||
.locator('[data-testid="ticker"]')
|
||||
.or(page.locator('[class*="ticker"]'))
|
||||
.or(page.locator('[class*="Ticker"]'))
|
||||
.or(page.getByText(/giá tb|avg|m²|tỷ/i));
|
||||
|
||||
if (await ticker.first().isVisible({ timeout: 8_000 }).catch(() => false)) {
|
||||
await expect(ticker.first()).toBeVisible();
|
||||
}
|
||||
|
||||
// Không có error boundary dù ticker chưa render
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
|
||||
expect(
|
||||
consoleErrors,
|
||||
`Console errors tại /: ${consoleErrors.join(' | ')}`,
|
||||
).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('navigation chính hoạt động từ home', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Click vào link Listings từ nav
|
||||
const listingsLink = page
|
||||
.getByRole('link', { name: /tin đăng|listings|bất động sản/i })
|
||||
.first();
|
||||
|
||||
if (await listingsLink.isVisible({ timeout: 5_000 }).catch(() => false)) {
|
||||
await listingsLink.click();
|
||||
await page.waitForLoadState('domcontentloaded', { timeout: 10_000 });
|
||||
await expect(page).toHaveURL(/\/listings/);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// [TEC-3080] Interaction — Listing detail inquiry modal
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('Interaction — Listing detail (inquiry modal, breadcrumb)', () => {
|
||||
test('breadcrumb và back navigation hoạt động', async ({ page }) => {
|
||||
// Đi từ /listings → listing detail → back
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Click vào listing đầu tiên
|
||||
const listingLink = page
|
||||
.locator('a[href*="/listings/"]')
|
||||
.filter({ hasNot: page.locator('a[href="/listings"]') })
|
||||
.first();
|
||||
|
||||
if (await listingLink.isVisible({ timeout: 10_000 }).catch(() => false)) {
|
||||
await listingLink.click();
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Breadcrumb hoặc back button hiển thị
|
||||
const breadcrumb = page
|
||||
.locator('[aria-label="breadcrumb"]')
|
||||
.or(page.locator('nav[class*="breadcrumb"]'))
|
||||
.or(page.getByRole('link', { name: /trang chủ|home|quay lại/i }));
|
||||
|
||||
if (await breadcrumb.first().isVisible({ timeout: 3_000 }).catch(() => false)) {
|
||||
await expect(breadcrumb.first()).toBeVisible();
|
||||
}
|
||||
|
||||
// Không có 500
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
}
|
||||
});
|
||||
});
|
||||
364
e2e/web/trading-floor-smoke.spec.ts
Normal file
364
e2e/web/trading-floor-smoke.spec.ts
Normal file
@@ -0,0 +1,364 @@
|
||||
/**
|
||||
* [TEC-3077] Smoke test các route chính — sàn giao dịch Goodgo Platform AI
|
||||
*
|
||||
* Chạy E2E với backend thật (apps/api + Postgres + Redis).
|
||||
* Không stub/mock bất kỳ API call nào.
|
||||
*
|
||||
* npx playwright test --project=web e2e/web/trading-floor-smoke.spec.ts
|
||||
*/
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Thu thập console errors và network errors trong suốt test */
|
||||
function attachErrorListeners(page: import('@playwright/test').Page) {
|
||||
const consoleErrors: string[] = [];
|
||||
const networkErrors: { url: string; status: number }[] = [];
|
||||
|
||||
page.on('console', (msg) => {
|
||||
if (msg.type() === 'error') {
|
||||
const text = msg.text();
|
||||
// Bỏ qua nhiễu từ Mapbox token và NEXT_PUBLIC vars chưa set trong test env
|
||||
if (
|
||||
text.includes('mapbox') ||
|
||||
text.includes('NEXT_PUBLIC_MAPBOX') ||
|
||||
text.includes('Failed to load resource') ||
|
||||
text.includes('net::ERR')
|
||||
) return;
|
||||
consoleErrors.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
page.on('response', (res) => {
|
||||
const status = res.status();
|
||||
const url = res.url();
|
||||
// Chỉ bắt lỗi từ API nội bộ (bỏ qua CDN, fonts, static assets)
|
||||
if (
|
||||
status >= 400 &&
|
||||
(url.includes('/api/v1') || url.includes('localhost'))
|
||||
) {
|
||||
networkErrors.push({ url, status });
|
||||
}
|
||||
});
|
||||
|
||||
return { consoleErrors, networkErrors };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Route: / — Home dashboard ticker-style (TEC-3058)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('@smoke Home dashboard — ticker-style', () => {
|
||||
test('tải trang, ticker hiển thị và không có lỗi', async ({ page }) => {
|
||||
const { consoleErrors, networkErrors } = attachErrorListeners(page);
|
||||
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Không crash với 500 error boundary
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error|lỗi máy chủ/i }),
|
||||
).not.toBeVisible();
|
||||
|
||||
// Trang có tiêu đề hợp lệ
|
||||
await expect(page).toHaveTitle(/GoodGo/i);
|
||||
|
||||
// Heading H1 hoặc ticker bar phải render
|
||||
const heroOrTicker = page
|
||||
.locator('h1')
|
||||
.or(page.locator('[data-testid="ticker"]'))
|
||||
.or(page.locator('[class*="ticker"]'));
|
||||
await expect(heroOrTicker.first()).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
expect(consoleErrors, `Console errors: ${consoleErrors.join(', ')}`).toHaveLength(0);
|
||||
expect(
|
||||
networkErrors.filter((e) => e.status >= 500),
|
||||
`Network 5xx: ${networkErrors.map((e) => `${e.status} ${e.url}`).join(', ')}`,
|
||||
).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('market data section render (KPI cards hoặc market summary)', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// KPI card hoặc market summary phải có ít nhất 1 phần tử
|
||||
const marketSection = page
|
||||
.locator('[data-testid="kpi-card"]')
|
||||
.or(page.locator('[class*="kpi"]'))
|
||||
.or(page.getByText(/giá tb|avg price|tổng tin|market/i));
|
||||
await expect(marketSection.first()).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Route: /listings — Listings board high-density (TEC-3059)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('@smoke Listings board — high-density', () => {
|
||||
test('tải trang, DataTable render và không có 5xx', async ({ page }) => {
|
||||
const { consoleErrors, networkErrors } = attachErrorListeners(page);
|
||||
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Không có error boundary
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
|
||||
// Bảng listings hoặc danh sách BĐS phải hiển thị
|
||||
const listingContainer = page
|
||||
.locator('table')
|
||||
.or(page.locator('[data-testid="data-table"]'))
|
||||
.or(page.locator('[class*="listings"]'))
|
||||
.or(page.getByRole('grid'));
|
||||
await expect(listingContainer.first()).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
expect(consoleErrors, `Console errors: ${consoleErrors.join(', ')}`).toHaveLength(0);
|
||||
expect(
|
||||
networkErrors.filter((e) => e.status >= 500),
|
||||
`Network 5xx: ${networkErrors.map((e) => `${e.status} ${e.url}`).join(', ')}`,
|
||||
).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('DensityToggle hiển thị và chuyển đổi được', async ({ page }) => {
|
||||
await page.goto('/listings');
|
||||
|
||||
const densityToggle = page
|
||||
.locator('[data-testid="density-toggle"]')
|
||||
.or(page.getByRole('button', { name: /compact|comfortable|density/i }))
|
||||
.or(page.locator('[class*="density"]'));
|
||||
|
||||
// Chờ trang load xong
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
if (await densityToggle.first().isVisible()) {
|
||||
await densityToggle.first().click();
|
||||
// Sau click vẫn không crash
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('bộ lọc loại BĐS hoạt động', async ({ page }) => {
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Tìm filter select cụ thể — dùng aria-label chính xác để tránh match combobox ngôn ngữ
|
||||
const filterSelect = page.locator('select[aria-label="Loại BĐS"]')
|
||||
.or(page.locator('select[aria-label*="loại"]'))
|
||||
.or(page.locator('select').filter({ has: page.locator('option[value="APARTMENT"]') }));
|
||||
|
||||
if (await filterSelect.first().isVisible({ timeout: 5_000 }).catch(() => false)) {
|
||||
// Chọn APARTMENT — selectOption triggers router.replace
|
||||
// Nếu trang navigate (locale redirect), chấp nhận — test chỉ verify không crash 500
|
||||
await filterSelect.first().selectOption('APARTMENT').catch(() => {
|
||||
// router.replace có thể làm page reference stale — bình thường
|
||||
});
|
||||
|
||||
// Đợi page ổn định sau navigation
|
||||
await page.waitForLoadState('domcontentloaded', { timeout: 8_000 }).catch(() => {});
|
||||
await page.waitForLoadState('networkidle', { timeout: 10_000 }).catch(() => {});
|
||||
|
||||
// Sau filter trang không crash — check bằng URL/title thay vì heading
|
||||
const url = page.url();
|
||||
const title = await page.title().catch(() => '');
|
||||
// Trang không được là 500 error page
|
||||
expect(title, `Sau filter /listings, page title là: ${title}`).not.toMatch(/500|server error/i);
|
||||
expect(url, `URL sau filter: ${url}`).not.toMatch(/500|error/i);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Route: /listings/[id] — Listing detail trader-style (TEC-3060)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('@smoke Listing detail — trader-style', () => {
|
||||
let firstListingId: string | null = null;
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
// Lấy ID listing đầu tiên từ seed data thật
|
||||
const ctx = await browser.newContext();
|
||||
const page = await ctx.newPage();
|
||||
|
||||
// Intercept API response để lấy ID
|
||||
let captured = false;
|
||||
page.on('response', async (res) => {
|
||||
if (captured) return;
|
||||
if (res.url().includes('/api/v1/listings') && !res.url().includes('/api/v1/listings/')) {
|
||||
try {
|
||||
const body = await res.json();
|
||||
const data = body?.data ?? body;
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
firstListingId = data[0].id;
|
||||
captured = true;
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
await ctx.close();
|
||||
});
|
||||
|
||||
test('tải trang listing detail, hiển thị tiêu đề và giá', async ({ page }) => {
|
||||
const { consoleErrors, networkErrors } = attachErrorListeners(page);
|
||||
|
||||
const url = firstListingId ? `/listings/${firstListingId}` : '/listings';
|
||||
await page.goto(url);
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Nếu có listing ID thật
|
||||
if (firstListingId) {
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
|
||||
// Giá BĐS phải hiện (VND) — định dạng có thể là "8.500.000.000 đ", "8.5 tỷ", "VNĐ", v.v.
|
||||
const priceEl = page
|
||||
.getByText(/tỷ|triệu|vnđ|vnd|\d[\d.]+\s*đ/i)
|
||||
.or(page.locator('[class*="price"]'));
|
||||
await expect(priceEl.first()).toBeVisible({ timeout: 15_000 });
|
||||
}
|
||||
|
||||
expect(consoleErrors, `Console errors: ${consoleErrors.join(', ')}`).toHaveLength(0);
|
||||
expect(
|
||||
networkErrors.filter((e) => e.status >= 500),
|
||||
`Network 5xx: ${networkErrors.map((e) => `${e.status} ${e.url}`).join(', ')}`,
|
||||
).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('404 cho listing ID không tồn tại (không crash 500)', async ({ page }) => {
|
||||
const res = await page.goto('/listings/nonexistent-trading-floor-qa');
|
||||
const status = res?.status();
|
||||
if (status && status >= 500) {
|
||||
throw new Error(`Listing detail trả về ${status} cho ID không tồn tại (mong đợi 404)`);
|
||||
}
|
||||
// Không nên có 500 error heading
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Route: /agents/[id] — Agent profile trader-style (TEC-3061)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('@smoke Agent profile — trader-style', () => {
|
||||
test('agent profile với ID từ seed data, hiển thị đúng', async ({ page }) => {
|
||||
const { consoleErrors, networkErrors } = attachErrorListeners(page);
|
||||
|
||||
// Dùng agent seed ID (từ pnpm db:seed — agent đầu tiên thường có slug hoặc ID cố định)
|
||||
// Thử truy cập trang listing rồi click vào agent link
|
||||
await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Tìm link agent đầu tiên trên trang
|
||||
const agentLink = page
|
||||
.locator('a[href*="/agents/"]')
|
||||
.first();
|
||||
|
||||
if (await agentLink.isVisible({ timeout: 5_000 }).catch(() => false)) {
|
||||
const href = await agentLink.getAttribute('href');
|
||||
await page.goto(href!);
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Quality score, tên agent, hoặc thông tin liên hệ phải hiển thị
|
||||
const agentInfo = page
|
||||
.locator('[data-testid="agent-quality-score"]')
|
||||
.or(page.locator('[class*="quality"]'))
|
||||
.or(page.getByText(/điểm chất lượng|quality score/i))
|
||||
.or(page.getByRole('heading', { level: 1 }));
|
||||
await expect(agentInfo.first()).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
|
||||
expect(consoleErrors, `Console errors: ${consoleErrors.join(', ')}`).toHaveLength(0);
|
||||
expect(
|
||||
networkErrors.filter((e) => e.status >= 500),
|
||||
`Network 5xx: ${networkErrors.map((e) => `${e.status} ${e.url}`).join(', ')}`,
|
||||
).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Route: /my-listings — Dashboard CRUD flow (TEC-3086 — route rename)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('@smoke Dashboard /my-listings — route rename (TEC-3086)', () => {
|
||||
test('redirect đến login khi chưa đăng nhập (không crash 500)', async ({ page }) => {
|
||||
const res = await page.goto('/my-listings');
|
||||
await page.waitForLoadState('domcontentloaded', { timeout: 10_000 });
|
||||
|
||||
const finalUrl = page.url();
|
||||
const isLoginRedirect = finalUrl.includes('/login') || finalUrl.includes('/auth');
|
||||
const is403 = res?.status() === 403;
|
||||
|
||||
expect(
|
||||
isLoginRedirect || is403,
|
||||
`/my-listings phải redirect login hoặc 403. Nhận: ${res?.status()} tại ${finalUrl}`,
|
||||
).toBeTruthy();
|
||||
|
||||
// Không có webpack parallel-pages error hay 500
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error|parallel pages/i }),
|
||||
).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('/my-listings/new redirect đến login khi chưa đăng nhập', async ({ page }) => {
|
||||
await page.goto('/my-listings/new');
|
||||
await page.waitForLoadState('domcontentloaded', { timeout: 10_000 });
|
||||
|
||||
const finalUrl = page.url();
|
||||
const isLoginRedirect = finalUrl.includes('/login') || finalUrl.includes('/auth');
|
||||
expect(isLoginRedirect, `Nhận URL: ${finalUrl}`).toBeTruthy();
|
||||
});
|
||||
|
||||
test('public /listings vẫn hoạt động (không bị ảnh hưởng bởi route rename)', async ({ page }) => {
|
||||
const { consoleErrors } = attachErrorListeners(page);
|
||||
const res = await page.goto('/listings');
|
||||
await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {});
|
||||
|
||||
// Public listings phải trả 200 — không redirect, không 500
|
||||
expect(res?.status(), `Public /listings trả ${res?.status()}`).toBeLessThan(400);
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
|
||||
expect(consoleErrors, `Console errors: ${consoleErrors.join(', ')}`).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Route: /admin — Admin board moderation/KYC (TEC-3062)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('@smoke Admin board — moderation & KYC', () => {
|
||||
test('redirect đến login khi chưa đăng nhập (không crash)', async ({ page }) => {
|
||||
const res = await page.goto('/admin');
|
||||
await page.waitForLoadState('domcontentloaded', { timeout: 10_000 });
|
||||
|
||||
// Admin phải redirect đến login hoặc hiển thị 403 — không được 500
|
||||
const finalUrl = page.url();
|
||||
const isLoginRedirect = finalUrl.includes('/login') || finalUrl.includes('/auth');
|
||||
const is403 = res?.status() === 403;
|
||||
const is404 = res?.status() === 404;
|
||||
|
||||
expect(
|
||||
isLoginRedirect || is403 || is404,
|
||||
`Admin page với unauthenticated user phải redirect hoặc trả 403/404. Nhận: ${res?.status()} tại ${finalUrl}`,
|
||||
).toBeTruthy();
|
||||
|
||||
// Không có 500 error heading
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /500|server error/i }),
|
||||
).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user