3fbbb1a93b
- Next.js 14+ with App Router and TypeScript - Tailwind CSS and ShadCN UI styling - Zustand state management - Dexie.js for IndexedDB (local-first data) - Auth.js v5 for authentication - BMAD framework integration Co-Authored-By: Claude <noreply@anthropic.com>
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
/**
|
|
* Tests for RefinementIndicator Component
|
|
*
|
|
* Story 2.3: Refinement Loop (Regeneration)
|
|
*/
|
|
|
|
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { RefinementIndicator } from './RefinementIndicator';
|
|
|
|
describe('RefinementIndicator', () => {
|
|
it('should render default message', () => {
|
|
render(<RefinementIndicator />);
|
|
expect(screen.getByText('Refining your draft...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render custom message when provided', () => {
|
|
render(<RefinementIndicator message="Applying your changes..." />);
|
|
expect(screen.getByText('Applying your changes...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render animated dots', () => {
|
|
const { container } = render(<RefinementIndicator />);
|
|
const dots = container.querySelectorAll('.animate-pulse');
|
|
expect(dots).toHaveLength(3);
|
|
});
|
|
|
|
it('should have proper accessibility attributes', () => {
|
|
const { container } = render(<RefinementIndicator />);
|
|
|
|
const indicator = container.querySelector('[role="status"]');
|
|
expect(indicator).toBeInTheDocument();
|
|
expect(indicator).toHaveAttribute('aria-live', 'polite');
|
|
expect(indicator).toHaveAttribute('aria-busy', 'true');
|
|
});
|
|
|
|
it('should hide dots from screen readers', () => {
|
|
const { container } = render(<RefinementIndicator />);
|
|
const dots = container.querySelectorAll('.animate-pulse');
|
|
|
|
dots.forEach(dot => {
|
|
expect(dot).toHaveAttribute('aria-hidden', 'true');
|
|
});
|
|
});
|
|
|
|
it('should have proper styling for loading state', () => {
|
|
const { container } = render(<RefinementIndicator />);
|
|
const indicator = container.querySelector('[role="status"]');
|
|
|
|
expect(indicator).toHaveClass('bg-slate-50');
|
|
expect(indicator).toHaveClass('text-slate-600');
|
|
});
|
|
});
|