admin/goodgo-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): unwrap CacheMetaInterceptor envelope + dev port migration + homepage diacritic

Browse Source 
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
2026-04-22 16:54:44 +07:00
parent 1668c800fe
commit 3a9e44758c
29 changed files with 1418 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.claude/launch.json
View File

@@ -5,13 +5,21 @@
"name": "web",
"runtimeExecutable": "pnpm",
"runtimeArgs": ["--filter", "@goodgo/web", "dev"],
"port": 3000
"port": 3200
},
{
"name": "api",
"runtimeExecutable": "env",
"runtimeArgs": ["NODE_OPTIONS=-r dotenv/config", "DOTENV_CONFIG_PATH=../../.env", "pnpm", "--filter", "@goodgo/api", "dev"],
"port": 3001
"runtimeArgs": [
"NODE_OPTIONS=-r dotenv/config",
"DOTENV_CONFIG_PATH=../../.env",
"PORT=3201",
"pnpm",
"--filter",
"@goodgo/api",
"dev"
],
"port": 3201
},
{
"name": "ai-services",

4
apps/api/src/modules/admin/admin.module.ts
View File

@@ -1,4 +1,4 @@
import { Module } from '@nestjs/common';
import { forwardRef, Module } from '@nestjs/common';
import { CqrsModule } from '@nestjs/cqrs';
import { AuthModule } from '@modules/auth';
import { ListingsModule } from '@modules/listings';
@@ -65,7 +65,7 @@ const QueryHandlers = [
];
@Module({
imports: [CqrsModule, AuthModule, ListingsModule, SubscriptionsModule],
imports: [CqrsModule, AuthModule, forwardRef(() => ListingsModule), SubscriptionsModule],
controllers: [
AdminController,
AdminModerationController,

6
apps/api/src/modules/analytics/analytics.module.ts
View File

@@ -1,4 +1,4 @@
import { Module } from '@nestjs/common';
import { forwardRef, Module } from '@nestjs/common';
import { CqrsModule } from '@nestjs/cqrs';
import { AdminModule } from '@modules/admin';
import { ListingsModule } from '@modules/listings';
@@ -17,6 +17,7 @@ import { GetMarketReportHandler } from './application/queries/get-market-report/
import { GetMarketHistoryHandler } from './application/queries/get-market-history/get-market-history.handler';
import { GetMarketSnapshotHandler } from './application/queries/get-market-snapshot/get-market-snapshot.handler';
import { GetPriceMoversHandler } from './application/queries/get-price-movers/get-price-movers.handler';
import { GetTrendingAreasHandler } from './application/queries/get-trending-areas/get-trending-areas.handler';
import { GetProjectAiAdviceHandler } from './application/queries/get-project-ai-advice/get-project-ai-advice.handler';
import { GetNearbyPOIsHandler } from './application/queries/get-nearby-pois/get-nearby-pois.handler';
import { GetNeighborhoodScoreHandler } from './application/queries/get-neighborhood-score/get-neighborhood-score.handler';
@@ -69,6 +70,7 @@ const QueryHandlers = [
GetProjectAiAdviceHandler,
GetMarketSnapshotHandler,
GetPriceMoversHandler,
GetTrendingAreasHandler,
];
const EventHandlers = [
@@ -76,7 +78,7 @@ const EventHandlers = [
];
@Module({
imports: [CqrsModule, ListingsModule, AdminModule, ProjectsModule],
imports: [CqrsModule, forwardRef(() => ListingsModule), forwardRef(() => AdminModule), ProjectsModule],
controllers: [AnalyticsController, AvmController],
providers: [
// AI service client

119
apps/api/src/modules/analytics/application/__tests__/get-trending-areas.handler.spec.ts Normal file
View File

@@ -0,0 +1,119 @@
import { type CacheService, type LoggerService } from '@modules/shared';
import { GetTrendingAreasHandler } from '../queries/get-trending-areas/get-trending-areas.handler';
import { GetTrendingAreasQuery } from '../queries/get-trending-areas/get-trending-areas.query';
describe('GetTrendingAreasHandler', () => {
let handler: GetTrendingAreasHandler;
let mockPrisma: { $queryRaw: ReturnType<typeof vi.fn>; marketIndex: { findMany: ReturnType<typeof vi.fn> } };
let mockCache: Partial<CacheService>;
let mockLogger: Partial<LoggerService>;
beforeEach(() => {
mockPrisma = {
$queryRaw: vi.fn(),
marketIndex: {
findMany: vi.fn(),
},
};
// Bypass @Cacheable decorator by making CacheService.getOrSet call the loader directly
mockCache = {
getOrSet: vi.fn((_key: string, loader: () => Promise<unknown>) => loader()),
} as unknown as Partial<CacheService>;
mockLogger = { error: vi.fn(), warn: vi.fn(), log: vi.fn() } as unknown as Partial<LoggerService>;
handler = new GetTrendingAreasHandler(
mockPrisma as any,
mockCache as CacheService,
mockLogger as LoggerService,
);
});
it('returns top trending districts sorted by score', async () => {
mockPrisma.$queryRaw.mockResolvedValue([
{ district: 'Quận 1', new_listings: BigInt(10), inquiries: BigInt(50), views: BigInt(200) },
{ district: 'Quận 7', new_listings: BigInt(20), inquiries: BigInt(30), views: BigInt(400) },
{ district: 'Bình Thạnh', new_listings: BigInt(5), inquiries: BigInt(5), views: BigInt(50) },
]);
mockPrisma.marketIndex.findMany.mockResolvedValue([
{ district: 'Quận 1', yoyChange: 0.12 },
{ district: 'Quận 7', yoyChange: 0.05 },
]);
const query = new GetTrendingAreasQuery(7, 10, 'district');
const result = await handler.execute(query);
expect(result.period).toBe(7);
expect(result.level).toBe('district');
expect(result.areas.length).toBe(3);
// Quận 1 score = 50*0.6 + 200*0.3 + 10*0.1 = 30 + 60 + 1 = 91
// Quận 7 score = 30*0.6 + 400*0.3 + 20*0.1 = 18 + 120 + 2 = 140
// Bình Thạnh score = 5*0.6 + 50*0.3 + 5*0.1 = 3 + 15 + 0.5 = 18.5
// Expected order: Quận 7 (1st), Quận 1 (2nd), Bình Thạnh (3rd)
expect(result.areas[0].districtId).toBe('Quận 7');
expect(result.areas[0].scoreRank).toBe(1);
expect(result.areas[1].districtId).toBe('Quận 1');
expect(result.areas[2].districtId).toBe('Bình Thạnh');
});
it('respects the limit parameter', async () => {
mockPrisma.$queryRaw.mockResolvedValue([
{ district: 'A', new_listings: BigInt(1), inquiries: BigInt(10), views: BigInt(100) },
{ district: 'B', new_listings: BigInt(1), inquiries: BigInt(8), views: BigInt(80) },
{ district: 'C', new_listings: BigInt(1), inquiries: BigInt(6), views: BigInt(60) },
]);
mockPrisma.marketIndex.findMany.mockResolvedValue([]);
const query = new GetTrendingAreasQuery(7, 2, 'district');
const result = await handler.execute(query);
expect(result.areas.length).toBe(2);
expect(result.limit).toBe(2);
});
it('returns empty areas when no active listings in window', async () => {
mockPrisma.$queryRaw.mockResolvedValue([]);
mockPrisma.marketIndex.findMany.mockResolvedValue([]);
const query = new GetTrendingAreasQuery(7, 10, 'district');
const result = await handler.execute(query);
expect(result.areas).toEqual([]);
expect(mockPrisma.marketIndex.findMany).not.toHaveBeenCalled();
});
it('attaches yoyChange from market index as priceChangePct', async () => {
mockPrisma.$queryRaw.mockResolvedValue([
{ district: 'Quận 1', new_listings: BigInt(5), inquiries: BigInt(20), views: BigInt(100) },
]);
mockPrisma.marketIndex.findMany.mockResolvedValue([
{ district: 'Quận 1', yoyChange: 0.08 },
]);
const query = new GetTrendingAreasQuery(14, 10, 'district');
const result = await handler.execute(query);
expect(result.areas[0].priceChangePct).toBe(0.08);
});
it('sets priceChangePct to null when market index data is missing', async () => {
mockPrisma.$queryRaw.mockResolvedValue([
{ district: 'Huyện Củ Chi', new_listings: BigInt(3), inquiries: BigInt(5), views: BigInt(40) },
]);
mockPrisma.marketIndex.findMany.mockResolvedValue([]);
const query = new GetTrendingAreasQuery(7, 10, 'district');
const result = await handler.execute(query);
expect(result.areas[0].priceChangePct).toBeNull();
});
it('throws InternalServerErrorException on unexpected errors', async () => {
mockPrisma.$queryRaw.mockRejectedValue(new Error('DB connection lost'));
const query = new GetTrendingAreasQuery(7, 10, 'district');
await expect(handler.execute(query)).rejects.toThrow(
'Không thể truy vấn khu vực xu hướng. Vui lòng thử lại sau.',
);
});
});

3
apps/api/src/modules/analytics/application/event-handlers/listing-created-moderation.handler.ts
View File

@@ -1,6 +1,7 @@
import { Inject } from '@nestjs/common';
import { EventsHandler, type IEventHandler, CommandBus } from '@nestjs/cqrs';
import { ListingCreatedEvent, ModerateListingCommand } from '@modules/listings';
import { ListingCreatedEvent } from '@modules/listings/domain/events/listing-created.event';
import { ModerateListingCommand } from '@modules/listings/application/commands/moderate-listing/moderate-listing.command';
import { PrismaService, LoggerService } from '@modules/shared';
import {
AI_SERVICE_CLIENT,

4
apps/api/src/modules/analytics/application/queries/get-listing-ai-advice/get-listing-ai-advice.handler.ts
View File

@@ -1,11 +1,11 @@
import { HttpStatus, Inject } from '@nestjs/common';
import { QueryBus, QueryHandler, type IQueryHandler } from '@nestjs/cqrs';
import { DomainException, ErrorCode, LoggerService } from '@modules/shared';
import { SystemSettingsService } from '@modules/admin';
import { SystemSettingsService } from '@modules/admin/application/services/system-settings.service';
import {
LISTING_REPOSITORY,
type IListingRepository,
} from '@modules/listings';
} from '@modules/listings/domain/repositories/listing.repository';
import { type ListingDetailData } from '../../../../listings/domain/repositories/listing-read.dto';
import {
type NearbyPOIDto,

8
apps/api/src/modules/analytics/application/queries/get-price-movers/get-price-movers.handler.ts
View File

@@ -64,26 +64,26 @@ export class GetPriceMoversHandler implements IQueryHandler<GetPriceMoversQuery>
WITH current_window AS (
SELECT
p.district,
AVG(l.price) AS avg_price,
AVG(l."priceVND") AS avg_price,
COUNT(l.id) AS sample_size
FROM "Listing" l
INNER JOIN "Property" p ON p.id = l."propertyId"
WHERE l."createdAt" >= ${currentStart}
AND l.status = 'ACTIVE'
AND l.price > 0
AND l."priceVND" > 0
GROUP BY p.district
HAVING COUNT(l.id) >= 10
),
previous_window AS (
SELECT
p.district,
AVG(l.price) AS avg_price
AVG(l."priceVND") AS avg_price
FROM "Listing" l
INNER JOIN "Property" p ON p.id = l."propertyId"
WHERE l."createdAt" >= ${previousStart}
AND l."createdAt" < ${currentStart}
AND l.status = 'ACTIVE'
AND l.price > 0
AND l."priceVND" > 0
GROUP BY p.district
)
SELECT

2
apps/api/src/modules/analytics/application/queries/get-project-ai-advice/get-project-ai-advice.handler.ts
View File

@@ -1,7 +1,7 @@
import { HttpStatus, Inject } from '@nestjs/common';
import { QueryBus, QueryHandler, type IQueryHandler } from '@nestjs/cqrs';
import { DomainException, ErrorCode, LoggerService } from '@modules/shared';
import { SystemSettingsService } from '@modules/admin';
import { SystemSettingsService } from '@modules/admin/application/services/system-settings.service';
import {
PROJECT_REPOSITORY,
type IProjectRepository,

125
apps/api/src/modules/analytics/application/queries/get-trending-areas/get-trending-areas.handler.ts Normal file
View File

@@ -0,0 +1,125 @@
import { Inject, InternalServerErrorException } from '@nestjs/common';
import { QueryHandler, type IQueryHandler } from '@nestjs/cqrs';
import { DomainException, CacheService, CachePrefix, CacheTTL, Cacheable, LoggerService, PrismaService } from '@modules/shared';
import { GetTrendingAreasQuery } from './get-trending-areas.query';
export interface TrendingAreaItem {
districtId: string;
name: string;
listings: number;
inquiries: number;
views: number;
priceChangePct: number | null;
scoreRank: number;
}
export interface TrendingAreasDto {
period: number;
level: string;
limit: number;
areas: TrendingAreaItem[];
}
interface RawDistrictRow {
district: string;
new_listings: bigint;
inquiries: bigint;
views: bigint;
}
@QueryHandler(GetTrendingAreasQuery)
export class GetTrendingAreasHandler implements IQueryHandler<GetTrendingAreasQuery> {
constructor(
private readonly prisma: PrismaService,
private readonly cacheService: CacheService,
private readonly logger: LoggerService,
) {}
@Cacheable({
prefix: CachePrefix.TRENDING_AREAS,
ttl: CacheTTL.TRENDING_AREAS,
resource: 'trending_areas',
keyFrom: (query: unknown) => {
const q = query as GetTrendingAreasQuery;
return [String(q.period), String(q.limit), q.level];
},
})
async execute(query: GetTrendingAreasQuery): Promise<TrendingAreasDto> {
const { period, limit, level } = query;
try {
const since = new Date(Date.now() - period * 24 * 60 * 60 * 1000);
// Aggregate new listings, inquiries, and views per district within the time window.
// Listing.viewCount is a running total so we use it as a proxy for views.
// Inquiry has createdAt that we can filter on.
// New listings = listings created within the window.
const rows = await this.prisma.$queryRaw<RawDistrictRow[]>`
SELECT
p.district,
COUNT(DISTINCT l.id) AS new_listings,
COUNT(DISTINCT i.id) AS inquiries,
COALESCE(SUM(l."viewCount"), 0) AS views
FROM "Listing" l
INNER JOIN "Property" p ON p.id = l."propertyId"
LEFT JOIN "Inquiry" i ON i."listingId" = l.id AND i."createdAt" >= ${since}
WHERE l."createdAt" >= ${since}
AND l.status = 'ACTIVE'
GROUP BY p.district
`;
// Compute score for each district
const scored = rows.map((r) => {
const listings = Number(r.new_listings);
const inquiries = Number(r.inquiries);
const views = Number(r.views);
const score = inquiries * 0.6 + views * 0.3 + listings * 0.1;
return { district: r.district, listings, inquiries, views, score };
});
// Sort descending by score, take top `limit`
scored.sort((a, b) => b.score - a.score);
const top = scored.slice(0, limit);
// Fetch price change (yoyChange) from MarketIndex for these districts
const districts = top.map((r) => r.district);
const marketIndexes = districts.length > 0
? await this.prisma.marketIndex.findMany({
where: { district: { in: districts } },
orderBy: { createdAt: 'desc' },
select: { district: true, yoyChange: true },
})
: [];
// Build a map district → most recent yoyChange
const priceMap = new Map<string, number | null>();
for (const mi of marketIndexes) {
if (!priceMap.has(mi.district)) {
priceMap.set(mi.district, mi.yoyChange);
}
}
const areas: TrendingAreaItem[] = top.map((r, idx) => ({
districtId: r.district,
name: r.district,
listings: r.listings,
inquiries: r.inquiries,
views: r.views,
priceChangePct: priceMap.get(r.district) ?? null,
scoreRank: idx + 1,
}));
return { period, level, limit, areas };
} catch (error) {
if (error instanceof DomainException) throw error;
this.logger.error(
`Failed to truy vấn trending areas: ${error instanceof Error ? error.message : error}`,
error instanceof Error ? error.stack : undefined,
this.constructor.name,
);
throw new InternalServerErrorException(
'Không thể truy vấn khu vực xu hướng. Vui lòng thử lại sau.',
);
}
}
}

10
apps/api/src/modules/analytics/application/queries/get-trending-areas/get-trending-areas.query.ts Normal file
View File

@@ -0,0 +1,10 @@
export class GetTrendingAreasQuery {
constructor(
/** Number of days to look back, e.g. 7 | 14 | 30 */
public readonly period: number,
/** Maximum number of results to return */
public readonly limit: number,
/** Geographic level of aggregation — currently only 'district' is supported */
public readonly level: 'district',
) {}
}

16
apps/api/src/modules/analytics/presentation/controllers/analytics.controller.ts
View File

@@ -38,6 +38,8 @@ import { type MarketSnapshotDto } from '../../application/queries/get-market-sna
import { GetMarketSnapshotQuery } from '../../application/queries/get-market-snapshot/get-market-snapshot.query';
import { type PriceMoversDto } from '../../application/queries/get-price-movers/get-price-movers.handler';
import { GetPriceMoversQuery } from '../../application/queries/get-price-movers/get-price-movers.query';
import { type TrendingAreasDto } from '../../application/queries/get-trending-areas/get-trending-areas.handler';
import { GetTrendingAreasQuery } from '../../application/queries/get-trending-areas/get-trending-areas.query';
import { type NearbyPOIsResultDto } from '../../application/queries/get-nearby-pois/get-nearby-pois.handler';
import { GetNearbyPOIsQuery } from '../../application/queries/get-nearby-pois/get-nearby-pois.query';
import { GetNeighborhoodScoreQuery } from '../../application/queries/get-neighborhood-score/get-neighborhood-score.query';
@@ -60,6 +62,7 @@ import { GetMarketReportDto } from '../dto/get-market-report.dto';
import { GetMarketHistoryDto } from '../dto/get-market-history.dto';
import { GetMarketSnapshotDto } from '../dto/get-market-snapshot.dto';
import { GetPriceMoversDto } from '../dto/get-price-movers.dto';
import { GetTrendingAreasDto } from '../dto/get-trending-areas.dto';
import { GetNearbyPOIsDto } from '../dto/get-nearby-pois.dto';
import { GetPriceTrendDto } from '../dto/get-price-trend.dto';
import { GetValuationDto } from '../dto/get-valuation.dto';
@@ -356,6 +359,19 @@ export class AnalyticsController {
);
}
@ApiOperation({
summary: 'Top khu vực đang trending (public)',
description:
'Trả về danh sách quận trending theo lượng tin đăng/inquiries/views trong khoảng nhìn lại. Public endpoint cho homepage. Cache.',
})
@ApiResponse({ status: 200, description: 'Trending areas retrieved' })
@Get('trending-areas')
async getTrendingAreas(@Query() dto: GetTrendingAreasDto): Promise<TrendingAreasDto> {
return this.queryBus.execute(
new GetTrendingAreasQuery(dto.period, dto.limit, dto.level),
);
}
@ApiBearerAuth('JWT')
@UseGuards(JwtAuthGuard)
@Post('listings/:id/ai-advice')

41
apps/api/src/modules/analytics/presentation/dto/get-trending-areas.dto.ts Normal file
View File

@@ -0,0 +1,41 @@
import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
import { Type } from 'class-transformer';
import { IsIn, IsInt, IsOptional, Max, Min } from 'class-validator';
export class GetTrendingAreasDto {
@ApiPropertyOptional({
description: 'Look-back window in days',
enum: [7, 14, 30],
default: 7,
example: 7,
})
@IsOptional()
@Type(() => Number)
@IsInt()
@IsIn([7, 14, 30])
period: number = 7;
@ApiPropertyOptional({
description: 'Maximum number of trending areas to return',
minimum: 1,
maximum: 50,
default: 10,
example: 10,
})
@IsOptional()
@Type(() => Number)
@IsInt()
@Min(1)
@Max(50)
limit: number = 10;
@ApiProperty({
description: 'Geographic aggregation level (currently only "district" is supported)',
enum: ['district'],
default: 'district',
example: 'district',
})
@IsOptional()
@IsIn(['district'])
level: 'district' = 'district';
}

4
apps/api/src/modules/listings/listings.module.ts
View File

@@ -1,4 +1,4 @@
import { Module } from '@nestjs/common';
import { forwardRef, Module } from '@nestjs/common';
import { CqrsModule } from '@nestjs/cqrs';
import { MulterModule } from '@nestjs/platform-express';
import { AnalyticsModule } from '@modules/analytics';
@@ -64,7 +64,7 @@ const EventHandlers = [
@Module({
imports: [
CqrsModule,
AnalyticsModule,
forwardRef(() => AnalyticsModule),
MulterModule.register({
limits: { fileSize: 100 * 1024 * 1024 }, // 100 MB — per-type limits enforced by FileValidationPipe
}),

2
apps/api/src/modules/notifications/presentation/controllers/notifications.controller.ts
View File

@@ -87,7 +87,7 @@ export class NotificationsController {
@ApiResponse({ status: 200, description: 'Unread count retrieved' })
@ApiResponse({ status: 401, description: 'Unauthorized' })
async getUnreadCount(@CurrentUser() user: JwtPayload) {
const count = await this.notificationRepo.countUnreadByUserId(user.sub);
const count = await this.notificationsGateway.getUnreadCount(user.sub);
return { unreadCount: count };
}

5
apps/api/src/modules/notifications/presentation/gateways/notifications.gateway.ts
View File

@@ -269,8 +269,11 @@ export class NotificationsGateway
/**
* Read the unread count from Redis (cache-aside pattern).
* Falls back to the database when Redis is unavailable or cache misses.
*
* Public so REST callers (e.g. `GET /notifications/unread-count`) can
* share the same cached counter as the WebSocket fan-out.
*/
private async getUnreadCount(userId: string): Promise<number> {
async getUnreadCount(userId: string): Promise<number> {
if (this.redisService.isAvailable()) {
try {
const cached = await this.redisService.get(UNREAD_COUNT_KEY(userId));

3
apps/web/app/[locale]/(auth)/__tests__/login.spec.tsx
View File

@@ -53,6 +53,7 @@ vi.mock('@/lib/auth-store', () => {
const store = {
user: null,
isAuthenticated: false,
isInitialized: false,
isLoading: false,
error: null,
login: vi.fn(),
@@ -80,6 +81,7 @@ describe('LoginPage', () => {
let mockStore: {
user: null;
isAuthenticated: boolean;
isInitialized: boolean;
isLoading: boolean;
error: string | null;
login: ReturnType<typeof vi.fn>;
@@ -97,6 +99,7 @@ describe('LoginPage', () => {
mockStore = {
user: null,
isAuthenticated: false,
isInitialized: false,
isLoading: false,
error: null,
login: vi.fn(),

3
apps/web/app/[locale]/(auth)/__tests__/register.spec.tsx
View File

@@ -48,6 +48,7 @@ vi.mock('@/lib/auth-store', () => {
const store = {
user: null,
isAuthenticated: false,
isInitialized: false,
isLoading: false,
error: null,
login: vi.fn(),
@@ -75,6 +76,7 @@ describe('RegisterPage', () => {
let mockStore: {
user: null;
isAuthenticated: boolean;
isInitialized: boolean;
isLoading: boolean;
error: string | null;
login: ReturnType<typeof vi.fn>;
@@ -92,6 +94,7 @@ describe('RegisterPage', () => {
mockStore = {
user: null,
isAuthenticated: false,
isInitialized: false,
isLoading: false,
error: null,
login: vi.fn(),

82
apps/web/app/[locale]/(public)/listings/__tests__/listings.spec.tsx
View File

@@ -1,6 +1,8 @@
/* eslint-disable import-x/order */
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import * as React from 'react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import type { ListingDetail } from '@/lib/listings-api';
@@ -9,6 +11,7 @@ import type { ListingDetail } from '@/lib/listings-api';
const mockPush = vi.fn();
vi.mock('next/navigation', () => ({
useRouter: () => ({ push: mockPush }),
usePathname: () => '/vi/listings',
useSearchParams: () => new URLSearchParams(),
}));
@@ -133,6 +136,15 @@ import ListingsPage from '../page';
const mockedApi = vi.mocked(listingsApi);
function renderWithProviders(ui: React.ReactElement) {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
});
return render(
<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
);
}
// ─── Tests ────────────────────────────────────────────────────────────────────
describe('ListingsPage — ticker table', () => {
@@ -144,14 +156,14 @@ describe('ListingsPage — ticker table', () => {
// ── Render cơ bản ──────────────────────────────────────────────────────────
it('hiển thị tiêu đề trang', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
expect(screen.getByText('Thị Trường BĐS')).toBeInTheDocument();
});
});
it('gọi API với status=ACTIVE khi mount', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
expect(mockedApi.search).toHaveBeenCalledWith(
expect.objectContaining({ status: 'ACTIVE' }),
@@ -160,24 +172,22 @@ describe('ListingsPage — ticker table', () => {
});
it('hiển thị header cột bảng đúng', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
const table = screen.getByRole('table');
const headers = table.querySelectorAll('thead th');
const headerTexts = Array.from(headers).map((h) => h.textContent?.trim());
expect(headerTexts).toContain('#');
expect(headerTexts).toContain('Mã');
expect(headerTexts).toContain('Quận');
expect(headerTexts).toContain('Loại');
expect(headerTexts).toContain('Quận/Phường');
expect(headerTexts).toContain('Giá');
expect(headerTexts).toContain('Δ30d');
expect(headerTexts).toContain('DT m²');
expect(headerTexts).toContain('KL/Views');
});
});
it('hiển thị dấu — cho cột Δ30d (chưa có dữ liệu API)', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
// Tất cả 3 rows phải hiển thị "—" vì API chưa có field priceDelta30d.
const dashes = screen.getAllByText('—');
@@ -186,7 +196,7 @@ describe('ListingsPage — ticker table', () => {
});
it('hiển thị mã tin dạng GG-XXXXX', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
expect(screen.getByText('GG-AAAAA')).toBeInTheDocument();
expect(screen.getByText('GG-BBBBB')).toBeInTheDocument();
@@ -195,7 +205,7 @@ describe('ListingsPage — ticker table', () => {
});
it('hiển thị số lượng kết quả khi load xong', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
expect(screen.getByText(/3 bất động sản đang niêm yết/)).toBeInTheDocument();
});
@@ -203,7 +213,7 @@ describe('ListingsPage — ticker table', () => {
it('hiển thị thông báo lỗi khi API thất bại', async () => {
mockedApi.search.mockRejectedValue(new Error('Network error'));
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
expect(screen.getByText(/Không thể tải danh sách/)).toBeInTheDocument();
});
@@ -212,7 +222,7 @@ describe('ListingsPage — ticker table', () => {
// ── Sort ───────────────────────────────────────────────────────────────────
it('bảng hiển thị đúng 3 rows dữ liệu', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
const rows = screen.getAllByRole('row');
// 1 header row + 3 data rows
@@ -220,17 +230,19 @@ describe('ListingsPage — ticker table', () => {
});
});
it('sort desc theo Giá mặc định — listing đắt nhất (ccccc-dear) đứng đầu', async () => {
render(<ListingsPage />);
it('sort desc theo Ngày đăng mặc định — rows hiển thị theo thứ tự API', async () => {
renderWithProviders(<ListingsPage />);
await waitFor(() => {
const rows = screen.getAllByRole('row');
// row[0] = header, row[1] = first data row
expect(rows[1]?.textContent).toContain('GG-CCCCC');
// 1 header + 3 data rows
expect(rows.length).toBe(4);
// All 3 listings should be visible
expect(rows[1]?.textContent).toContain('GG-AAAAA');
});
});
it('toggle sort Giá: click header Giá để đổi chiều sort', async () => {
render(<ListingsPage />);
it('toggle sort Giá: click header Giá 2 lần để đổi chiều sort', async () => {
renderWithProviders(<ListingsPage />);
const user = userEvent.setup();
await waitFor(() => {
@@ -239,25 +251,25 @@ describe('ListingsPage — ticker table', () => {
const table = screen.getByRole('table');
const giaHeader = Array.from(table.querySelectorAll('thead th')).find(
(th) => th.textContent?.trim().includes('Giá'),
(th) => th.textContent?.trim() === 'Giá',
) as HTMLElement;
expect(giaHeader).toBeTruthy();
// Click một lần (asc) — listing rẻ nhất phải lên đầu
// Click một lần (desc đầu tiên) — listing đắt nhất phải lên đầu
await user.click(giaHeader);
let rows = screen.getAllByRole('row').slice(1);
expect(rows.length).toBe(3);
expect(rows[0]?.textContent).toContain('GG-AAAAA');
expect(rows[0]?.textContent).toContain('GG-CCCCC');
// Click lần hai (desc trở lại) — listing đắt nhất lên đầu
// Click lần hai (asc) — listing rẻ nhất lên đầu
await user.click(giaHeader);
rows = screen.getAllByRole('row').slice(1);
expect(rows[0]?.textContent).toContain('GG-CCCCC');
expect(rows[0]?.textContent).toContain('GG-AAAAA');
});
it('sort theo DT m² khi click header đó', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
const user = userEvent.setup();
await waitFor(() => {
@@ -278,14 +290,14 @@ describe('ListingsPage — ticker table', () => {
// ── Toggle view ────────────────────────────────────────────────────────────
it('hiển thị bảng mặc định (table mode)', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
await waitFor(() => {
expect(screen.getByRole('table')).toBeInTheDocument();
});
});
it('chuyển sang card mode khi click nút Chế độ thẻ', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
const user = userEvent.setup();
await waitFor(() => {
@@ -299,7 +311,7 @@ describe('ListingsPage — ticker table', () => {
});
it('quay lại table mode khi click nút Chế độ bảng', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
const user = userEvent.setup();
await waitFor(() => {
@@ -316,7 +328,7 @@ describe('ListingsPage — ticker table', () => {
});
it('nút toggle giữ aria-pressed đúng trạng thái', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
const user = userEvent.setup();
await waitFor(() => {
@@ -336,12 +348,12 @@ describe('ListingsPage — ticker table', () => {
// ── Filter ─────────────────────────────────────────────────────────────────
it('hiển thị filter bar với 4 select', async () => {
render(<ListingsPage />);
it('hiển thị filter bar với các select', async () => {
renderWithProviders(<ListingsPage />);
await waitFor(() => {
expect(screen.getByRole('combobox', { name: /loại giao dịch/i })).toBeInTheDocument();
expect(screen.getByRole('combobox', { name: /loại bất động sản/i })).toBeInTheDocument();
expect(screen.getByRole('combobox', { name: /quận/i })).toBeInTheDocument();
expect(screen.getByRole('combobox', { name: /loại bđs/i })).toBeInTheDocument();
expect(screen.getByRole('combobox', { name: /quận\/huyện/i })).toBeInTheDocument();
expect(screen.getByRole('combobox', { name: /khoảng giá/i })).toBeInTheDocument();
});
});
@@ -349,16 +361,18 @@ describe('ListingsPage — ticker table', () => {
// ── Navigation ─────────────────────────────────────────────────────────────
it('điều hướng đến trang chi tiết khi click row', async () => {
render(<ListingsPage />);
renderWithProviders(<ListingsPage />);
const user = userEvent.setup();
await waitFor(() => {
expect(screen.getAllByRole('row').length).toBeGreaterThan(1);
expect(screen.getAllByRole('row').length).toBe(4);
});
const dataRows = screen.getAllByRole('row').slice(1) as HTMLElement[];
await user.click(dataRows[0]!);
expect(mockPush).toHaveBeenCalledWith(expect.stringContaining('/listings/'));
await waitFor(() => {
expect(mockPush).toHaveBeenCalledWith(expect.stringContaining('/listings/'));
});
});
});

1
apps/web/app/[locale]/(public)/listings/page.tsx
View File

@@ -305,6 +305,7 @@ function FilterSelect({
{label}
</label>
<select
aria-label={label}
value={value}
onChange={(e) => onChange(e.target.value)}
className="w-full rounded-md border border-border bg-background-surface px-2.5 py-1.5 text-[13px] text-foreground focus:outline-none focus:ring-1 focus:ring-primary"

5
apps/web/app/[locale]/(public)/page.tsx
View File

@@ -425,7 +425,10 @@ function RecentListings() {
/* ------------------------------------------------------------------ */
export default function MarketDashboardPage() {
const city = 'Ho Chi Minh';
// DB stores city names with Vietnamese diacritics (e.g. "Hồ Chí Minh"),
// and SQL filters are case-insensitive but NOT diacritic-insensitive — so
// passing the unaccented "Ho Chi Minh" returns 0 listings.
const city = 'Hồ Chí Minh';
const period = currentPeriod();
/* District table data */

BIN
apps/web/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 B

80
apps/web/lib/analytics-api.ts
View File

@@ -1,5 +1,23 @@
import { apiClient } from './api-client';
/**
* Backend `/analytics/*` endpoints are wrapped by `CacheMetaInterceptor`,
* returning `{ data: T, cacheMeta: {...} }`. This helper unwraps so callers
* receive plain `T` (the cacheMeta field is currently unused on the client).
*/
interface CacheMetaEnvelope<T> {
data: T;
cacheMeta: { cachedAt: string | null; nextRefreshAt: string | null; source: string };
}
async function unwrap<T>(p: Promise<CacheMetaEnvelope<T> | T>): Promise<T> {
const raw = await p;
if (raw && typeof raw === 'object' && 'data' in raw && 'cacheMeta' in raw) {
return (raw as CacheMetaEnvelope<T>).data;
}
return raw as T;
}
export interface MarketReportDistrict {
district: string;
city: string;
@@ -201,51 +219,89 @@ export interface TrendingAreasResponse {
}
export const analyticsApi = {
// All /analytics/* endpoints are wrapped by the backend CacheMetaInterceptor.
// We unwrap the `{ data, cacheMeta }` envelope so callers get the plain DTO.
getMarketReport: (city: string, period: string, propertyType?: string) => {
const params = new URLSearchParams({ city, period });
if (propertyType) params.set('propertyType', propertyType);
return apiClient.get<MarketReportResponse>(`/analytics/market-report?${params}`);
return unwrap<MarketReportResponse>(
apiClient.get<CacheMetaEnvelope<MarketReportResponse>>(
`/analytics/market-report?${params}`,
),
);
},
getHeatmap: (city: string, period: string) => {
const params = new URLSearchParams({ city, period });
return apiClient.get<HeatmapResponse>(`/analytics/heatmap?${params}`);
return unwrap<HeatmapResponse>(
apiClient.get<CacheMetaEnvelope<HeatmapResponse>>(`/analytics/heatmap?${params}`),
);
},
getPriceTrend: (district: string, city: string, propertyType: string, periods: string[]) => {
const params = new URLSearchParams({ district, city, propertyType, periods: periods.join(',') });
return apiClient.get<PriceTrendResponse>(`/analytics/price-trend?${params}`);
return unwrap<PriceTrendResponse>(
apiClient.get<CacheMetaEnvelope<PriceTrendResponse>>(
`/analytics/price-trend?${params}`,
),
);
},
getDistrictStats: (city: string, period: string) => {
const params = new URLSearchParams({ city, period });
return apiClient.get<DistrictStatsResponse>(`/analytics/district-stats?${params}`);
return unwrap<DistrictStatsResponse>(
apiClient.get<CacheMetaEnvelope<DistrictStatsResponse>>(
`/analytics/district-stats?${params}`,
),
);
},
getNearbyPOIs: (lat: number, lng: number, radius = 2000, limit = 30) =>
apiClient.get<NearbyPOIsResponse>(
`/analytics/pois/nearby?lat=${lat}&lng=${lng}&radius=${radius}&limit=${limit}`,
unwrap<NearbyPOIsResponse>(
apiClient.get<CacheMetaEnvelope<NearbyPOIsResponse>>(
`/analytics/pois/nearby?lat=${lat}&lng=${lng}&radius=${radius}&limit=${limit}`,
),
),
getListingAiAdvice: (listingId: string) =>
apiClient.post<ListingAiAdvice>(`/analytics/listings/${listingId}/ai-advice`),
unwrap<ListingAiAdvice>(
apiClient.post<CacheMetaEnvelope<ListingAiAdvice>>(
`/analytics/listings/${listingId}/ai-advice`,
),
),
getProjectAiAdvice: (projectId: string) =>
apiClient.post<ProjectAiAdvice>(`/analytics/projects/${projectId}/ai-advice`),
unwrap<ProjectAiAdvice>(
apiClient.post<CacheMetaEnvelope<ProjectAiAdvice>>(
`/analytics/projects/${projectId}/ai-advice`,
),
),
getMarketSnapshot: (city: string, propertyType?: string) => {
const params = new URLSearchParams({ city });
if (propertyType) params.set('propertyType', propertyType);
return apiClient.get<MarketSnapshotResponse>(`/analytics/market-snapshot?${params}`);
return unwrap<MarketSnapshotResponse>(
apiClient.get<CacheMetaEnvelope<MarketSnapshotResponse>>(
`/analytics/market-snapshot?${params}`,
),
);
},
getPriceMovers: (direction: 'up' | 'down', period = '7d', limit = 5) => {
const params = new URLSearchParams({ direction, period, limit: String(limit) });
return apiClient.get<PriceMoversResponse>(`/analytics/price-movers?${params}`);
return unwrap<PriceMoversResponse>(
apiClient.get<CacheMetaEnvelope<PriceMoversResponse>>(
`/analytics/price-movers?${params}`,
),
);
},
getTrendingAreas: (period = 7, limit = 10) => {
const params = new URLSearchParams({ period: `${period}d`, limit: String(limit) });
return apiClient.get<TrendingAreasResponse>(`/analytics/trending-areas?${params}`);
const params = new URLSearchParams({ period: String(period), limit: String(limit) });
return unwrap<TrendingAreasResponse>(
apiClient.get<CacheMetaEnvelope<TrendingAreasResponse>>(
`/analytics/trending-areas?${params}`,
),
);
},
};

29
apps/web/lib/hooks/use-analytics.ts
View File

@@ -1,5 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import { analyticsApi } from '@/lib/analytics-api';
import { useAuthStore } from '@/lib/auth-store';
export const analyticsKeys = {
all: ['analytics'] as const,
@@ -19,24 +20,43 @@ export const analyticsKeys = {
['analytics', 'trending-areas', period] as const,
};
/**
* Analytics endpoints require authentication on the backend. Guard React Query
* hooks with `isAuthenticated` so unauthenticated visitors on public routes
* (e.g. homepage) do not fire requests that return 401 and spam the console.
*/
function useAuthedAnalytics() {
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
const isInitialized = useAuthStore((s) => s.isInitialized);
// Only enable queries once auth state has initialized to avoid a spurious
// disabled → enabled transition on first paint.
return isInitialized && isAuthenticated;
}
export function useMarketReport(city: string, period: string) {
const enabled = useAuthedAnalytics();
return useQuery({
queryKey: analyticsKeys.marketReport(city, period),
queryFn: () => analyticsApi.getMarketReport(city, period),
enabled,
});
}
export function useHeatmap(city: string, period: string) {
const enabled = useAuthedAnalytics();
return useQuery({
queryKey: analyticsKeys.heatmap(city, period),
queryFn: () => analyticsApi.getHeatmap(city, period),
enabled,
});
}
export function useDistrictStats(city: string, period: string) {
const enabled = useAuthedAnalytics();
return useQuery({
queryKey: analyticsKeys.districtStats(city, period),
queryFn: () => analyticsApi.getDistrictStats(city, period),
enabled,
});
}
@@ -46,31 +66,38 @@ export function usePriceTrend(
propertyType: string,
periods: string[],
) {
const authed = useAuthedAnalytics();
return useQuery({
queryKey: analyticsKeys.priceTrend(district, city, propertyType, periods),
queryFn: () => analyticsApi.getPriceTrend(district, city, propertyType, periods),
enabled: !!district && !!city,
enabled: authed && !!district && !!city,
});
}
export function useMarketSnapshot(city: string) {
const enabled = useAuthedAnalytics();
return useQuery({
queryKey: analyticsKeys.marketSnapshot(city),
queryFn: () => analyticsApi.getMarketSnapshot(city),
refetchInterval: 5 * 60 * 1000,
enabled,
});
}
export function usePriceMovers(direction: 'up' | 'down', period = '7d', limit = 5) {
const enabled = useAuthedAnalytics();
return useQuery({
queryKey: analyticsKeys.priceMovers(direction, period),
queryFn: () => analyticsApi.getPriceMovers(direction, period, limit),
enabled,
});
}
export function useTrendingAreas(period = 7, limit = 10) {
const enabled = useAuthedAnalytics();
return useQuery({
queryKey: analyticsKeys.trendingAreas(period),
queryFn: () => analyticsApi.getTrendingAreas(period, limit),
enabled,
});
}

2
apps/web/next.config.js
View File

@@ -43,7 +43,7 @@ const nextConfig = {
"style-src 'self' 'unsafe-inline' https://api.mapbox.com",
"img-src 'self' data: blob: https://*.mapbox.com https://*.tiles.mapbox.com https:",
"font-src 'self' data:",
`connect-src 'self' https://*.mapbox.com https://api.mapbox.com https://events.mapbox.com https://api.goodgo.vn${process.env.NODE_ENV !== 'production' ? ' http://localhost:3001 http://localhost:3011 http://localhost:9000 ws://localhost:3001 ws://localhost:3011' : ''}`,
`connect-src 'self' https://*.mapbox.com https://api.mapbox.com https://events.mapbox.com https://api.goodgo.vn${process.env.NODE_ENV !== 'production' ? ' http://localhost:3001 http://localhost:3011 http://localhost:3200 http://localhost:3201 http://localhost:9000 ws://localhost:3001 ws://localhost:3011 ws://localhost:3200 ws://localhost:3201' : ''}`,
"worker-src 'self' blob:",
"child-src 'self' blob:",
"frame-ancestors 'none'",

2
apps/web/package.json
View File

@@ -3,7 +3,7 @@
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev --port 3000",
"dev": "next dev --port 3200",
"build": "next build",
"start": "next start",
"lint": "eslint src/ app/ components/ lib/ hooks/ i18n/ --no-error-on-unmatched-pattern",

188
e2e/web/agents.spec.ts Normal file
View 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
View 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
View 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();
});
});

34
playwright.qa.config.ts Normal file
View File

@@ -0,0 +1,34 @@
/**
* Playwright config for QA trading-floor tests against existing dev servers.
* Used by TEC-3040 — runs against apps/api :3001 and apps/web :3000 (already running).
* No webServer startup — assumes both servers are up with dev DB.
*/
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './e2e',
fullyParallel: false,
forbidOnly: false,
retries: 1,
workers: 1,
reporter: [
['html', { open: 'never', outputFolder: 'playwright-report-qa' }],
['list'],
],
use: {
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
},
projects: [
{
name: 'web',
testDir: './e2e/web',
use: {
...devices['Desktop Chrome'],
baseURL: 'http://localhost:3000',
},
},
],
// No webServer — relies on existing running servers
});