feat: Add comprehensive test suite and misc improvements
- Add frontend unit tests with Vitest for components, hooks, pages, and utilities - Add backend tests for webhooks, notifications, middleware, and edge cases - Add ForgotPassword, NotFound, and ResetPassword pages - Add migration for orphaned staff resources conversion - Add coverage directory to gitignore (generated reports) - Various bug fixes and improvements from previous work 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
897
frontend/src/components/dashboard/__tests__/ChartWidget.test.tsx
Normal file
897
frontend/src/components/dashboard/__tests__/ChartWidget.test.tsx
Normal file
@@ -0,0 +1,897 @@
|
||||
/**
|
||||
* Unit tests for ChartWidget component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Chart container rendering
|
||||
* - Title display
|
||||
* - Bar chart rendering
|
||||
* - Line chart rendering
|
||||
* - Data visualization
|
||||
* - Custom colors
|
||||
* - Value prefixes
|
||||
* - Edit mode with drag handle and remove button
|
||||
* - Tooltip formatting
|
||||
* - Responsive container
|
||||
* - Accessibility
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import ChartWidget from '../ChartWidget';
|
||||
|
||||
// Mock Recharts components to avoid rendering issues in tests
|
||||
vi.mock('recharts', () => ({
|
||||
ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="responsive-container">{children}</div>
|
||||
),
|
||||
BarChart: ({ data, children }: { data: any[]; children: React.ReactNode }) => (
|
||||
<div data-testid="bar-chart" data-chart-data={JSON.stringify(data)}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
LineChart: ({ data, children }: { data: any[]; children: React.ReactNode }) => (
|
||||
<div data-testid="line-chart" data-chart-data={JSON.stringify(data)}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
Bar: ({ dataKey, fill }: { dataKey: string; fill: string }) => (
|
||||
<div data-testid="bar" data-key={dataKey} data-fill={fill} />
|
||||
),
|
||||
Line: ({ dataKey, stroke }: { dataKey: string; stroke: string }) => (
|
||||
<div data-testid="line" data-key={dataKey} data-stroke={stroke} />
|
||||
),
|
||||
XAxis: ({ dataKey }: { dataKey: string }) => (
|
||||
<div data-testid="x-axis" data-key={dataKey} />
|
||||
),
|
||||
YAxis: () => <div data-testid="y-axis" />,
|
||||
CartesianGrid: () => <div data-testid="cartesian-grid" />,
|
||||
Tooltip: () => <div data-testid="tooltip" />,
|
||||
}));
|
||||
|
||||
describe('ChartWidget', () => {
|
||||
const mockChartData = [
|
||||
{ name: 'Mon', value: 100 },
|
||||
{ name: 'Tue', value: 150 },
|
||||
{ name: 'Wed', value: 120 },
|
||||
{ name: 'Thu', value: 180 },
|
||||
{ name: 'Fri', value: 200 },
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render the component', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue Chart"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Revenue Chart')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render chart container', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue Chart"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const container = screen.getByTestId('responsive-container');
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with different titles', () => {
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Appointments"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Appointments')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with empty data array', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Empty Chart"
|
||||
data={[]}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Empty Chart')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Title', () => {
|
||||
it('should display title with correct styling', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Weekly Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Weekly Revenue');
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveClass('text-lg', 'font-semibold', 'text-gray-900');
|
||||
});
|
||||
|
||||
it('should apply dark mode styles to title', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('dark:text-white');
|
||||
});
|
||||
|
||||
it('should handle long titles', () => {
|
||||
const longTitle = 'Very Long Chart Title That Should Still Display Properly Without Breaking Layout';
|
||||
render(
|
||||
<ChartWidget
|
||||
title={longTitle}
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(longTitle)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Bar Chart', () => {
|
||||
it('should render bar chart when type is "bar"', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('line-chart')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should pass data to bar chart', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const barChart = screen.getByTestId('bar-chart');
|
||||
const chartData = JSON.parse(barChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(mockChartData);
|
||||
});
|
||||
|
||||
it('should render bar with correct dataKey', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const bar = screen.getByTestId('bar');
|
||||
expect(bar).toHaveAttribute('data-key', 'value');
|
||||
});
|
||||
|
||||
it('should render bar with default color', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const bar = screen.getByTestId('bar');
|
||||
expect(bar).toHaveAttribute('data-fill', '#3b82f6');
|
||||
});
|
||||
|
||||
it('should render bar with custom color', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
color="#10b981"
|
||||
/>
|
||||
);
|
||||
|
||||
const bar = screen.getByTestId('bar');
|
||||
expect(bar).toHaveAttribute('data-fill', '#10b981');
|
||||
});
|
||||
|
||||
it('should render CartesianGrid for bar chart', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('cartesian-grid')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render XAxis with name dataKey', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const xAxis = screen.getByTestId('x-axis');
|
||||
expect(xAxis).toHaveAttribute('data-key', 'name');
|
||||
});
|
||||
|
||||
it('should render YAxis', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('y-axis')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Tooltip', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('tooltip')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Line Chart', () => {
|
||||
it('should render line chart when type is "line"', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('line-chart')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('bar-chart')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should pass data to line chart', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const lineChart = screen.getByTestId('line-chart');
|
||||
const chartData = JSON.parse(lineChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(mockChartData);
|
||||
});
|
||||
|
||||
it('should render line with correct dataKey', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const line = screen.getByTestId('line');
|
||||
expect(line).toHaveAttribute('data-key', 'value');
|
||||
});
|
||||
|
||||
it('should render line with default color', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const line = screen.getByTestId('line');
|
||||
expect(line).toHaveAttribute('data-stroke', '#3b82f6');
|
||||
});
|
||||
|
||||
it('should render line with custom color', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
color="#ef4444"
|
||||
/>
|
||||
);
|
||||
|
||||
const line = screen.getByTestId('line');
|
||||
expect(line).toHaveAttribute('data-stroke', '#ef4444');
|
||||
});
|
||||
|
||||
it('should render CartesianGrid for line chart', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('cartesian-grid')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should switch between chart types', () => {
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('line-chart')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('bar-chart')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Value Prefix', () => {
|
||||
it('should use empty prefix by default', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Appointments"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
// Component renders successfully without prefix
|
||||
expect(screen.getByText('Appointments')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should accept custom value prefix', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
valuePrefix="$"
|
||||
/>
|
||||
);
|
||||
|
||||
// Component renders successfully with prefix
|
||||
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should accept different prefixes', () => {
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
valuePrefix="$"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
valuePrefix="€"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edit Mode', () => {
|
||||
it('should not show edit controls when isEditing is false', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={false}
|
||||
/>
|
||||
);
|
||||
|
||||
const dragHandle = container.querySelector('.drag-handle');
|
||||
expect(dragHandle).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show drag handle when in edit mode', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const dragHandle = container.querySelector('.drag-handle');
|
||||
expect(dragHandle).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show remove button when in edit mode', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
onRemove={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const removeButton = screen.getByRole('button');
|
||||
expect(removeButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call onRemove when remove button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const handleRemove = vi.fn();
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
const removeButton = screen.getByRole('button');
|
||||
await user.click(removeButton);
|
||||
|
||||
expect(handleRemove).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should apply padding to title when in edit mode', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('pl-5');
|
||||
});
|
||||
|
||||
it('should not apply padding to title when not in edit mode', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={false}
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).not.toHaveClass('pl-5');
|
||||
});
|
||||
|
||||
it('should have grab cursor on drag handle', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const dragHandle = container.querySelector('.drag-handle');
|
||||
expect(dragHandle).toHaveClass('cursor-grab', 'active:cursor-grabbing');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Container', () => {
|
||||
it('should render ResponsiveContainer', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should wrap chart in responsive container', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const container = screen.getByTestId('responsive-container');
|
||||
const barChart = screen.getByTestId('bar-chart');
|
||||
|
||||
expect(container).toContainElement(barChart);
|
||||
});
|
||||
|
||||
it('should have flex layout for proper sizing', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const widget = container.firstChild;
|
||||
expect(widget).toHaveClass('flex', 'flex-col');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should apply container styles', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const widget = container.firstChild;
|
||||
expect(widget).toHaveClass(
|
||||
'h-full',
|
||||
'p-4',
|
||||
'bg-white',
|
||||
'rounded-xl',
|
||||
'border',
|
||||
'border-gray-200',
|
||||
'shadow-sm',
|
||||
'relative',
|
||||
'group'
|
||||
);
|
||||
});
|
||||
|
||||
it('should apply dark mode styles', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const widget = container.firstChild;
|
||||
expect(widget).toHaveClass('dark:bg-gray-800', 'dark:border-gray-700');
|
||||
});
|
||||
|
||||
it('should have proper spacing for title', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('mb-4');
|
||||
});
|
||||
|
||||
it('should use flex-1 for chart container', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const chartContainer = container.querySelector('.flex-1');
|
||||
expect(chartContainer).toBeInTheDocument();
|
||||
expect(chartContainer).toHaveClass('min-h-0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Data Handling', () => {
|
||||
it('should handle single data point', () => {
|
||||
const singlePoint = [{ name: 'Mon', value: 100 }];
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={singlePoint}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const barChart = screen.getByTestId('bar-chart');
|
||||
const chartData = JSON.parse(barChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(singlePoint);
|
||||
});
|
||||
|
||||
it('should handle large datasets', () => {
|
||||
const largeData = Array.from({ length: 100 }, (_, i) => ({
|
||||
name: `Day ${i + 1}`,
|
||||
value: Math.random() * 1000,
|
||||
}));
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={largeData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const lineChart = screen.getByTestId('line-chart');
|
||||
const chartData = JSON.parse(lineChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toHaveLength(100);
|
||||
});
|
||||
|
||||
it('should handle zero values', () => {
|
||||
const zeroData = [
|
||||
{ name: 'Mon', value: 0 },
|
||||
{ name: 'Tue', value: 0 },
|
||||
];
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={zeroData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const barChart = screen.getByTestId('bar-chart');
|
||||
const chartData = JSON.parse(barChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(zeroData);
|
||||
});
|
||||
|
||||
it('should handle negative values', () => {
|
||||
const negativeData = [
|
||||
{ name: 'Mon', value: -50 },
|
||||
{ name: 'Tue', value: 100 },
|
||||
{ name: 'Wed', value: -30 },
|
||||
];
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Profit/Loss"
|
||||
data={negativeData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const lineChart = screen.getByTestId('line-chart');
|
||||
const chartData = JSON.parse(lineChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(negativeData);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have semantic heading for title', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue Chart"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 3 });
|
||||
expect(heading).toHaveTextContent('Revenue Chart');
|
||||
});
|
||||
|
||||
it('should be keyboard accessible in edit mode', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
onRemove={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have proper color contrast', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('text-gray-900');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render correctly with all props', () => {
|
||||
const handleRemove = vi.fn();
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Weekly Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
color="#10b981"
|
||||
valuePrefix="$"
|
||||
isEditing={true}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Weekly Revenue')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('bar')).toHaveAttribute('data-fill', '#10b981');
|
||||
expect(screen.getByRole('button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should work with minimal props', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Simple Chart"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Simple Chart')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain layout with varying data lengths', () => {
|
||||
const shortData = [{ name: 'A', value: 1 }];
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Data"
|
||||
data={shortData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Data')).toBeInTheDocument();
|
||||
|
||||
const longData = Array.from({ length: 50 }, (_, i) => ({
|
||||
name: `Item ${i}`,
|
||||
value: i * 10,
|
||||
}));
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Data"
|
||||
data={longData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Data')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should support different color schemes', () => {
|
||||
const colors = ['#3b82f6', '#10b981', '#ef4444', '#f59e0b', '#8b5cf6'];
|
||||
|
||||
colors.forEach((color) => {
|
||||
const { container, rerender } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
color={color}
|
||||
/>
|
||||
);
|
||||
|
||||
const bar = screen.getByTestId('bar');
|
||||
expect(bar).toHaveAttribute('data-fill', color);
|
||||
|
||||
if (color !== colors[colors.length - 1]) {
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
color={colors[colors.indexOf(color) + 1]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle rapid data updates', () => {
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Live Data"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const newData = mockChartData.map((item) => ({
|
||||
...item,
|
||||
value: item.value + Math.random() * 50,
|
||||
}));
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Live Data"
|
||||
data={newData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Live Data')).toBeInTheDocument();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user