-
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
1 parent
2ceb925
commit 3c1a840
Showing
13 changed files
with
261 additions
and
81 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
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 was deleted.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import type {Config} from 'jest'; | ||
|
|
||
| const config :Config = { | ||
| // Other configuration above... | ||
|
|
||
| // Add the next three options if using TypeScript | ||
| moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], | ||
| preset: "ts-jest", | ||
| roots: ["<rootDir>/src"], | ||
| transform: { | ||
| "^.+\\.[t|j]sx?$": "ts-jest", | ||
| "^.+\\.svg?$": "<rootDir>/transform.js", | ||
| "^.+\\.scss?$": "<rootDir>/transform.js" | ||
| }, | ||
| "testEnvironment": "jsdom", | ||
| testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$", | ||
| moduleNameMapper: { | ||
| "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/testMock.js", | ||
| "\\.(css|less)$": "<rootDir>/scripts/testMock.js" | ||
| } | ||
| }; | ||
|
|
||
| export default config; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
|
|
@@ -47,5 +47,6 @@ WaterFallChart.args = { | |
| label: 'Acquisitions', | ||
| value: 80 | ||
| } | ||
| ] | ||
| ], | ||
| onChartClick: (e: any) => console.log(e) | ||
| }; | ||
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 |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import React from 'react'; | ||
| import { render, fireEvent } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
| import WaterFallChart from '../waterfall-chart'; | ||
|
|
||
| // Mock data for transactions | ||
| const transactions = [ | ||
| { label: 'Transaction 1', value: 100 }, | ||
| { label: 'Transaction 2', value: -50 }, | ||
| { label: 'Transaction 3', value: 200 } | ||
| ]; | ||
|
|
||
| describe('WaterFallChart component', () => { | ||
| it('renders the chart with correct bars and labels', () => { | ||
| // Render the WaterFallChart component with transactions as props | ||
| const { container, getByText } = render(<WaterFallChart transactions={transactions} />); | ||
|
|
||
| // Assert that the chart bars are rendered with correct heights | ||
| const positiveBar = container.querySelector('#chartBar-0'); | ||
| const negativeBar = container.querySelector('#chartBar-1'); | ||
| const summaryBar = container.querySelector('#summaryBar'); | ||
| if (positiveBar) expect(positiveBar).toHaveAttribute('height', '50'); | ||
| if (negativeBar) expect(negativeBar).toHaveAttribute('height', '25'); | ||
| if (summaryBar) expect(summaryBar).toHaveAttribute('height', '75'); | ||
|
|
||
| // Assert that the x-axis and y-axis lines are rendered | ||
| const xAxisLine = container.querySelector('#xAxisLine'); | ||
| const yAxisLine = container.querySelector('#yAxisLine'); | ||
| expect(xAxisLine).toBeInTheDocument(); | ||
| expect(yAxisLine).toBeInTheDocument(); | ||
|
|
||
| // Assert that the summary label is rendered | ||
| const summaryLabel = getByText('Total'); | ||
| expect(summaryLabel).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('calls onChartClick callback when a bar is clicked', () => { | ||
| // Mock callback function | ||
| const mockOnClick = jest.fn(); | ||
|
|
||
| // Render the WaterFallChart component with transactions and onChartClick callback as props | ||
| const { container } = render( | ||
| <WaterFallChart transactions={transactions} onChartClick={(e: any) => mockOnClick(e)} /> | ||
| ); | ||
|
|
||
| // Click on a chart bar | ||
| const barZero = container.querySelector('#chartBar-0'); | ||
| if (barZero) { | ||
| fireEvent.click(barZero); | ||
| // Assert that the mock callback function is called with the correct chart element | ||
| expect(mockOnClick).toHaveBeenCalledTimes(1); | ||
| } | ||
| }); | ||
|
|
||
| it('does not render bridge lines when showBridgeLines prop is set to false', () => { | ||
| // Render the WaterFallChart component with showBridgeLines prop set to false | ||
| const { container } = render(<WaterFallChart transactions={transactions} showBridgeLines={false} />); | ||
|
|
||
| // Assert that the bridge lines are not rendered | ||
| const bridgeLine = container.querySelector('#chartBarBridgeLine-0'); | ||
| expect(bridgeLine).toBeNull(); | ||
| }); | ||
|
|
||
| it('renders y-axis scale lines when showYAxisScaleLines prop is set to true', () => { | ||
| // Render the WaterFallChart component with showYAxisScaleLines prop set to true | ||
| const { container } = render(<WaterFallChart transactions={transactions} showYAxisScaleLines={true} />); | ||
|
|
||
| // Assert that y-axis scale lines are rendered | ||
| const yAxisScaleLines = container.querySelectorAll('[id^="yAxisScaleLine-"]'); | ||
| if (yAxisScaleLines?.length > 0) expect(yAxisScaleLines.length).toBeGreaterThan(0); | ||
| }); | ||
| }); |
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
Oops, something went wrong.