Backup: adding tracking analytics to upgrade storage link (#63568)

* Backup: adding tracking analytics to upgrade storage link * Fix broken unit tests, add coverage for new Tracks event Co-authored-by: Matt Gawarecki <[email protected]>
Automattic · May 17, 2022 · d54df11 · d54df11
1 parent 9b1a292
commit d54df11
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/client/components/backup-storage-space/hooks.tsx b/client/components/backup-storage-space/hooks.tsx
@@ -1,6 +1,7 @@
 import { useTranslate, TranslateResult } from 'i18n-calypso';
-import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { recordTracksEvent } from 'calypso/state/analytics/actions/record';
 import getJetpackStorageUpgradeUrl from 'calypso/state/plans/selectors/get-jetpack-storage-upgrade-url';
 import getSelectedSiteSlug from 'calypso/state/ui/selectors/get-selected-site-slug';
 
@@ -24,12 +25,22 @@ export const useStorageUsageText = (
 	bytesAvailable: number | undefined
 ): TranslateResult | null => {
 	const translate = useTranslate();
+	const dispatch = useDispatch();
 
 	const siteSlug = useSelector( getSelectedSiteSlug );
 	const storageUpgradeUrl = useSelector( ( state ) =>
 		getJetpackStorageUpgradeUrl( state, siteSlug )
 	);
 
+	const onClick = useCallback( () => {
+		dispatch(
+			recordTracksEvent( 'calypso_jetpack_backup_storage_usage_upgrade_click', {
+				bytes_used: bytesUsed,
+				bytes_available: bytesAvailable,
+			} )
+		);
+	}, [ dispatch, bytesUsed, bytesAvailable ] );
+
 	return useMemo( () => {
 		if ( bytesUsed === undefined ) {
 			return null;
@@ -59,7 +70,7 @@ export const useStorageUsageText = (
 					comment:
 						'Must use unit abbreviation; describes used vs available storage amounts (e.g., 20.0GB of 30GB used, 0.5GB of 20GB used)',
 					components: {
-						a: <a href={ storageUpgradeUrl } />,
+						a: <a onClick={ onClick } href={ storageUpgradeUrl } />,
 					},
 				}
 			);
@@ -75,5 +86,5 @@ export const useStorageUsageText = (
 					'Must use unit abbreviation; describes used vs available storage amounts (e.g., 20.0GB of 1TB used, 0.5GB of 2TB used)',
 			}
 		);
-	}, [ translate, storageUpgradeUrl, bytesUsed, bytesAvailable ] );
+	}, [ translate, storageUpgradeUrl, bytesUsed, bytesAvailable, onClick ] );
 };
diff --git a/client/components/backup-storage-space/test/hooks.js b/client/components/backup-storage-space/test/hooks.js
@@ -8,16 +8,19 @@ const EXAMPLE_SITE_SLUG = 'mysite.example';
 jest.mock( 'react-redux', () => ( {
 	...jest.requireActual( 'react-redux' ),
 	useSelector: jest.fn().mockImplementation( ( selector ) => selector() ),
+	useDispatch: jest.fn().mockImplementation( () => () => {} ),
 } ) );
 jest.mock( 'calypso/state/ui/selectors/get-selected-site-slug', () =>
 	jest.fn().mockImplementation( () => EXAMPLE_SITE_SLUG )
 );
 jest.mock( 'calypso/lib/jetpack/is-jetpack-cloud' );
+jest.mock( 'calypso/state/analytics/actions/record' );
 
 import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import { useStorageUsageText } from 'calypso/components/backup-storage-space/hooks';
 import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
+import { recordTracksEvent } from 'calypso/state/analytics/actions/record';
 
 const GIGABYTE = 2 ** 30;
 const TERABYTE = 2 ** 40;
@@ -99,6 +102,22 @@ describe( 'useStorageUsageText', () => {
 		expect( link ).toHaveAttribute( 'href', `/pricing/storage/${ EXAMPLE_SITE_SLUG }` );
 	} );
 
+	test( 'fires the correct Tracks event when the Upgrade link is clicked', () => {
+		const text = renderText( GIGABYTE, GIGABYTE * 10 );
+
+		// Simulate clicking the Upgrade link
+		const link = text.querySelector( 'a' );
+		expect( link ).toBeInTheDocument();
+		link.click();
+
+		expect( recordTracksEvent ).toHaveBeenCalled();
+		const [ eventName, storageInfo ] = recordTracksEvent.mock.calls[ 0 ];
+
+		expect( eventName ).toEqual( 'calypso_jetpack_backup_storage_usage_upgrade_click' );
+		expect( storageInfo.bytes_used ).toEqual( GIGABYTE );
+		expect( storageInfo.bytes_available ).toEqual( GIGABYTE * 10 );
+	} );
+
 	// NOTE: Technically this should only happen for plans with the highest
 	// tier of storage (which is currently 1TB).
 	test( 'does not render an Upgrade link for 1TB plans', () => {