|
| 1 | +import React from 'react'; |
| 2 | +import { render, fireEvent } from '@testing-library/react'; |
| 3 | +import '@testing-library/jest-dom/extend-expect'; |
| 4 | +import WaterFallChart from '../waterfall-chart'; |
| 5 | + |
| 6 | +// Mock data for transactions |
| 7 | +const transactions = [ |
| 8 | + { label: 'Transaction 1', value: 100 }, |
| 9 | + { label: 'Transaction 2', value: -50 }, |
| 10 | + { label: 'Transaction 3', value: 200 } |
| 11 | +]; |
| 12 | + |
| 13 | +describe('WaterFallChart component', () => { |
| 14 | + it('renders the chart with correct bars and labels', () => { |
| 15 | + // Render the WaterFallChart component with transactions as props |
| 16 | + const { container, getByText } = render(<WaterFallChart transactions={transactions} />); |
| 17 | + |
| 18 | + // Assert that the chart bars are rendered with correct heights |
| 19 | + const positiveBar = container.querySelector('#chartBar-0'); |
| 20 | + const negativeBar = container.querySelector('#chartBar-1'); |
| 21 | + const summaryBar = container.querySelector('#summaryBar'); |
| 22 | + if (positiveBar) expect(positiveBar).toHaveAttribute('height', '50'); |
| 23 | + if (negativeBar) expect(negativeBar).toHaveAttribute('height', '25'); |
| 24 | + if (summaryBar) expect(summaryBar).toHaveAttribute('height', '75'); |
| 25 | + |
| 26 | + // Assert that the x-axis and y-axis lines are rendered |
| 27 | + const xAxisLine = container.querySelector('#xAxisLine'); |
| 28 | + const yAxisLine = container.querySelector('#yAxisLine'); |
| 29 | + expect(xAxisLine).toBeInTheDocument(); |
| 30 | + expect(yAxisLine).toBeInTheDocument(); |
| 31 | + |
| 32 | + // Assert that the summary label is rendered |
| 33 | + const summaryLabel = getByText('Total'); |
| 34 | + expect(summaryLabel).toBeInTheDocument(); |
| 35 | + }); |
| 36 | + |
| 37 | + it('calls onChartClick callback when a bar is clicked', () => { |
| 38 | + // Mock callback function |
| 39 | + const mockOnClick = jest.fn(); |
| 40 | + |
| 41 | + // Render the WaterFallChart component with transactions and onChartClick callback as props |
| 42 | + const { container } = render( |
| 43 | + <WaterFallChart transactions={transactions} onChartClick={(e: any) => mockOnClick(e)} /> |
| 44 | + ); |
| 45 | + |
| 46 | + // Click on a chart bar |
| 47 | + const barZero = container.querySelector('#chartBar-0'); |
| 48 | + if (barZero) { |
| 49 | + fireEvent.click(barZero); |
| 50 | + // Assert that the mock callback function is called with the correct chart element |
| 51 | + expect(mockOnClick).toHaveBeenCalledTimes(1); |
| 52 | + } |
| 53 | + }); |
| 54 | + |
| 55 | + it('does not render bridge lines when showBridgeLines prop is set to false', () => { |
| 56 | + // Render the WaterFallChart component with showBridgeLines prop set to false |
| 57 | + const { container } = render(<WaterFallChart transactions={transactions} showBridgeLines={false} />); |
| 58 | + |
| 59 | + // Assert that the bridge lines are not rendered |
| 60 | + const bridgeLine = container.querySelector('#chartBarBridgeLine-0'); |
| 61 | + expect(bridgeLine).toBeNull(); |
| 62 | + }); |
| 63 | + |
| 64 | + it('renders y-axis scale lines when showYAxisScaleLines prop is set to true', () => { |
| 65 | + // Render the WaterFallChart component with showYAxisScaleLines prop set to true |
| 66 | + const { container } = render(<WaterFallChart transactions={transactions} showYAxisScaleLines={true} />); |
| 67 | + |
| 68 | + // Assert that y-axis scale lines are rendered |
| 69 | + const yAxisScaleLines = container.querySelectorAll('[id^="yAxisScaleLine-"]'); |
| 70 | + if (yAxisScaleLines?.length > 0) expect(yAxisScaleLines.length).toBeGreaterThan(0); |
| 71 | + }); |
| 72 | +}); |
0 commit comments