Add test in window events

WordPress · Apr 23, 2024 · 656a2d6 · 656a2d6
1 parent 4173531
commit 656a2d6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 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
@@ -21,4 +21,8 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
+	<div data-wp-on-window--resize="actions.resizeHandler" data-wp-on-window--resize--second="actions.resizeSecondHandler">
+		<p data-wp-text="state.resizeHandler" data-testid="resizeHandler">no</p>
+		<p data-wp-text="state.resizeSecondHandler" data-testid="resizeSecondHandler">no</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
@@ -25,6 +25,8 @@ const { state } = store( 'directive-on-window', {
 		counter: 0,
 		isVisible: true,
 		isEventAttached: 'no',
+		resizeHandler: 'no',
+		resizeSecondHandler: 'no',
 	},
 	callbacks: {
 		resizeHandler() {
@@ -39,5 +41,11 @@ const { state } = store( 'directive-on-window', {
 			state.isEventAttached = 'no';
 			state.isVisible = ! state.isVisible;
 		},
+		resizeHandler: () => {
+			state.resizeHandler = 'yes';
+		},
+		resizeSecondHandler: () => {
+			state.resizeSecondHandler = 'yes';
+		}
 	}
 } );
diff --git a/test/e2e/specs/interactivity/directive-on-window.spec.ts b/test/e2e/specs/interactivity/directive-on-window.spec.ts
@@ -65,4 +65,25 @@ test.describe( 'data-wp-on-window', () => {
 		await page.setViewportSize( { width: 200, height: 600 } );
 		await expect( counter ).toHaveText( '2' );
 	} );
+	test( 'should work with multiple event handlers on the same event type', async ( {
+		page,
+	} ) => {
+		const resizeHandler = page.getByTestId( 'resizeHandler' );
+		const resizeSecondHandler = page.getByTestId( 'resizeSecondHandler' );
+
+		// Initial value.
+		await expect( resizeHandler ).toHaveText( 'no' );
+		await expect( resizeSecondHandler ).toHaveText( 'no' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.setViewportSize( { width: 600, height: 600 } );
+		await expect( resizeHandler ).toHaveText( 'yes' );
+		await expect( resizeSecondHandler ).toHaveText( 'yes' );
+	} );
 } );