schalli
d5e1c42e64
- Install react-grid-layout@2.2.3 and react-resizable - Create widget-registry.tsx with all 4 widget types, WIDGET_CONSTRAINTS, WidgetProps - Create dashboard-api.ts with fetch/save layout and widget CRUD functions - Create dashboard-store.ts (Zustand, NO persist — D-05) with edit mode and auto-save on exit - Create DashboardGrid with react-grid-layout v2 Responsive, ResizeObserver width - Create ClockWidget using Intl.DateTimeFormat (no manual UTC offsets) - Create WidgetWrapper with drag handle and delete button in edit mode - Create EditModeToggle (pencil/checkmark), WidgetCatalogModal (2x2 grid) - Rewrite portal page.tsx as dashboard with grid, edit toggle, widget catalog - Add ResizeObserver polyfill in test setup, CSS mock support in vitest config - All 5 tests green (dashboard grid + clock widget) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
21 lines
612 B
TypeScript
21 lines
612 B
TypeScript
import '@testing-library/jest-dom/vitest';
|
|
|
|
// Polyfill ResizeObserver for jsdom (needed by react-grid-layout)
|
|
if (typeof globalThis.ResizeObserver === 'undefined') {
|
|
globalThis.ResizeObserver = class ResizeObserver {
|
|
private callback: ResizeObserverCallback;
|
|
constructor(callback: ResizeObserverCallback) {
|
|
this.callback = callback;
|
|
}
|
|
observe() {
|
|
// Fire callback immediately with a mock entry
|
|
this.callback(
|
|
[{ contentRect: { width: 1200, height: 800 } } as unknown as ResizeObserverEntry],
|
|
this,
|
|
);
|
|
}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
};
|
|
}
|