test(web): add Vitest+RTL tests for 15 design-system presentational components

Covers Badge, Divider, EmptyState, Numeric, PriceDelta, Signal, Skeleton,
StatusChip, Surface, StatCard, KpiCard, DensityToggle, Footer, MarketIndex,
CompactHeader — rendering, variants, props, a11y attributes, className merging.

All 1139 web tests pass. Zustand persist store mocked for DensityToggle to
avoid jsdom localStorage incompatibility.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/design-system/__tests__/status-chip.spec.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { StatusChip, type PropertyStatus } from '../status-chip';
+
+const statuses: PropertyStatus[] = ['active', 'pending', 'sold', 'rented', 'rejected', 'draft'];
+
+const labels: Record<PropertyStatus, string> = {
+  active: 'Đang bán',
+  pending: 'Chờ duyệt',
+  sold: 'Đã bán',
+  rented: 'Đã thuê',
+  rejected: 'Từ chối',
+  draft: 'Bản nháp',
+};
+
+describe('StatusChip', () => {
+  statuses.forEach((status) => {
+    it(`renders label for status "${status}"`, () => {
+      render(<StatusChip status={status} />);
+      expect(screen.getByText(labels[status])).toBeInTheDocument();
+    });
+  });
+
+  it('shows dot indicator by default', () => {
+    const { container } = render(<StatusChip status="active" />);
+    // dot is a span with aria-hidden
+    expect(container.querySelector('[aria-hidden]')).toBeInTheDocument();
+  });
+
+  it('hides dot when hideDot=true', () => {
+    const { container } = render(<StatusChip status="active" hideDot />);
+    expect(container.querySelector('[aria-hidden]')).toBeNull();
+  });
+
+  it('merges custom className', () => {
+    render(<StatusChip data-testid="sc" status="active" className="extra" />);
+    expect(screen.getByTestId('sc')).toHaveClass('extra');
+  });
+
+  it('applies active color classes', () => {
+    render(<StatusChip data-testid="sc" status="active" />);
+    expect(screen.getByTestId('sc')).toHaveClass('bg-signal-up-bg');
+  });
+
+  it('applies rejected color classes', () => {
+    render(<StatusChip data-testid="sc" status="rejected" />);
+    expect(screen.getByTestId('sc')).toHaveClass('bg-destructive/10');
+  });
+});