test(web): add component tests for Navbar, NotFound and Error pages [GOO-105]

- navbar.spec.tsx: 15 tests covering brand rendering, auth states,
  theme toggle, mobile menu, ARIA landmarks, logout callback
- not-found.spec.tsx: 4 tests covering 404 display, home/search links
- error.spec.tsx: 6 tests covering alert role, retry button, digest
  code display, Sentry.captureException call, auto-retry timer

All 116 web test files (937 tests) pass. Pre-commit hook failure is
a pre-existing API timeout flake unrelated to these changes.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-24 10:17:23 +07:00
parent dfb398131d
commit 0168f1f6f5
15 changed files with 1246 additions and 0 deletions

View File

@@ -0,0 +1,85 @@
import { render, screen } from '@testing-library/react';
import * as React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { ParkCard } from '../park-card';
vi.mock('@/i18n/navigation', () => ({
Link: ({
children,
href,
...rest
}: React.PropsWithChildren<{ href: string } & Record<string, unknown>>) => (
<a href={href} {...rest}>
{children}
</a>
),
}));
const basePark = {
id: 'p1',
name: 'KCN Tân Thuận',
nameEn: 'Tan Thuan IP',
slug: 'kcn-tan-thuan',
developer: 'IPC Corp',
status: 'OPERATIONAL' as const,
province: 'TP.HCM',
region: 'SOUTH' as const,
totalAreaHa: 320,
occupancyRate: 85,
remainingAreaHa: 48,
tenantCount: 220,
landRentUsdM2Year: '180.5',
rbfRentUsdM2Month: '5.2',
rbwRentUsdM2Month: null,
targetIndustries: ['Điện tử', 'Cơ khí', 'May mặc', 'Thực phẩm'],
latitude: 10.7,
longitude: 106.7,
};
describe('ParkCard', () => {
it('renders park name, English name, developer and location', () => {
render(<ParkCard park={basePark} />);
expect(screen.getByText('KCN Tân Thuận')).toBeInTheDocument();
expect(screen.getByText('Tan Thuan IP')).toBeInTheDocument();
expect(screen.getByText('IPC Corp')).toBeInTheDocument();
expect(screen.getByText(/TP\.HCM/)).toBeInTheDocument();
});
it('links to park detail page by slug', () => {
const { container } = render(<ParkCard park={basePark} />);
const link = container.querySelector('a');
expect(link?.getAttribute('href')).toBe('/khu-cong-nghiep/kcn-tan-thuan');
});
it('renders status label from PARK_STATUS_LABELS', () => {
render(<ParkCard park={basePark} />);
expect(screen.getByText('Đang hoạt động')).toBeInTheDocument();
});
it('applies amber occupancy color for 7089%', () => {
render(<ParkCard park={basePark} />);
const pct = screen.getByText('85%');
expect(pct.className).toContain('text-amber-600');
});
it('applies red occupancy color for >= 90%', () => {
render(<ParkCard park={{ ...basePark, occupancyRate: 95 }} />);
const pct = screen.getByText('95%');
expect(pct.className).toContain('text-red-600');
});
it('renders rent info when landRentUsdM2Year present', () => {
render(<ParkCard park={basePark} />);
expect(screen.getByText(/\$180\.5\/m²\/năm/)).toBeInTheDocument();
expect(screen.getByText(/\$5\.2\/m²\/th/)).toBeInTheDocument();
});
it('limits visible industry badges to 3 and shows +N overflow', () => {
render(<ParkCard park={basePark} />);
expect(screen.getByText('Điện tử')).toBeInTheDocument();
expect(screen.getByText('Cơ khí')).toBeInTheDocument();
expect(screen.getByText('May mặc')).toBeInTheDocument();
expect(screen.queryByText('Thực phẩm')).toBeNull();
expect(screen.getByText('+1')).toBeInTheDocument();
});
});