Fix flaky test on-window (#58134)

WordPress · Jan 23, 2024 · 733d8a5 · 733d8a5
1 parent 46446b8
commit 733d8a5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
@@ -8,10 +8,18 @@
 gutenberg_enqueue_module( 'directive-on-window-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-on-window" }' data-wp-context='{"isVisible":true}'>
-	<button data-wp-on--click="actions.visibilityHandler" data-testid="visibility">Switch visibility</button>
-	<div data-wp-show-mock="context.isVisible">
-		<div data-wp-on-window--resize="callbacks.resizeHandler">
+<div data-wp-interactive='{ "namespace": "directive-on-window" }'>
+	<button
+		data-wp-on--click="actions.visibilityHandler"
+		data-testid="visibility">
+		Switch visibility
+	</button>
+	<div data-wp-text="state.isEventAttached" data-testid="isEventAttached">no</div>
+	<div data-wp-show-mock="state.isVisible">
+		<div
+			data-wp-on-window--resize="callbacks.resizeHandler"
+			data-wp-init="callbacks.init"
+		>
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, directive, getContext } from '@wordpress/interactivity';
+import { store, directive } from '@wordpress/interactivity';
 
 // Mock `data-wp-show` directive to test when things are removed from the
 // DOM.  Replace with `data-wp-show` when it's ready.
@@ -19,16 +19,21 @@ directive(
 const { state } = store( 'directive-on-window', {
 	state: {
 		counter: 0,
+		isVisible: true,
+		isEventAttached: 'no',
 	},
 	callbacks: {
-		resizeHandler: ( ) => {
+		resizeHandler() {
 			state.counter += 1;
 		},
+		init() {
+			state.isEventAttached = 'yes';
+		}
 	},
 	actions: {
 		visibilityHandler: () => {
-			const context = getContext();
-			context.isVisible = ! context.isVisible;
+			state.isEventAttached = 'no';
+			state.isVisible = ! state.isVisible;
 		},
 	}
 } );