From 8454780a4aea17f3c963479c2301e7c0534a0c64 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 23 Aug 2023 15:39:43 +0700 Subject: [PATCH 1/8] move test to correct dir --- .../product-gallery-large-image.block_theme.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename tests/{e2e-pw => e2e}/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts (98%) diff --git a/tests/e2e-pw/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts b/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts similarity index 98% rename from tests/e2e-pw/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts rename to tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts index ee30a29630c..7f2ce1619dd 100644 --- a/tests/e2e-pw/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts +++ b/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts @@ -49,7 +49,7 @@ test.describe( `${ blockData.name }`, () => { ] ); await page.goto( blockData.productPage, { - waitUntil: 'networkidle', + waitUntil: 'commit', } ); const blockFrontend = await frontendUtils.getBlockByName( From 4408818e1c1240be1614554dddaebde8f5a9189d Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 23 Aug 2023 20:28:21 +0700 Subject: [PATCH 2/8] update mini cart test to run in fullyParallel --- tests/e2e/bin/posts/mini-cart.html | 4 + .../mini-cart/mini-cart.block_theme.spec.ts | 171 ++++++------------ 2 files changed, 59 insertions(+), 116 deletions(-) diff --git a/tests/e2e/bin/posts/mini-cart.html b/tests/e2e/bin/posts/mini-cart.html index 03d808aa790..8f2ba8a14eb 100644 --- a/tests/e2e/bin/posts/mini-cart.html +++ b/tests/e2e/bin/posts/mini-cart.html @@ -1 +1,5 @@ + + +
+ diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index df57b7e8b27..37afaebf72f 100644 --- a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -1,132 +1,71 @@ /** * External dependencies */ -import { BlockData } from '@woocommerce/e2e-types'; import { test, expect } from '@woocommerce/e2e-playwright-utils'; -const blockData: BlockData = { - name: 'woocommerce/mini-cart', - mainClass: '.wc-block-mini-cart', - selectors: { - frontend: { - drawer: '.wc-block-mini-cart__drawer', - drawerCloseButton: 'button[aria-label="Close"]', - }, - editor: {}, - }, +const getFreshSession = () => { + return { + cookies: [], + origins: [], + }; }; -const getMiniCartButton = async ( { page } ) => { - return page.getByLabel( '0 items in cart, total price of $0.00' ); -}; +test.describe( `Mini Cart Block`, () => { + test.use( { + storageState: getFreshSession(), + } ); + + test.beforeEach( async ( { page } ) => { + await page.goto( `/mini-cart-block`, { waitUntil: 'commit' } ); + } ); + + test( 'should open the empty cart drawer', async ( { page } ) => { + await page.getByLabel( 'items in cart,' ).click(); + + await expect( page.getByRole( 'dialog' ) ).toHaveText( + 'Your cart is currently empty!' + ); + } ); -test.describe( `${ blockData.name } Block`, () => { - test.describe( `standalone`, () => { - test.beforeEach( async ( { admin, page, editor } ) => { - await admin.createNewPost( { legacyCanvas: true } ); - await editor.insertBlock( { name: blockData.name } ); - await editor.publishPost(); - const url = new URL( page.url() ); - const postId = url.searchParams.get( 'post' ); - await page.goto( `/?p=${ postId }`, { waitUntil: 'commit' } ); - } ); - - test( 'should open the empty cart drawer', async ( { page } ) => { - const miniCartButton = await getMiniCartButton( { page } ); - - await miniCartButton.click(); - - await expect( - page.locator( blockData.selectors.frontend.drawer ).first() - ).toHaveText( 'Your cart is currently empty!' ); - } ); - - test( 'should close the drawer when clicking on the close button', async ( { - page, - } ) => { - const miniCartButton = await getMiniCartButton( { page } ); - - await miniCartButton.click(); - - await expect( - page.locator( blockData.selectors.frontend.drawer ).first() - ).toHaveText( 'Your cart is currently empty!' ); - - // Wait for the drawer to fully open. - await page.waitForSelector( - blockData.selectors.frontend.drawerCloseButton - ); - - const closeButton = page.locator( - blockData.selectors.frontend.drawerCloseButton - ); - - await closeButton?.click(); - - // Wait for the drawer to fully close. - await page.waitForSelector( blockData.selectors.frontend.drawer, { - state: 'detached', - } ); - - expect( - await page - .locator( blockData.selectors.frontend.drawer ) - .count() - ).toEqual( 0 ); - } ); - - test( 'should close the drawer when clicking outside the drawer', async ( { - page, - } ) => { - const miniCartButton = await getMiniCartButton( { page } ); - - await miniCartButton.click(); - - await expect( - page.locator( blockData.selectors.frontend.drawer ).first() - ).toHaveText( 'Your cart is currently empty!' ); - - // Wait for the drawer to fully open. - await page.waitForSelector( - blockData.selectors.frontend.drawerCloseButton - ); - - await page.mouse.click( 50, 200 ); - - // Wait for the drawer to fully close. - await page.waitForSelector( blockData.selectors.frontend.drawer, { - state: 'detached', - } ); - - expect( - await page - .locator( blockData.selectors.frontend.drawer ) - .count() - ).toEqual( 0 ); - } ); + test( 'should close the drawer when clicking on the close button', async ( { + page, + } ) => { + await page.getByLabel( 'items in cart,' ).click(); + + await expect( page.getByRole( 'dialog' ) ).toHaveText( + 'Your cart is currently empty!' + ); + + await page.getByRole( 'button', { name: 'Close' } ).click(); + + await expect( page.getByRole( 'dialog' ) ).toHaveCount( 0 ); } ); - test.describe( `with All products Block`, () => { - test.beforeEach( async ( { admin, page, editor } ) => { - await admin.createNewPost( { legacyCanvas: true } ); - await editor.insertBlock( { name: blockData.name } ); - await editor.insertBlock( { name: 'woocommerce/all-products' } ); - await editor.publishPost(); - const url = new URL( page.url() ); - const postId = url.searchParams.get( 'post' ); - await page.goto( `/?p=${ postId }`, { waitUntil: 'commit' } ); - } ); + test( 'should close the drawer when clicking outside the drawer', async ( { + page, + } ) => { + await page.getByLabel( 'items in cart,' ).click(); + + await expect( page.getByRole( 'dialog' ) ).toHaveText( + 'Your cart is currently empty!' + ); - test( 'should open the filled cart drawer', async ( { page } ) => { - const miniCartButton = await getMiniCartButton( { page } ); + await expect( + page.getByRole( 'button', { name: 'Close' } ) + ).toBeInViewport(); + + await page.mouse.click( 50, 200 ); + + await expect( page.getByRole( 'dialog' ) ).toHaveCount( 0 ); + } ); - await page.click( 'text=Add to cart' ); + test( 'should open the filled cart drawer', async ( { page } ) => { + await page.click( 'text=Add to cart' ); - await miniCartButton.click(); + await page.getByLabel( 'items in cart,' ).click(); - await expect( - page.locator( '.wc-block-mini-cart__title' ).first() - ).toHaveText( 'Your cart (1 item)' ); - } ); + await expect( + page.locator( '.wc-block-mini-cart__title' ).first() + ).toHaveText( 'Your cart (1 item)' ); } ); } ); From 8bf050e8dde2af4ffd3f2bb19a6ca998af7d42d2 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 23 Aug 2023 20:34:56 +0700 Subject: [PATCH 3/8] use toContainText --- tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index 37afaebf72f..cd60b61f4fe 100644 --- a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -22,7 +22,7 @@ test.describe( `Mini Cart Block`, () => { test( 'should open the empty cart drawer', async ( { page } ) => { await page.getByLabel( 'items in cart,' ).click(); - await expect( page.getByRole( 'dialog' ) ).toHaveText( + await expect( page.getByRole( 'dialog' ) ).toContainText( 'Your cart is currently empty!' ); } ); @@ -32,7 +32,7 @@ test.describe( `Mini Cart Block`, () => { } ) => { await page.getByLabel( 'items in cart,' ).click(); - await expect( page.getByRole( 'dialog' ) ).toHaveText( + await expect( page.getByRole( 'dialog' ) ).toContainText( 'Your cart is currently empty!' ); @@ -46,7 +46,7 @@ test.describe( `Mini Cart Block`, () => { } ) => { await page.getByLabel( 'items in cart,' ).click(); - await expect( page.getByRole( 'dialog' ) ).toHaveText( + await expect( page.getByRole( 'dialog' ) ).toContainText( 'Your cart is currently empty!' ); @@ -66,6 +66,6 @@ test.describe( `Mini Cart Block`, () => { await expect( page.locator( '.wc-block-mini-cart__title' ).first() - ).toHaveText( 'Your cart (1 item)' ); + ).toContainText( 'Your cart (1 item)' ); } ); } ); From a08abe69f00a7fdc6f651055adc3a12b5ed180a0 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 23 Aug 2023 21:01:52 +0700 Subject: [PATCH 4/8] hover on the mini cart button first to prevent race condition --- tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index cd60b61f4fe..e349f8e1997 100644 --- a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -20,6 +20,7 @@ test.describe( `Mini Cart Block`, () => { } ); test( 'should open the empty cart drawer', async ( { page } ) => { + await page.getByLabel( 'items in cart,' ).hover(); await page.getByLabel( 'items in cart,' ).click(); await expect( page.getByRole( 'dialog' ) ).toContainText( @@ -30,6 +31,7 @@ test.describe( `Mini Cart Block`, () => { test( 'should close the drawer when clicking on the close button', async ( { page, } ) => { + await page.getByLabel( 'items in cart,' ).hover(); await page.getByLabel( 'items in cart,' ).click(); await expect( page.getByRole( 'dialog' ) ).toContainText( @@ -44,6 +46,7 @@ test.describe( `Mini Cart Block`, () => { test( 'should close the drawer when clicking outside the drawer', async ( { page, } ) => { + await page.getByLabel( 'items in cart,' ).hover(); await page.getByLabel( 'items in cart,' ).click(); await expect( page.getByRole( 'dialog' ) ).toContainText( @@ -62,6 +65,7 @@ test.describe( `Mini Cart Block`, () => { test( 'should open the filled cart drawer', async ( { page } ) => { await page.click( 'text=Add to cart' ); + await page.getByLabel( 'items in cart,' ).hover(); await page.getByLabel( 'items in cart,' ).click(); await expect( From a2164b9ee6492de7f340c1abf285ce2ffb91fb7f Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 23 Aug 2023 21:44:32 +0700 Subject: [PATCH 5/8] extract as a utility --- .../mini-cart/mini-cart.block_theme.spec.ts | 12 ++---------- tests/e2e/utils/index.ts | 1 + tests/e2e/utils/use-incognito.ts | 17 +++++++++++++++++ 3 files changed, 20 insertions(+), 10 deletions(-) create mode 100644 tests/e2e/utils/use-incognito.ts diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index e349f8e1997..5a7097fc8e4 100644 --- a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -2,18 +2,10 @@ * External dependencies */ import { test, expect } from '@woocommerce/e2e-playwright-utils'; - -const getFreshSession = () => { - return { - cookies: [], - origins: [], - }; -}; +import { useIncognito } from '@woocommerce/e2e-utils'; test.describe( `Mini Cart Block`, () => { - test.use( { - storageState: getFreshSession(), - } ); + useIncognito( test ); test.beforeEach( async ( { page } ) => { await page.goto( `/mini-cart-block`, { waitUntil: 'commit' } ); diff --git a/tests/e2e/utils/index.ts b/tests/e2e/utils/index.ts index 2183b2aab57..816fc5d4dfc 100644 --- a/tests/e2e/utils/index.ts +++ b/tests/e2e/utils/index.ts @@ -5,3 +5,4 @@ export * from './cli'; export * from './api'; export * from './editor'; export * from './storeApi'; +export * from './use-incognito'; diff --git a/tests/e2e/utils/use-incognito.ts b/tests/e2e/utils/use-incognito.ts new file mode 100644 index 00000000000..647346b99d7 --- /dev/null +++ b/tests/e2e/utils/use-incognito.ts @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { test as Test } from '@wordpress/e2e-test-utils-playwright'; + +const getFreshSession = () => { + return { + cookies: [], + origins: [], + }; +}; + +export const useIncognito = ( test: typeof Test ) => { + test.use( { + storageState: getFreshSession(), + } ); +}; From 9e873243e4fcc8aa96d399970e87b6936db71915 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 23 Aug 2023 22:10:11 +0700 Subject: [PATCH 6/8] DRY --- .../mini-cart/mini-cart.block_theme.spec.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index 5a7097fc8e4..a0a451b0419 100644 --- a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -3,6 +3,12 @@ */ import { test, expect } from '@woocommerce/e2e-playwright-utils'; import { useIncognito } from '@woocommerce/e2e-utils'; +import { Page } from '@playwright/test'; + +const openMiniCart = async ( page: Page ) => { + await page.getByLabel( 'items in cart,' ).hover(); + await page.getByLabel( 'items in cart,' ).click(); +}; test.describe( `Mini Cart Block`, () => { useIncognito( test ); @@ -12,8 +18,7 @@ test.describe( `Mini Cart Block`, () => { } ); test( 'should open the empty cart drawer', async ( { page } ) => { - await page.getByLabel( 'items in cart,' ).hover(); - await page.getByLabel( 'items in cart,' ).click(); + await openMiniCart( page ); await expect( page.getByRole( 'dialog' ) ).toContainText( 'Your cart is currently empty!' @@ -23,8 +28,7 @@ test.describe( `Mini Cart Block`, () => { test( 'should close the drawer when clicking on the close button', async ( { page, } ) => { - await page.getByLabel( 'items in cart,' ).hover(); - await page.getByLabel( 'items in cart,' ).click(); + await openMiniCart( page ); await expect( page.getByRole( 'dialog' ) ).toContainText( 'Your cart is currently empty!' @@ -38,8 +42,7 @@ test.describe( `Mini Cart Block`, () => { test( 'should close the drawer when clicking outside the drawer', async ( { page, } ) => { - await page.getByLabel( 'items in cart,' ).hover(); - await page.getByLabel( 'items in cart,' ).click(); + await openMiniCart( page ); await expect( page.getByRole( 'dialog' ) ).toContainText( 'Your cart is currently empty!' @@ -57,8 +60,7 @@ test.describe( `Mini Cart Block`, () => { test( 'should open the filled cart drawer', async ( { page } ) => { await page.click( 'text=Add to cart' ); - await page.getByLabel( 'items in cart,' ).hover(); - await page.getByLabel( 'items in cart,' ).click(); + await openMiniCart( page ); await expect( page.locator( '.wc-block-mini-cart__title' ).first() From 5653e69adfcdd67e7265a18112f5536a71e3a11c Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 24 Aug 2023 12:34:04 +0700 Subject: [PATCH 7/8] remove remaining css selectors --- tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index a0a451b0419..9069799444f 100644 --- a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -62,8 +62,8 @@ test.describe( `Mini Cart Block`, () => { await openMiniCart( page ); - await expect( - page.locator( '.wc-block-mini-cart__title' ).first() - ).toContainText( 'Your cart (1 item)' ); + await expect( page.getByRole( 'dialog' ) ).toContainText( + 'Your cart (1 item)' + ); } ); } ); From 53f2b3a0c86b6c11cd2a864594199570dd53da74 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Thu, 24 Aug 2023 17:05:24 +0700 Subject: [PATCH 8/8] remove the unneccessary util --- .../mini-cart/mini-cart.block_theme.spec.ts | 14 ++++++++++++-- tests/e2e/utils/index.ts | 1 - tests/e2e/utils/use-incognito.ts | 17 ----------------- 3 files changed, 12 insertions(+), 20 deletions(-) delete mode 100644 tests/e2e/utils/use-incognito.ts diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index 9069799444f..a321d00cb9f 100644 --- a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -2,7 +2,6 @@ * External dependencies */ import { test, expect } from '@woocommerce/e2e-playwright-utils'; -import { useIncognito } from '@woocommerce/e2e-utils'; import { Page } from '@playwright/test'; const openMiniCart = async ( page: Page ) => { @@ -11,7 +10,18 @@ const openMiniCart = async ( page: Page ) => { }; test.describe( `Mini Cart Block`, () => { - useIncognito( test ); + /** + * This is a workaround to run tests in isolation. + * Ideally, the test should be run in isolation by default. But we're + * overriding the storageState in config which make all tests run with admin + * user. + */ + test.use( { + storageState: { + origins: [], + cookies: [], + }, + } ); test.beforeEach( async ( { page } ) => { await page.goto( `/mini-cart-block`, { waitUntil: 'commit' } ); diff --git a/tests/e2e/utils/index.ts b/tests/e2e/utils/index.ts index 816fc5d4dfc..2183b2aab57 100644 --- a/tests/e2e/utils/index.ts +++ b/tests/e2e/utils/index.ts @@ -5,4 +5,3 @@ export * from './cli'; export * from './api'; export * from './editor'; export * from './storeApi'; -export * from './use-incognito'; diff --git a/tests/e2e/utils/use-incognito.ts b/tests/e2e/utils/use-incognito.ts deleted file mode 100644 index 647346b99d7..00000000000 --- a/tests/e2e/utils/use-incognito.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * External dependencies - */ -import { test as Test } from '@wordpress/e2e-test-utils-playwright'; - -const getFreshSession = () => { - return { - cookies: [], - origins: [], - }; -}; - -export const useIncognito = ( test: typeof Test ) => { - test.use( { - storageState: getFreshSession(), - } ); -};