Ensure attributes have been updated before checking the values (#61615)

Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>

packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php

@@ -93,6 +93,7 @@
 		<button
 			data-testid="toggle value"
 			data-wp-on--click="actions.toggleValue"
+			data-wp-bind--data-toggle-count="context.count"
 		>Toggle</button>
 	</div>
 	<?php endforeach; ?>

packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js

@@ -32,6 +32,7 @@ const { state, foo } = store( 'directive-bind', {
 
 			context.previousValue = context.value;
 			context.value = previousValue;
+			context.count = ( context.count ?? 0 ) + 1;
 		},
 	},
 } );

test/e2e/specs/interactivity/directive-bind.spec.ts

@@ -210,6 +210,12 @@ test.describe( 'data-wp-bind', () => {
 					const el = container.getByTestId( testid );
 					const toggle = container.getByTestId( 'toggle value' );
 
+					// Ensure hydration has happened.
+					const checkbox = page.getByTestId(
+						'add missing checked at hydration'
+					);
+					await expect( checkbox ).toBeChecked();
+
 					const hydratedAttr = await el.getAttribute( name );
 					const hydratedProp = await el.evaluate(
 						( node, propName ) => ( node as any )[ propName ],
@@ -236,7 +242,13 @@ test.describe( 'data-wp-bind', () => {
 						return;
 					}
 
-					await toggle.click( { clickCount: 2, delay: 50 } );
+					await toggle.click( { clickCount: 2 } );
+
+					// Ensure values have been updated after toggling.
+					await expect( toggle ).toHaveAttribute(
+						'data-toggle-count',
+						'2'
+					);
 
 					// Values should be the same as before.
 					const renderedAttr = await el.getAttribute( name );