From 0d73da84137b2464227ae8495fac244b3b9eda2c Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Sat, 3 Feb 2024 09:30:14 +0100 Subject: [PATCH 1/3] Fix flaky test of data-wp-on-window directive --- .../interactivity/directive-on-window.spec.ts | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/test/e2e/specs/interactivity/directive-on-window.spec.ts b/test/e2e/specs/interactivity/directive-on-window.spec.ts index dd3a02e0bb400..38efe9a31cd99 100644 --- a/test/e2e/specs/interactivity/directive-on-window.spec.ts +++ b/test/e2e/specs/interactivity/directive-on-window.spec.ts @@ -18,38 +18,47 @@ test.describe( 'data-wp-on-window', () => { await utils.deleteAllPosts(); } ); - test( 'callbacks should run whenever the specified event is dispatched', async ( { - page, - } ) => { - await page.setViewportSize( { width: 600, height: 600 } ); - const counter = page.getByTestId( 'counter' ); - await expect( counter ).toHaveText( '1' ); - } ); - test( 'the event listener is removed when the element is removed', async ( { + test( 'the event listener is attached when the element is added', async ( { page, } ) => { const counter = page.getByTestId( 'counter' ); - const isEventAttached = page.getByTestId( 'isEventAttached' ); const visibilityButton = page.getByTestId( 'visibility' ); + // Initial value. await expect( counter ).toHaveText( '0' ); - await expect( isEventAttached ).toHaveText( 'yes' ); + + // Make sure the event listener is attached. + await page.waitForSelector( + '[data-testid="isEventAttached"]:has-text("yes")' + ); + + // Change the viewport size. await page.setViewportSize( { width: 600, height: 600 } ); await expect( counter ).toHaveText( '1' ); // Remove the element. await visibilityButton.click(); + // Make sure the event listener is not attached. + await page.waitForSelector( + '[data-testid="isEventAttached"]:has-text("no")' + ); + // This resize should not increase the counter. await page.setViewportSize( { width: 300, height: 600 } ); // Add the element back. await visibilityButton.click(); + + // The counter should have the same value as before. await expect( counter ).toHaveText( '1' ); - // Wait until the effects run again. - await expect( isEventAttached ).toHaveText( 'yes' ); + // Make sure the event listener is re-attached. + await page.waitForSelector( + '[data-testid="isEventAttached"]:has-text("yes")' + ); + // This resize should increase the counter. await page.setViewportSize( { width: 200, height: 600 } ); await expect( counter ).toHaveText( '2' ); } ); From 7f3af2a6d6c659f08636fd611847f606683583ff Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Sat, 3 Feb 2024 15:42:13 +0100 Subject: [PATCH 2/3] Use waitFor instead of waitForSelector --- .../specs/interactivity/directive-on-window.spec.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/test/e2e/specs/interactivity/directive-on-window.spec.ts b/test/e2e/specs/interactivity/directive-on-window.spec.ts index 38efe9a31cd99..e44a016d4b889 100644 --- a/test/e2e/specs/interactivity/directive-on-window.spec.ts +++ b/test/e2e/specs/interactivity/directive-on-window.spec.ts @@ -28,9 +28,7 @@ test.describe( 'data-wp-on-window', () => { await expect( counter ).toHaveText( '0' ); // Make sure the event listener is attached. - await page.waitForSelector( - '[data-testid="isEventAttached"]:has-text("yes")' - ); + await page.getByTestId( 'isEventAttached' ).filter( { hasText: 'yes' } ).waitFor(); // Change the viewport size. await page.setViewportSize( { width: 600, height: 600 } ); @@ -40,9 +38,7 @@ test.describe( 'data-wp-on-window', () => { await visibilityButton.click(); // Make sure the event listener is not attached. - await page.waitForSelector( - '[data-testid="isEventAttached"]:has-text("no")' - ); + await page.getByTestId( 'isEventAttached' ).filter( { hasText: 'no' } ).waitFor(); // This resize should not increase the counter. await page.setViewportSize( { width: 300, height: 600 } ); @@ -54,9 +50,7 @@ test.describe( 'data-wp-on-window', () => { await expect( counter ).toHaveText( '1' ); // Make sure the event listener is re-attached. - await page.waitForSelector( - '[data-testid="isEventAttached"]:has-text("yes")' - ); + await page.getByTestId( 'isEventAttached' ).filter( { hasText: 'yes' } ).waitFor(); // This resize should increase the counter. await page.setViewportSize( { width: 200, height: 600 } ); From 726da6edd951bb6eb32ecfa7645ad2db008e5ef0 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Sat, 3 Feb 2024 18:12:34 +0100 Subject: [PATCH 3/3] Prettify --- .../interactivity/directive-on-window.spec.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/interactivity/directive-on-window.spec.ts b/test/e2e/specs/interactivity/directive-on-window.spec.ts index e44a016d4b889..3afd1a9942fa8 100644 --- a/test/e2e/specs/interactivity/directive-on-window.spec.ts +++ b/test/e2e/specs/interactivity/directive-on-window.spec.ts @@ -28,7 +28,10 @@ test.describe( 'data-wp-on-window', () => { await expect( counter ).toHaveText( '0' ); // Make sure the event listener is attached. - await page.getByTestId( 'isEventAttached' ).filter( { hasText: 'yes' } ).waitFor(); + await page + .getByTestId( 'isEventAttached' ) + .filter( { hasText: 'yes' } ) + .waitFor(); // Change the viewport size. await page.setViewportSize( { width: 600, height: 600 } ); @@ -38,7 +41,10 @@ test.describe( 'data-wp-on-window', () => { await visibilityButton.click(); // Make sure the event listener is not attached. - await page.getByTestId( 'isEventAttached' ).filter( { hasText: 'no' } ).waitFor(); + await page + .getByTestId( 'isEventAttached' ) + .filter( { hasText: 'no' } ) + .waitFor(); // This resize should not increase the counter. await page.setViewportSize( { width: 300, height: 600 } ); @@ -50,7 +56,10 @@ test.describe( 'data-wp-on-window', () => { await expect( counter ).toHaveText( '1' ); // Make sure the event listener is re-attached. - await page.getByTestId( 'isEventAttached' ).filter( { hasText: 'yes' } ).waitFor(); + await page + .getByTestId( 'isEventAttached' ) + .filter( { hasText: 'yes' } ) + .waitFor(); // This resize should increase the counter. await page.setViewportSize( { width: 200, height: 600 } );