Update connection status tests to typescript

projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.jsx → projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.tsx

@@ -1,11 +1,27 @@
+import '@testing-library/jest-dom';
 import { CONNECTION_STORE_ID } from '@automattic/jetpack-connection';
-import { jest } from '@jest/globals';
 import { render, renderHook, screen } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import ConnectionStatusCard from '../index';
+import type { StateProducts, MyJetpackInitialState } from '../../../data/types';
+
+interface TestMyJetpackInitialState {
+	lifecycleStats: Pick<
+		MyJetpackInitialState[ 'lifecycleStats' ],
+		'historicallyActiveModules' | 'brokenModules'
+	>;
+	products: {
+		items: {
+			'anti-spam': Pick<
+				StateProducts[ 'anti-spam' ],
+				'requires_user_connection' | 'status' | 'pricing_for_ui'
+			>;
+		};
+	};
+}
 
 const resetInitialState = () => {
-	global.window.myJetpackInitialState = {
+	( window.myJetpackInitialState as unknown as TestMyJetpackInitialState ) = {
 		lifecycleStats: {
 			historicallyActiveModules: [],
 			brokenModules: {
@@ -18,8 +34,17 @@ const resetInitialState = () => {
 				'anti-spam': {
 					requires_user_connection: false,
 					status: 'inactive',
-					pricingForUi: {
-						productTerm: 'year',
+					// This property is needed as it is used when the `useAllProducts` hook is called
+					// in the connection status card component
+					pricing_for_ui: {
+						product_term: 'year',
+						available: false,
+						wpcom_product_slug: '',
+						currency_code: '',
+						full_price: 0,
+						discount_price: 0,
+						coupon_discount: 0,
+						is_introductory_offer: false,
 					},
 				},
 			},
@@ -33,7 +58,7 @@ const setConnectionStore = ( {
 	hasConnectedOwner = false,
 } = {} ) => {
 	let storeSelect;
-	renderHook( () => useSelect( select => ( storeSelect = select( CONNECTION_STORE_ID ) ) ) );
+	renderHook( () => useSelect( select => ( storeSelect = select( CONNECTION_STORE_ID ) ), [] ) );
 	jest
 		.spyOn( storeSelect, 'getConnectionStatus' )
 		.mockReset()
@@ -75,8 +100,8 @@ describe( 'ConnectionStatusCard', () => {
 
 	describe( 'When the site is not registered and has broken modules', () => {
 		const setup = () => {
-			global.window.myJetpackInitialState.lifecycleStats.brokenModules.needs_site_connection = [
-				'module1',
+			window.myJetpackInitialState.lifecycleStats.brokenModules.needs_site_connection = [
+				'anti-spam',
 			];
 			return render( <ConnectionStatusCard { ...testProps } /> );
 		};
@@ -119,9 +144,7 @@ describe( 'ConnectionStatusCard', () => {
 		describe( 'There are products that require user connection', () => {
 			const setup = () => {
 				setConnectionStore( { isRegistered: true } );
-				global.window.myJetpackInitialState.products.items[
-					'anti-spam'
-				].requires_user_connection = true;
+				window.myJetpackInitialState.products.items[ 'anti-spam' ].requires_user_connection = true;
 				return render( <ConnectionStatusCard { ...testProps } /> );
 			};
 
@@ -142,8 +165,8 @@ describe( 'ConnectionStatusCard', () => {
 	describe( 'When the user has not connected their WordPress.com account and there are broken modules', () => {
 		const setup = () => {
 			setConnectionStore( { isRegistered: true } );
-			global.window.myJetpackInitialState.lifecycleStats.brokenModules.needs_user_connection = [
-				'module1',
+			window.myJetpackInitialState.lifecycleStats.brokenModules.needs_user_connection = [
+				'anti-spam',
 			];
 			return render( <ConnectionStatusCard { ...testProps } /> );
 		};

projects/packages/my-jetpack/_inc/data/types.ts

@@ -19,7 +19,8 @@ export type BackupCountStats = {
 	total_audio_count: number;
 };
 
-type StateProducts = Window[ 'myJetpackInitialState' ][ 'products' ][ 'items' ];
+export type MyJetpackInitialState = Window[ 'myJetpackInitialState' ];
+export type StateProducts = Window[ 'myJetpackInitialState' ][ 'products' ][ 'items' ];
 export type ProductSnakeCase = StateProducts[ string ];
 
 export type ProductCamelCase = ToCamelCase< ProductSnakeCase > & {

projects/packages/my-jetpack/changelog/update-connection-status-tests-to-typescript

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update connection status card tests to TS

projects/packages/my-jetpack/global.d.ts

@@ -9,6 +9,7 @@ declare module '@wordpress/components';
 declare module '@wordpress/compose';
 declare module '@wordpress/i18n';
 declare module '@wordpress/icons';
+declare module '@automattic/jetpack-connection';
 
 type JetpackModule =
 	| 'anti-spam'

projects/packages/my-jetpack/package.json

@@ -56,10 +56,13 @@
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "7.24.7",
 		"@babel/preset-env": "7.24.7",
+		"@jest/globals": "29.7.0",
 		"@storybook/react": "8.1.6",
 		"@testing-library/dom": "10.1.0",
+		"@testing-library/jest-dom": "6.4.2",
 		"@testing-library/react": "15.0.7",
 		"@testing-library/user-event": "14.5.2",
+		"@types/jest": "29.5.12",
 		"@types/react": "18.3.1",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",