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

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 */