Add tests

plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx

@@ -10,6 +10,7 @@ import userEvent from '@testing-library/user-event';
 import { Products } from '../';
 import { defaultSurfacedProductTypes, productTypes } from '../constants';
 import { getAdminSetting } from '~/utils/admin-settings';
+import useLayoutExperiment from '../../use-product-layout-experiment';
 
 jest.mock( '@wordpress/data', () => ( {
 	...jest.requireActual( '@wordpress/data' ),
@@ -21,7 +22,7 @@ jest.mock( '~/utils/admin-settings', () => ( {
 } ) );
 
 jest.mock( '../../use-product-layout-experiment', () => ( {
-	default: () => [ false, 'stacked' ],
+	default: jest.fn().mockReturnValue( [ false, 'stacked' ] ),
 	__esModule: true,
 } ) );
 
@@ -110,4 +111,39 @@ describe( 'Products', () => {
 			)
 		);
 	} );
+
+	it( 'should show spinner when layout experiment is loading', async () => {
+		( useLayoutExperiment as jest.Mock ).mockImplementation( () => [
+			true,
+			'card',
+		] );
+		const { container } = render( <Products /> );
+		expect(
+			container.getElementsByClassName( 'components-spinner' )
+		).toHaveLength( 1 );
+	} );
+
+	it( 'should render card layout when experiment is assigned', async () => {
+		( useLayoutExperiment as jest.Mock ).mockImplementation( () => [
+			false,
+			'card',
+		] );
+		const { container } = render( <Products /> );
+		expect(
+			container.getElementsByClassName(
+				'woocommerce-products-card-layout'
+			)
+		).toHaveLength( 1 );
+	} );
+
+	it( 'should render stacked layout when experiment is assigned', async () => {
+		( useLayoutExperiment as jest.Mock ).mockImplementation( () => [
+			false,
+			'stacked',
+		] );
+		const { container } = render( <Products /> );
+		expect(
+			container.getElementsByClassName( 'woocommerce-products-stack' )
+		).toHaveLength( 1 );
+	} );
 } );