Update 's unit tests

WordPress · Mar 16, 2022 · e8b5a18 · e8b5a18
1 parent 45e8fac
commit e8b5a18
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
@@ -100,7 +100,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not render select, if units are disabled', () => {
-			render( <UnitControl unit="em" units={ [] } /> );
+			render( <UnitControl value="3em" units={ [] } /> );
 			const input = getInput();
 			const select = getSelect();
 
@@ -224,17 +224,24 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit', () => {
 		it( 'should update unit value on change', async () => {
-			let state = 'px';
+			let state = '14rem';
 			const setState = ( nextState ) => ( state = nextState );
 
+			const spy = jest.fn();
+
 			const { user } = render(
-				<UnitControl unit={ state } onUnitChange={ setState } />
+				<UnitControl
+					value={ state }
+					onChange={ setState }
+					onUnitChange={ spy }
+				/>
 			);
 
 			const select = getSelect();
-			await user.selectOptions( select, [ 'em' ] );
+			await user.selectOptions( select, [ 'px' ] );
 
-			expect( state ).toBe( 'em' );
+			expect( spy ).toHaveBeenCalledWith( 'px', expect.anything() );
+			expect( state ).toBe( '14px' );
 		} );
 
 		it( 'should render customized units, if defined', () => {
@@ -319,7 +326,6 @@ describe( 'UnitControl', () => {
 			const { user } = render(
 				<UnitControl
 					value={ state }
-					unit="%"
 					units={ [ { value: '%', label: '%' } ] }
 					onChange={ setState }
 				/>
@@ -450,16 +456,16 @@ describe( 'UnitControl', () => {
 			expect( state ).toBe( '123rem' );
 		} );
 
-		it( 'should update unit after initial render and with new unit prop', () => {
+		it( 'should update unit after initial render and with new unit prop', async () => {
 			const { rerender } = render( <UnitControl value={ '10%' } /> );
 
 			const select = getSelect();
 
 			expect( select.value ).toBe( '%' );
 
-			rerender( <UnitControl value={ '20' } unit="em" /> );
+			rerender( <UnitControl value={ '20vh' } /> );
 
-			expect( select.value ).toBe( 'em' );
+			await waitFor( () => expect( select.value ).toBe( 'vh' ) );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {