From 2b7e8216f5c8b51b430c877f26b994448a356aa9 Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Mon, 13 May 2024 12:26:32 +0200
Subject: [PATCH] Ensure attributes have been updated before checking the
 values

---
 .../interactive-blocks/directive-bind/render.php   |  1 +
 .../interactive-blocks/directive-bind/view.js      |  1 +
 .../e2e/specs/interactivity/directive-bind.spec.ts | 14 +++++++++++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
index 20f9313588046..c629e098b6e78 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
+++ b/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; ?>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
index 0d93e93ba1450..47d1262f37ed2 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
+++ b/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;
 		},
 	},
 } );
diff --git a/test/e2e/specs/interactivity/directive-bind.spec.ts b/test/e2e/specs/interactivity/directive-bind.spec.ts
index 525fceab5ca6a..11902018e0753 100644
--- a/test/e2e/specs/interactivity/directive-bind.spec.ts
+++ b/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 );