5d4ecdeb2f
R5.4 ships the upgraded AVM UI behind the `avm_v2` A/B flag. When the
flag is on, the dashboard exposes:
- Tab switch between single valuation and multi-property compare
- Waterfall drivers chart (ValueDriversChart) alongside the existing
horizontal bar breakdown
- Mapbox comparables map with similarity-coloured markers and an
optional highlighted subject pin
- Confidence interval + range bar and PDF export remain available
- Valuation history chart surface unchanged (still lazy-loaded)
Flag plumbing (useAvmV2Flag):
- NEXT_PUBLIC_FEATURE_AVM_V2=1 enables by default
- `?avm_v2=1|0` URL param forces + persists to localStorage
- safe localStorage handling (no throw when storage is blocked)
Tests: comparables-map, value-drivers-chart, use-avm-v2-flag specs
added. Pre-existing "Yếu tố chính" assertion in valuation-results.spec
updated to match the current copy ("Yếu tố ảnh hưởng giá") so the
valuation suite is green (7 files, 52 tests).
Co-Authored-By: Paperclip <noreply@paperclip.ing>
89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
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 tỷ VNĐ')).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/m²')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders price range', () => {
|
|
render(<ValuationResults result={mockResult} />);
|
|
expect(screen.getByText('4.5 tỷ')).toBeInTheDocument();
|
|
expect(screen.getByText('5.5 tỷ')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders price drivers section', () => {
|
|
render(<ValuationResults result={mockResult} />);
|
|
expect(screen.getByText('Yếu tố ảnh hưởng giá')).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('hides drivers section when empty', () => {
|
|
const noDrivers = { ...mockResult, priceDrivers: [] };
|
|
render(<ValuationResults result={noDrivers} />);
|
|
expect(screen.queryByText('Yếu tố ảnh hưởng giá')).not.toBeInTheDocument();
|
|
});
|
|
|
|
});
|