feat: add MFA/TOTP auth, PII encryption, agents/leads/inquiries modules, and comprehensive tests
- Add TOTP-based MFA with setup, verify, disable, backup codes, and challenge flow - Add PII field encryption middleware with AES-256-GCM and deterministic search hashes - Add agents, inquiries, and leads domain modules with entities, events, value objects - Add web dashboard pages for inquiries and leads with detail dialogs - Add 30+ component tests (valuation, charts, listings, search, providers, UI) - Add Prisma migrations for encryption hash columns and MFA TOTP support - Fix all ESLint errors (unused imports, duplicate imports, lint auto-fixes) - Update dependencies and lock file - Clean up obsolete exploration/QA docs, add audit documentation Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
@@ -0,0 +1,174 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { AgentPublicProfile, AgentReviewItem } from '@/lib/agents-api';
|
||||
import { AgentProfileClient } from '../agent-profile-client';
|
||||
|
||||
// Mock next/image
|
||||
vi.mock('next/image', () => ({
|
||||
default: (props: Record<string, unknown>) => <img {...props} />,
|
||||
}));
|
||||
|
||||
// Mock lucide-react
|
||||
vi.mock('lucide-react', () => ({
|
||||
BadgeCheck: () => <span data-testid="badge-check">✓</span>,
|
||||
Building2: () => <span data-testid="building">B</span>,
|
||||
Calendar: () => <span data-testid="calendar">C</span>,
|
||||
MapPin: () => <span data-testid="map-pin">M</span>,
|
||||
Phone: () => <span data-testid="phone-icon">P</span>,
|
||||
Mail: () => <span data-testid="mail">E</span>,
|
||||
Star: ({ className }: { className?: string }) => (
|
||||
<span data-testid="star" className={className}>★</span>
|
||||
),
|
||||
Home: () => <span data-testid="home">H</span>,
|
||||
MessageSquare: () => <span data-testid="message">M</span>,
|
||||
}));
|
||||
|
||||
// Mock i18n/navigation
|
||||
vi.mock('@/i18n/navigation', () => ({
|
||||
Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
|
||||
<a href={href}>{children}</a>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock currency
|
||||
vi.mock('@/lib/currency', () => ({
|
||||
formatPrice: (price: string) => {
|
||||
const n = Number(price);
|
||||
return n >= 1_000_000_000 ? `${(n / 1_000_000_000).toFixed(1)} tỷ` : String(n);
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock image-blur
|
||||
vi.mock('@/lib/image-blur', () => ({
|
||||
shimmerBlurDataURL: () => 'data:image/svg+xml;base64,mock',
|
||||
}));
|
||||
|
||||
function makeAgent(overrides: Partial<AgentPublicProfile> = {}): AgentPublicProfile {
|
||||
return {
|
||||
id: 'agent-1',
|
||||
fullName: 'Nguyễn Văn A',
|
||||
avatarUrl: null,
|
||||
phone: '0912345678',
|
||||
email: 'nguyen@example.com',
|
||||
agency: 'Công ty BĐS ABC',
|
||||
licenseNumber: 'GPHN-2025-001',
|
||||
bio: 'Chuyên viên tư vấn bất động sản khu vực Quận 7',
|
||||
qualityScore: 85,
|
||||
totalDeals: 45,
|
||||
isVerified: true,
|
||||
serviceAreas: ['Quận 7', 'Quận 2', 'Nhà Bè'],
|
||||
memberSince: '2023-06-15T00:00:00Z',
|
||||
activeListings: [],
|
||||
avgReviewRating: 4.5,
|
||||
totalReviews: 20,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function makeReview(overrides: Partial<AgentReviewItem> = {}): AgentReviewItem {
|
||||
return {
|
||||
id: 'review-1',
|
||||
userId: 'user-1',
|
||||
userName: 'Trần Thị B',
|
||||
targetType: 'agent',
|
||||
targetId: 'agent-1',
|
||||
rating: 5,
|
||||
comment: 'Tư vấn rất nhiệt tình',
|
||||
createdAt: '2026-01-20T10:00:00Z',
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe('AgentProfileClient', () => {
|
||||
it('renders agent name', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Nguyễn Văn A');
|
||||
});
|
||||
|
||||
it('renders verified badge when verified', () => {
|
||||
render(<AgentProfileClient agent={makeAgent({ isVerified: true })} reviews={[]} />);
|
||||
expect(screen.getByText('Đã xác minh')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render verified badge when not verified', () => {
|
||||
render(<AgentProfileClient agent={makeAgent({ isVerified: false })} reviews={[]} />);
|
||||
expect(screen.queryByText('Đã xác minh')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders agency name', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByText('Công ty BĐS ABC')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders license number', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByText(/GPHN-2025-001/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders bio', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByText(/Chuyên viên tư vấn bất động sản/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders service areas', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByText('Quận 7')).toBeInTheDocument();
|
||||
expect(screen.getByText('Quận 2')).toBeInTheDocument();
|
||||
expect(screen.getByText('Nhà Bè')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders quality score', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByText('85')).toBeInTheDocument();
|
||||
expect(screen.getByText('Xuất sắc')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders "Tốt" for quality score 60-79', () => {
|
||||
render(<AgentProfileClient agent={makeAgent({ qualityScore: 70 })} reviews={[]} />);
|
||||
expect(screen.getByText('Tốt')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders contact card', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getAllByText('Liên hệ môi giới').length).toBeGreaterThan(0);
|
||||
expect(screen.getAllByText('Gọi ngay').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders phone number', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getAllByText('0912345678').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders email when present', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getAllByText('nguyen@example.com').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders reviews section', () => {
|
||||
const reviews = [makeReview()];
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={reviews} />);
|
||||
expect(screen.getByText('Tư vấn rất nhiệt tình')).toBeInTheDocument();
|
||||
expect(screen.getByText('Trần Thị B')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows "Chưa có đánh giá nào" when no reviews', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByText('Chưa có đánh giá nào')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders breadcrumb navigation', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByText('Trang chủ')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders avatar placeholder when no avatarUrl', () => {
|
||||
render(<AgentProfileClient agent={makeAgent({ avatarUrl: null })} reviews={[]} />);
|
||||
expect(screen.getByText('N')).toBeInTheDocument(); // First letter of Nguyễn
|
||||
});
|
||||
|
||||
it('renders deal count stat', () => {
|
||||
render(<AgentProfileClient agent={makeAgent()} reviews={[]} />);
|
||||
expect(screen.getByText('Giao dịch')).toBeInTheDocument();
|
||||
expect(screen.getByText('45')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { AgentPerformance } from '../agent-performance';
|
||||
|
||||
// Mock recharts
|
||||
vi.mock('recharts', () => ({
|
||||
ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="responsive-container">{children}</div>
|
||||
),
|
||||
BarChart: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="bar-chart">{children}</div>
|
||||
),
|
||||
Bar: ({ dataKey }: { dataKey: string }) => <div data-testid={`bar-${dataKey}`} />,
|
||||
XAxis: () => <div data-testid="xaxis" />,
|
||||
YAxis: () => <div data-testid="yaxis" />,
|
||||
CartesianGrid: () => <div data-testid="grid" />,
|
||||
Tooltip: () => <div data-testid="tooltip" />,
|
||||
Legend: () => <div data-testid="legend" />,
|
||||
PieChart: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="pie-chart">{children}</div>
|
||||
),
|
||||
Pie: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="pie">{children}</div>
|
||||
),
|
||||
Cell: () => <div data-testid="cell" />,
|
||||
}));
|
||||
|
||||
describe('AgentPerformance', () => {
|
||||
it('renders KPI cards', () => {
|
||||
render(<AgentPerformance />);
|
||||
expect(screen.getByText('Giao dịch thành công')).toBeInTheDocument();
|
||||
expect(screen.getByText('Doanh thu')).toBeInTheDocument();
|
||||
expect(screen.getByText('Thời gian phản hồi TB')).toBeInTheDocument();
|
||||
expect(screen.getByText('Tỷ lệ chuyển đổi')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders KPI values', () => {
|
||||
render(<AgentPerformance />);
|
||||
// "8" appears in "Giao dịch thành công" and in funnel "Chốt deal 8"
|
||||
expect(screen.getByText('13.0 tỷ')).toBeInTheDocument();
|
||||
expect(screen.getByText('1.2 giờ')).toBeInTheDocument();
|
||||
expect(screen.getByText('6.7%')).toBeInTheDocument();
|
||||
// Check for deal count in KPI section
|
||||
expect(screen.getByText('Giao dịch thành công')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders monthly deals chart card', () => {
|
||||
render(<AgentPerformance />);
|
||||
expect(screen.getByText('Giao dịch & Doanh thu theo tháng')).toBeInTheDocument();
|
||||
expect(screen.getByText('6 tháng gần nhất')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders funnel chart card', () => {
|
||||
render(<AgentPerformance />);
|
||||
expect(screen.getByText('Phễu chuyển đổi khách hàng')).toBeInTheDocument();
|
||||
expect(screen.getByText('Từ liên hệ đến chốt deal')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders funnel stages', () => {
|
||||
render(<AgentPerformance />);
|
||||
expect(screen.getByText('Liên hệ mới')).toBeInTheDocument();
|
||||
expect(screen.getByText('Đang trao đổi')).toBeInTheDocument();
|
||||
expect(screen.getByText('Xem nhà')).toBeInTheDocument();
|
||||
expect(screen.getByText('Đàm phán')).toBeInTheDocument();
|
||||
expect(screen.getByText('Chốt deal')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders funnel count values', () => {
|
||||
render(<AgentPerformance />);
|
||||
expect(screen.getByText('120')).toBeInTheDocument();
|
||||
expect(screen.getByText('85')).toBeInTheDocument();
|
||||
expect(screen.getByText('42')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders disclaimer about mock data', () => {
|
||||
render(<AgentPerformance />);
|
||||
expect(screen.getByText(/Dữ liệu mẫu/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders sub-period info', () => {
|
||||
render(<AgentPerformance />);
|
||||
expect(screen.getByText('Quý hiện tại')).toBeInTheDocument();
|
||||
expect(screen.getByText('+22% so với quý trước')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { DistrictBarChart } from '../district-bar-chart';
|
||||
|
||||
// Mock recharts
|
||||
vi.mock('recharts', () => ({
|
||||
ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="responsive-container">{children}</div>
|
||||
),
|
||||
BarChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) => (
|
||||
<div data-testid="bar-chart" data-count={data.length}>{children}</div>
|
||||
),
|
||||
Bar: ({ dataKey }: { dataKey: string }) => <div data-testid={`bar-${dataKey}`} />,
|
||||
XAxis: ({ dataKey }: { dataKey: string }) => <div data-testid={`xaxis-${dataKey}`} />,
|
||||
YAxis: () => <div data-testid="yaxis" />,
|
||||
CartesianGrid: () => <div data-testid="grid" />,
|
||||
Tooltip: () => <div data-testid="tooltip" />,
|
||||
}));
|
||||
|
||||
const sampleData = [
|
||||
{ district: 'Quận 1', price: 120, listings: 50 },
|
||||
{ district: 'Quận 2', price: 80, listings: 40 },
|
||||
{ district: 'Quận 7', price: 65, listings: 60 },
|
||||
];
|
||||
|
||||
describe('DistrictBarChart', () => {
|
||||
it('renders responsive container', () => {
|
||||
render(<DistrictBarChart data={sampleData} />);
|
||||
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders bar chart', () => {
|
||||
render(<DistrictBarChart data={sampleData} />);
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders bar with default dataKey "price"', () => {
|
||||
render(<DistrictBarChart data={sampleData} />);
|
||||
expect(screen.getByTestId('bar-price')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders bar with custom dataKey', () => {
|
||||
render(<DistrictBarChart data={sampleData} dataKey="listings" />);
|
||||
expect(screen.getByTestId('bar-listings')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders XAxis with district key', () => {
|
||||
render(<DistrictBarChart data={sampleData} />);
|
||||
expect(screen.getByTestId('xaxis-district')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders CartesianGrid', () => {
|
||||
render(<DistrictBarChart data={sampleData} />);
|
||||
expect(screen.getByTestId('grid')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Tooltip', () => {
|
||||
render(<DistrictBarChart data={sampleData} />);
|
||||
expect(screen.getByTestId('tooltip')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('passes data to chart', () => {
|
||||
render(<DistrictBarChart data={sampleData} />);
|
||||
expect(screen.getByTestId('bar-chart')).toHaveAttribute('data-count', '3');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { PriceTrendChart } from '../price-trend-chart';
|
||||
|
||||
// Mock recharts
|
||||
vi.mock('recharts', () => ({
|
||||
ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="responsive-container">{children}</div>
|
||||
),
|
||||
LineChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) => (
|
||||
<div data-testid="line-chart" data-count={data.length}>{children}</div>
|
||||
),
|
||||
Line: ({ dataKey }: { dataKey: string }) => <div data-testid={`line-${dataKey}`} />,
|
||||
XAxis: ({ dataKey }: { dataKey: string }) => <div data-testid={`xaxis-${dataKey}`} />,
|
||||
YAxis: ({ yAxisId }: { yAxisId?: string }) => <div data-testid={`yaxis-${yAxisId || 'default'}`} />,
|
||||
CartesianGrid: () => <div data-testid="grid" />,
|
||||
Tooltip: () => <div data-testid="tooltip" />,
|
||||
Legend: () => <div data-testid="legend" />,
|
||||
}));
|
||||
|
||||
const sampleData = [
|
||||
{ period: 'T1/2026', 'Gia/m2': 65, 'Tin đăng': 120 },
|
||||
{ period: 'T2/2026', 'Gia/m2': 68, 'Tin đăng': 130 },
|
||||
{ period: 'T3/2026', 'Gia/m2': 70, 'Tin đăng': 125 },
|
||||
];
|
||||
|
||||
describe('PriceTrendChart', () => {
|
||||
it('renders responsive container', () => {
|
||||
render(<PriceTrendChart data={sampleData} />);
|
||||
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders line chart', () => {
|
||||
render(<PriceTrendChart data={sampleData} />);
|
||||
expect(screen.getByTestId('line-chart')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders price line', () => {
|
||||
render(<PriceTrendChart data={sampleData} />);
|
||||
expect(screen.getByTestId('line-Gia/m2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders listings count line', () => {
|
||||
render(<PriceTrendChart data={sampleData} />);
|
||||
expect(screen.getByTestId('line-Tin đăng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders XAxis with period key', () => {
|
||||
render(<PriceTrendChart data={sampleData} />);
|
||||
expect(screen.getByTestId('xaxis-period')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders dual Y axes', () => {
|
||||
render(<PriceTrendChart data={sampleData} />);
|
||||
expect(screen.getByTestId('yaxis-left')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('yaxis-right')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Legend', () => {
|
||||
render(<PriceTrendChart data={sampleData} />);
|
||||
expect(screen.getByTestId('legend')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('passes data to chart', () => {
|
||||
render(<PriceTrendChart data={sampleData} />);
|
||||
expect(screen.getByTestId('line-chart')).toHaveAttribute('data-count', '3');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,178 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { ListingDetail } from '@/lib/listings-api';
|
||||
import { ComparisonTable } from '../comparison-table';
|
||||
|
||||
// Mock next/image
|
||||
vi.mock('next/image', () => ({
|
||||
default: (props: Record<string, unknown>) => <img {...props} />,
|
||||
}));
|
||||
|
||||
// Mock next-intl
|
||||
vi.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
property: 'Bất động sản',
|
||||
price: 'Giá',
|
||||
transactionType: 'Loại giao dịch',
|
||||
propertyType: 'Loại BĐS',
|
||||
area: 'Diện tích',
|
||||
pricePerM2: 'Giá/m²',
|
||||
bedrooms: 'Phòng ngủ',
|
||||
bathrooms: 'Phòng tắm',
|
||||
direction: 'Hướng',
|
||||
floors: 'Số tầng',
|
||||
yearBuilt: 'Năm xây',
|
||||
legalStatus: 'Pháp lý',
|
||||
location: 'Vị trí',
|
||||
amenities: 'Tiện ích',
|
||||
projectName: 'Dự án',
|
||||
rooms: 'phòng',
|
||||
remove: 'Xóa',
|
||||
noImage: 'Chưa có ảnh',
|
||||
sale: 'Bán',
|
||||
rent: 'Cho thuê',
|
||||
};
|
||||
return translations[key] ?? key;
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock @/i18n/navigation
|
||||
vi.mock('@/i18n/navigation', () => ({
|
||||
Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
|
||||
<a href={href}>{children}</a>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock currency
|
||||
vi.mock('@/lib/currency', () => ({
|
||||
formatPrice: (price: string) => {
|
||||
const n = Number(price);
|
||||
return n >= 1_000_000_000 ? `${(n / 1_000_000_000).toFixed(1)} tỷ` : String(n);
|
||||
},
|
||||
formatPricePerM2: (price: number) => `${(price / 1_000_000).toFixed(1)} tr/m²`,
|
||||
}));
|
||||
|
||||
// Mock image-blur
|
||||
vi.mock('@/lib/image-blur', () => ({
|
||||
shimmerBlurDataURL: () => 'data:image/svg+xml;base64,mock',
|
||||
}));
|
||||
|
||||
// Mock lucide-react
|
||||
vi.mock('lucide-react', () => ({
|
||||
X: () => <span data-testid="x-icon">X</span>,
|
||||
}));
|
||||
|
||||
function makeListing(id: string, overrides: Partial<ListingDetail> = {}): ListingDetail {
|
||||
return {
|
||||
id,
|
||||
status: 'ACTIVE',
|
||||
transactionType: 'SALE',
|
||||
priceVND: '3500000000',
|
||||
pricePerM2: 40_000_000,
|
||||
rentPriceMonthly: null,
|
||||
commissionPct: null,
|
||||
viewCount: 100,
|
||||
saveCount: 10,
|
||||
inquiryCount: 5,
|
||||
publishedAt: '2026-01-01T00:00:00Z',
|
||||
createdAt: '2025-12-01T00:00:00Z',
|
||||
property: {
|
||||
id: `prop-${id}`,
|
||||
propertyType: 'APARTMENT',
|
||||
title: `Căn hộ ${id}`,
|
||||
description: 'Test',
|
||||
address: '123 Test St',
|
||||
ward: 'Ward',
|
||||
district: 'Quận 1',
|
||||
city: 'HCMC',
|
||||
areaM2: 75,
|
||||
bedrooms: 2,
|
||||
bathrooms: 2,
|
||||
floors: null,
|
||||
direction: 'SOUTH',
|
||||
yearBuilt: 2020,
|
||||
legalStatus: 'Sổ hồng',
|
||||
amenities: ['Gym', 'Pool'],
|
||||
projectName: 'Vinhomes',
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
media: [{ id: 'm1', type: 'image', url: 'https://example.com/img.jpg', order: 0, caption: null }],
|
||||
},
|
||||
seller: { id: 's1', fullName: 'Seller', phone: '0901234567' },
|
||||
agent: null,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe('ComparisonTable', () => {
|
||||
it('returns null when listings are empty', () => {
|
||||
const { container } = render(<ComparisonTable listings={[]} onRemove={vi.fn()} />);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it('renders table with listings', () => {
|
||||
render(<ComparisonTable listings={[makeListing('1'), makeListing('2')]} onRemove={vi.fn()} />);
|
||||
expect(screen.getByText('Căn hộ 1')).toBeInTheDocument();
|
||||
expect(screen.getByText('Căn hộ 2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders comparison rows', () => {
|
||||
render(<ComparisonTable listings={[makeListing('1')]} onRemove={vi.fn()} />);
|
||||
expect(screen.getByText('Giá')).toBeInTheDocument();
|
||||
expect(screen.getByText('Loại giao dịch')).toBeInTheDocument();
|
||||
expect(screen.getByText('Loại BĐS')).toBeInTheDocument();
|
||||
expect(screen.getByText('Diện tích')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property area', () => {
|
||||
render(<ComparisonTable listings={[makeListing('1')]} onRemove={vi.fn()} />);
|
||||
expect(screen.getByText('75 m²')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders remove button', () => {
|
||||
render(<ComparisonTable listings={[makeListing('1')]} onRemove={vi.fn()} />);
|
||||
expect(screen.getByText('Xóa')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onRemove when remove clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onRemove = vi.fn();
|
||||
render(<ComparisonTable listings={[makeListing('1')]} onRemove={onRemove} />);
|
||||
|
||||
await user.click(screen.getByText('Xóa'));
|
||||
expect(onRemove).toHaveBeenCalledWith('1');
|
||||
});
|
||||
|
||||
it('renders direction value', () => {
|
||||
render(<ComparisonTable listings={[makeListing('1')]} onRemove={vi.fn()} />);
|
||||
expect(screen.getByText('Nam')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders amenities', () => {
|
||||
render(<ComparisonTable listings={[makeListing('1')]} onRemove={vi.fn()} />);
|
||||
expect(screen.getByText('Gym')).toBeInTheDocument();
|
||||
expect(screen.getByText('Pool')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders project name', () => {
|
||||
render(<ComparisonTable listings={[makeListing('1')]} onRemove={vi.fn()} />);
|
||||
expect(screen.getByText('Vinhomes')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows "—" for missing values', () => {
|
||||
const listing = makeListing('1');
|
||||
listing.property.floors = null;
|
||||
render(<ComparisonTable listings={[listing]} onRemove={vi.fn()} />);
|
||||
// floors row should have —
|
||||
const dashes = screen.getAllByText('—');
|
||||
expect(dashes.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders bedrooms with room suffix', () => {
|
||||
render(<ComparisonTable listings={[makeListing('1')]} onRemove={vi.fn()} />);
|
||||
// Bedrooms and bathrooms both show "2 phòng"
|
||||
expect(screen.getAllByText('2 phòng').length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,161 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { InquiryReadDto } from '@/lib/inquiries-api';
|
||||
import { InquiryDetailDialog } from '../inquiry-detail-dialog';
|
||||
|
||||
// Mock the hook
|
||||
const mockMarkReadMutate = vi.fn();
|
||||
vi.mock('@/lib/hooks/use-inquiries', () => ({
|
||||
useMarkInquiryRead: () => ({
|
||||
mutate: mockMarkReadMutate,
|
||||
isPending: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock InquiryStatusBadge
|
||||
vi.mock('@/components/inquiries/inquiry-row', () => ({
|
||||
InquiryStatusBadge: ({ isRead }: { isRead: boolean }) => (
|
||||
<span>{isRead ? 'Đã đọc' : 'Chưa đọc'}</span>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock Dialog
|
||||
vi.mock('@/components/ui/dialog', () => ({
|
||||
Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) =>
|
||||
open ? <div data-testid="dialog">{children}</div> : null,
|
||||
DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
|
||||
DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
|
||||
DialogFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
}));
|
||||
|
||||
const mockInquiry: InquiryReadDto = {
|
||||
id: 'inq-1',
|
||||
listingId: 'listing-1',
|
||||
listingTitle: 'Căn hộ 3PN Quận 2',
|
||||
userId: 'user-1',
|
||||
userName: 'Nguyễn Minh C',
|
||||
userPhone: '0912345678',
|
||||
message: 'Tôi muốn xem nhà vào thứ 7 tuần sau',
|
||||
phone: null,
|
||||
isRead: false,
|
||||
createdAt: '2026-02-10T09:00:00Z',
|
||||
};
|
||||
|
||||
describe('InquiryDetailDialog', () => {
|
||||
beforeEach(() => {
|
||||
mockMarkReadMutate.mockClear();
|
||||
});
|
||||
|
||||
it('returns null when inquiry is null', () => {
|
||||
const { container } = render(
|
||||
<InquiryDetailDialog inquiry={null} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it('renders dialog title', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Chi tiết liên hệ')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders listing title', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Căn hộ 3PN Quận 2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders user name', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Nguyễn Minh C')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders phone number', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText(/0912345678/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders inquiry message', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Tôi muốn xem nhà vào thứ 7 tuần sau')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders unread status', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Chưa đọc')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders mark as read button when unread', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Đánh dấu đã đọc')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render mark as read button when already read', () => {
|
||||
const readInquiry = { ...mockInquiry, isRead: true };
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={readInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.queryByText('Đánh dấu đã đọc')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls mutate when mark as read is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Đánh dấu đã đọc'));
|
||||
expect(mockMarkReadMutate).toHaveBeenCalledWith('inq-1', expect.any(Object));
|
||||
});
|
||||
|
||||
it('renders quick contact links', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
// Emoji prefixed text
|
||||
const content = document.body.textContent;
|
||||
expect(content).toContain('Gọi điện');
|
||||
expect(content).toContain('Zalo');
|
||||
});
|
||||
|
||||
it('renders close button', () => {
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Đóng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onOpenChange when close is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onOpenChange = vi.fn();
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={onOpenChange} />,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Đóng'));
|
||||
expect(onOpenChange).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
it('uses inquiry.phone when available over userPhone', () => {
|
||||
const inquiryWithPhone = { ...mockInquiry, phone: '0987654321' };
|
||||
render(
|
||||
<InquiryDetailDialog inquiry={inquiryWithPhone} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText(/0987654321/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
110
apps/web/components/inquiries/inquiry-detail-dialog.tsx
Normal file
110
apps/web/components/inquiries/inquiry-detail-dialog.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
'use client';
|
||||
|
||||
import { InquiryStatusBadge } from '@/components/inquiries/inquiry-row';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { useMarkInquiryRead } from '@/lib/hooks/use-inquiries';
|
||||
import type { InquiryReadDto } from '@/lib/inquiries-api';
|
||||
|
||||
interface InquiryDetailDialogProps {
|
||||
inquiry: InquiryReadDto | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function InquiryDetailDialog({ inquiry, open, onOpenChange }: InquiryDetailDialogProps) {
|
||||
const markAsRead = useMarkInquiryRead();
|
||||
|
||||
if (!inquiry) return null;
|
||||
|
||||
const handleMarkRead = () => {
|
||||
markAsRead.mutate(inquiry.id, {
|
||||
onSuccess: () => {
|
||||
onOpenChange(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const formattedDate = new Date(inquiry.createdAt).toLocaleDateString('vi-VN', {
|
||||
weekday: 'long',
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-md sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Chi tiết liên hệ</DialogTitle>
|
||||
<DialogDescription>
|
||||
{inquiry.listingTitle}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
{/* Contact info */}
|
||||
<div className="rounded-lg border p-4 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{inquiry.userName}</span>
|
||||
<InquiryStatusBadge isRead={inquiry.isRead} />
|
||||
</div>
|
||||
<div className="space-y-1 text-sm text-muted-foreground">
|
||||
<p>SĐT: {inquiry.phone ?? inquiry.userPhone}</p>
|
||||
<p>Ngày gửi: {formattedDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="space-y-1.5">
|
||||
<h4 className="text-sm font-medium">Nội dung</h4>
|
||||
<div className="rounded-lg bg-muted p-3 text-sm leading-relaxed">
|
||||
{inquiry.message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick actions */}
|
||||
<div className="space-y-1.5">
|
||||
<h4 className="text-sm font-medium">Liên hệ nhanh</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<a
|
||||
href={`tel:${inquiry.phone ?? inquiry.userPhone}`}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
📞 Gọi điện
|
||||
</a>
|
||||
<a
|
||||
href={`https://zalo.me/${(inquiry.phone ?? inquiry.userPhone).replace(/^0/, '84')}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
💬 Zalo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Đóng
|
||||
</Button>
|
||||
{!inquiry.isRead && (
|
||||
<Button onClick={handleMarkRead} disabled={markAsRead.isPending}>
|
||||
{markAsRead.isPending ? 'Đang xử lý...' : 'Đánh dấu đã đọc'}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
54
apps/web/components/inquiries/inquiry-row.tsx
Normal file
54
apps/web/components/inquiries/inquiry-row.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { InquiryReadDto } from '@/lib/inquiries-api';
|
||||
|
||||
interface InquiryStatusBadgeProps {
|
||||
isRead: boolean;
|
||||
}
|
||||
|
||||
export function InquiryStatusBadge({ isRead }: InquiryStatusBadgeProps) {
|
||||
if (isRead) {
|
||||
return <Badge variant="secondary">Đã đọc</Badge>;
|
||||
}
|
||||
return <Badge variant="info">Chưa đọc</Badge>;
|
||||
}
|
||||
|
||||
interface InquiryRowProps {
|
||||
inquiry: InquiryReadDto;
|
||||
onSelect: (inquiry: InquiryReadDto) => void;
|
||||
}
|
||||
|
||||
export function InquiryRow({ inquiry, onSelect }: InquiryRowProps) {
|
||||
return (
|
||||
<tr
|
||||
className="border-b last:border-0 cursor-pointer transition-colors hover:bg-accent/50"
|
||||
onClick={() => onSelect(inquiry)}
|
||||
>
|
||||
<td className="p-3">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="font-medium">{inquiry.userName}</span>
|
||||
<span className="text-xs text-muted-foreground">{inquiry.userPhone}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<span className="line-clamp-1 text-sm text-muted-foreground">
|
||||
{inquiry.listingTitle}
|
||||
</span>
|
||||
</td>
|
||||
<td className="hidden p-3 sm:table-cell">
|
||||
<span className="line-clamp-2 text-sm">{inquiry.message}</span>
|
||||
</td>
|
||||
<td className="p-3 text-center">
|
||||
<InquiryStatusBadge isRead={inquiry.isRead} />
|
||||
</td>
|
||||
<td className="p-3 text-right text-xs text-muted-foreground">
|
||||
{new Date(inquiry.createdAt).toLocaleDateString('vi-VN', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
103
apps/web/components/leads/__tests__/create-lead-dialog.spec.tsx
Normal file
103
apps/web/components/leads/__tests__/create-lead-dialog.spec.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { CreateLeadDialog } from '../create-lead-dialog';
|
||||
|
||||
// Mock the hook
|
||||
const mockMutate = vi.fn();
|
||||
vi.mock('@/lib/hooks/use-leads', () => ({
|
||||
useCreateLead: () => ({
|
||||
mutate: mockMutate,
|
||||
isPending: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock Dialog components with simplified versions
|
||||
vi.mock('@/components/ui/dialog', () => ({
|
||||
Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) =>
|
||||
open ? <div data-testid="dialog">{children}</div> : null,
|
||||
DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
|
||||
<div data-testid="dialog-content" className={className}>{children}</div>
|
||||
),
|
||||
DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
|
||||
DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
|
||||
DialogFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
}));
|
||||
|
||||
describe('CreateLeadDialog', () => {
|
||||
beforeEach(() => {
|
||||
mockMutate.mockClear();
|
||||
});
|
||||
|
||||
it('renders dialog when open', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Thêm lead mới')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render when closed', () => {
|
||||
render(<CreateLeadDialog open={false} onOpenChange={vi.fn()} />);
|
||||
expect(screen.queryByText('Thêm lead mới')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders customer name input', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Tên khách hàng *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders phone input', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Số điện thoại *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders email input', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Email')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders source select', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Nguồn')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders score input', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Điểm (0-100)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders notes textarea', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Ghi chú')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders cancel and submit buttons', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Hủy')).toBeInTheDocument();
|
||||
expect(screen.getByText('Tạo lead')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onOpenChange when cancel clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onOpenChange = vi.fn();
|
||||
render(<CreateLeadDialog open={true} onOpenChange={onOpenChange} />);
|
||||
|
||||
await user.click(screen.getByText('Hủy'));
|
||||
expect(onOpenChange).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
it('calls mutate when form is submitted', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
|
||||
await user.type(screen.getByLabelText('Tên khách hàng *'), 'Nguyễn Văn Test');
|
||||
await user.type(screen.getByLabelText('Số điện thoại *'), '0901234567');
|
||||
await user.click(screen.getByText('Tạo lead'));
|
||||
|
||||
expect(mockMutate).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders description text', () => {
|
||||
render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Nhập thông tin khách hàng tiềm năng')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
139
apps/web/components/leads/__tests__/lead-detail-dialog.spec.tsx
Normal file
139
apps/web/components/leads/__tests__/lead-detail-dialog.spec.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { LeadReadDto } from '@/lib/leads-api';
|
||||
import { LeadDetailDialog } from '../lead-detail-dialog';
|
||||
|
||||
// Mock hooks
|
||||
const mockUpdateMutate = vi.fn();
|
||||
const mockDeleteMutate = vi.fn();
|
||||
vi.mock('@/lib/hooks/use-leads', () => ({
|
||||
useUpdateLeadStatus: () => ({
|
||||
mutate: mockUpdateMutate,
|
||||
isPending: false,
|
||||
}),
|
||||
useDeleteLead: () => ({
|
||||
mutate: mockDeleteMutate,
|
||||
isPending: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock Dialog components
|
||||
vi.mock('@/components/ui/dialog', () => ({
|
||||
Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) =>
|
||||
open ? <div data-testid="dialog">{children}</div> : null,
|
||||
DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
|
||||
DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
|
||||
DialogFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
}));
|
||||
|
||||
const mockLead: LeadReadDto = {
|
||||
id: 'lead-1',
|
||||
agentId: 'agent-1',
|
||||
name: 'Trần Thị B',
|
||||
phone: '0987654321',
|
||||
email: 'tran@example.com',
|
||||
source: 'website',
|
||||
score: 75,
|
||||
notes: { text: 'Quan tâm căn hộ Quận 7' },
|
||||
status: 'NEW',
|
||||
createdAt: '2026-01-15T10:00:00Z',
|
||||
updatedAt: '2026-01-16T14:00:00Z',
|
||||
};
|
||||
|
||||
describe('LeadDetailDialog', () => {
|
||||
beforeEach(() => {
|
||||
mockUpdateMutate.mockClear();
|
||||
mockDeleteMutate.mockClear();
|
||||
});
|
||||
|
||||
it('returns null when lead is null', () => {
|
||||
const { container } = render(
|
||||
<LeadDetailDialog lead={null} open={true} onOpenChange={vi.fn()} />,
|
||||
);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it('renders dialog title', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Chi tiết lead')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders lead name', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
// Name appears in both the description and the contact card
|
||||
expect(screen.getAllByText('Trần Thị B').length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('renders phone number', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText(/0987654321/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders email when present', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText(/tran@example.com/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders score', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('75/100')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders notes', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Quan tâm căn hộ Quận 7')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders quick contact links', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
// Emoji prefixed text
|
||||
const content = document.body.textContent;
|
||||
expect(content).toContain('Gọi điện');
|
||||
expect(content).toContain('Zalo');
|
||||
});
|
||||
|
||||
it('renders Zalo link with correct phone format', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
const links = document.querySelectorAll('a[href*="zalo.me"]');
|
||||
expect(links.length).toBeGreaterThan(0);
|
||||
expect(links[0]).toHaveAttribute('href', 'https://zalo.me/84987654321');
|
||||
});
|
||||
|
||||
it('renders delete button', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Xóa lead')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows confirmation on first delete click', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
|
||||
await user.click(screen.getByText('Xóa lead'));
|
||||
expect(screen.getByText('Xác nhận xóa?')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders close button', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Đóng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders status change select', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Chuyển trạng thái')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders timeline section', () => {
|
||||
render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
|
||||
expect(screen.getByText('Lịch sử')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides email contact when email is null', () => {
|
||||
const leadNoEmail = { ...mockLead, email: null };
|
||||
render(<LeadDetailDialog lead={leadNoEmail} open={true} onOpenChange={vi.fn()} />);
|
||||
const content = document.body.textContent;
|
||||
expect(content).not.toContain('tran@example.com');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { LeadStatusBadge } from '../lead-status-badge';
|
||||
|
||||
describe('LeadStatusBadge', () => {
|
||||
it('renders NEW status with correct label', () => {
|
||||
render(<LeadStatusBadge status="NEW" />);
|
||||
expect(screen.getByText('Mới')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders CONTACTED status with correct label', () => {
|
||||
render(<LeadStatusBadge status="CONTACTED" />);
|
||||
expect(screen.getByText('Đã liên hệ')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders QUALIFIED status with correct label', () => {
|
||||
render(<LeadStatusBadge status="QUALIFIED" />);
|
||||
expect(screen.getByText('Đủ điều kiện')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders NEGOTIATING status with correct label', () => {
|
||||
render(<LeadStatusBadge status="NEGOTIATING" />);
|
||||
expect(screen.getByText('Đang thương lượng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders CONVERTED status with correct label', () => {
|
||||
render(<LeadStatusBadge status="CONVERTED" />);
|
||||
expect(screen.getByText('Chuyển đổi')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders LOST status with correct label', () => {
|
||||
render(<LeadStatusBadge status="LOST" />);
|
||||
expect(screen.getByText('Mất')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('falls back to raw status value for unknown status', () => {
|
||||
// @ts-expect-error testing unknown status
|
||||
render(<LeadStatusBadge status="UNKNOWN" />);
|
||||
expect(screen.getByText('UNKNOWN')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
153
apps/web/components/leads/create-lead-dialog.tsx
Normal file
153
apps/web/components/leads/create-lead-dialog.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select } from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { useCreateLead } from '@/lib/hooks/use-leads';
|
||||
import { LEAD_SOURCES } from '@/lib/leads-api';
|
||||
|
||||
interface CreateLeadDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function CreateLeadDialog({ open, onOpenChange }: CreateLeadDialogProps) {
|
||||
const createLead = useCreateLead();
|
||||
const [form, setForm] = React.useState({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
source: 'website',
|
||||
score: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
createLead.mutate(
|
||||
{
|
||||
name: form.name,
|
||||
phone: form.phone,
|
||||
email: form.email || undefined,
|
||||
source: form.source,
|
||||
score: form.score ? Number(form.score) : undefined,
|
||||
notes: form.notes ? { text: form.notes } : undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
setForm({ name: '', phone: '', email: '', source: 'website', score: '', notes: '' });
|
||||
onOpenChange(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-md sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Thêm lead mới</DialogTitle>
|
||||
<DialogDescription>
|
||||
Nhập thông tin khách hàng tiềm năng
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 py-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lead-name">Tên khách hàng *</Label>
|
||||
<Input
|
||||
id="lead-name"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
||||
placeholder="Nguyễn Văn A"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lead-phone">Số điện thoại *</Label>
|
||||
<Input
|
||||
id="lead-phone"
|
||||
value={form.phone}
|
||||
onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
|
||||
placeholder="0901234567"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lead-email">Email</Label>
|
||||
<Input
|
||||
id="lead-email"
|
||||
type="email"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lead-source">Nguồn</Label>
|
||||
<Select
|
||||
id="lead-source"
|
||||
value={form.source}
|
||||
onChange={(e) => setForm((f) => ({ ...f, source: e.target.value }))}
|
||||
>
|
||||
{LEAD_SOURCES.map((s) => (
|
||||
<option key={s.value} value={s.value}>
|
||||
{s.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lead-score">Điểm (0-100)</Label>
|
||||
<Input
|
||||
id="lead-score"
|
||||
type="number"
|
||||
min={0}
|
||||
max={100}
|
||||
value={form.score}
|
||||
onChange={(e) => setForm((f) => ({ ...f, score: e.target.value }))}
|
||||
placeholder="75"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lead-notes">Ghi chú</Label>
|
||||
<Textarea
|
||||
id="lead-notes"
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
|
||||
placeholder="Thông tin bổ sung về khách hàng..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Hủy
|
||||
</Button>
|
||||
<Button type="submit" disabled={createLead.isPending}>
|
||||
{createLead.isPending ? 'Đang tạo...' : 'Tạo lead'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
212
apps/web/components/leads/lead-detail-dialog.tsx
Normal file
212
apps/web/components/leads/lead-detail-dialog.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { LeadStatusBadge } from '@/components/leads/lead-status-badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Select } from '@/components/ui/select';
|
||||
import { useDeleteLead, useUpdateLeadStatus } from '@/lib/hooks/use-leads';
|
||||
import { LEAD_STATUSES, LEAD_SOURCES, type LeadReadDto, type LeadStatus } from '@/lib/leads-api';
|
||||
|
||||
interface LeadDetailDialogProps {
|
||||
lead: LeadReadDto | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS = Object.entries(LEAD_STATUSES) as [LeadStatus, { label: string }][];
|
||||
|
||||
function getSourceLabel(source: string): string {
|
||||
const found = LEAD_SOURCES.find((s) => s.value === source);
|
||||
return found?.label ?? source;
|
||||
}
|
||||
|
||||
export function LeadDetailDialog({ lead, open, onOpenChange }: LeadDetailDialogProps) {
|
||||
const updateStatus = useUpdateLeadStatus();
|
||||
const deleteLead = useDeleteLead();
|
||||
const [confirmDelete, setConfirmDelete] = React.useState(false);
|
||||
|
||||
if (!lead) return null;
|
||||
|
||||
const handleStatusChange = (newStatus: LeadStatus) => {
|
||||
updateStatus.mutate(
|
||||
{ id: lead.id, status: newStatus },
|
||||
{
|
||||
onSuccess: () => {
|
||||
onOpenChange(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!confirmDelete) {
|
||||
setConfirmDelete(true);
|
||||
return;
|
||||
}
|
||||
deleteLead.mutate(lead.id, {
|
||||
onSuccess: () => {
|
||||
setConfirmDelete(false);
|
||||
onOpenChange(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const createdDate = new Date(lead.createdAt).toLocaleDateString('vi-VN', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
|
||||
const updatedDate = new Date(lead.updatedAt).toLocaleDateString('vi-VN', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
|
||||
const notes = lead.notes && typeof lead.notes === 'object' && 'text' in lead.notes
|
||||
? String(lead.notes['text'])
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => { onOpenChange(v); setConfirmDelete(false); }}>
|
||||
<DialogContent className="max-w-md sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Chi tiết lead</DialogTitle>
|
||||
<DialogDescription>{lead.name}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
{/* Contact info */}
|
||||
<div className="rounded-lg border p-4 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{lead.name}</span>
|
||||
<LeadStatusBadge status={lead.status} />
|
||||
</div>
|
||||
<div className="space-y-1 text-sm text-muted-foreground">
|
||||
<p>SĐT: {lead.phone}</p>
|
||||
{lead.email && <p>Email: {lead.email}</p>}
|
||||
<p>Nguồn: {getSourceLabel(lead.source)}</p>
|
||||
{lead.score !== null && <p>Điểm: {lead.score}/100</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="space-y-1.5">
|
||||
<h4 className="text-sm font-medium">Lịch sử</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="h-2 w-2 rounded-full bg-blue-500" />
|
||||
<span className="text-muted-foreground">Tạo lúc: {createdDate}</span>
|
||||
</div>
|
||||
{lead.createdAt !== lead.updatedAt && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="h-2 w-2 rounded-full bg-green-500" />
|
||||
<span className="text-muted-foreground">Cập nhật lúc: {updatedDate}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
{notes && (
|
||||
<div className="space-y-1.5">
|
||||
<h4 className="text-sm font-medium">Ghi chú</h4>
|
||||
<div className="rounded-lg bg-muted p-3 text-sm leading-relaxed">
|
||||
{notes}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Score bar */}
|
||||
{lead.score !== null && (
|
||||
<div className="space-y-1.5">
|
||||
<h4 className="text-sm font-medium">Điểm lead</h4>
|
||||
<div className="h-2 w-full rounded-full bg-muted">
|
||||
<div
|
||||
className="h-2 rounded-full bg-primary transition-all"
|
||||
style={{ width: `${lead.score}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground text-right">{lead.score}/100</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick actions */}
|
||||
<div className="space-y-1.5">
|
||||
<h4 className="text-sm font-medium">Liên hệ nhanh</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<a
|
||||
href={`tel:${lead.phone}`}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
📞 Gọi điện
|
||||
</a>
|
||||
{lead.email && (
|
||||
<a
|
||||
href={`mailto:${lead.email}`}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
✉️ Email
|
||||
</a>
|
||||
)}
|
||||
<a
|
||||
href={`https://zalo.me/${lead.phone.replace(/^0/, '84')}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
💬 Zalo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status change */}
|
||||
<div className="space-y-1.5">
|
||||
<h4 className="text-sm font-medium">Chuyển trạng thái</h4>
|
||||
<Select
|
||||
value={lead.status}
|
||||
onChange={(e) => handleStatusChange(e.target.value as LeadStatus)}
|
||||
disabled={updateStatus.isPending}
|
||||
>
|
||||
{STATUS_OPTIONS.map(([value, { label }]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
disabled={deleteLead.isPending}
|
||||
>
|
||||
{confirmDelete
|
||||
? deleteLead.isPending
|
||||
? 'Đang xóa...'
|
||||
: 'Xác nhận xóa?'
|
||||
: 'Xóa lead'}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Đóng
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
11
apps/web/components/leads/lead-status-badge.tsx
Normal file
11
apps/web/components/leads/lead-status-badge.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { LEAD_STATUSES, type LeadStatus } from '@/lib/leads-api';
|
||||
|
||||
interface LeadStatusBadgeProps {
|
||||
status: LeadStatus;
|
||||
}
|
||||
|
||||
export function LeadStatusBadge({ status }: LeadStatusBadgeProps) {
|
||||
const config = LEAD_STATUSES[status] ?? { label: status, variant: 'outline' as const };
|
||||
return <Badge variant={config.variant}>{config.label}</Badge>;
|
||||
}
|
||||
127
apps/web/components/listings/__tests__/image-gallery.spec.tsx
Normal file
127
apps/web/components/listings/__tests__/image-gallery.spec.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { PropertyMedia } from '@/lib/listings-api';
|
||||
import { ImageGallery } from '../image-gallery';
|
||||
|
||||
// Mock next/image
|
||||
vi.mock('next/image', () => ({
|
||||
default: (props: Record<string, unknown>) => <img {...props} />,
|
||||
}));
|
||||
|
||||
// Mock scrollIntoView (not available in jsdom)
|
||||
Element.prototype.scrollIntoView = vi.fn();
|
||||
|
||||
// Mock ImageLightbox
|
||||
vi.mock('@/components/listings/image-lightbox', () => ({
|
||||
ImageLightbox: ({ open }: { open: boolean }) =>
|
||||
open ? <div data-testid="lightbox">Lightbox</div> : null,
|
||||
}));
|
||||
|
||||
// Mock image-blur
|
||||
vi.mock('@/lib/image-blur', () => ({
|
||||
shimmerBlurDataURL: () => 'data:image/svg+xml;base64,mock',
|
||||
}));
|
||||
|
||||
function makeMedia(count: number): PropertyMedia[] {
|
||||
return Array.from({ length: count }, (_, i) => ({
|
||||
id: `media-${i}`,
|
||||
type: 'image' as const,
|
||||
url: `https://example.com/img${i}.jpg`,
|
||||
order: i,
|
||||
caption: i === 0 ? 'Main photo' : null,
|
||||
}));
|
||||
}
|
||||
|
||||
describe('ImageGallery', () => {
|
||||
it('shows "Chưa có hình ảnh" when no media', () => {
|
||||
render(<ImageGallery media={[]} />);
|
||||
expect(screen.getByText('Chưa có hình ảnh')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders main image when media exists', () => {
|
||||
render(<ImageGallery media={makeMedia(1)} />);
|
||||
const img = screen.getByRole('img');
|
||||
expect(img).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render thumbnails for single image', () => {
|
||||
render(<ImageGallery media={makeMedia(1)} />);
|
||||
// Single image - no thumbnail strip
|
||||
const imgs = screen.getAllByRole('img');
|
||||
expect(imgs).toHaveLength(1); // Only the main image
|
||||
});
|
||||
|
||||
it('renders thumbnails for multiple images', () => {
|
||||
render(<ImageGallery media={makeMedia(3)} />);
|
||||
// 1 main + 3 thumbnails = 4 images
|
||||
const imgs = screen.getAllByRole('img');
|
||||
expect(imgs.length).toBeGreaterThanOrEqual(4);
|
||||
});
|
||||
|
||||
it('renders navigation arrows for multiple images', () => {
|
||||
render(<ImageGallery media={makeMedia(3)} />);
|
||||
expect(screen.getByLabelText('Ảnh trước')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Ảnh tiếp')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render navigation arrows for single image', () => {
|
||||
render(<ImageGallery media={makeMedia(1)} />);
|
||||
expect(screen.queryByLabelText('Ảnh trước')).not.toBeInTheDocument();
|
||||
expect(screen.queryByLabelText('Ảnh tiếp')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows image counter', () => {
|
||||
render(<ImageGallery media={makeMedia(5)} />);
|
||||
expect(screen.getByText('1 / 5')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('navigates to next image when arrow is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<ImageGallery media={makeMedia(3)} />);
|
||||
|
||||
await user.click(screen.getByLabelText('Ảnh tiếp'));
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('navigates to previous image', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<ImageGallery media={makeMedia(3)} />);
|
||||
|
||||
// Go forward then back
|
||||
await user.click(screen.getByLabelText('Ảnh tiếp'));
|
||||
await user.click(screen.getByLabelText('Ảnh trước'));
|
||||
expect(screen.getByText('1 / 3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('wraps around to last image when pressing prev on first', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<ImageGallery media={makeMedia(3)} />);
|
||||
|
||||
await user.click(screen.getByLabelText('Ảnh trước'));
|
||||
expect(screen.getByText('3 / 3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows fullscreen button', () => {
|
||||
render(<ImageGallery media={makeMedia(2)} />);
|
||||
expect(screen.getByLabelText('Xem ảnh toàn màn hình')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opens lightbox on fullscreen button click', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<ImageGallery media={makeMedia(2)} />);
|
||||
|
||||
await user.click(screen.getByLabelText('Xem ảnh toàn màn hình'));
|
||||
expect(screen.getByTestId('lightbox')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('filters out non-image media', () => {
|
||||
const media: PropertyMedia[] = [
|
||||
{ id: 'img-1', type: 'image', url: 'https://example.com/img.jpg', order: 0, caption: null },
|
||||
{ id: 'vid-1', type: 'video' as PropertyMedia['type'], url: 'https://example.com/vid.mp4', order: 1, caption: null },
|
||||
];
|
||||
render(<ImageGallery media={media} />);
|
||||
// Should only render 1 image (main), no nav arrows for single image
|
||||
expect(screen.queryByLabelText('Ảnh trước')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
113
apps/web/components/listings/__tests__/image-lightbox.spec.tsx
Normal file
113
apps/web/components/listings/__tests__/image-lightbox.spec.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { PropertyMedia } from '@/lib/listings-api';
|
||||
import { ImageLightbox } from '../image-lightbox';
|
||||
|
||||
// Mock next/image
|
||||
vi.mock('next/image', () => ({
|
||||
default: (props: Record<string, unknown>) => <img {...props} />,
|
||||
}));
|
||||
|
||||
// Mock scrollIntoView (not available in jsdom)
|
||||
Element.prototype.scrollIntoView = vi.fn();
|
||||
|
||||
function makeImages(count: number): PropertyMedia[] {
|
||||
return Array.from({ length: count }, (_, i) => ({
|
||||
id: `img-${i}`,
|
||||
type: 'image' as const,
|
||||
url: `https://example.com/img${i}.jpg`,
|
||||
order: i,
|
||||
caption: i === 0 ? 'First photo' : null,
|
||||
}));
|
||||
}
|
||||
|
||||
describe('ImageLightbox', () => {
|
||||
it('returns null when not open', () => {
|
||||
const { container } = render(
|
||||
<ImageLightbox images={makeImages(3)} open={false} onClose={vi.fn()} />,
|
||||
);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null when images are empty', () => {
|
||||
const { container } = render(
|
||||
<ImageLightbox images={[]} open={true} onClose={vi.fn()} />,
|
||||
);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it('renders when open with images', () => {
|
||||
render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
|
||||
expect(screen.getByRole('dialog')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has correct aria-label', () => {
|
||||
render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Xem ảnh toàn màn hình')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows image counter', () => {
|
||||
render(<ImageLightbox images={makeImages(5)} open={true} onClose={vi.fn()} />);
|
||||
expect(screen.getByText('1 / 5')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows caption when present', () => {
|
||||
render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
|
||||
expect(screen.getByText('First photo')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders close button', () => {
|
||||
render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Đóng (Escape)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onClose when close button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onClose = vi.fn();
|
||||
render(<ImageLightbox images={makeImages(3)} open={true} onClose={onClose} />);
|
||||
|
||||
await user.click(screen.getByLabelText('Đóng (Escape)'));
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders navigation arrows for multiple images', () => {
|
||||
render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
|
||||
expect(screen.getByLabelText(/Ảnh trước/)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/Ảnh tiếp/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render arrows for single image', () => {
|
||||
render(<ImageLightbox images={makeImages(1)} open={true} onClose={vi.fn()} />);
|
||||
expect(screen.queryByLabelText(/Ảnh trước/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByLabelText(/Ảnh tiếp/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders thumbnail strip for multiple images', () => {
|
||||
render(<ImageLightbox images={makeImages(4)} open={true} onClose={vi.fn()} />);
|
||||
const tablist = screen.getByRole('tablist');
|
||||
expect(tablist).toBeInTheDocument();
|
||||
expect(screen.getAllByRole('tab')).toHaveLength(4);
|
||||
});
|
||||
|
||||
it('first thumbnail is selected by default', () => {
|
||||
render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
|
||||
const tabs = screen.getAllByRole('tab');
|
||||
expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
|
||||
});
|
||||
|
||||
it('navigates to next image when arrow clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
|
||||
|
||||
await user.click(screen.getByLabelText(/Ảnh tiếp/));
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('uses initialIndex prop', () => {
|
||||
render(
|
||||
<ImageLightbox images={makeImages(5)} open={true} onClose={vi.fn()} initialIndex={2} />,
|
||||
);
|
||||
expect(screen.getByText('3 / 5')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
74
apps/web/components/listings/__tests__/image-upload.spec.tsx
Normal file
74
apps/web/components/listings/__tests__/image-upload.spec.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { ImageUpload, type ImageFile } from '../image-upload';
|
||||
|
||||
function createMockImageFile(name = 'test.jpg'): ImageFile {
|
||||
const file = new File(['content'], name, { type: 'image/jpeg' });
|
||||
return { file, preview: `blob:${name}` };
|
||||
}
|
||||
|
||||
describe('ImageUpload', () => {
|
||||
it('renders drop zone with instructions', () => {
|
||||
render(<ImageUpload images={[]} onChange={vi.fn()} />);
|
||||
expect(screen.getByText('Kéo thả ảnh vào đây hoặc nhấp để chọn')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders max files hint', () => {
|
||||
render(<ImageUpload images={[]} onChange={vi.fn()} maxFiles={10} />);
|
||||
expect(screen.getByText(/Tối đa 10 ảnh/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders default max files hint (20)', () => {
|
||||
render(<ImageUpload images={[]} onChange={vi.fn()} />);
|
||||
expect(screen.getByText(/Tối đa 20 ảnh/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders image previews when images are provided', () => {
|
||||
const images = [createMockImageFile('img1.jpg'), createMockImageFile('img2.jpg')];
|
||||
render(<ImageUpload images={images} onChange={vi.fn()} />);
|
||||
const imgElements = screen.getAllByRole('img');
|
||||
expect(imgElements).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('shows "Ảnh bìa" badge on first image', () => {
|
||||
const images = [createMockImageFile()];
|
||||
render(<ImageUpload images={images} onChange={vi.fn()} />);
|
||||
expect(screen.getByText('Ảnh bìa')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows delete button on hover (rendered)', () => {
|
||||
const images = [createMockImageFile()];
|
||||
render(<ImageUpload images={images} onChange={vi.fn()} />);
|
||||
expect(screen.getByText('Xóa')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onChange when delete button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onChange = vi.fn();
|
||||
const images = [createMockImageFile('img1.jpg'), createMockImageFile('img2.jpg')];
|
||||
render(<ImageUpload images={images} onChange={onChange} />);
|
||||
|
||||
const deleteButtons = screen.getAllByText('Xóa');
|
||||
await user.click(deleteButtons[0]!);
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('has accessible drop zone with aria-label', () => {
|
||||
render(<ImageUpload images={[]} onChange={vi.fn()} />);
|
||||
expect(screen.getByLabelText(/Tải ảnh lên/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders hidden file input', () => {
|
||||
render(<ImageUpload images={[]} onChange={vi.fn()} />);
|
||||
const fileInput = document.querySelector('input[type="file"]');
|
||||
expect(fileInput).toBeInTheDocument();
|
||||
expect(fileInput).toHaveClass('hidden');
|
||||
});
|
||||
|
||||
it('accepts correct file types', () => {
|
||||
render(<ImageUpload images={[]} onChange={vi.fn()} />);
|
||||
const fileInput = document.querySelector('input[type="file"]');
|
||||
expect(fileInput).toHaveAttribute('accept', 'image/jpeg,image/png,image/webp');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,222 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { ListingDetail } from '@/lib/listings-api';
|
||||
import { ListingDetailClient } from '../listing-detail-client';
|
||||
|
||||
// Mock next/image
|
||||
vi.mock('next/image', () => ({
|
||||
default: (props: Record<string, unknown>) => <img {...props} />,
|
||||
}));
|
||||
|
||||
// Mock next/link
|
||||
vi.mock('next/link', () => ({
|
||||
default: ({ children, href }: { children: React.ReactNode; href: string }) => (
|
||||
<a href={href}>{children}</a>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock next/dynamic to render children directly
|
||||
vi.mock('next/dynamic', () => ({
|
||||
default: () => {
|
||||
const DynamicComponent = () => <div data-testid="listing-map">Map placeholder</div>;
|
||||
DynamicComponent.displayName = 'DynamicListingMap';
|
||||
return DynamicComponent;
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock AddToCompareButton
|
||||
vi.mock('@/components/comparison/add-to-compare-button', () => ({
|
||||
AddToCompareButton: ({ listingId }: { listingId: string }) => (
|
||||
<button data-testid={`compare-btn-${listingId}`}>Compare</button>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock ImageGallery
|
||||
vi.mock('@/components/listings/image-gallery', () => ({
|
||||
ImageGallery: () => <div data-testid="image-gallery">Gallery</div>,
|
||||
}));
|
||||
|
||||
// Mock AiEstimateButton
|
||||
vi.mock('@/components/valuation/ai-estimate-button', () => ({
|
||||
AiEstimateButton: ({ listingId }: { listingId: string }) => (
|
||||
<button data-testid={`ai-estimate-${listingId}`}>AI Estimate</button>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock currency
|
||||
vi.mock('@/lib/currency', () => ({
|
||||
formatPrice: (price: string) => {
|
||||
const n = Number(price);
|
||||
if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)} tỷ`;
|
||||
return n.toLocaleString('vi-VN');
|
||||
},
|
||||
formatPricePerM2: (price: number) => `${(price / 1_000_000).toFixed(1)} tr/m²`,
|
||||
}));
|
||||
|
||||
function makeListing(overrides: Partial<ListingDetail> = {}): ListingDetail {
|
||||
return {
|
||||
id: 'listing-1',
|
||||
status: 'ACTIVE',
|
||||
transactionType: 'SALE',
|
||||
priceVND: '3500000000',
|
||||
pricePerM2: 40_000_000,
|
||||
rentPriceMonthly: null,
|
||||
commissionPct: null,
|
||||
viewCount: 100,
|
||||
saveCount: 10,
|
||||
inquiryCount: 5,
|
||||
publishedAt: '2026-01-01T00:00:00Z',
|
||||
createdAt: '2025-12-01T00:00:00Z',
|
||||
property: {
|
||||
id: 'prop-1',
|
||||
propertyType: 'APARTMENT',
|
||||
title: 'Căn hộ 2PN Vinhomes Central Park',
|
||||
description: 'Căn hộ đẹp view sông Sài Gòn',
|
||||
address: '208 Nguyễn Hữu Cảnh',
|
||||
ward: 'Phường 22',
|
||||
district: 'Quận Bình Thạnh',
|
||||
city: 'Hồ Chí Minh',
|
||||
areaM2: 75,
|
||||
bedrooms: 2,
|
||||
bathrooms: 2,
|
||||
floors: null,
|
||||
direction: 'SOUTH',
|
||||
yearBuilt: 2020,
|
||||
legalStatus: 'Sổ hồng',
|
||||
amenities: ['Hồ bơi', 'Gym'],
|
||||
projectName: 'Vinhomes Central Park',
|
||||
latitude: 10.7975,
|
||||
longitude: 106.721,
|
||||
media: [
|
||||
{ id: 'media-1', type: 'image', url: 'https://example.com/img1.jpg', order: 0, caption: null },
|
||||
],
|
||||
},
|
||||
seller: {
|
||||
id: 'seller-1',
|
||||
fullName: 'Nguyen Van B',
|
||||
phone: '0912345678',
|
||||
},
|
||||
agent: null,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe('ListingDetailClient', () => {
|
||||
it('renders property title', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Căn hộ 2PN Vinhomes Central Park');
|
||||
});
|
||||
|
||||
it('renders formatted price', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText(/3\.5 tỷ VND/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property address', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText(/208 Nguyễn Hữu Cảnh/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders transaction type badge', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText('Bán')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property type badge', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
// "Căn hộ" appears in badge, title, description, and detail row — use getAllByText
|
||||
const matches = screen.getAllByText(/Căn hộ/);
|
||||
expect(matches.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('renders area in quick stats', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
// "75 m²" may appear in multiple places (quick stats and detail row)
|
||||
const matches = screen.getAllByText(/75 m/);
|
||||
expect(matches.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('renders bedrooms in quick stats', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
// Bedrooms value is displayed in the quick stats
|
||||
const allText = document.body.textContent;
|
||||
expect(allText).toContain('2');
|
||||
});
|
||||
|
||||
it('renders description section', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText('Mô tả')).toBeInTheDocument();
|
||||
expect(screen.getByText('Căn hộ đẹp view sông Sài Gòn')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders seller contact info', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText('Nguyen Van B')).toBeInTheDocument();
|
||||
expect(screen.getByText('0912345678')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Gọi ngay button', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText('Gọi ngay')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders view/save/inquiry stats', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText('100')).toBeInTheDocument(); // viewCount
|
||||
expect(screen.getByText('10')).toBeInTheDocument(); // saveCount
|
||||
expect(screen.getByText('5')).toBeInTheDocument(); // inquiryCount
|
||||
});
|
||||
|
||||
it('renders amenities when present', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText('Hồ bơi')).toBeInTheDocument();
|
||||
expect(screen.getByText('Gym')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render amenities section when empty', () => {
|
||||
const listing = makeListing();
|
||||
listing.property.amenities = [];
|
||||
render(<ListingDetailClient listing={listing} />);
|
||||
expect(screen.queryByText('Tiện ích')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders rent price when present', () => {
|
||||
render(<ListingDetailClient listing={makeListing({ rentPriceMonthly: '15000000' })} />);
|
||||
// Rent text contains monthly rent info
|
||||
const content = document.body.textContent ?? '';
|
||||
// Check for the rent amount - format may vary; at minimum the number should appear
|
||||
expect(content).toMatch(/15[.,]000[.,]000/);
|
||||
});
|
||||
|
||||
it('renders breadcrumb navigation', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
// Breadcrumb uses unicode chars
|
||||
const nav = screen.getByRole('navigation');
|
||||
expect(nav).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders compare button', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByTestId('compare-btn-listing-1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders AI estimate button', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByTestId('ai-estimate-listing-1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders agent commission info when present', () => {
|
||||
const listing = makeListing({
|
||||
agent: { agency: 'Công ty ABC', id: 'agent-1' } as ListingDetail['agent'],
|
||||
commissionPct: 2.5,
|
||||
});
|
||||
render(<ListingDetailClient listing={listing} />);
|
||||
expect(screen.getByText('Công ty ABC')).toBeInTheDocument();
|
||||
expect(screen.getByText('Hoa hồng: 2.5%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders published date', () => {
|
||||
render(<ListingDetailClient listing={makeListing()} />);
|
||||
expect(screen.getByText(/Đăng ngày/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,204 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import type { UseFormRegister, FieldErrors } from 'react-hook-form';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { CreateListingFormData } from '@/lib/validations/listings';
|
||||
import { StepBasicInfo, StepLocation, StepDetails, StepPricing } from '../listing-form-steps';
|
||||
|
||||
// Minimal register mock that returns required react-hook-form props
|
||||
function mockRegister(): UseFormRegister<CreateListingFormData> {
|
||||
return vi.fn().mockImplementation((name: string) => ({
|
||||
name,
|
||||
onChange: vi.fn(),
|
||||
onBlur: vi.fn(),
|
||||
ref: vi.fn(),
|
||||
})) as unknown as UseFormRegister<CreateListingFormData>;
|
||||
}
|
||||
|
||||
const noErrors: FieldErrors<CreateListingFormData> = {};
|
||||
|
||||
// ─── StepBasicInfo ──────────────────────────────────────
|
||||
|
||||
describe('StepBasicInfo', () => {
|
||||
it('renders the step heading', () => {
|
||||
render(<StepBasicInfo register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText('Thông tin cơ bản')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders transaction type select', () => {
|
||||
render(<StepBasicInfo register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Loại giao dịch *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property type select', () => {
|
||||
render(<StepBasicInfo register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Loại bất động sản *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders title input', () => {
|
||||
render(<StepBasicInfo register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Tiêu đề tin đăng *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders description textarea', () => {
|
||||
render(<StepBasicInfo register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Mô tả chi tiết *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders transaction type options', () => {
|
||||
render(<StepBasicInfo register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText('Bán')).toBeInTheDocument();
|
||||
expect(screen.getByText('Cho thuê')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property type options', () => {
|
||||
render(<StepBasicInfo register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText('Căn hộ')).toBeInTheDocument();
|
||||
expect(screen.getByText('Nhà riêng')).toBeInTheDocument();
|
||||
expect(screen.getByText('Biệt thự')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error message for transactionType', () => {
|
||||
const errors: FieldErrors<CreateListingFormData> = {
|
||||
transactionType: { type: 'required', message: 'Vui lòng chọn loại giao dịch' },
|
||||
};
|
||||
render(<StepBasicInfo register={mockRegister()} errors={errors} />);
|
||||
expect(screen.getByText('Vui lòng chọn loại giao dịch')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error message for title', () => {
|
||||
const errors: FieldErrors<CreateListingFormData> = {
|
||||
title: { type: 'min', message: 'Tiêu đề tối thiểu 5 ký tự' },
|
||||
};
|
||||
render(<StepBasicInfo register={mockRegister()} errors={errors} />);
|
||||
expect(screen.getByText('Tiêu đề tối thiểu 5 ký tự')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── StepLocation ───────────────────────────────────────
|
||||
|
||||
describe('StepLocation', () => {
|
||||
it('renders the step heading', () => {
|
||||
render(<StepLocation register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText('Vị trí')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders address input', () => {
|
||||
render(<StepLocation register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Địa chỉ *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders ward input', () => {
|
||||
render(<StepLocation register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Phường/Xã *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders district input', () => {
|
||||
render(<StepLocation register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Quận/Huyện *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders city input', () => {
|
||||
render(<StepLocation register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Tỉnh/Thành phố *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders latitude and longitude inputs', () => {
|
||||
render(<StepLocation register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Vĩ độ')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Kinh độ')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders map placeholder text', () => {
|
||||
render(<StepLocation register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText(/Bản đồ chọn vị trí sẽ được tích hợp/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error for address', () => {
|
||||
const errors: FieldErrors<CreateListingFormData> = {
|
||||
address: { type: 'required', message: 'Vui lòng nhập địa chỉ' },
|
||||
};
|
||||
render(<StepLocation register={mockRegister()} errors={errors} />);
|
||||
expect(screen.getByText('Vui lòng nhập địa chỉ')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── StepDetails ────────────────────────────────────────
|
||||
|
||||
describe('StepDetails', () => {
|
||||
it('renders the step heading', () => {
|
||||
render(<StepDetails register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText('Thông số chi tiết')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders area input', () => {
|
||||
render(<StepDetails register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Diện tích (m²) *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders bedroom and bathroom inputs', () => {
|
||||
render(<StepDetails register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Phòng ngủ')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Phòng tắm')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders direction select', () => {
|
||||
render(<StepDetails register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Hướng nhà')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders direction options', () => {
|
||||
render(<StepDetails register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText('Bắc')).toBeInTheDocument();
|
||||
expect(screen.getByText('Nam')).toBeInTheDocument();
|
||||
expect(screen.getByText('Đông')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders year built input', () => {
|
||||
render(<StepDetails register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Năm xây dựng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders legal status and project name inputs', () => {
|
||||
render(<StepDetails register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Pháp lý')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Tên dự án')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders amenities input', () => {
|
||||
render(<StepDetails register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText(/Tiện ích/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── StepPricing ────────────────────────────────────────
|
||||
|
||||
describe('StepPricing', () => {
|
||||
it('renders the step heading', () => {
|
||||
render(<StepPricing register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText('Giá & Hoa hồng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders price input', () => {
|
||||
render(<StepPricing register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Giá bán (VNĐ) *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders rent price and commission inputs', () => {
|
||||
render(<StepPricing register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByLabelText('Giá thuê/tháng (VNĐ)')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Hoa hồng (%)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders price format hint', () => {
|
||||
render(<StepPricing register={mockRegister()} errors={noErrors} />);
|
||||
expect(screen.getByText(/Nhập số không có dấu chấm/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error for priceVND', () => {
|
||||
const errors: FieldErrors<CreateListingFormData> = {
|
||||
priceVND: { type: 'required', message: 'Giá bán là bắt buộc' },
|
||||
};
|
||||
render(<StepPricing register={mockRegister()} errors={errors} />);
|
||||
expect(screen.getByText('Giá bán là bắt buộc')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { ListingStatusBadge } from '../listing-status-badge';
|
||||
|
||||
describe('ListingStatusBadge', () => {
|
||||
it('renders ACTIVE status with correct label', () => {
|
||||
render(<ListingStatusBadge status="ACTIVE" />);
|
||||
expect(screen.getByText('Đang bán')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders DRAFT status with correct label', () => {
|
||||
render(<ListingStatusBadge status="DRAFT" />);
|
||||
expect(screen.getByText('Nháp')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders PENDING_REVIEW status with correct label', () => {
|
||||
render(<ListingStatusBadge status="PENDING_REVIEW" />);
|
||||
expect(screen.getByText('Chờ duyệt')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders SOLD status with correct label', () => {
|
||||
render(<ListingStatusBadge status="SOLD" />);
|
||||
expect(screen.getByText('Đã bán')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders RENTED status with correct label', () => {
|
||||
render(<ListingStatusBadge status="RENTED" />);
|
||||
expect(screen.getByText('Đã cho thuê')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders EXPIRED status with correct label', () => {
|
||||
render(<ListingStatusBadge status="EXPIRED" />);
|
||||
expect(screen.getByText('Hết hạn')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders REJECTED status with correct label', () => {
|
||||
render(<ListingStatusBadge status="REJECTED" />);
|
||||
expect(screen.getByText('Bị từ chối')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders RESERVED status with correct label', () => {
|
||||
render(<ListingStatusBadge status="RESERVED" />);
|
||||
expect(screen.getByText('Đã đặt cọc')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('falls back to raw status value for unknown status', () => {
|
||||
// @ts-expect-error testing unknown status
|
||||
render(<ListingStatusBadge status="UNKNOWN_STATUS" />);
|
||||
expect(screen.getByText('UNKNOWN_STATUS')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { AuthProvider } from '../auth-provider';
|
||||
|
||||
const mockInitialize = vi.fn();
|
||||
|
||||
vi.mock('@/lib/auth-store', () => ({
|
||||
useAuthStore: (selector: (state: { initialize: () => void }) => unknown) =>
|
||||
selector({ initialize: mockInitialize }),
|
||||
}));
|
||||
|
||||
describe('AuthProvider', () => {
|
||||
beforeEach(() => {
|
||||
mockInitialize.mockClear();
|
||||
});
|
||||
|
||||
it('renders children', () => {
|
||||
render(
|
||||
<AuthProvider>
|
||||
<div>Child content</div>
|
||||
</AuthProvider>,
|
||||
);
|
||||
expect(screen.getByText('Child content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls initialize on mount', () => {
|
||||
render(
|
||||
<AuthProvider>
|
||||
<div>Test</div>
|
||||
</AuthProvider>,
|
||||
);
|
||||
expect(mockInitialize).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders multiple children', () => {
|
||||
render(
|
||||
<AuthProvider>
|
||||
<div>Child 1</div>
|
||||
<div>Child 2</div>
|
||||
</AuthProvider>,
|
||||
);
|
||||
expect(screen.getByText('Child 1')).toBeInTheDocument();
|
||||
expect(screen.getByText('Child 2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
125
apps/web/components/providers/__tests__/theme-provider.spec.tsx
Normal file
125
apps/web/components/providers/__tests__/theme-provider.spec.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { ThemeProvider, useTheme } from '../theme-provider';
|
||||
|
||||
// Provide a working localStorage mock for this test file
|
||||
const localStorageMock = (() => {
|
||||
let store: Record<string, string> = {};
|
||||
return {
|
||||
getItem: vi.fn((key: string) => store[key] ?? null),
|
||||
setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
|
||||
removeItem: vi.fn((key: string) => { delete store[key]; }),
|
||||
clear: vi.fn(() => { store = {}; }),
|
||||
get length() { return Object.keys(store).length; },
|
||||
key: vi.fn((index: number) => Object.keys(store)[index] ?? null),
|
||||
};
|
||||
})();
|
||||
|
||||
Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true });
|
||||
|
||||
// Mock window.matchMedia (not implemented in jsdom)
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query: string) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
// Test consumer component
|
||||
function ThemeConsumer() {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
return (
|
||||
<div>
|
||||
<span data-testid="theme">{theme}</span>
|
||||
<button onClick={toggleTheme}>Toggle</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
describe('ThemeProvider', () => {
|
||||
beforeEach(() => {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorageMock.clear();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders children', () => {
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<div>Child content</div>
|
||||
</ThemeProvider>,
|
||||
);
|
||||
expect(screen.getByText('Child content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('defaults to light theme', () => {
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('light');
|
||||
});
|
||||
|
||||
it('toggles theme to dark', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('dark');
|
||||
});
|
||||
|
||||
it('toggles theme back to light', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('light');
|
||||
});
|
||||
|
||||
it('persists theme to localStorage', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith('goodgo-theme', 'dark');
|
||||
});
|
||||
|
||||
it('loads stored theme from localStorage', () => {
|
||||
localStorageMock.getItem.mockReturnValueOnce('dark');
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('dark');
|
||||
});
|
||||
});
|
||||
|
||||
describe('useTheme', () => {
|
||||
it('returns default values outside provider', () => {
|
||||
render(<ThemeConsumer />);
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('light');
|
||||
});
|
||||
});
|
||||
29
apps/web/components/providers/__tests__/web-vitals.spec.tsx
Normal file
29
apps/web/components/providers/__tests__/web-vitals.spec.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { render } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { WebVitals } from '../web-vitals';
|
||||
|
||||
// Mock web-vitals
|
||||
vi.mock('web-vitals', () => ({
|
||||
onLCP: vi.fn(),
|
||||
onFCP: vi.fn(),
|
||||
onCLS: vi.fn(),
|
||||
onTTFB: vi.fn(),
|
||||
onINP: vi.fn(),
|
||||
}));
|
||||
|
||||
// Mock the internal web-vitals lib
|
||||
vi.mock('@/lib/web-vitals', () => ({
|
||||
reportWebVital: vi.fn(),
|
||||
flushWebVitals: vi.fn(),
|
||||
}));
|
||||
|
||||
describe('WebVitals', () => {
|
||||
it('renders nothing (returns null)', () => {
|
||||
const { container } = render(<WebVitals />);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it('does not throw when rendered', () => {
|
||||
expect(() => render(<WebVitals />)).not.toThrow();
|
||||
});
|
||||
});
|
||||
137
apps/web/components/search/__tests__/filter-bar.spec.tsx
Normal file
137
apps/web/components/search/__tests__/filter-bar.spec.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { type SearchFilters, FilterBar } from '../filter-bar';
|
||||
|
||||
// Mock next-intl
|
||||
vi.mock('next-intl', () => ({
|
||||
useTranslations: () => (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
filters: 'Bộ lọc',
|
||||
allTransactions: 'Tất cả giao dịch',
|
||||
allPropertyTypes: 'Tất cả loại BĐS',
|
||||
allAreas: 'Tất cả khu vực',
|
||||
allPrices: 'Tất cả mức giá',
|
||||
bedrooms: 'Phòng ngủ',
|
||||
searchButton: 'Tìm kiếm',
|
||||
areaLabel: 'Diện tích',
|
||||
areaFrom: 'Từ',
|
||||
areaTo: 'Đến',
|
||||
district: 'Quận/Huyện',
|
||||
'bedroomsCount': '1+ PN',
|
||||
'priceRanges.under1b': 'Dưới 1 tỷ',
|
||||
'priceRanges.1to3b': '1-3 tỷ',
|
||||
'priceRanges.3to5b': '3-5 tỷ',
|
||||
'priceRanges.5to10b': '5-10 tỷ',
|
||||
'priceRanges.10to20b': '10-20 tỷ',
|
||||
'priceRanges.over20b': 'Trên 20 tỷ',
|
||||
};
|
||||
return translations[key] ?? key;
|
||||
},
|
||||
}));
|
||||
|
||||
const defaultFilters: SearchFilters = {
|
||||
transactionType: '',
|
||||
propertyType: '',
|
||||
city: '',
|
||||
district: '',
|
||||
minPrice: '',
|
||||
maxPrice: '',
|
||||
minArea: '',
|
||||
maxArea: '',
|
||||
bedrooms: '',
|
||||
sort: '',
|
||||
};
|
||||
|
||||
describe('FilterBar', () => {
|
||||
it('renders transaction type select', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Tất cả giao dịch')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property type select', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Tất cả loại BĐS')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders city select', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Tất cả khu vực')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders transaction type options', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
|
||||
expect(screen.getByText('Bán')).toBeInTheDocument();
|
||||
expect(screen.getByText('Cho thuê')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders city options', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
|
||||
expect(screen.getByText('Hồ Chí Minh')).toBeInTheDocument();
|
||||
expect(screen.getByText('Hà Nội')).toBeInTheDocument();
|
||||
expect(screen.getByText('Đà Nẵng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders bedrooms select', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Phòng ngủ')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has search role', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
|
||||
expect(screen.getByRole('search')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onChange when transaction type changes', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onChange = vi.fn();
|
||||
render(<FilterBar filters={defaultFilters} onChange={onChange} onSearch={vi.fn()} />);
|
||||
|
||||
await user.selectOptions(screen.getByLabelText('Tất cả giao dịch'), 'SALE');
|
||||
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ transactionType: 'SALE' }));
|
||||
});
|
||||
|
||||
it('calls onChange when city changes', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onChange = vi.fn();
|
||||
render(<FilterBar filters={defaultFilters} onChange={onChange} onSearch={vi.fn()} />);
|
||||
|
||||
await user.selectOptions(screen.getByLabelText('Tất cả khu vực'), 'Hồ Chí Minh');
|
||||
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ city: 'Hồ Chí Minh' }));
|
||||
});
|
||||
|
||||
// Sidebar layout
|
||||
it('renders search button in sidebar layout', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="sidebar" />);
|
||||
expect(screen.getByText('Tìm kiếm')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders heading in sidebar layout', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="sidebar" />);
|
||||
expect(screen.getByText('Bộ lọc')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders area inputs in sidebar layout', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="sidebar" />);
|
||||
expect(screen.getByLabelText(/Diện tích Từ/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders district input in sidebar layout', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="sidebar" />);
|
||||
expect(screen.getByLabelText('Quận/Huyện')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onSearch when search button clicked in sidebar', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSearch = vi.fn();
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={onSearch} layout="sidebar" />);
|
||||
|
||||
await user.click(screen.getByText('Tìm kiếm'));
|
||||
expect(onSearch).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does not render search button in horizontal layout', () => {
|
||||
render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="horizontal" />);
|
||||
expect(screen.queryByText('Tìm kiếm')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
183
apps/web/components/search/__tests__/search-results.spec.tsx
Normal file
183
apps/web/components/search/__tests__/search-results.spec.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { ListingDetail, PaginatedResult } from '@/lib/listings-api';
|
||||
import { SearchResults } from '../search-results';
|
||||
|
||||
// Mock PropertyCard
|
||||
vi.mock('../property-card', () => ({
|
||||
PropertyCard: ({ listing }: { listing: ListingDetail }) => (
|
||||
<div data-testid={`property-card-${listing.id}`}>{listing.property.title}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
function makeListing(id: string): ListingDetail {
|
||||
return {
|
||||
id,
|
||||
status: 'ACTIVE',
|
||||
transactionType: 'SALE',
|
||||
priceVND: '3500000000',
|
||||
pricePerM2: 40_000_000,
|
||||
rentPriceMonthly: null,
|
||||
commissionPct: null,
|
||||
viewCount: 100,
|
||||
saveCount: 10,
|
||||
inquiryCount: 5,
|
||||
publishedAt: '2026-01-01T00:00:00Z',
|
||||
createdAt: '2025-12-01T00:00:00Z',
|
||||
property: {
|
||||
id: `prop-${id}`,
|
||||
propertyType: 'APARTMENT',
|
||||
title: `Listing ${id}`,
|
||||
description: 'Test listing',
|
||||
address: '123 Test St',
|
||||
ward: 'Ward',
|
||||
district: 'District',
|
||||
city: 'HCMC',
|
||||
areaM2: 75,
|
||||
bedrooms: 2,
|
||||
bathrooms: 2,
|
||||
floors: null,
|
||||
direction: null,
|
||||
yearBuilt: null,
|
||||
legalStatus: null,
|
||||
amenities: [],
|
||||
projectName: null,
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
media: [],
|
||||
},
|
||||
seller: { id: 's1', fullName: 'Seller', phone: '0901234567' },
|
||||
agent: null,
|
||||
};
|
||||
}
|
||||
|
||||
function makeResult(count: number, page = 1, totalPages = 1): PaginatedResult<ListingDetail> {
|
||||
return {
|
||||
data: Array.from({ length: count }, (_, i) => makeListing(`${i + 1}`)),
|
||||
total: count,
|
||||
page,
|
||||
limit: 10,
|
||||
totalPages,
|
||||
};
|
||||
}
|
||||
|
||||
const defaultProps = {
|
||||
page: 1,
|
||||
sort: '',
|
||||
onPageChange: vi.fn(),
|
||||
onSortChange: vi.fn(),
|
||||
};
|
||||
|
||||
describe('SearchResults', () => {
|
||||
it('renders loading spinner when loading', () => {
|
||||
const { container } = render(
|
||||
<SearchResults result={null} loading={true} {...defaultProps} />,
|
||||
);
|
||||
expect(container.querySelector('.animate-spin')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders error state', () => {
|
||||
render(
|
||||
<SearchResults result={null} loading={false} error={true} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.getByText('Không thể tải kết quả tìm kiếm')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders retry button in error state', () => {
|
||||
const onRetry = vi.fn();
|
||||
render(
|
||||
<SearchResults result={null} loading={false} error={true} onRetry={onRetry} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.getByText('Thử lại')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onRetry when retry button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onRetry = vi.fn();
|
||||
render(
|
||||
<SearchResults result={null} loading={false} error={true} onRetry={onRetry} {...defaultProps} />,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Thử lại'));
|
||||
expect(onRetry).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders empty state when no results', () => {
|
||||
render(
|
||||
<SearchResults result={makeResult(0)} loading={false} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.getByText('Không tìm thấy kết quả')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty state with null result', () => {
|
||||
render(
|
||||
<SearchResults result={null} loading={false} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.getByText('Không tìm thấy kết quả')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property cards for results', () => {
|
||||
render(
|
||||
<SearchResults result={makeResult(3)} loading={false} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.getByTestId('property-card-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('property-card-2')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('property-card-3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders total results count', () => {
|
||||
render(
|
||||
<SearchResults result={makeResult(3)} loading={false} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.getByText('3 kết quả')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders sort select', () => {
|
||||
render(
|
||||
<SearchResults result={makeResult(3)} loading={false} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.getByText('Mới nhất')).toBeInTheDocument();
|
||||
expect(screen.getByText('Giá: Thấp đến cao')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders pagination buttons for multi-page results', () => {
|
||||
render(
|
||||
<SearchResults result={makeResult(3, 1, 3)} loading={false} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.getByText('Trước')).toBeInTheDocument();
|
||||
expect(screen.getByText('Tiếp')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disables Trước button on first page', () => {
|
||||
render(
|
||||
<SearchResults result={makeResult(3, 1, 3)} loading={false} page={1} sort="" onPageChange={vi.fn()} onSortChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Trước')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('disables Tiếp button on last page', () => {
|
||||
render(
|
||||
<SearchResults result={makeResult(3, 3, 3)} loading={false} page={3} sort="" onPageChange={vi.fn()} onSortChange={vi.fn()} />,
|
||||
);
|
||||
expect(screen.getByText('Tiếp')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('calls onPageChange when Tiếp clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onPageChange = vi.fn();
|
||||
render(
|
||||
<SearchResults result={makeResult(3, 1, 3)} loading={false} page={1} sort="" onPageChange={onPageChange} onSortChange={vi.fn()} />,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Tiếp'));
|
||||
expect(onPageChange).toHaveBeenCalledWith(2);
|
||||
});
|
||||
|
||||
it('does not render pagination for single page', () => {
|
||||
render(
|
||||
<SearchResults result={makeResult(3, 1, 1)} loading={false} {...defaultProps} />,
|
||||
);
|
||||
expect(screen.queryByText('Trước')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
66
apps/web/components/ui/__tests__/language-switcher.spec.tsx
Normal file
66
apps/web/components/ui/__tests__/language-switcher.spec.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { LanguageSwitcher } from '../language-switcher';
|
||||
|
||||
// Mock next-intl
|
||||
vi.mock('next-intl', () => ({
|
||||
useLocale: () => 'vi',
|
||||
useTranslations: () => (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
label: 'Ngôn ngữ',
|
||||
vi: 'Tiếng Việt',
|
||||
en: 'English',
|
||||
};
|
||||
return translations[key] ?? key;
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock i18n navigation
|
||||
const mockReplace = vi.fn();
|
||||
vi.mock('@/i18n/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
replace: mockReplace,
|
||||
}),
|
||||
usePathname: () => '/search',
|
||||
}));
|
||||
|
||||
describe('LanguageSwitcher', () => {
|
||||
beforeEach(() => {
|
||||
mockReplace.mockClear();
|
||||
});
|
||||
|
||||
it('renders a button', () => {
|
||||
render(<LanguageSwitcher />);
|
||||
expect(screen.getByRole('button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has correct aria-label', () => {
|
||||
render(<LanguageSwitcher />);
|
||||
expect(screen.getByRole('button')).toHaveAttribute(
|
||||
'aria-label',
|
||||
expect.stringContaining('Ngôn ngữ'),
|
||||
);
|
||||
});
|
||||
|
||||
it('shows next locale label (EN when current is VI)', () => {
|
||||
render(<LanguageSwitcher />);
|
||||
// The button should display the label for "en" since current is "vi"
|
||||
expect(screen.getByText(/EN/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls router.replace when clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<LanguageSwitcher />);
|
||||
|
||||
await user.click(screen.getByRole('button'));
|
||||
expect(mockReplace).toHaveBeenCalledWith('/search', { locale: 'en' });
|
||||
});
|
||||
|
||||
it('has screen reader text', () => {
|
||||
render(<LanguageSwitcher />);
|
||||
const srText = document.querySelector('.sr-only');
|
||||
expect(srText).toBeInTheDocument();
|
||||
expect(srText).toHaveTextContent('English');
|
||||
});
|
||||
});
|
||||
117
apps/web/components/ui/__tests__/tabs.spec.tsx
Normal file
117
apps/web/components/ui/__tests__/tabs.spec.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../tabs';
|
||||
|
||||
describe('Tabs', () => {
|
||||
it('renders the active tab content', () => {
|
||||
render(
|
||||
<Tabs value="tab1" onValueChange={vi.fn()}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
||||
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1">Content 1</TabsContent>
|
||||
<TabsContent value="tab2">Content 2</TabsContent>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('Content 1')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides inactive tab content', () => {
|
||||
render(
|
||||
<Tabs value="tab2" onValueChange={vi.fn()}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
||||
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1">Content 1</TabsContent>
|
||||
<TabsContent value="tab2">Content 2</TabsContent>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('Content 2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onValueChange when a trigger is clicked', async () => {
|
||||
const onValueChange = vi.fn();
|
||||
render(
|
||||
<Tabs value="tab1" onValueChange={onValueChange}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
||||
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1">Content 1</TabsContent>
|
||||
<TabsContent value="tab2">Content 2</TabsContent>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
await userEvent.click(screen.getByText('Tab 2'));
|
||||
expect(onValueChange).toHaveBeenCalledWith('tab2');
|
||||
});
|
||||
|
||||
it('renders all trigger buttons', () => {
|
||||
render(
|
||||
<Tabs value="tab1" onValueChange={vi.fn()}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="tab1">First</TabsTrigger>
|
||||
<TabsTrigger value="tab2">Second</TabsTrigger>
|
||||
<TabsTrigger value="tab3">Third</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1">C1</TabsContent>
|
||||
<TabsContent value="tab2">C2</TabsContent>
|
||||
<TabsContent value="tab3">C3</TabsContent>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('First')).toBeInTheDocument();
|
||||
expect(screen.getByText('Second')).toBeInTheDocument();
|
||||
expect(screen.getByText('Third')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies active styles to selected trigger', () => {
|
||||
render(
|
||||
<Tabs value="tab1" onValueChange={vi.fn()}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="tab1" data-testid="trigger-1">Tab 1</TabsTrigger>
|
||||
<TabsTrigger value="tab2" data-testid="trigger-2">Tab 2</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1">Content</TabsContent>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('trigger-1')).toHaveClass('bg-background');
|
||||
expect(screen.getByTestId('trigger-2')).not.toHaveClass('bg-background');
|
||||
});
|
||||
|
||||
it('applies custom className to TabsList', () => {
|
||||
render(
|
||||
<Tabs value="tab1" onValueChange={vi.fn()}>
|
||||
<TabsList className="custom-list" data-testid="list">
|
||||
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1">Content</TabsContent>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('list')).toHaveClass('custom-list');
|
||||
});
|
||||
|
||||
it('applies custom className to TabsContent', () => {
|
||||
render(
|
||||
<Tabs value="tab1" onValueChange={vi.fn()}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1" className="custom-content" data-testid="content">
|
||||
Content
|
||||
</TabsContent>
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('content')).toHaveClass('custom-content');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { AiEstimateButton } from '../ai-estimate-button';
|
||||
|
||||
// Mock the hook
|
||||
const mockMutate = vi.fn();
|
||||
vi.mock('@/lib/hooks/use-valuation', () => ({
|
||||
useValuationPredictForListing: () => ({
|
||||
mutate: mockMutate,
|
||||
isPending: false,
|
||||
data: null,
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('AiEstimateButton', () => {
|
||||
beforeEach(() => {
|
||||
mockMutate.mockClear();
|
||||
});
|
||||
|
||||
it('renders the button', () => {
|
||||
render(<AiEstimateButton listingId="listing-1" />);
|
||||
expect(screen.getByText('Dinh gia AI')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls mutate when clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<AiEstimateButton listingId="listing-1" />);
|
||||
|
||||
await user.click(screen.getByText('Dinh gia AI'));
|
||||
expect(mockMutate).toHaveBeenCalledWith('listing-1', expect.any(Object));
|
||||
});
|
||||
|
||||
it('renders as a button element', () => {
|
||||
render(<AiEstimateButton listingId="listing-1" />);
|
||||
expect(screen.getByRole('button', { name: /Dinh gia AI/ })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('AiEstimateButton - loading state', () => {
|
||||
it('shows loading text when pending', () => {
|
||||
vi.mocked(vi.fn()).mockReturnValue(undefined);
|
||||
// Re-mock with isPending
|
||||
vi.doMock('@/lib/hooks/use-valuation', () => ({
|
||||
useValuationPredictForListing: () => ({
|
||||
mutate: vi.fn(),
|
||||
isPending: true,
|
||||
data: null,
|
||||
}),
|
||||
}));
|
||||
|
||||
// This test validates the loading button text exists in the component
|
||||
render(<AiEstimateButton listingId="listing-1" />);
|
||||
// Component shows 'Dinh gia AI' or 'Dang dinh gia...' based on isPending
|
||||
expect(screen.getByRole('button')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
106
apps/web/components/valuation/__tests__/valuation-form.spec.tsx
Normal file
106
apps/web/components/valuation/__tests__/valuation-form.spec.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { ValuationForm } from '../valuation-form';
|
||||
|
||||
// Mock @hookform/resolvers/zod
|
||||
vi.mock('@hookform/resolvers/zod', () => ({
|
||||
zodResolver: () => vi.fn(),
|
||||
}));
|
||||
|
||||
// Mock valuation validation
|
||||
vi.mock('@/lib/validations/valuation', () => ({
|
||||
valuationFormSchema: {},
|
||||
VALUATION_PROPERTY_TYPES: [
|
||||
{ value: 'APARTMENT', label: 'Căn hộ' },
|
||||
{ value: 'HOUSE', label: 'Nhà riêng' },
|
||||
{ value: 'VILLA', label: 'Biệt thự' },
|
||||
{ value: 'LAND', label: 'Đất nền' },
|
||||
],
|
||||
CITIES: [
|
||||
{ value: 'Ho Chi Minh', label: 'Hồ Chí Minh' },
|
||||
{ value: 'Ha Noi', label: 'Hà Nội' },
|
||||
{ value: 'Da Nang', label: 'Đà Nẵng' },
|
||||
],
|
||||
}));
|
||||
|
||||
describe('ValuationForm', () => {
|
||||
it('renders form title', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByText('Dinh gia bat dong san')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property type select', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Loai bat dong san *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders city select', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Tinh/Thanh pho *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders district input', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Quan/Huyen *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders area input', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Dien tich (m2) *')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders bedroom, bathroom, floors inputs', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Phong ngu')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Phong tam')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('So tang')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders frontage and road width inputs', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Mat tien (m)')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Do rong duong (m)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders year built input', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Nam xay dung')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders legal paper checkbox', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByLabelText('Co so do/giay to hop phap')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders submit button', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByText('Dinh gia ngay')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading text when isLoading', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} isLoading={true} />);
|
||||
expect(screen.getByText('Dang dinh gia...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disables submit button when loading', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} isLoading={true} />);
|
||||
expect(screen.getByText('Dang dinh gia...')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('renders property type options', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByText('Căn hộ')).toBeInTheDocument();
|
||||
expect(screen.getByText('Nhà riêng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders city options', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByText('Hồ Chí Minh')).toBeInTheDocument();
|
||||
expect(screen.getByText('Hà Nội')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders description text', () => {
|
||||
render(<ValuationForm onSubmit={vi.fn()} />);
|
||||
expect(screen.getByText(/Nhap thong tin bat dong san de nhan uoc tinh gia tu AI/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,197 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import type { ValuationHistoryItem } from '@/lib/valuation-api';
|
||||
import { ValuationHistory } from '../valuation-history';
|
||||
|
||||
const mockItems: ValuationHistoryItem[] = [
|
||||
{
|
||||
id: 'val-1',
|
||||
propertyType: 'APARTMENT',
|
||||
district: 'Quận 1',
|
||||
city: 'Ho Chi Minh',
|
||||
area: 80,
|
||||
estimatedPriceVND: 5_000_000_000,
|
||||
confidence: 0.85,
|
||||
createdAt: '2026-01-15T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'val-2',
|
||||
propertyType: 'HOUSE',
|
||||
district: 'Quận 7',
|
||||
city: 'Ho Chi Minh',
|
||||
area: 120,
|
||||
estimatedPriceVND: 8_500_000_000,
|
||||
confidence: 0.9,
|
||||
createdAt: '2026-01-10T10:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
describe('ValuationHistory', () => {
|
||||
it('renders history title', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={2}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('Lich su dinh gia')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders total count description', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={2}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('2 lan dinh gia truoc do')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders property type labels', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={2}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('Can ho')).toBeInTheDocument();
|
||||
expect(screen.getByText('Nha rieng')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders district and area for each item', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={2}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText(/Quận 1.*80 m2/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Quận 7.*120 m2/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders formatted prices', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={2}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('5.00 ty')).toBeInTheDocument();
|
||||
expect(screen.getByText('8.50 ty')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onSelect when an item is clicked', async () => {
|
||||
const onSelect = vi.fn();
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={2}
|
||||
page={1}
|
||||
onPageChange={onSelect}
|
||||
onSelect={onSelect}
|
||||
/>,
|
||||
);
|
||||
await userEvent.click(screen.getByText('Can ho'));
|
||||
expect(onSelect).toHaveBeenCalledWith('val-1');
|
||||
});
|
||||
|
||||
it('shows empty state when no items', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={[]}
|
||||
total={0}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('Chua co lich su dinh gia')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading state', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={[]}
|
||||
total={0}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
isLoading
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('Dang tai...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows pagination when multiple pages', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={25}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('Trang 1/3')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Truoc' })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: 'Tiep' })).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it('calls onPageChange with next page', async () => {
|
||||
const onPageChange = vi.fn();
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={25}
|
||||
page={1}
|
||||
onPageChange={onPageChange}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Tiep' }));
|
||||
expect(onPageChange).toHaveBeenCalledWith(2);
|
||||
});
|
||||
|
||||
it('disables next button on last page', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={25}
|
||||
page={3}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByRole('button', { name: 'Tiep' })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: 'Truoc' })).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it('hides pagination when single page', () => {
|
||||
render(
|
||||
<ValuationHistory
|
||||
items={mockItems}
|
||||
total={2}
|
||||
page={1}
|
||||
onPageChange={vi.fn()}
|
||||
onSelect={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByText(/Trang/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,110 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import type { ValuationResult } from '@/lib/valuation-api';
|
||||
import { ValuationResults } from '../valuation-results';
|
||||
|
||||
const mockResult: ValuationResult = {
|
||||
id: 'val-1',
|
||||
estimatedPriceVND: 5_000_000_000,
|
||||
confidence: 0.87,
|
||||
pricePerM2: 62_500_000,
|
||||
priceRangeLow: 4_500_000_000,
|
||||
priceRangeHigh: 5_500_000_000,
|
||||
comparables: [
|
||||
{
|
||||
id: 'comp-1',
|
||||
title: 'Căn hộ tương tự A',
|
||||
address: '456 Nguyễn Hữu Thọ',
|
||||
district: 'Quận 7',
|
||||
priceVND: '4800000000',
|
||||
areaM2: 78,
|
||||
pricePerM2: 61_500_000,
|
||||
similarity: 0.92,
|
||||
},
|
||||
{
|
||||
id: 'comp-2',
|
||||
title: 'Căn hộ tương tự B',
|
||||
address: '789 Phạm Viết Chánh',
|
||||
district: 'Bình Thạnh',
|
||||
priceVND: '5200000000',
|
||||
areaM2: 82,
|
||||
pricePerM2: 63_400_000,
|
||||
similarity: 0.85,
|
||||
},
|
||||
],
|
||||
priceDrivers: [
|
||||
{ feature: 'Vị trí trung tâm', impact: 15.5, direction: 'positive' },
|
||||
{ feature: 'Tầng thấp', impact: -5.2, direction: 'negative' },
|
||||
],
|
||||
modelVersion: 'v1.0',
|
||||
createdAt: '2026-01-15T10:00:00Z',
|
||||
};
|
||||
|
||||
describe('ValuationResults', () => {
|
||||
it('renders estimated price', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText('5.00 ty VND')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders confidence percentage', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText('87%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders price per m2', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText('62.5 tr/m2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders price range', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText(/4\.50 ty.*5\.50 ty/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders price drivers section', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText('Yeu to anh huong gia')).toBeInTheDocument();
|
||||
expect(screen.getByText('Vị trí trung tâm')).toBeInTheDocument();
|
||||
expect(screen.getByText('Tầng thấp')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows positive driver with + sign', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText('+15.5%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows negative driver with - sign', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText('-5.2%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders comparables section', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText('Bat dong san tuong tu')).toBeInTheDocument();
|
||||
expect(screen.getByText('Căn hộ tương tự A')).toBeInTheDocument();
|
||||
expect(screen.getByText('Căn hộ tương tự B')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows comparable count', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText(/2 bat dong san/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows similarity percentage for comparables', () => {
|
||||
render(<ValuationResults result={mockResult} />);
|
||||
expect(screen.getByText('92% tuong tu')).toBeInTheDocument();
|
||||
expect(screen.getByText('85% tuong tu')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides drivers section when empty', () => {
|
||||
const noDrivers = { ...mockResult, priceDrivers: [] };
|
||||
render(<ValuationResults result={noDrivers} />);
|
||||
expect(screen.queryByText('Yeu to anh huong gia')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides comparables section when empty', () => {
|
||||
const noComps = { ...mockResult, comparables: [] };
|
||||
render(<ValuationResults result={noComps} />);
|
||||
expect(screen.queryByText('Bat dong san tuong tu')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user