383825e242
- "app/src/components/OutputInfoBar.tsx" - "app/src/components/__tests__/OutputInfoBar.test.tsx" - "app/src/views/ImportConvert.tsx" - "app/src/App.css" GSD-Task: S01/T04
88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import OutputInfoBar from '../OutputInfoBar';
|
|
import type { TraceMetadata } from '../../types/engine';
|
|
|
|
function makeMetadata(overrides: Partial<TraceMetadata> = {}): TraceMetadata {
|
|
return {
|
|
format: 'svg',
|
|
path_count: 42,
|
|
node_count_total: 1200,
|
|
open_paths: 0,
|
|
island_count: 3,
|
|
warnings: [],
|
|
processing_ms: 150,
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
describe('OutputInfoBar', () => {
|
|
it('shows placeholder when metadata is null', () => {
|
|
const { container } = render(<OutputInfoBar metadata={null} />);
|
|
expect(container.querySelector('.output-info-bar--empty')).toBeTruthy();
|
|
expect(screen.getByText(/trace an image/i)).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders stats with green indicators for normal metadata', () => {
|
|
const meta = makeMetadata();
|
|
render(<OutputInfoBar metadata={meta} />);
|
|
|
|
const pathsStat = screen.getByTestId('stat-paths');
|
|
expect(pathsStat).toHaveClass('output-stat--green');
|
|
expect(pathsStat).toHaveTextContent('42');
|
|
|
|
const nodesStat = screen.getByTestId('stat-nodes');
|
|
expect(nodesStat).toHaveClass('output-stat--green');
|
|
expect(nodesStat).toHaveTextContent('1,200');
|
|
|
|
const openStat = screen.getByTestId('stat-open-paths');
|
|
expect(openStat).toHaveClass('output-stat--green');
|
|
expect(openStat).toHaveTextContent('0');
|
|
|
|
const timeStat = screen.getByTestId('stat-time');
|
|
expect(timeStat).toHaveClass('output-stat--green');
|
|
expect(timeStat).toHaveTextContent('150ms');
|
|
});
|
|
|
|
it('shows yellow indicator when node_count_total > 5000', () => {
|
|
const meta = makeMetadata({ node_count_total: 8500 });
|
|
render(<OutputInfoBar metadata={meta} />);
|
|
|
|
const nodesStat = screen.getByTestId('stat-nodes');
|
|
expect(nodesStat).toHaveClass('output-stat--yellow');
|
|
expect(nodesStat).toHaveTextContent('8,500');
|
|
});
|
|
|
|
it('shows red indicator when open_paths > 0', () => {
|
|
const meta = makeMetadata({ open_paths: 3 });
|
|
render(<OutputInfoBar metadata={meta} />);
|
|
|
|
const openStat = screen.getByTestId('stat-open-paths');
|
|
expect(openStat).toHaveClass('output-stat--red');
|
|
expect(openStat).toHaveTextContent('3');
|
|
});
|
|
|
|
it('shows both yellow and red indicators simultaneously', () => {
|
|
const meta = makeMetadata({ node_count_total: 6000, open_paths: 5 });
|
|
render(<OutputInfoBar metadata={meta} />);
|
|
|
|
expect(screen.getByTestId('stat-nodes')).toHaveClass('output-stat--yellow');
|
|
expect(screen.getByTestId('stat-open-paths')).toHaveClass('output-stat--red');
|
|
});
|
|
|
|
it('displays warnings when present', () => {
|
|
const meta = makeMetadata({ warnings: ['Too many paths', 'Complex geometry'] });
|
|
render(<OutputInfoBar metadata={meta} />);
|
|
|
|
const warnings = screen.getByTestId('warnings');
|
|
expect(warnings).toHaveTextContent('Too many paths');
|
|
expect(warnings).toHaveTextContent('Complex geometry');
|
|
});
|
|
|
|
it('does not render warnings container when no warnings', () => {
|
|
const meta = makeMetadata({ warnings: [] });
|
|
render(<OutputInfoBar metadata={meta} />);
|
|
|
|
expect(screen.queryByTestId('warnings')).not.toBeInTheDocument();
|
|
});
|
|
});
|