Added Unit tests (#5)

Author: GokulSNath

.github/workflows/deploy.yml

@@ -29,8 +29,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      # - name: Run tests
-      #   run: npm run test
+      - name: Run tests
+        run: npm run test
 
       - name: 'Set release type : ${{ inputs.ReleaseType }}'
         id: release_type

README.md

@@ -1,17 +1,13 @@
-  
-
-  
-
 # React Waterfall Chart
 
 
 
-<a  href="https://www.npmjs.com/package/react-waterfall-chart"><img  src="https://badgen.net/npm/v/react-waterfall-chart?color=blue"  alt="npm version"></a>  <a  href="https://www.npmjs.com/package/react-waterfall-chart"  ><img  src="https://img.shields.io/npm/dw/react-waterfall-chart?label=Downloads"  /></a>  <a  href="https://github.com/KeyValueSoftwareSystems/react-waterfall-chart"><img  src="https://github.com/KeyValueSoftwareSystems/react-waterfall-chart/actions/workflows/deploy.yml/badge.svg"  alt=""  /></a>
+<a  href="https://www.npmjs.com/package/@keyvaluesystems/react-waterfall-chart"><img  src="https://badgen.net/npm/v/@keyvaluesystems/react-waterfall-chart?color=blue"  alt="npm version"></a>  <a  href="https://www.npmjs.com/package/@keyvaluesystems/react-waterfall-chart"  ><img  src="https://img.shields.io/npm/dw/@keyvaluesystems/react-waterfall-chart?label=Downloads"  /></a>  <a  href="https://github.com/KeyValueSoftwareSystems/react-waterfall-chart"><img  src="https://github.com/KeyValueSoftwareSystems/react-waterfall-chart/actions/workflows/deploy.yml/badge.svg"  alt=""  /></a>
 
 
 
 <div  align="center">
-<img  src="src/assets/waterfall-chart-example.png"  alt=""  width="735"  height="401"/>
+<img  src="src/assets/waterfall-chart-example.png"  alt=""  width="784"  height="414"/>
 </div>
 
 

jest.config.js

@@ -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;

jest.config.ts

@@ -9,7 +9,7 @@
     "start": "webpack watch && tsc",
     "build": "webpack && tsc",
     "eslint": "eslint src",
-    "test": "jest --config ./jest.config.js",
+    "test": "jest --config ./jest.config.ts",
     "coverage": "npm run test -- --coverage",
     "trypublish": "npm publish || true",
     "storybook": "start-storybook -p 6006",
@@ -73,6 +73,7 @@
     "terser-webpack-plugin": "^5.3.5",
     "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
@@ -88,24 +89,6 @@
   "files": [
     "build"
   ],
-  "jest": {
-    "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"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ]
-  },
   "bugs": {
     "url": "https://github.com/KeyValueSoftwareSystems/react-vertical-stepper/issues"
   },

package-lock.json

@@ -47,5 +47,6 @@ WaterFallChart.args = {
       label: 'Acquisitions',
       value: 80
     }
-  ]
+  ],
+  onChartClick: (e: any) => console.log(e)
 };

package.json

@@ -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);
+  });
+});

src/assets/waterfall-chart-example.png

@@ -8,12 +8,16 @@ export type IWaterfallGraphProps = {
   yAxisPixelsPerUnit?: number;
   showFinalSummary?: boolean;
   summaryXLabel?: string;
-  summaryBarStyles?: CSSProperties;
-  positiveBarStyles?: CSSProperties;
-  negativeBarStyles?: CSSProperties;
+  styles?: ICustomizationStyles;
   onChartClick?: IOnChartClick;
 };
 
+export type ICustomizationStyles = {
+  summaryBar?: CSSProperties;
+  positiveBar?: CSSProperties;
+  negativeBar?: CSSProperties;
+};
+
 export type ITransaction = {
   label: string;
   value: number;