Chart Library: Add initial testing infrastructure and PieChart component tests

projects/js-packages/charts/changelog/add-chart-library-tests

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Charts: adds dependencies and config for jest testing. Adds some initial tests to pie chart component

projects/js-packages/charts/global.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="jest" />
+
+declare global {
+	const describe: jest.Describe;
+	const test: jest.It;
+	const expect: jest.Expect;
+	const it: jest.It;
+	const beforeAll: jest.Lifecycle;
+	const afterAll: jest.Lifecycle;
+	const beforeEach: jest.Lifecycle;
+	const afterEach: jest.Lifecycle;
+}
+
+export {};

projects/js-packages/charts/package.json

@@ -91,7 +91,17 @@
 		"tsconfig-paths-webpack-plugin": "4.2.0",
 		"typescript": "5.7.2",
 		"webpack": "^5.88.0",
-		"webpack-cli": "^5.1.0"
+		"webpack-cli": "^5.1.0",
+		"@testing-library/react": "^14.0.0",
+		"@testing-library/jest-dom": "^6.0.0",
+		"@types/jest": "^29.0.0",
+		"@types/testing-library__jest-dom": "^5.14.9",
+		"@jest/globals": "^29.0.0",
+		"babel-jest": "^29.7.0",
+		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@wordpress/babel-plugin-import-jsx-pragma": "5.14.0",
+		"@wordpress/element": "6.14.0",
+		"@babel/plugin-transform-react-jsx": "7.25.9"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0 || ^18.0.0",

projects/js-packages/charts/src/components/pie-chart/__tests__/pie-chart.test.tsx

@@ -0,0 +1,59 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../providers/theme';
+import PieChart from '../pie-chart';
+
+describe( 'PieChart', () => {
+	const defaultProps = {
+		size: 500,
+		data: [
+			{ label: 'A', percentage: 50, value: 50 },
+			{ label: 'B', percentage: 50, value: 50 },
+		],
+	};
+
+	const renderWithTheme = ( props = {} ) => {
+		return render(
+			<ThemeProvider>
+				<PieChart { ...defaultProps } { ...props } />
+			</ThemeProvider>
+		);
+	};
+
+	describe( 'Data Validation', () => {
+		test( 'validates total percentage equals 100', () => {
+			renderWithTheme( {
+				data: [
+					{ label: 'A', percentage: 60, value: 60 },
+					{ label: 'B', percentage: 50, value: 50 },
+				],
+			} );
+			expect( screen.getByText( /invalid percentage total/i ) ).toBeInTheDocument();
+		} );
+
+		test( 'handles negative values', () => {
+			renderWithTheme( {
+				data: [
+					{ label: 'A', percentage: -30, value: -30 },
+					{ label: 'B', percentage: 130, value: 130 },
+				],
+			} );
+			expect( screen.getByText( /invalid data/i ) ).toBeInTheDocument();
+		} );
+
+		test( 'handles empty data array', () => {
+			renderWithTheme( { data: [] } );
+			expect( screen.getByText( /no data available/i ) ).toBeInTheDocument();
+		} );
+
+		test( 'handles single data point', () => {
+			renderWithTheme( {
+				data: [ { label: 'A', percentage: 100, value: 100 } ],
+			} );
+			expect( screen.getByText( 'A' ) ).toBeInTheDocument();
+		} );
+	} );
+} );

projects/js-packages/charts/tests/jest.config.cjs

@@ -4,4 +4,16 @@ const baseConfig = require( 'jetpack-js-tools/jest/config.base.js' );
 module.exports = {
 	...baseConfig,
 	rootDir: path.join( __dirname, '..' ),
+	testEnvironment: 'jsdom',
+	setupFilesAfterEnv: [
+		...baseConfig.setupFilesAfterEnv,
+		'@testing-library/jest-dom',
+		'<rootDir>/tests/jest.setup.js',
+	],
+	transform: {
+		...baseConfig.transform,
+		'\\.[jt]sx?$': require( 'jetpack-js-tools/jest/babel-jest-config-factory.js' )(
+			require.resolve
+		),
+	},
 };

projects/js-packages/charts/tests/jest.setup.js

@@ -0,0 +1,13 @@
+class ResizeObserver {
+	observe() {
+		// do nothing
+	}
+	unobserve() {
+		// do nothing
+	}
+	disconnect() {
+		// do nothing
+	}
+}
+
+global.ResizeObserver = ResizeObserver;

projects/js-packages/charts/tsconfig.json

@@ -1,10 +1,10 @@
 {
 	"extends": "jetpack-js-tools/tsconfig.tsc-declaration-only.json",
 	"compilerOptions": {
-		"typeRoots": [ "./node_modules/@types/", "src/*" ],
+		"typeRoots": [ "./node_modules/@types/" ],
 		"outDir": "./dist/types"
 	},
-	// List all sources and source-containing subdirs.
-	"include": [ "./src/index.ts" ],
-	"exclude": [ "node_modules", "dist", "**/stories/**" ]
+	"include": [ "./src/**/*.ts", "./src/**/*.tsx" ],
+	"exclude": [ "node_modules", "dist", "**/stories/**" ],
+	"files": [ "./global.d.ts" ]
 }