-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
188 additions
and
162 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,52 @@ | ||
| // Pie/Pie.spec.tsx | ||
| import React from 'react'; | ||
| import { render, screen, fireEvent } from '@testing-library/react'; | ||
| import { render, fireEvent } from '@testing-library/react'; | ||
| import Pie from './index'; | ||
|
|
||
| describe('Pie Component', () => { | ||
| const data = [ | ||
| { name: 'Group A', value: 400 }, | ||
| { name: 'Group B', value: 300 }, | ||
| ]; | ||
| describe('Pie', () => { | ||
| const mockData = [ | ||
| { name: 'Group A', value: 400 }, | ||
| { name: 'Group B', value: 300 }, | ||
| { name: 'Group C', value: 300 }, | ||
| ]; | ||
|
|
||
| it('renders correctly with required props', () => { | ||
| render( | ||
| <svg> | ||
| <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={50} fill="#8884d8" /> | ||
| </svg> | ||
| ); | ||
| const paths = screen.getAllByRole('path'); | ||
| expect(paths).toHaveLength(data.length); | ||
| }); | ||
| it('renders without crashing', () => { | ||
| const { container } = render( | ||
| <svg> | ||
| <Pie data={mockData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" /> | ||
| </svg> | ||
| ); | ||
| expect(container).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('displays labels when label prop is passed as percent', () => { | ||
| render( | ||
| <svg> | ||
| <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={50} fill="#8884d8" label="percent" /> | ||
| </svg> | ||
| ); | ||
| expect(screen.getByText('57.1%')).toBeInTheDocument(); // Percentage label | ||
| }); | ||
| it('displays the correct number of pie segments', () => { | ||
| const { container } = render( | ||
| <svg> | ||
| <Pie data={mockData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" /> | ||
| </svg> | ||
| ); | ||
| const paths = container.querySelectorAll('path'); | ||
| expect(paths.length).toBe(mockData.length); | ||
| }); | ||
|
|
||
| it('highlights active shape on mouse over when activeShape is true', () => { | ||
| render( | ||
| <svg> | ||
| <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={50} fill="#8884d8" activeShape /> | ||
| </svg> | ||
| ); | ||
| const firstPath = screen.getAllByRole('path')[0]; | ||
| fireEvent.mouseEnter(firstPath); | ||
| expect(firstPath).toHaveStyle('transform: scale(1.05)'); | ||
| }); | ||
| it('changes shape when activeShape is true', () => { | ||
| const { container } = render( | ||
| <Pie | ||
| data={mockData} | ||
| dataKey="value" | ||
| nameKey="name" | ||
| cx="50%" | ||
| cy="50%" | ||
| outerRadius={80} | ||
| fill="#8884d8" | ||
| activeShape={true} | ||
| /> | ||
| ); | ||
|
|
||
| const path = container.querySelector('path'); | ||
| fireEvent.mouseEnter(path!); | ||
|
|
||
| setTimeout(() => { | ||
| expect(path).toHaveStyle('transform: scale(1.05)'); | ||
| }, 200); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,31 @@ | ||
| // PieChart/PieChart.spec.tsx | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { render } from '@testing-library/react'; | ||
| import PieChart from './index'; | ||
| import Pie from '../Pie/index'; | ||
| import Pie from '../Pie'; | ||
|
|
||
| describe('PieChart Component', () => { | ||
| it('renders children correctly', () => { | ||
| render( | ||
| <PieChart width={400} height={400}> | ||
| <Pie data={[{ name: 'Group A', value: 100 }]} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={50} fill="#8884d8" /> | ||
| </PieChart> | ||
| ); | ||
| expect(screen.getByRole('svg')).toBeInTheDocument(); | ||
| expect(screen.getByRole('path')).toBeInTheDocument(); | ||
| }); | ||
| describe('PieChart', () => { | ||
| const mockData = [ | ||
| { name: 'Group A', value: 400 }, | ||
| { name: 'Group B', value: 300 }, | ||
| ]; | ||
|
|
||
| it('sets the correct width and height', () => { | ||
| const { container } = render( | ||
| <PieChart width={300} height={300}> | ||
| <Pie data={[{ name: 'Group A', value: 100 }]} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={50} fill="#8884d8" /> | ||
| </PieChart> | ||
| ); | ||
| const svgElement = container.querySelector('svg'); | ||
| expect(svgElement).toHaveAttribute('width', '300'); | ||
| expect(svgElement).toHaveAttribute('height', '300'); | ||
| }); | ||
| it('renders without crashing', () => { | ||
| const { container } = render( | ||
| <PieChart width={500} height={400}> | ||
| <Pie data={mockData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" /> | ||
| </PieChart> | ||
| ); | ||
| expect(container).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders with correct width and height', () => { | ||
| const { container } = render( | ||
| <PieChart width={500} height={400}> | ||
| <Pie data={mockData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" /> | ||
| </PieChart> | ||
| ); | ||
| const svg = container.querySelector('svg'); | ||
| expect(svg).toHaveAttribute('width', '500'); | ||
| expect(svg).toHaveAttribute('height', '400'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,38 @@ | ||
| // PolarGrid/PolarGrid.spec.tsx | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { render } from '@testing-library/react'; | ||
| import PolarGrid from './index'; | ||
|
|
||
| describe('PolarGrid Component', () => { | ||
| it('renders the correct number of radial lines', () => { | ||
| render(<svg><PolarGrid radialLines={8} /></svg>); | ||
| const lines = screen.getAllByRole('line'); | ||
| expect(lines).toHaveLength(8); | ||
| }); | ||
| describe('PolarGrid', () => { | ||
| it('renders without crashing', () => { | ||
| const { container } = render( | ||
| <svg> | ||
| <PolarGrid cx="50%" cy="50%" /> | ||
| </svg> | ||
| ); | ||
| expect(container).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders the correct number of concentric circles', () => { | ||
| render(<svg><PolarGrid concentricCircles={4} /></svg>); | ||
| const circles = screen.getAllByRole('circle'); | ||
| expect(circles).toHaveLength(4); | ||
| }); | ||
| it('renders correct number of radial lines and concentric circles', () => { | ||
| const { container } = render( | ||
| <svg> | ||
| <PolarGrid cx="50%" cy="50%" radialLines={8} concentricCircles={4} /> | ||
| </svg> | ||
| ); | ||
| const lines = container.querySelectorAll('line'); | ||
| const circles = container.querySelectorAll('circle'); | ||
| expect(lines.length).toBe(8); | ||
| expect(circles.length).toBe(4); | ||
| }); | ||
|
|
||
| it('applies the correct stroke color', () => { | ||
| const { container } = render(<svg><PolarGrid stroke="#ff0000" /></svg>); | ||
| const line = container.querySelector('line'); | ||
| const circle = container.querySelector('circle'); | ||
| expect(line).toHaveAttribute('stroke', '#ff0000'); | ||
| expect(circle).toHaveAttribute('stroke', '#ff0000'); | ||
| }); | ||
| it('applies correct stroke color', () => { | ||
| const { container } = render( | ||
| <svg> | ||
| <PolarGrid cx="50%" cy="50%" stroke="#123456" /> | ||
| </svg> | ||
| ); | ||
| const lines = container.querySelector('line'); | ||
| const circles = container.querySelector('circle'); | ||
| expect(lines).toHaveAttribute('stroke', '#123456'); | ||
| expect(circles).toHaveAttribute('stroke', '#123456'); | ||
| }); | ||
| }); |