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>
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
import type { PriceDriver } from '@/lib/valuation-api';
|
|
import { ValueDriversChart } from '../value-drivers-chart';
|
|
|
|
// Recharts uses ResizeObserver and SVG path measurements that jsdom does not
|
|
// implement. Stub ResponsiveContainer so child bars render in tests.
|
|
vi.mock('recharts', async () => {
|
|
const actual = (await vi.importActual('recharts')) as Record<string, unknown>;
|
|
return {
|
|
...actual,
|
|
ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
|
|
<div data-testid="chart-container" style={{ width: 800, height: 400 }}>
|
|
{children}
|
|
</div>
|
|
),
|
|
};
|
|
});
|
|
|
|
const drivers: PriceDriver[] = [
|
|
{ feature: 'area_m2', impact: 20, direction: 'positive' },
|
|
{ feature: 'building_age_years', impact: -8, direction: 'negative' },
|
|
{ feature: 'distance_to_cbd_km', impact: -4.5, direction: 'negative' },
|
|
];
|
|
|
|
describe('ValueDriversChart', () => {
|
|
it('renders header and description', () => {
|
|
render(<ValueDriversChart drivers={drivers} />);
|
|
expect(screen.getByText('Yếu tố ảnh hưởng giá')).toBeInTheDocument();
|
|
expect(
|
|
screen.getByText(/Biểu đồ thác nước/),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders nothing when drivers list is empty', () => {
|
|
const { container } = render(<ValueDriversChart drivers={[]} />);
|
|
expect(container).toBeEmptyDOMElement();
|
|
});
|
|
|
|
it('renders chart container when drivers are provided', () => {
|
|
render(<ValueDriversChart drivers={drivers} />);
|
|
expect(screen.getByTestId('chart-container')).toBeInTheDocument();
|
|
});
|
|
});
|