|
| 1 | +import { render, screen } from '@testing-library/react'; |
| 2 | +import { BaseLegend } from './base-legend'; |
| 3 | + |
| 4 | +describe( 'BaseLegend', () => { |
| 5 | + const defaultItems = [ |
| 6 | + { label: 'Item 1', value: '50%', color: '#ff0000' }, |
| 7 | + { label: 'Item 2', value: '30%', color: '#00ff00' }, |
| 8 | + ]; |
| 9 | + |
| 10 | + test( 'renders horizontal legend items', () => { |
| 11 | + render( <BaseLegend items={ defaultItems } orientation="horizontal" /> ); |
| 12 | + expect( screen.getByText( 'Item 1' ) ).toBeInTheDocument(); |
| 13 | + expect( screen.getByText( 'Item 2' ) ).toBeInTheDocument(); |
| 14 | + expect( screen.getByText( '50%' ) ).toBeInTheDocument(); |
| 15 | + expect( screen.getByText( '30%' ) ).toBeInTheDocument(); |
| 16 | + } ); |
| 17 | + |
| 18 | + test( 'renders vertical legend items', () => { |
| 19 | + render( <BaseLegend items={ defaultItems } orientation="vertical" /> ); |
| 20 | + const items = screen.getAllByText( /Item \d/ ); |
| 21 | + expect( items ).toHaveLength( 2 ); |
| 22 | + } ); |
| 23 | + |
| 24 | + test( 'applies color styles to legend markers', () => { |
| 25 | + render( <BaseLegend items={ defaultItems } orientation="horizontal" /> ); |
| 26 | + const markers = screen.getAllByTestId( 'legend-marker' ); |
| 27 | + expect( markers[ 0 ] ).toHaveAttribute( 'fill', '#ff0000' ); |
| 28 | + expect( markers[ 1 ] ).toHaveAttribute( 'fill', '#00ff00' ); |
| 29 | + } ); |
| 30 | + |
| 31 | + test( 'handles empty items array', () => { |
| 32 | + render( <BaseLegend items={ [] } orientation="horizontal" /> ); |
| 33 | + const legendItems = screen.queryAllByRole( 'listitem' ); |
| 34 | + expect( legendItems ).toHaveLength( 0 ); |
| 35 | + } ); |
| 36 | + |
| 37 | + test( 'handles missing values', () => { |
| 38 | + const itemsWithoutValues = [ |
| 39 | + { label: 'Item 1', color: '#ff0000', value: undefined }, |
| 40 | + { label: 'Item 2', color: '#00ff00', value: undefined }, |
| 41 | + ]; |
| 42 | + render( <BaseLegend items={ itemsWithoutValues } orientation="horizontal" /> ); |
| 43 | + expect( screen.getByText( 'Item 1' ) ).toBeInTheDocument(); |
| 44 | + expect( screen.getByText( 'Item 2' ) ).toBeInTheDocument(); |
| 45 | + } ); |
| 46 | + |
| 47 | + test( 'applies custom className', () => { |
| 48 | + render( |
| 49 | + <BaseLegend items={ defaultItems } className="custom-legend" orientation="horizontal" /> |
| 50 | + ); |
| 51 | + expect( screen.getByRole( 'list' ) ).toHaveClass( 'custom-legend' ); |
| 52 | + } ); |
| 53 | + |
| 54 | + test( 'renders with correct orientation styles', () => { |
| 55 | + const { rerender } = render( <BaseLegend items={ defaultItems } orientation="horizontal" /> ); |
| 56 | + expect( screen.getByTestId( 'legend-horizontal' ) ).toBeInTheDocument(); |
| 57 | + |
| 58 | + rerender( <BaseLegend items={ defaultItems } orientation="vertical" /> ); |
| 59 | + expect( screen.getByTestId( 'legend-vertical' ) ).toBeInTheDocument(); |
| 60 | + } ); |
| 61 | + |
| 62 | + test( 'renders legend items with correct spacing', () => { |
| 63 | + render( <BaseLegend items={ defaultItems } orientation="horizontal" /> ); |
| 64 | + const items = screen.getAllByTestId( 'legend-item' ); |
| 65 | + expect( items ).toHaveLength( 2 ); |
| 66 | + } ); |
| 67 | + |
| 68 | + test( 'handles items with long labels', () => { |
| 69 | + const itemsWithLongLabels = [ |
| 70 | + { label: 'Very Long Label That Should Still Display', value: '50%', color: '#ff0000' }, |
| 71 | + { label: 'Another Long Label for Testing', value: '30%', color: '#00ff00' }, |
| 72 | + ]; |
| 73 | + render( <BaseLegend items={ itemsWithLongLabels } orientation="horizontal" /> ); |
| 74 | + expect( screen.getByText( 'Very Long Label That Should Still Display' ) ).toBeInTheDocument(); |
| 75 | + } ); |
| 76 | +} ); |
0 commit comments