From fff28c9a0ba20a6ca1f398ce191e4777b3788c43 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Wed, 27 Dec 2023 15:31:33 -0300 Subject: [PATCH 01/37] Add test skeleton --- ...t-admin-multi-currency-on-boarding.spec.js | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js new file mode 100644 index 00000000000..05adcf7812e --- /dev/null +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -0,0 +1,76 @@ +/** + * External dependencies + */ +const { merchant } = require( '@woocommerce/e2e-utils' ); +/** + * Internal dependencies + */ +import { merchantWCP, shopperWCP } from '../../../utils'; + +let wasMulticurrencyEnabled; + +describe( 'Merchant On-boarding', () => { + beforeAll( async () => { + await merchant.login(); + // Get initial multi-currency feature status. + await merchantWCP.openWCPSettings(); + await page.waitForSelector( "[data-testid='multi-currency-toggle']" ); + wasMulticurrencyEnabled = await page.evaluate( () => { + const checkbox = document.querySelector( + "[data-testid='multi-currency-toggle']" + ); + return checkbox ? checkbox.checked : false; + } ); + } ); + + afterAll( async () => { + // Disable multi-currency if it was not initially enabled. + if ( ! wasMulticurrencyEnabled ) { + await merchant.login(); + await merchantWCP.deactivateMulticurrency(); + } + await merchant.logout(); + } ); + + describe( 'Currency Selection and Management', () => { + it( 'Should disable the submit button when no currencies are selected', async () => { + // Implement test + } ); + + it( 'Should allow multiple currencies to be selectable', async () => { + // Implement test + } ); + + it( 'Should exclude already enabled currencies from the currency screen', async () => { + // Implement test + } ); + + it( 'Should display some suggested currencies at the beginning of the list', async () => { + // Implement test + } ); + + it( 'Should ensure selected currencies are enabled after submitting the form', async () => { + // Implement test + } ); + } ); + + describe.skip( 'Geolocation Features', () => { + it( 'Should offer currency switch by geolocation', async () => { + // Implement test + } ); + + it( 'Should preview currency switch by geolocation correctly with USD and GBP', async () => { + // Implement test + } ); + } ); + + describe.skip( 'Currency Switcher Widget', () => { + it( 'Should offer the currency switcher widget while Storefront theme is active', async () => { + // Implement test + } ); + + it( 'Should not offer the currency switcher widget when an unsupported theme is active', async () => { + // Implement test + } ); + } ); +} ); From 11e56acd971c1610ba72862b2f108c71424bf463 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 29 Dec 2023 14:55:57 -0300 Subject: [PATCH 02/37] Add flow to disable all enabled currencies --- tests/e2e/utils/flows.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/tests/e2e/utils/flows.js b/tests/e2e/utils/flows.js index 4eeededd5fb..3a4ebfc50b9 100644 --- a/tests/e2e/utils/flows.js +++ b/tests/e2e/utils/flows.js @@ -691,6 +691,32 @@ export const merchantWCP = { return wasInitiallyEnabled; }, + disableAllEnabledCurrencies: async () => { + await page.goto( WCPAY_MULTI_CURRENCY, { waitUntil: 'networkidle0' } ); + + await page.waitForSelector( '.enabled-currencies-list', { + visible: true, + timeout: 5000, + } ); + + // Select all delete buttons for enabled currencies. + const deleteButtons = await page.$$( + '.enabled-currency .enabled-currency__action.delete' + ); + + // Loop through each delete button and click it. + for ( const button of deleteButtons ) { + await button.click(); + + await page.waitForSelector( '.components-snackbar', { + text: 'Enabled currencies updated.', + timeout: 15000, + } ); + + await page.waitFor( 1000 ); + } + }, + editCurrency: async ( currencyCode ) => { await merchantWCP.openMultiCurrency(); From bd27c8259def8d0d4406d291925cd5812a8db72d Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 29 Dec 2023 14:56:34 -0300 Subject: [PATCH 03/37] Add test id for currency checkboxes --- .../tasks/add-currencies-task/index.js | 9 +++++++-- .../enabled-currencies-list/modal-checkbox.js | 3 ++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/multi-currency-setup/tasks/add-currencies-task/index.js b/client/multi-currency-setup/tasks/add-currencies-task/index.js index 335b6b78985..1795edaa6a0 100644 --- a/client/multi-currency-setup/tasks/add-currencies-task/index.js +++ b/client/multi-currency-setup/tasks/add-currencies-task/index.js @@ -173,13 +173,14 @@ const AddCurrenciesTask = () => { ); } ); - const displayCurrencyCheckbox = ( code ) => + const displayCurrencyCheckbox = ( code, testId = '' ) => availableCurrencyCodes.length && ( ); @@ -284,7 +285,11 @@ const AddCurrenciesTask = () => { { visibleRecommendedCurrencyCodes.map( - displayCurrencyCheckbox + ( code ) => + displayCurrencyCheckbox( + code, + 'recommended-currency' + ) ) }
  • { const handleChange = useCallback( ( enabled ) => { @@ -20,7 +21,7 @@ const EnabledCurrenciesModalCheckbox = ( { ); return ( -
  • +
  • Date: Fri, 29 Dec 2023 14:57:38 -0300 Subject: [PATCH 04/37] Add test case for submit button disabled --- ...t-admin-multi-currency-on-boarding.spec.js | 55 ++++++++++++++++--- 1 file changed, 48 insertions(+), 7 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 05adcf7812e..26847205039 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -1,11 +1,11 @@ /** * External dependencies */ -const { merchant } = require( '@woocommerce/e2e-utils' ); +const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); /** * Internal dependencies */ -import { merchantWCP, shopperWCP } from '../../../utils'; +import { merchantWCP, uiLoaded } from '../../../utils'; let wasMulticurrencyEnabled; @@ -33,23 +33,64 @@ describe( 'Merchant On-boarding', () => { } ); describe( 'Currency Selection and Management', () => { + beforeAll( async () => { + await merchantWCP.disableAllEnabledCurrencies(); + } ); + + beforeEach( async () => { + await page.goto( + `${ WP_ADMIN_DASHBOARD }admin.php?page=wc-admin&path=%2Fpayments%2Fmulti-currency-setup`, + { + waitUntil: 'networkidle0', + } + ); + await uiLoaded(); + } ); + it( 'Should disable the submit button when no currencies are selected', async () => { - // Implement test + const checkboxes = await page.$$( + '.enabled-currency-checkbox .components-checkbox-control__input' + ); + + for ( const checkbox of checkboxes ) { + const isChecked = await ( + await checkbox.getProperty( 'checked' ) + ).jsonValue(); + if ( isChecked ) { + // Click the checkbox to uncheck it if it's checked + await checkbox.click(); + } + } + + await page.waitFor( 1000 ); + + const button = await page.$( + '.add-currencies-task.is-active .task-collapsible-body.is-active > button.is-primary' + ); + + expect( button ).not.toBeNull(); + + const isDisabled = await page.evaluate( + ( btn ) => btn.disabled, + button + ); + + expect( isDisabled ).toBeTruthy(); } ); - it( 'Should allow multiple currencies to be selectable', async () => { + it.skip( 'Should allow multiple currencies to be selectable', async () => { // Implement test } ); - it( 'Should exclude already enabled currencies from the currency screen', async () => { + it.skip( 'Should exclude already enabled currencies from the currency screen', async () => { // Implement test } ); - it( 'Should display some suggested currencies at the beginning of the list', async () => { + it.skip( 'Should display some suggested currencies at the beginning of the list', async () => { // Implement test } ); - it( 'Should ensure selected currencies are enabled after submitting the form', async () => { + it.skip( 'Should ensure selected currencies are enabled after submitting the form', async () => { // Implement test } ); } ); From d548ebcc883f2676cd14bff2542601a5f8c2f789 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Wed, 3 Jan 2024 12:52:54 -0300 Subject: [PATCH 05/37] Improve add and remove currency flows --- tests/e2e/utils/flows.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/tests/e2e/utils/flows.js b/tests/e2e/utils/flows.js index 3a4ebfc50b9..4aad18ac56d 100644 --- a/tests/e2e/utils/flows.js +++ b/tests/e2e/utils/flows.js @@ -447,9 +447,13 @@ export const merchantWCP = { }, openMultiCurrency: async () => { - await page.goto( WCPAY_MULTI_CURRENCY, { - waitUntil: 'networkidle0', - } ); + const currentUrl = await page.url(); + + if ( currentUrl !== WCPAY_MULTI_CURRENCY ) { + await page.goto( WCPAY_MULTI_CURRENCY, { + waitUntil: 'networkidle0', + } ); + } await uiLoaded(); }, @@ -472,6 +476,11 @@ export const merchantWCP = { } }, currencyCode ); + await page.waitForSelector( + 'div.wcpay-confirmation-modal__footer button.components-button.is-primary', + { timeout: 3000 } + ); + await page.click( 'div.wcpay-confirmation-modal__footer button.components-button.is-primary', { text: 'Update selected' } @@ -491,6 +500,7 @@ export const merchantWCP = { }, removeCurrency: async ( currencyCode ) => { + await merchantWCP.openMultiCurrency(); const currencyItemSelector = `li.enabled-currency.${ currencyCode.toLowerCase() }`; await page.waitForSelector( currencyItemSelector, { timeout: 10000 } ); await page.click( From e7305d8d5f79ed1ad469e0ebff53d2e052882c10 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Wed, 3 Jan 2024 12:56:47 -0300 Subject: [PATCH 06/37] Add onboarding page navigation and implement currency selection tests --- ...t-admin-multi-currency-on-boarding.spec.js | 66 +++++++++++++++---- 1 file changed, 55 insertions(+), 11 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 26847205039..f3dc2dc069f 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -9,6 +9,16 @@ import { merchantWCP, uiLoaded } from '../../../utils'; let wasMulticurrencyEnabled; +const goToOnboardingPage = async () => { + await page.goto( + `${ WP_ADMIN_DASHBOARD }admin.php?page=wc-admin&path=%2Fpayments%2Fmulti-currency-setup`, + { + waitUntil: 'networkidle0', + } + ); + await uiLoaded(); +}; + describe( 'Merchant On-boarding', () => { beforeAll( async () => { await merchant.login(); @@ -38,13 +48,7 @@ describe( 'Merchant On-boarding', () => { } ); beforeEach( async () => { - await page.goto( - `${ WP_ADMIN_DASHBOARD }admin.php?page=wc-admin&path=%2Fpayments%2Fmulti-currency-setup`, - { - waitUntil: 'networkidle0', - } - ); - await uiLoaded(); + await goToOnboardingPage(); } ); it( 'Should disable the submit button when no currencies are selected', async () => { @@ -78,12 +82,52 @@ describe( 'Merchant On-boarding', () => { expect( isDisabled ).toBeTruthy(); } ); - it.skip( 'Should allow multiple currencies to be selectable', async () => { - // Implement test + it( 'Should allow multiple currencies to be selectable', async () => { + const listItemSelector = + 'li.enabled-currency-checkbox:not([data-testid="recommended-currency"])'; + const checkboxSelector = 'input[type="checkbox"]'; + + await page.waitForSelector( listItemSelector, { + timeout: 3000, + } ); + + // Ensure the checkbox within the list item is present and not disabled. + const checkbox = await page.$( + `${ listItemSelector } ${ checkboxSelector }` + ); + expect( checkbox ).not.toBeNull(); + const isDisabled = await ( + await checkbox.getProperty( 'disabled' ) + ).jsonValue(); + expect( isDisabled ).toBe( false ); + + // Click the checkbox to select the currency and verify it's checked. + await checkbox.click(); + + const isChecked = await ( + await checkbox.getProperty( 'checked' ) + ).jsonValue(); + expect( isChecked ).toBe( true ); } ); - it.skip( 'Should exclude already enabled currencies from the currency screen', async () => { - // Implement test + it( 'Should exclude already enabled currencies from the currency screen', async () => { + await merchantWCP.addCurrency( 'GBP' ); + + await goToOnboardingPage(); + const currencySelector = 'li.enabled-currency-checkbox'; + + await page.waitForSelector( currencySelector, { + timeout: 3000, + } ); + + // Get the list of currencies as text + const currencies = await page.$$eval( currencySelector, ( items ) => + items.map( ( item ) => item.textContent.trim() ) + ); + + expect( currencies ).not.toContain( 'GBP' ); + + await merchantWCP.removeCurrency( 'GBP' ); } ); it.skip( 'Should display some suggested currencies at the beginning of the list', async () => { From d51ffd0a3169c9209f77289612bd80e978883f6d Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Mon, 8 Jan 2024 15:30:02 -0300 Subject: [PATCH 07/37] Add recommended and enabled currencies tests --- ...t-admin-multi-currency-on-boarding.spec.js | 66 +++++++++++++++++-- 1 file changed, 60 insertions(+), 6 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index f3dc2dc069f..879369e3305 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -51,7 +51,7 @@ describe( 'Merchant On-boarding', () => { await goToOnboardingPage(); } ); - it( 'Should disable the submit button when no currencies are selected', async () => { + it.skip( 'Should disable the submit button when no currencies are selected', async () => { const checkboxes = await page.$$( '.enabled-currency-checkbox .components-checkbox-control__input' ); @@ -82,7 +82,7 @@ describe( 'Merchant On-boarding', () => { expect( isDisabled ).toBeTruthy(); } ); - it( 'Should allow multiple currencies to be selectable', async () => { + it.skip( 'Should allow multiple currencies to be selectable', async () => { const listItemSelector = 'li.enabled-currency-checkbox:not([data-testid="recommended-currency"])'; const checkboxSelector = 'input[type="checkbox"]'; @@ -110,7 +110,7 @@ describe( 'Merchant On-boarding', () => { expect( isChecked ).toBe( true ); } ); - it( 'Should exclude already enabled currencies from the currency screen', async () => { + it.skip( 'Should exclude already enabled currencies from the currency screen', async () => { await merchantWCP.addCurrency( 'GBP' ); await goToOnboardingPage(); @@ -131,11 +131,65 @@ describe( 'Merchant On-boarding', () => { } ); it.skip( 'Should display some suggested currencies at the beginning of the list', async () => { - // Implement test + const recommendedCurrencySelector = + 'li[data-testid="recommended-currency"]'; + + await page.waitForSelector( recommendedCurrencySelector, { + timeout: 3000, + } ); + + // Get the list of recommended currencies + const recommendedCurrencies = await page.$$eval( + recommendedCurrencySelector, + ( items ) => + items.map( ( item ) => ( { + code: item + .querySelector( 'input' ) + .getAttribute( 'code' ), + name: item + .querySelector( + 'span.enabled-currency-checkbox__code' + ) + .textContent.trim(), + } ) ) + ); + + expect( recommendedCurrencies.length ).toBeGreaterThan( 0 ); } ); - it.skip( 'Should ensure selected currencies are enabled after submitting the form', async () => { - // Implement test + it( 'Should ensure selected currencies are enabled after submitting the form', async () => { + const testCurrencies = [ 'GBP', 'EUR', 'CAD', 'AUD' ]; + const addCurrenciesContentSelector = + '.add-currencies-task__content'; + const currencyCheckboxSelector = `${ addCurrenciesContentSelector } li input[type="checkbox"]`; + + await page.waitForSelector( addCurrenciesContentSelector, { + timeout: 3000, + } ); + + // Select the currencies + for ( const currency of testCurrencies ) { + await page.click( + `${ currencyCheckboxSelector }[code="${ currency }"]` + ); + } + + // Submit the form. + const submitButton = await page.$( + '.add-currencies-task.is-active .task-collapsible-body.is-active > button.is-primary' + ); + await submitButton.click(); + + await merchantWCP.openMultiCurrency(); + + // Ensure the currencies are enabled. + for ( const currency of testCurrencies ) { + const selector = `li.enabled-currency.${ currency.toLowerCase() }`; + await page.waitForSelector( selector ); + const element = await page.$( selector ); + + expect( element ).not.toBeNull(); + } } ); } ); From cb020bd6c9f53fb8cc19bc11aa2fc3f449c6003f Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Tue, 9 Jan 2024 12:41:38 -0300 Subject: [PATCH 08/37] Add test 'Should offer currency switch by geolocation' --- ...t-admin-multi-currency-on-boarding.spec.js | 41 +++++++++++++++++-- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 879369e3305..ce9dce40dae 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -19,6 +19,13 @@ const goToOnboardingPage = async () => { await uiLoaded(); }; +const goToNextOnboardingStep = async () => { + const continueBtnSelector = + '.add-currencies-task.is-active .task-collapsible-body.is-active > button.is-primary'; + + await page.click( continueBtnSelector ); +}; + describe( 'Merchant On-boarding', () => { beforeAll( async () => { await merchant.login(); @@ -42,7 +49,7 @@ describe( 'Merchant On-boarding', () => { await merchant.logout(); } ); - describe( 'Currency Selection and Management', () => { + describe.skip( 'Currency Selection and Management', () => { beforeAll( async () => { await merchantWCP.disableAllEnabledCurrencies(); } ); @@ -193,9 +200,37 @@ describe( 'Merchant On-boarding', () => { } ); } ); - describe.skip( 'Geolocation Features', () => { + describe( 'Geolocation Features', () => { + beforeAll( async () => { + await merchantWCP.disableAllEnabledCurrencies(); + } ); + + beforeEach( async () => { + await goToOnboardingPage(); + } ); + it( 'Should offer currency switch by geolocation', async () => { - // Implement test + await goToNextOnboardingStep(); + + const geoCurrencySwitchCheckboxSelector = + 'input[data-testid="enable_auto_currency"]'; + const checkbox = await page.$( geoCurrencySwitchCheckboxSelector ); + + // Check if exists and not disabled. + expect( checkbox ).not.toBeNull(); + const isDisabled = await ( + await checkbox.getProperty( 'disabled' ) + ).jsonValue(); + expect( isDisabled ).toBe( false ); + + // Click the checkbox to select it. + await checkbox.click(); + + // Check if the checkbox is selected. + const isChecked = await ( + await checkbox.getProperty( 'checked' ) + ).jsonValue(); + expect( isChecked ).toBe( true ); } ); it( 'Should preview currency switch by geolocation correctly with USD and GBP', async () => { From 9c8fde3bd12364aac9a467267084a4354ae21daf Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Tue, 9 Jan 2024 15:25:24 -0300 Subject: [PATCH 09/37] Add test 'Should preview currency switch correctly' --- ...t-admin-multi-currency-on-boarding.spec.js | 61 ++++++++++++++++--- 1 file changed, 54 insertions(+), 7 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index ce9dce40dae..eaf611d07aa 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -49,7 +49,7 @@ describe( 'Merchant On-boarding', () => { await merchant.logout(); } ); - describe.skip( 'Currency Selection and Management', () => { + describe( 'Currency Selection and Management', () => { beforeAll( async () => { await merchantWCP.disableAllEnabledCurrencies(); } ); @@ -58,7 +58,7 @@ describe( 'Merchant On-boarding', () => { await goToOnboardingPage(); } ); - it.skip( 'Should disable the submit button when no currencies are selected', async () => { + it( 'Should disable the submit button when no currencies are selected', async () => { const checkboxes = await page.$$( '.enabled-currency-checkbox .components-checkbox-control__input' ); @@ -89,7 +89,7 @@ describe( 'Merchant On-boarding', () => { expect( isDisabled ).toBeTruthy(); } ); - it.skip( 'Should allow multiple currencies to be selectable', async () => { + it( 'Should allow multiple currencies to be selectable', async () => { const listItemSelector = 'li.enabled-currency-checkbox:not([data-testid="recommended-currency"])'; const checkboxSelector = 'input[type="checkbox"]'; @@ -117,7 +117,7 @@ describe( 'Merchant On-boarding', () => { expect( isChecked ).toBe( true ); } ); - it.skip( 'Should exclude already enabled currencies from the currency screen', async () => { + it( 'Should exclude already enabled currencies from the currency screen', async () => { await merchantWCP.addCurrency( 'GBP' ); await goToOnboardingPage(); @@ -137,7 +137,7 @@ describe( 'Merchant On-boarding', () => { await merchantWCP.removeCurrency( 'GBP' ); } ); - it.skip( 'Should display some suggested currencies at the beginning of the list', async () => { + it( 'Should display some suggested currencies at the beginning of the list', async () => { const recommendedCurrencySelector = 'li[data-testid="recommended-currency"]'; @@ -224,7 +224,7 @@ describe( 'Merchant On-boarding', () => { expect( isDisabled ).toBe( false ); // Click the checkbox to select it. - await checkbox.click(); + await page.click( geoCurrencySwitchCheckboxSelector ); // Check if the checkbox is selected. const isChecked = await ( @@ -234,7 +234,54 @@ describe( 'Merchant On-boarding', () => { } ); it( 'Should preview currency switch by geolocation correctly with USD and GBP', async () => { - // Implement test + await goToNextOnboardingStep(); + + const geoCurrencySwitchCheckboxSelector = + 'input[data-testid="enable_auto_currency"]'; + const previewBtnSelector = '.multi-currency-setup-preview-button'; + const previewModalSelector = + '.multi-currency-store-settings-preview-modal'; + const iframeSelector = + '.multi-currency-store-settings-preview-iframe'; + + // Enable feature. + await page.click( geoCurrencySwitchCheckboxSelector ); + + // Click preview button. + await page.click( previewBtnSelector ); + + await page.waitForSelector( previewModalSelector, { + timeout: 3000, + } ); + + await page.waitForSelector( iframeSelector, { + timeout: 3000, + } ); + const iframeElement = await page.$( iframeSelector ); + const iframe = await iframeElement.contentFrame(); + + // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol + const currencySymbols = await iframe.$$eval( + '.woocommerce-Price-currencySymbol', + ( elements ) => + elements.map( ( element ) => element.textContent ) + ); + currencySymbols.forEach( ( symbol ) => { + expect( symbol ).toBe( '£' ); + } ); + + await iframe.waitForSelector( '.woocommerce-store-notice', { + timeout: 3000, + } ); + + const noticeText = await iframe.$eval( + '.woocommerce-store-notice', + ( element ) => element.innerText + ); + expect( noticeText ).toContain( + // eslint-disable-next-line max-len + "We noticed you're visiting from United Kingdom (UK). We've updated our prices to Pound sterling for your shopping convenience." + ); } ); } ); From 8ad7fe906327b00847bdac3336b486448e0534cd Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Tue, 9 Jan 2024 16:05:58 -0300 Subject: [PATCH 10/37] Add helper to perform theme activation --- ...t-admin-multi-currency-on-boarding.spec.js | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index eaf611d07aa..1a635c06737 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -9,6 +9,27 @@ import { merchantWCP, uiLoaded } from '../../../utils'; let wasMulticurrencyEnabled; +const goToThemesPage = async () => { + await page.goto( `${ WP_ADMIN_DASHBOARD }themes.php`, { + waitUntil: 'networkidle0', + } ); +}; + +const activateTheme = async ( themeSlug ) => { + await goToThemesPage(); + + const selector = `.theme[data-slug="${ themeSlug }"] .button.activate`; + const themeExists = await page.$( selector ); + if ( themeExists ) { + await page.click( selector ); + } else { + throw new Error( `Theme with slug '${ themeSlug }' not found.` ); + } + + // Wait for the navigation to ensure theme activation is complete. + await page.waitForNavigation( { waitUntil: 'networkidle0' } ); +}; + const goToOnboardingPage = async () => { await page.goto( `${ WP_ADMIN_DASHBOARD }admin.php?page=wc-admin&path=%2Fpayments%2Fmulti-currency-setup`, @@ -49,7 +70,7 @@ describe( 'Merchant On-boarding', () => { await merchant.logout(); } ); - describe( 'Currency Selection and Management', () => { + describe.skip( 'Currency Selection and Management', () => { beforeAll( async () => { await merchantWCP.disableAllEnabledCurrencies(); } ); @@ -200,7 +221,7 @@ describe( 'Merchant On-boarding', () => { } ); } ); - describe( 'Geolocation Features', () => { + describe.skip( 'Geolocation Features', () => { beforeAll( async () => { await merchantWCP.disableAllEnabledCurrencies(); } ); @@ -285,13 +306,19 @@ describe( 'Merchant On-boarding', () => { } ); } ); - describe.skip( 'Currency Switcher Widget', () => { + describe( 'Currency Switcher Widget', () => { it( 'Should offer the currency switcher widget while Storefront theme is active', async () => { - // Implement test + await activateTheme( 'storefront' ); + + await goToOnboardingPage(); + await goToNextOnboardingStep(); } ); it( 'Should not offer the currency switcher widget when an unsupported theme is active', async () => { - // Implement test + await activateTheme( 'twentytwentyfour' ); + + await goToOnboardingPage(); + await goToNextOnboardingStep(); } ); } ); } ); From 079312b2bbbf2ec9e8726eb8de70b72713fcd9b4 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Tue, 9 Jan 2024 16:56:36 -0300 Subject: [PATCH 11/37] add currency switcher checkbox test --- ...t-admin-multi-currency-on-boarding.spec.js | 65 ++++++++++++++++--- 1 file changed, 56 insertions(+), 9 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 1a635c06737..44fd2b72ec2 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -18,16 +18,20 @@ const goToThemesPage = async () => { const activateTheme = async ( themeSlug ) => { await goToThemesPage(); - const selector = `.theme[data-slug="${ themeSlug }"] .button.activate`; - const themeExists = await page.$( selector ); - if ( themeExists ) { - await page.click( selector ); - } else { - throw new Error( `Theme with slug '${ themeSlug }' not found.` ); + const themeSelector = `.theme[data-slug="${ themeSlug }"]`; + const activateButtonSelector = `${ themeSelector } .button.activate`; + + // Check if the theme is already active. + const isActive = await page.evaluate( ( selector ) => { + const themeElement = document.querySelector( selector ); + return themeElement && themeElement.classList.contains( 'active' ); + }, themeSelector ); + + // Activate the theme if it's not already active. + if ( ! isActive ) { + await page.click( activateButtonSelector ); + await page.waitForNavigation( { waitUntil: 'networkidle0' } ); } - - // Wait for the navigation to ensure theme activation is complete. - await page.waitForNavigation( { waitUntil: 'networkidle0' } ); }; const goToOnboardingPage = async () => { @@ -307,11 +311,48 @@ describe( 'Merchant On-boarding', () => { } ); describe( 'Currency Switcher Widget', () => { + let activeThemeSlug; + + beforeAll( async () => { + await goToThemesPage(); + + // Get current theme slug. + activeThemeSlug = await page.evaluate( () => { + const theme = document.querySelector( '.theme.active-theme' ); + return theme ? theme.getAttribute( 'data-slug' ) : ''; + } ); + } ); + + afterAll( async () => { + // Restore original theme. + await activateTheme( activeThemeSlug ); + } ); + it( 'Should offer the currency switcher widget while Storefront theme is active', async () => { await activateTheme( 'storefront' ); await goToOnboardingPage(); await goToNextOnboardingStep(); + + const storefrontSwitchCheckboxSelector = + 'input[data-testid="enable_storefront_switcher"]'; + const checkbox = await page.$( storefrontSwitchCheckboxSelector ); + + // Check if exists and not disabled. + expect( checkbox ).not.toBeNull(); + const isDisabled = await ( + await checkbox.getProperty( 'disabled' ) + ).jsonValue(); + expect( isDisabled ).toBe( false ); + + // Click the checkbox to select it. + await page.click( storefrontSwitchCheckboxSelector ); + + // Check if the checkbox is selected. + const isChecked = await ( + await checkbox.getProperty( 'checked' ) + ).jsonValue(); + expect( isChecked ).toBe( true ); } ); it( 'Should not offer the currency switcher widget when an unsupported theme is active', async () => { @@ -319,6 +360,12 @@ describe( 'Merchant On-boarding', () => { await goToOnboardingPage(); await goToNextOnboardingStep(); + + const storefrontSwitchCheckboxSelector = + 'input[data-testid="enable_storefront_switcher"]'; + const checkbox = await page.$( storefrontSwitchCheckboxSelector ); + + expect( checkbox ).toBeNull(); } ); } ); } ); From 4db0c6120692977fdbfadb274768a229c52cf951 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Tue, 9 Jan 2024 17:04:11 -0300 Subject: [PATCH 12/37] Remove skip instructions --- .../merchant-admin-multi-currency-on-boarding.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 44fd2b72ec2..395908637f3 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -74,7 +74,7 @@ describe( 'Merchant On-boarding', () => { await merchant.logout(); } ); - describe.skip( 'Currency Selection and Management', () => { + describe( 'Currency Selection and Management', () => { beforeAll( async () => { await merchantWCP.disableAllEnabledCurrencies(); } ); @@ -225,7 +225,7 @@ describe( 'Merchant On-boarding', () => { } ); } ); - describe.skip( 'Geolocation Features', () => { + describe( 'Geolocation Features', () => { beforeAll( async () => { await merchantWCP.disableAllEnabledCurrencies(); } ); From f670e7f9e804be964e30264ffcfd8e84e73a7877 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Wed, 10 Jan 2024 20:55:50 -0300 Subject: [PATCH 13/37] Fix iframe handling in headless browser --- package.json | 2 +- .../config/jest-puppeteer-headless.config.js | 17 +++++ ...t-admin-multi-currency-on-boarding.spec.js | 62 ++++++++++++------- 3 files changed, 59 insertions(+), 22 deletions(-) create mode 100644 tests/e2e/config/jest-puppeteer-headless.config.js diff --git a/package.json b/package.json index 32b6a95a35f..a2931ad6ae1 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "test:e2e-up": "./tests/e2e/env/up.sh", "test:e2e-cleanup": "./tests/e2e/env/cleanup.sh", "test:e2e-reset": "npm run test:e2e-down && npm run test:e2e-cleanup", - "test:e2e": "NODE_CONFIG_DIR='tests/e2e/config' wp-scripts test-e2e --config tests/e2e/config/jest.config.js", + "test:e2e": "NODE_CONFIG_DIR='tests/e2e/config' JEST_PUPPETEER_CONFIG='tests/e2e/config/jest-puppeteer-headless.config.js' wp-scripts test-e2e --config tests/e2e/config/jest.config.js", "test:e2e-dev": "NODE_CONFIG_DIR='tests/e2e/config' JEST_PUPPETEER_CONFIG='tests/e2e/config/jest-puppeteer.config.js' wp-scripts test-e2e --config tests/e2e/config/jest.config.js --puppeteer-interactive", "test:e2e-performance": "NODE_CONFIG_DIR='tests/e2e/config' wp-scripts test-e2e --config tests/e2e/config/jest.performance.config.js", "test:update-snapshots": "npm run test:js -- --updateSnapshot", diff --git a/tests/e2e/config/jest-puppeteer-headless.config.js b/tests/e2e/config/jest-puppeteer-headless.config.js new file mode 100644 index 00000000000..383d00305e6 --- /dev/null +++ b/tests/e2e/config/jest-puppeteer-headless.config.js @@ -0,0 +1,17 @@ +const { jestPuppeteerConfig } = require( '@woocommerce/e2e-environment' ); + +// Add arg to allow accessing the payments iframes in interactive mode ({ headles: false }). +// https://github.com/puppeteer/puppeteer/issues/4960#issuecomment-535729011 +jestPuppeteerConfig.launch.args.push( '--disable-features=site-per-process' ); +jestPuppeteerConfig.launch.args.push( '--disable-web-security' ); +jestPuppeteerConfig.launch.args.push( '--disable-features=IsolateOrigins' ); +jestPuppeteerConfig.launch.args.push( '--disable-site-isolation-trials' ); + +// Set a real User Agent so the "Add block" button isn't disabled in Gutenberg during -dev tests. +// Also keeping the "puppeteer-debug" value coming from @automattic.puppeteer +jestPuppeteerConfig.launch.args.push( + // eslint-disable-next-line max-len + '--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 puppeteer-debug' +); + +module.exports = jestPuppeteerConfig; diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 395908637f3..e6e9e04aaf7 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -5,7 +5,7 @@ const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); /** * Internal dependencies */ -import { merchantWCP, uiLoaded } from '../../../utils'; +import { merchantWCP, takeScreenshot, uiLoaded } from '../../../utils'; let wasMulticurrencyEnabled; @@ -52,6 +52,8 @@ const goToNextOnboardingStep = async () => { }; describe( 'Merchant On-boarding', () => { + let activeThemeSlug; + beforeAll( async () => { await merchant.login(); // Get initial multi-currency feature status. @@ -63,9 +65,20 @@ describe( 'Merchant On-boarding', () => { ); return checkbox ? checkbox.checked : false; } ); + + await goToThemesPage(); + + // Get current theme slug. + activeThemeSlug = await page.evaluate( () => { + const theme = document.querySelector( '.theme.active-theme' ); + return theme ? theme.getAttribute( 'data-slug' ) : ''; + } ); } ); afterAll( async () => { + // Restore original theme. + await activateTheme( activeThemeSlug ); + // Disable multi-currency if it was not initially enabled. if ( ! wasMulticurrencyEnabled ) { await merchant.login(); @@ -112,6 +125,10 @@ describe( 'Merchant On-boarding', () => { ); expect( isDisabled ).toBeTruthy(); + + await takeScreenshot( + 'merchant-admin-multi-currency-on-boarding-disabled-submit-button' + ); } ); it( 'Should allow multiple currencies to be selectable', async () => { @@ -186,6 +203,10 @@ describe( 'Merchant On-boarding', () => { } ) ) ); + await takeScreenshot( + 'merchant-admin-multi-currency-on-boarding-recommended-currencies' + ); + expect( recommendedCurrencies.length ).toBeGreaterThan( 0 ); } ); @@ -201,9 +222,16 @@ describe( 'Merchant On-boarding', () => { // Select the currencies for ( const currency of testCurrencies ) { - await page.click( - `${ currencyCheckboxSelector }[code="${ currency }"]` - ); + const checkboxSelector = `${ currencyCheckboxSelector }[code="${ currency }"]`; + const isChecked = await page.evaluate( ( selector ) => { + const checkbox = document.querySelector( selector ); + return checkbox && checkbox.checked; + }, checkboxSelector ); + + if ( ! isChecked ) { + await page.click( checkboxSelector ); + await page.waitForTimeout( 1000 ); // Use waitForTimeout instead of waitFor + } } // Submit the form. @@ -214,6 +242,10 @@ describe( 'Merchant On-boarding', () => { await merchantWCP.openMultiCurrency(); + await takeScreenshot( + 'merchant-admin-multi-currency-on-boarding-enabled-currencies' + ); + // Ensure the currencies are enabled. for ( const currency of testCurrencies ) { const selector = `li.enabled-currency.${ currency.toLowerCase() }`; @@ -282,9 +314,14 @@ describe( 'Merchant On-boarding', () => { await page.waitForSelector( iframeSelector, { timeout: 3000, } ); + const iframeElement = await page.$( iframeSelector ); const iframe = await iframeElement.contentFrame(); + await iframe.waitForSelector( '.woocommerce-Price-currencySymbol', { + timeout: 5000, + } ); + // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol const currencySymbols = await iframe.$$eval( '.woocommerce-Price-currencySymbol', @@ -311,23 +348,6 @@ describe( 'Merchant On-boarding', () => { } ); describe( 'Currency Switcher Widget', () => { - let activeThemeSlug; - - beforeAll( async () => { - await goToThemesPage(); - - // Get current theme slug. - activeThemeSlug = await page.evaluate( () => { - const theme = document.querySelector( '.theme.active-theme' ); - return theme ? theme.getAttribute( 'data-slug' ) : ''; - } ); - } ); - - afterAll( async () => { - // Restore original theme. - await activateTheme( activeThemeSlug ); - } ); - it( 'Should offer the currency switcher widget while Storefront theme is active', async () => { await activateTheme( 'storefront' ); From 390e6e7b7ba27d5f1adb0fd76c1d53c059ed4aba Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Wed, 10 Jan 2024 20:57:27 -0300 Subject: [PATCH 14/37] remove wait instruction that is not needed --- .../merchant/merchant-admin-multi-currency-on-boarding.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index e6e9e04aaf7..ecb07011450 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -230,7 +230,6 @@ describe( 'Merchant On-boarding', () => { if ( ! isChecked ) { await page.click( checkboxSelector ); - await page.waitForTimeout( 1000 ); // Use waitForTimeout instead of waitFor } } From cf784768d9fa104e14eb84650f6aa30c3b241296 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 10:31:30 -0300 Subject: [PATCH 15/37] Add changelog --- changelog/e2e-7347-merchant-on-boarding | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/e2e-7347-merchant-on-boarding diff --git a/changelog/e2e-7347-merchant-on-boarding b/changelog/e2e-7347-merchant-on-boarding new file mode 100644 index 00000000000..e1de02a0b10 --- /dev/null +++ b/changelog/e2e-7347-merchant-on-boarding @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +E2E test - Merchant facing multi-currency on-boarding screen. From 9fe54896d7628fd786d0655df9ec77eeb9247cf8 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 11:26:01 -0300 Subject: [PATCH 16/37] Add helper to set checkbox state --- ...t-admin-multi-currency-on-boarding.spec.js | 35 +++++++------------ tests/e2e/utils/helpers.js | 18 ++++++++++ 2 files changed, 31 insertions(+), 22 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index ecb07011450..cbe49a1eefb 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -5,7 +5,12 @@ const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); /** * Internal dependencies */ -import { merchantWCP, takeScreenshot, uiLoaded } from '../../../utils'; +import { + merchantWCP, + setCheckboxState, + takeScreenshot, + uiLoaded, +} from '../../../utils'; let wasMulticurrencyEnabled; @@ -97,20 +102,11 @@ describe( 'Merchant On-boarding', () => { } ); it( 'Should disable the submit button when no currencies are selected', async () => { - const checkboxes = await page.$$( - '.enabled-currency-checkbox .components-checkbox-control__input' + await setCheckboxState( + '.enabled-currency-checkbox .components-checkbox-control__input', + false ); - for ( const checkbox of checkboxes ) { - const isChecked = await ( - await checkbox.getProperty( 'checked' ) - ).jsonValue(); - if ( isChecked ) { - // Click the checkbox to uncheck it if it's checked - await checkbox.click(); - } - } - await page.waitFor( 1000 ); const button = await page.$( @@ -222,15 +218,10 @@ describe( 'Merchant On-boarding', () => { // Select the currencies for ( const currency of testCurrencies ) { - const checkboxSelector = `${ currencyCheckboxSelector }[code="${ currency }"]`; - const isChecked = await page.evaluate( ( selector ) => { - const checkbox = document.querySelector( selector ); - return checkbox && checkbox.checked; - }, checkboxSelector ); - - if ( ! isChecked ) { - await page.click( checkboxSelector ); - } + await setCheckboxState( + `${ currencyCheckboxSelector }[code="${ currency }"]`, + true + ); } // Submit the form. diff --git a/tests/e2e/utils/helpers.js b/tests/e2e/utils/helpers.js index ca829481a27..2d9b0e0932b 100644 --- a/tests/e2e/utils/helpers.js +++ b/tests/e2e/utils/helpers.js @@ -80,3 +80,21 @@ export const getProductPriceFromProductPage = async () => { return price; }; + +/** + * Sets the state of all checkboxes matching the specified selector. + * + * @param {string} selector The selector to use to find checkboxes. + * @param {boolean} desiredState The desired state of the checkboxes. + */ +export const setCheckboxState = async ( selector, desiredState ) => { + const checkboxes = await page.$$( selector ); + for ( const checkbox of checkboxes ) { + const isChecked = await ( + await checkbox.getProperty( 'checked' ) + ).jsonValue(); + if ( isChecked !== desiredState ) { + await checkbox.click(); + } + } +}; From 07139906dfd2f73536f87731b3fc21c1c7da7c33 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 11:31:57 -0300 Subject: [PATCH 17/37] Remove screenshots --- ...t-admin-multi-currency-on-boarding.spec.js | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index cbe49a1eefb..db50521c7c6 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -5,12 +5,7 @@ const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); /** * Internal dependencies */ -import { - merchantWCP, - setCheckboxState, - takeScreenshot, - uiLoaded, -} from '../../../utils'; +import { merchantWCP, setCheckboxState, uiLoaded } from '../../../utils'; let wasMulticurrencyEnabled; @@ -121,10 +116,6 @@ describe( 'Merchant On-boarding', () => { ); expect( isDisabled ).toBeTruthy(); - - await takeScreenshot( - 'merchant-admin-multi-currency-on-boarding-disabled-submit-button' - ); } ); it( 'Should allow multiple currencies to be selectable', async () => { @@ -199,10 +190,6 @@ describe( 'Merchant On-boarding', () => { } ) ) ); - await takeScreenshot( - 'merchant-admin-multi-currency-on-boarding-recommended-currencies' - ); - expect( recommendedCurrencies.length ).toBeGreaterThan( 0 ); } ); @@ -232,10 +219,6 @@ describe( 'Merchant On-boarding', () => { await merchantWCP.openMultiCurrency(); - await takeScreenshot( - 'merchant-admin-multi-currency-on-boarding-enabled-currencies' - ); - // Ensure the currencies are enabled. for ( const currency of testCurrencies ) { const selector = `li.enabled-currency.${ currency.toLowerCase() }`; From 9718349a83a7d2df45e5ae4f49983f7e80521185 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 11:38:40 -0300 Subject: [PATCH 18/37] Refactor button actions --- ...nt-admin-multi-currency-on-boarding.spec.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index db50521c7c6..2be1b653c70 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -7,6 +7,9 @@ const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); */ import { merchantWCP, setCheckboxState, uiLoaded } from '../../../utils'; +const SUBMIT_STEP_BTN_SELECTOR = + '.add-currencies-task.is-active .task-collapsible-body.is-active > button.is-primary'; + let wasMulticurrencyEnabled; const goToThemesPage = async () => { @@ -45,10 +48,7 @@ const goToOnboardingPage = async () => { }; const goToNextOnboardingStep = async () => { - const continueBtnSelector = - '.add-currencies-task.is-active .task-collapsible-body.is-active > button.is-primary'; - - await page.click( continueBtnSelector ); + await page.click( SUBMIT_STEP_BTN_SELECTOR ); }; describe( 'Merchant On-boarding', () => { @@ -104,10 +104,7 @@ describe( 'Merchant On-boarding', () => { await page.waitFor( 1000 ); - const button = await page.$( - '.add-currencies-task.is-active .task-collapsible-body.is-active > button.is-primary' - ); - + const button = await page.$( SUBMIT_STEP_BTN_SELECTOR ); expect( button ).not.toBeNull(); const isDisabled = await page.evaluate( @@ -212,10 +209,7 @@ describe( 'Merchant On-boarding', () => { } // Submit the form. - const submitButton = await page.$( - '.add-currencies-task.is-active .task-collapsible-body.is-active > button.is-primary' - ); - await submitButton.click(); + await goToNextOnboardingStep(); await merchantWCP.openMultiCurrency(); From e713b12fe08b9565bc6b20231a141c25e0068b7e Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 12:28:31 -0300 Subject: [PATCH 19/37] Use constants for common selectors --- ...t-admin-multi-currency-on-boarding.spec.js | 108 +++++++++--------- 1 file changed, 55 insertions(+), 53 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 2be1b653c70..c3c474cd016 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -7,8 +7,27 @@ const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); */ import { merchantWCP, setCheckboxState, uiLoaded } from '../../../utils'; +// Shared selector constants. +const THEME_SELECTOR = ( themeSlug ) => `.theme[data-slug="${ themeSlug }"]`; +const ACTIVATE_THEME_BUTTON_SELECTOR = ( themeSlug ) => + `${ THEME_SELECTOR( themeSlug ) } .button.activate`; +const MULTI_CURRENCY_TOGGLE_SELECTOR = "[data-testid='multi-currency-toggle']"; +const RECOMMENDED_CURRENCY_LIST_SELECTOR = + 'li[data-testid="recommended-currency"]'; +const CURRENCY_NOT_IN_RECOMMENDED_LIST_SELECTOR = + 'li.enabled-currency-checkbox:not([data-testid="recommended-currency"])'; +const ENABLED_CURRENCY_LIST_SELECTOR = 'li.enabled-currency-checkbox'; +const GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR = + 'input[data-testid="enable_auto_currency"]'; +const PREVIEW_STORE_BTN_SELECTOR = '.multi-currency-setup-preview-button'; +const PREVIEW_STORE_MODAL_SELECTOR = + '.multi-currency-store-settings-preview-modal'; +const PREVIEW_STORE_IFRAME_SELECTOR = + '.multi-currency-store-settings-preview-iframe'; const SUBMIT_STEP_BTN_SELECTOR = '.add-currencies-task.is-active .task-collapsible-body.is-active > button.is-primary'; +const STOREFRONT_SWITCH_CHECKBOX_SELECTOR = + 'input[data-testid="enable_storefront_switcher"]'; let wasMulticurrencyEnabled; @@ -21,18 +40,15 @@ const goToThemesPage = async () => { const activateTheme = async ( themeSlug ) => { await goToThemesPage(); - const themeSelector = `.theme[data-slug="${ themeSlug }"]`; - const activateButtonSelector = `${ themeSelector } .button.activate`; - // Check if the theme is already active. const isActive = await page.evaluate( ( selector ) => { const themeElement = document.querySelector( selector ); return themeElement && themeElement.classList.contains( 'active' ); - }, themeSelector ); + }, THEME_SELECTOR( themeSlug ) ); // Activate the theme if it's not already active. if ( ! isActive ) { - await page.click( activateButtonSelector ); + await page.click( ACTIVATE_THEME_BUTTON_SELECTOR( themeSlug ) ); await page.waitForNavigation( { waitUntil: 'networkidle0' } ); } }; @@ -58,13 +74,11 @@ describe( 'Merchant On-boarding', () => { await merchant.login(); // Get initial multi-currency feature status. await merchantWCP.openWCPSettings(); - await page.waitForSelector( "[data-testid='multi-currency-toggle']" ); - wasMulticurrencyEnabled = await page.evaluate( () => { - const checkbox = document.querySelector( - "[data-testid='multi-currency-toggle']" - ); + await page.waitForSelector( MULTI_CURRENCY_TOGGLE_SELECTOR ); + wasMulticurrencyEnabled = await page.evaluate( ( selector ) => { + const checkbox = document.querySelector( selector ); return checkbox ? checkbox.checked : false; - } ); + }, MULTI_CURRENCY_TOGGLE_SELECTOR ); await goToThemesPage(); @@ -98,7 +112,7 @@ describe( 'Merchant On-boarding', () => { it( 'Should disable the submit button when no currencies are selected', async () => { await setCheckboxState( - '.enabled-currency-checkbox .components-checkbox-control__input', + `${ ENABLED_CURRENCY_LIST_SELECTOR } .components-checkbox-control__input`, false ); @@ -116,17 +130,16 @@ describe( 'Merchant On-boarding', () => { } ); it( 'Should allow multiple currencies to be selectable', async () => { - const listItemSelector = - 'li.enabled-currency-checkbox:not([data-testid="recommended-currency"])'; - const checkboxSelector = 'input[type="checkbox"]'; - - await page.waitForSelector( listItemSelector, { - timeout: 3000, - } ); + await page.waitForSelector( + CURRENCY_NOT_IN_RECOMMENDED_LIST_SELECTOR, + { + timeout: 3000, + } + ); // Ensure the checkbox within the list item is present and not disabled. const checkbox = await page.$( - `${ listItemSelector } ${ checkboxSelector }` + `${ CURRENCY_NOT_IN_RECOMMENDED_LIST_SELECTOR } input[type="checkbox"]` ); expect( checkbox ).not.toBeNull(); const isDisabled = await ( @@ -147,15 +160,15 @@ describe( 'Merchant On-boarding', () => { await merchantWCP.addCurrency( 'GBP' ); await goToOnboardingPage(); - const currencySelector = 'li.enabled-currency-checkbox'; - await page.waitForSelector( currencySelector, { + await page.waitForSelector( ENABLED_CURRENCY_LIST_SELECTOR, { timeout: 3000, } ); // Get the list of currencies as text - const currencies = await page.$$eval( currencySelector, ( items ) => - items.map( ( item ) => item.textContent.trim() ) + const currencies = await page.$$eval( + ENABLED_CURRENCY_LIST_SELECTOR, + ( items ) => items.map( ( item ) => item.textContent.trim() ) ); expect( currencies ).not.toContain( 'GBP' ); @@ -164,16 +177,13 @@ describe( 'Merchant On-boarding', () => { } ); it( 'Should display some suggested currencies at the beginning of the list', async () => { - const recommendedCurrencySelector = - 'li[data-testid="recommended-currency"]'; - - await page.waitForSelector( recommendedCurrencySelector, { + await page.waitForSelector( RECOMMENDED_CURRENCY_LIST_SELECTOR, { timeout: 3000, } ); // Get the list of recommended currencies const recommendedCurrencies = await page.$$eval( - recommendedCurrencySelector, + RECOMMENDED_CURRENCY_LIST_SELECTOR, ( items ) => items.map( ( item ) => ( { code: item @@ -236,9 +246,9 @@ describe( 'Merchant On-boarding', () => { it( 'Should offer currency switch by geolocation', async () => { await goToNextOnboardingStep(); - const geoCurrencySwitchCheckboxSelector = - 'input[data-testid="enable_auto_currency"]'; - const checkbox = await page.$( geoCurrencySwitchCheckboxSelector ); + const checkbox = await page.$( + GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR + ); // Check if exists and not disabled. expect( checkbox ).not.toBeNull(); @@ -248,7 +258,7 @@ describe( 'Merchant On-boarding', () => { expect( isDisabled ).toBe( false ); // Click the checkbox to select it. - await page.click( geoCurrencySwitchCheckboxSelector ); + await page.click( GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR ); // Check if the checkbox is selected. const isChecked = await ( @@ -260,29 +270,21 @@ describe( 'Merchant On-boarding', () => { it( 'Should preview currency switch by geolocation correctly with USD and GBP', async () => { await goToNextOnboardingStep(); - const geoCurrencySwitchCheckboxSelector = - 'input[data-testid="enable_auto_currency"]'; - const previewBtnSelector = '.multi-currency-setup-preview-button'; - const previewModalSelector = - '.multi-currency-store-settings-preview-modal'; - const iframeSelector = - '.multi-currency-store-settings-preview-iframe'; - // Enable feature. - await page.click( geoCurrencySwitchCheckboxSelector ); + await page.click( GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR ); // Click preview button. - await page.click( previewBtnSelector ); + await page.click( PREVIEW_STORE_BTN_SELECTOR ); - await page.waitForSelector( previewModalSelector, { + await page.waitForSelector( PREVIEW_STORE_MODAL_SELECTOR, { timeout: 3000, } ); - await page.waitForSelector( iframeSelector, { + await page.waitForSelector( PREVIEW_STORE_IFRAME_SELECTOR, { timeout: 3000, } ); - const iframeElement = await page.$( iframeSelector ); + const iframeElement = await page.$( PREVIEW_STORE_IFRAME_SELECTOR ); const iframe = await iframeElement.contentFrame(); await iframe.waitForSelector( '.woocommerce-Price-currencySymbol', { @@ -321,9 +323,9 @@ describe( 'Merchant On-boarding', () => { await goToOnboardingPage(); await goToNextOnboardingStep(); - const storefrontSwitchCheckboxSelector = - 'input[data-testid="enable_storefront_switcher"]'; - const checkbox = await page.$( storefrontSwitchCheckboxSelector ); + const checkbox = await page.$( + STOREFRONT_SWITCH_CHECKBOX_SELECTOR + ); // Check if exists and not disabled. expect( checkbox ).not.toBeNull(); @@ -333,7 +335,7 @@ describe( 'Merchant On-boarding', () => { expect( isDisabled ).toBe( false ); // Click the checkbox to select it. - await page.click( storefrontSwitchCheckboxSelector ); + await page.click( STOREFRONT_SWITCH_CHECKBOX_SELECTOR ); // Check if the checkbox is selected. const isChecked = await ( @@ -348,9 +350,9 @@ describe( 'Merchant On-boarding', () => { await goToOnboardingPage(); await goToNextOnboardingStep(); - const storefrontSwitchCheckboxSelector = - 'input[data-testid="enable_storefront_switcher"]'; - const checkbox = await page.$( storefrontSwitchCheckboxSelector ); + const checkbox = await page.$( + STOREFRONT_SWITCH_CHECKBOX_SELECTOR + ); expect( checkbox ).toBeNull(); } ); From 475584024226fd671e120668e7371fb1df4e72ad Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 14:00:52 -0300 Subject: [PATCH 20/37] Add screenshots to debug CI --- ...chant-admin-multi-currency-on-boarding.spec.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index c3c474cd016..9db3b7bef37 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -5,7 +5,12 @@ const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); /** * Internal dependencies */ -import { merchantWCP, setCheckboxState, uiLoaded } from '../../../utils'; +import { + merchantWCP, + setCheckboxState, + takeScreenshot, + uiLoaded, +} from '../../../utils'; // Shared selector constants. const THEME_SELECTOR = ( themeSlug ) => `.theme[data-slug="${ themeSlug }"]`; @@ -273,6 +278,10 @@ describe( 'Merchant On-boarding', () => { // Enable feature. await page.click( GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR ); + await takeScreenshot( + 'merchant-admin-multi-currency-on-boarding-geolocation-1' + ); + // Click preview button. await page.click( PREVIEW_STORE_BTN_SELECTOR ); @@ -291,6 +300,10 @@ describe( 'Merchant On-boarding', () => { timeout: 5000, } ); + await takeScreenshot( + 'merchant-admin-multi-currency-on-boarding-geolocation-2' + ); + // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol const currencySymbols = await iframe.$$eval( '.woocommerce-Price-currencySymbol', From 7e5721a2e18e9c32a0f20f5868e4ae5e909aab92 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 15:21:28 -0300 Subject: [PATCH 21/37] Debug with console log --- ...t-admin-multi-currency-on-boarding.spec.js | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 9db3b7bef37..204912dbf10 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -5,12 +5,7 @@ const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); /** * Internal dependencies */ -import { - merchantWCP, - setCheckboxState, - takeScreenshot, - uiLoaded, -} from '../../../utils'; +import { merchantWCP, setCheckboxState, uiLoaded } from '../../../utils'; // Shared selector constants. const THEME_SELECTOR = ( themeSlug ) => `.theme[data-slug="${ themeSlug }"]`; @@ -276,10 +271,9 @@ describe( 'Merchant On-boarding', () => { await goToNextOnboardingStep(); // Enable feature. - await page.click( GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR ); - - await takeScreenshot( - 'merchant-admin-multi-currency-on-boarding-geolocation-1' + await setCheckboxState( + GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR, + true ); // Click preview button. @@ -300,9 +294,7 @@ describe( 'Merchant On-boarding', () => { timeout: 5000, } ); - await takeScreenshot( - 'merchant-admin-multi-currency-on-boarding-geolocation-2' - ); + await page.waitFor( 3000 ); // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol const currencySymbols = await iframe.$$eval( @@ -310,6 +302,9 @@ describe( 'Merchant On-boarding', () => { ( elements ) => elements.map( ( element ) => element.textContent ) ); + + console.log( currencySymbols ); + currencySymbols.forEach( ( symbol ) => { expect( symbol ).toBe( '£' ); } ); From 8b4a908994361a56fc38ae4aa5315fcd6c94ac0e Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 15:42:20 -0300 Subject: [PATCH 22/37] Invert assertions for debugging --- ...t-admin-multi-currency-on-boarding.spec.js | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 204912dbf10..1cd4f8cac06 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -294,21 +294,6 @@ describe( 'Merchant On-boarding', () => { timeout: 5000, } ); - await page.waitFor( 3000 ); - - // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol - const currencySymbols = await iframe.$$eval( - '.woocommerce-Price-currencySymbol', - ( elements ) => - elements.map( ( element ) => element.textContent ) - ); - - console.log( currencySymbols ); - - currencySymbols.forEach( ( symbol ) => { - expect( symbol ).toBe( '£' ); - } ); - await iframe.waitForSelector( '.woocommerce-store-notice', { timeout: 3000, } ); @@ -321,6 +306,16 @@ describe( 'Merchant On-boarding', () => { // eslint-disable-next-line max-len "We noticed you're visiting from United Kingdom (UK). We've updated our prices to Pound sterling for your shopping convenience." ); + + // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol + const currencySymbols = await iframe.$$eval( + '.woocommerce-Price-currencySymbol', + ( elements ) => + elements.map( ( element ) => element.textContent ) + ); + currencySymbols.forEach( ( symbol ) => { + expect( symbol ).toBe( '£' ); + } ); } ); } ); From 277d7808491fd70db1447e053c8d088f7db4aa06 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 15:54:25 -0300 Subject: [PATCH 23/37] debug --- .../merchant-admin-multi-currency-on-boarding.spec.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 1cd4f8cac06..1f9a33eaea8 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -290,10 +290,6 @@ describe( 'Merchant On-boarding', () => { const iframeElement = await page.$( PREVIEW_STORE_IFRAME_SELECTOR ); const iframe = await iframeElement.contentFrame(); - await iframe.waitForSelector( '.woocommerce-Price-currencySymbol', { - timeout: 5000, - } ); - await iframe.waitForSelector( '.woocommerce-store-notice', { timeout: 3000, } ); @@ -307,6 +303,12 @@ describe( 'Merchant On-boarding', () => { "We noticed you're visiting from United Kingdom (UK). We've updated our prices to Pound sterling for your shopping convenience." ); + await iframe.waitForSelector( '.woocommerce-Price-currencySymbol', { + timeout: 5000, + } ); + + await page.waitFor( 1000 ); + // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol const currencySymbols = await iframe.$$eval( '.woocommerce-Price-currencySymbol', From ff6c71c5eb823484e40d1aff07c55c8a4617da0c Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 16:14:15 -0300 Subject: [PATCH 24/37] debug --- .../merchant/merchant-admin-multi-currency-on-boarding.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 1f9a33eaea8..04ffa902f67 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -307,7 +307,7 @@ describe( 'Merchant On-boarding', () => { timeout: 5000, } ); - await page.waitFor( 1000 ); + await page.waitFor( 3000 ); // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol const currencySymbols = await iframe.$$eval( From a891e471fc491a1ae202cd072592e95da2cb1cb2 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 16:31:30 -0300 Subject: [PATCH 25/37] Increase some timeouts --- .../merchant/merchant-admin-multi-currency-on-boarding.spec.js | 2 +- tests/e2e/utils/flows.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 04ffa902f67..03077e861ee 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -226,7 +226,7 @@ describe( 'Merchant On-boarding', () => { // Ensure the currencies are enabled. for ( const currency of testCurrencies ) { const selector = `li.enabled-currency.${ currency.toLowerCase() }`; - await page.waitForSelector( selector ); + await page.waitForSelector( selector, { timeout: 10000 } ); const element = await page.$( selector ); expect( element ).not.toBeNull(); diff --git a/tests/e2e/utils/flows.js b/tests/e2e/utils/flows.js index 4aad18ac56d..5925ef3e88c 100644 --- a/tests/e2e/utils/flows.js +++ b/tests/e2e/utils/flows.js @@ -705,8 +705,7 @@ export const merchantWCP = { await page.goto( WCPAY_MULTI_CURRENCY, { waitUntil: 'networkidle0' } ); await page.waitForSelector( '.enabled-currencies-list', { - visible: true, - timeout: 5000, + timeout: 10000, } ); // Select all delete buttons for enabled currencies. From 9c19523c3bc93258639c11b2544fbdf17bd89be6 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 20:03:58 -0300 Subject: [PATCH 26/37] debug --- .../merchant/merchant-admin-multi-currency-on-boarding.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 03077e861ee..7fe33f9e860 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -307,7 +307,7 @@ describe( 'Merchant On-boarding', () => { timeout: 5000, } ); - await page.waitFor( 3000 ); + await page.waitFor( 10000 ); // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol const currencySymbols = await iframe.$$eval( From 333d121993d049d9730c88b1979874b93b6d490b Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 20:10:31 -0300 Subject: [PATCH 27/37] debug --- .../merchant/merchant-admin-multi-currency-on-boarding.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 7fe33f9e860..8d6cea9f8e1 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -315,6 +315,7 @@ describe( 'Merchant On-boarding', () => { ( elements ) => elements.map( ( element ) => element.textContent ) ); + console.log( currencySymbols ); currencySymbols.forEach( ( symbol ) => { expect( symbol ).toBe( '£' ); } ); From 02bfc7eb0f9b23eb902319108d2c223e7849bc41 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 21:14:10 -0300 Subject: [PATCH 28/37] Attempt to enable screenshots --- .github/actions/e2e/run-log-tests/action.yml | 1 + ...chant-admin-multi-currency-on-boarding.spec.js | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/.github/actions/e2e/run-log-tests/action.yml b/.github/actions/e2e/run-log-tests/action.yml index 71e8d883865..142e085d0fe 100644 --- a/.github/actions/e2e/run-log-tests/action.yml +++ b/.github/actions/e2e/run-log-tests/action.yml @@ -39,6 +39,7 @@ runs: with: name: wp(${{ env.E2E_WP_VERSION }})-wc(${{ env.E2E_WC_VERSION }})-${{ env.E2E_GROUP }}-${{ env.E2E_BRANCH }} path: | + screenshots tests/e2e/screenshots tests/e2e/docker/wordpress/wp-content/debug.log ${{ env.E2E_RESULT_FILEPATH }} diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 8d6cea9f8e1..0e2304bce57 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -5,7 +5,12 @@ const { merchant, WP_ADMIN_DASHBOARD } = require( '@woocommerce/e2e-utils' ); /** * Internal dependencies */ -import { merchantWCP, setCheckboxState, uiLoaded } from '../../../utils'; +import { + merchantWCP, + setCheckboxState, + takeScreenshot, + uiLoaded, +} from '../../../utils'; // Shared selector constants. const THEME_SELECTOR = ( themeSlug ) => `.theme[data-slug="${ themeSlug }"]`; @@ -276,6 +281,8 @@ describe( 'Merchant On-boarding', () => { true ); + await takeScreenshot( 'geolocation-switcher-enabled' ); + // Click preview button. await page.click( PREVIEW_STORE_BTN_SELECTOR ); @@ -287,6 +294,8 @@ describe( 'Merchant On-boarding', () => { timeout: 3000, } ); + await takeScreenshot( 'geolocation-switcher-preview-0' ); + const iframeElement = await page.$( PREVIEW_STORE_IFRAME_SELECTOR ); const iframe = await iframeElement.contentFrame(); @@ -294,6 +303,8 @@ describe( 'Merchant On-boarding', () => { timeout: 3000, } ); + await takeScreenshot( 'geolocation-switcher-preview-1' ); + const noticeText = await iframe.$eval( '.woocommerce-store-notice', ( element ) => element.innerText @@ -307,7 +318,7 @@ describe( 'Merchant On-boarding', () => { timeout: 5000, } ); - await page.waitFor( 10000 ); + await takeScreenshot( 'geolocation-switcher-preview-2' ); // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol const currencySymbols = await iframe.$$eval( From ab8b4cc9c927e6ca1d993ea56903dbc3ab9d35a8 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Thu, 11 Jan 2024 22:21:39 -0300 Subject: [PATCH 29/37] Add more screenshots --- .../merchant-admin-multi-currency-on-boarding.spec.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 0e2304bce57..d64c646c598 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -273,6 +273,9 @@ describe( 'Merchant On-boarding', () => { } ); it( 'Should preview currency switch by geolocation correctly with USD and GBP', async () => { + page.setViewport( { width: 1600, height: 1200 } ); + + await takeScreenshot( 'geolocation-switcher-0' ); await goToNextOnboardingStep(); // Enable feature. @@ -283,6 +286,8 @@ describe( 'Merchant On-boarding', () => { await takeScreenshot( 'geolocation-switcher-enabled' ); + await page.waitFor( 2000 ); + // Click preview button. await page.click( PREVIEW_STORE_BTN_SELECTOR ); From 4ffed586842abd5ca32713d2ae4b835ee8e289d8 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 12 Jan 2024 01:39:53 -0300 Subject: [PATCH 30/37] debug --- ...t-admin-multi-currency-on-boarding.spec.js | 13 +++++------- ...erchant-admin-multi-currency-setup.spec.js | 1 + tests/e2e/utils/flows.js | 21 ++++++++++--------- 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index d64c646c598..43a344638d2 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -25,8 +25,6 @@ const ENABLED_CURRENCY_LIST_SELECTOR = 'li.enabled-currency-checkbox'; const GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR = 'input[data-testid="enable_auto_currency"]'; const PREVIEW_STORE_BTN_SELECTOR = '.multi-currency-setup-preview-button'; -const PREVIEW_STORE_MODAL_SELECTOR = - '.multi-currency-store-settings-preview-modal'; const PREVIEW_STORE_IFRAME_SELECTOR = '.multi-currency-store-settings-preview-iframe'; const SUBMIT_STEP_BTN_SELECTOR = @@ -84,12 +82,13 @@ describe( 'Merchant On-boarding', () => { const checkbox = document.querySelector( selector ); return checkbox ? checkbox.checked : false; }, MULTI_CURRENCY_TOGGLE_SELECTOR ); + await merchantWCP.activateMulticurrency(); await goToThemesPage(); // Get current theme slug. activeThemeSlug = await page.evaluate( () => { - const theme = document.querySelector( '.theme.active-theme' ); + const theme = document.querySelector( '.theme.active' ); return theme ? theme.getAttribute( 'data-slug' ) : ''; } ); } ); @@ -286,15 +285,11 @@ describe( 'Merchant On-boarding', () => { await takeScreenshot( 'geolocation-switcher-enabled' ); - await page.waitFor( 2000 ); + await page.waitFor( 3000 ); // Click preview button. await page.click( PREVIEW_STORE_BTN_SELECTOR ); - await page.waitForSelector( PREVIEW_STORE_MODAL_SELECTOR, { - timeout: 3000, - } ); - await page.waitForSelector( PREVIEW_STORE_IFRAME_SELECTOR, { timeout: 3000, } ); @@ -377,6 +372,8 @@ describe( 'Merchant On-boarding', () => { ); expect( checkbox ).toBeNull(); + + await activateTheme( 'storefront' ); } ); } ); } ); diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-setup.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-setup.spec.js index 51f7fc9cd67..800ce9d0e8b 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-setup.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-setup.spec.js @@ -75,6 +75,7 @@ describe( 'Merchant Multi-Currency Settings', () => { beforeAll( async () => { await merchantWCP.activateMulticurrency(); + await merchantWCP.disableAllEnabledCurrencies(); await shopperWCP.goToShopWithCurrency( 'USD' ); await shopperWCP.goToProductPageBySlug( 'beanie' ); diff --git a/tests/e2e/utils/flows.js b/tests/e2e/utils/flows.js index 5925ef3e88c..fa0778d7051 100644 --- a/tests/e2e/utils/flows.js +++ b/tests/e2e/utils/flows.js @@ -23,7 +23,7 @@ const { const config = require( 'config' ); const baseUrl = config.get( 'url' ); -import { uiLoaded } from './helpers'; +import { takeScreenshot, uiLoaded } from './helpers'; const SHOP_MY_ACCOUNT_PAGE = baseUrl + 'my-account/'; const MY_ACCOUNT_PAYMENT_METHODS = baseUrl + 'my-account/payment-methods'; @@ -447,13 +447,9 @@ export const merchantWCP = { }, openMultiCurrency: async () => { - const currentUrl = await page.url(); - - if ( currentUrl !== WCPAY_MULTI_CURRENCY ) { - await page.goto( WCPAY_MULTI_CURRENCY, { - waitUntil: 'networkidle0', - } ); - } + await page.goto( WCPAY_MULTI_CURRENCY, { + waitUntil: 'networkidle0', + } ); await uiLoaded(); }, @@ -704,8 +700,10 @@ export const merchantWCP = { disableAllEnabledCurrencies: async () => { await page.goto( WCPAY_MULTI_CURRENCY, { waitUntil: 'networkidle0' } ); - await page.waitForSelector( '.enabled-currencies-list', { - timeout: 10000, + await takeScreenshot( 'before-disable-all-enabled-currencies' ); + + await page.waitForSelector( '.enabled-currencies-list li', { + timeout: 20000, } ); // Select all delete buttons for enabled currencies. @@ -729,6 +727,9 @@ export const merchantWCP = { editCurrency: async ( currencyCode ) => { await merchantWCP.openMultiCurrency(); + await takeScreenshot( `before-edit-currency-${ currencyCode }` ); + await page.waitFor( 10000 ); + const currencyItemSelector = `li.enabled-currency.${ currencyCode.toLowerCase() }`; await page.waitForSelector( currencyItemSelector, { timeout: 10000 } ); await page.click( From 65334f3d514a5e80b5a37c7931fbe070435f73d0 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 12 Jan 2024 10:32:27 -0300 Subject: [PATCH 31/37] Fix screenshot dir GH actions artifacts --- .github/actions/e2e/run-log-tests/action.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/actions/e2e/run-log-tests/action.yml b/.github/actions/e2e/run-log-tests/action.yml index 142e085d0fe..7d00aa1c039 100644 --- a/.github/actions/e2e/run-log-tests/action.yml +++ b/.github/actions/e2e/run-log-tests/action.yml @@ -40,7 +40,6 @@ runs: name: wp(${{ env.E2E_WP_VERSION }})-wc(${{ env.E2E_WC_VERSION }})-${{ env.E2E_GROUP }}-${{ env.E2E_BRANCH }} path: | screenshots - tests/e2e/screenshots tests/e2e/docker/wordpress/wp-content/debug.log ${{ env.E2E_RESULT_FILEPATH }} if-no-files-found: ignore From f13309c56b04e546980587c1a640d7d218d2a898 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 12 Jan 2024 10:34:59 -0300 Subject: [PATCH 32/37] Remove debug code from flows.js --- tests/e2e/utils/flows.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/tests/e2e/utils/flows.js b/tests/e2e/utils/flows.js index fa0778d7051..dd8d954951d 100644 --- a/tests/e2e/utils/flows.js +++ b/tests/e2e/utils/flows.js @@ -23,7 +23,7 @@ const { const config = require( 'config' ); const baseUrl = config.get( 'url' ); -import { takeScreenshot, uiLoaded } from './helpers'; +import { uiLoaded } from './helpers'; const SHOP_MY_ACCOUNT_PAGE = baseUrl + 'my-account/'; const MY_ACCOUNT_PAYMENT_METHODS = baseUrl + 'my-account/payment-methods'; @@ -700,10 +700,8 @@ export const merchantWCP = { disableAllEnabledCurrencies: async () => { await page.goto( WCPAY_MULTI_CURRENCY, { waitUntil: 'networkidle0' } ); - await takeScreenshot( 'before-disable-all-enabled-currencies' ); - await page.waitForSelector( '.enabled-currencies-list li', { - timeout: 20000, + timeout: 10000, } ); // Select all delete buttons for enabled currencies. @@ -717,7 +715,7 @@ export const merchantWCP = { await page.waitForSelector( '.components-snackbar', { text: 'Enabled currencies updated.', - timeout: 15000, + timeout: 10000, } ); await page.waitFor( 1000 ); @@ -727,9 +725,6 @@ export const merchantWCP = { editCurrency: async ( currencyCode ) => { await merchantWCP.openMultiCurrency(); - await takeScreenshot( `before-edit-currency-${ currencyCode }` ); - await page.waitFor( 10000 ); - const currencyItemSelector = `li.enabled-currency.${ currencyCode.toLowerCase() }`; await page.waitForSelector( currencyItemSelector, { timeout: 10000 } ); await page.click( From 9b8d8ff9f703955fe08531be5b263c6af1a5da2a Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 12 Jan 2024 10:42:05 -0300 Subject: [PATCH 33/37] Remove debug code from test file --- ...t-admin-multi-currency-on-boarding.spec.js | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index 43a344638d2..f5c293c0e78 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -115,6 +115,7 @@ describe( 'Merchant On-boarding', () => { } ); it( 'Should disable the submit button when no currencies are selected', async () => { + await takeScreenshot( 'merchant-on-boarding-multicurrency-screen' ); await setCheckboxState( `${ ENABLED_CURRENCY_LIST_SELECTOR } .components-checkbox-control__input`, false @@ -272,21 +273,20 @@ describe( 'Merchant On-boarding', () => { } ); it( 'Should preview currency switch by geolocation correctly with USD and GBP', async () => { - page.setViewport( { width: 1600, height: 1200 } ); + page.setViewport( { width: 1280, height: 720 } ); // To take a screenshot of the iframe preview. - await takeScreenshot( 'geolocation-switcher-0' ); await goToNextOnboardingStep(); + await takeScreenshot( + 'merchant-on-boarding-multicurrency-screen-2' + ); + // Enable feature. await setCheckboxState( GEO_CURRENCY_SWITCH_CHECKBOX_SELECTOR, true ); - await takeScreenshot( 'geolocation-switcher-enabled' ); - - await page.waitFor( 3000 ); - // Click preview button. await page.click( PREVIEW_STORE_BTN_SELECTOR ); @@ -294,8 +294,6 @@ describe( 'Merchant On-boarding', () => { timeout: 3000, } ); - await takeScreenshot( 'geolocation-switcher-preview-0' ); - const iframeElement = await page.$( PREVIEW_STORE_IFRAME_SELECTOR ); const iframe = await iframeElement.contentFrame(); @@ -303,7 +301,9 @@ describe( 'Merchant On-boarding', () => { timeout: 3000, } ); - await takeScreenshot( 'geolocation-switcher-preview-1' ); + await takeScreenshot( + 'merchant-on-boarding-multicurrency-geolocation-switcher-preview' + ); const noticeText = await iframe.$eval( '.woocommerce-store-notice', @@ -318,15 +318,12 @@ describe( 'Merchant On-boarding', () => { timeout: 5000, } ); - await takeScreenshot( 'geolocation-switcher-preview-2' ); - // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol const currencySymbols = await iframe.$$eval( '.woocommerce-Price-currencySymbol', ( elements ) => elements.map( ( element ) => element.textContent ) ); - console.log( currencySymbols ); currencySymbols.forEach( ( symbol ) => { expect( symbol ).toBe( '£' ); } ); From 41335ca155381261cbaa27d81eac9ebfca4010d3 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 12 Jan 2024 10:59:17 -0300 Subject: [PATCH 34/37] Remove unstable test assertion --- ...rchant-admin-multi-currency-on-boarding.spec.js | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index f5c293c0e78..d051f430162 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -313,20 +313,6 @@ describe( 'Merchant On-boarding', () => { // eslint-disable-next-line max-len "We noticed you're visiting from United Kingdom (UK). We've updated our prices to Pound sterling for your shopping convenience." ); - - await iframe.waitForSelector( '.woocommerce-Price-currencySymbol', { - timeout: 5000, - } ); - - // Assert that all occurrences of '.woocommerce-Price-currencySymbol' have the sterling pound symbol - const currencySymbols = await iframe.$$eval( - '.woocommerce-Price-currencySymbol', - ( elements ) => - elements.map( ( element ) => element.textContent ) - ); - currencySymbols.forEach( ( symbol ) => { - expect( symbol ).toBe( '£' ); - } ); } ); } ); From 17209aa2e6e2ae5e5b0409ad4ffb48280995db20 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 12 Jan 2024 11:01:21 -0300 Subject: [PATCH 35/37] Change screen size for preview screenshot --- .../merchant/merchant-admin-multi-currency-on-boarding.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js index d051f430162..27459e1db51 100644 --- a/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js +++ b/tests/e2e/specs/wcpay/merchant/merchant-admin-multi-currency-on-boarding.spec.js @@ -273,7 +273,7 @@ describe( 'Merchant On-boarding', () => { } ); it( 'Should preview currency switch by geolocation correctly with USD and GBP', async () => { - page.setViewport( { width: 1280, height: 720 } ); // To take a screenshot of the iframe preview. + page.setViewport( { width: 1280, height: 1280 } ); // To take a better screenshot of the iframe preview. await goToNextOnboardingStep(); From afbeb1894f56c828923be82b761816b1db984866 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski Date: Fri, 12 Jan 2024 11:38:22 -0300 Subject: [PATCH 36/37] Update test snapshot --- .../test/__snapshots__/index.test.js.snap | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/multi-currency-setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap b/client/multi-currency-setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap index 277911ece2e..61ce3669780 100644 --- a/client/multi-currency-setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap +++ b/client/multi-currency-setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap @@ -110,6 +110,7 @@ exports[`Multi-Currency enabled currencies list add currencies task renders corr
  • Date: Wed, 24 Jan 2024 11:01:45 -0300 Subject: [PATCH 37/37] Add tests/e2e/screenshots back to job artifacts --- .github/actions/e2e/run-log-tests/action.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/actions/e2e/run-log-tests/action.yml b/.github/actions/e2e/run-log-tests/action.yml index 7d00aa1c039..142e085d0fe 100644 --- a/.github/actions/e2e/run-log-tests/action.yml +++ b/.github/actions/e2e/run-log-tests/action.yml @@ -40,6 +40,7 @@ runs: name: wp(${{ env.E2E_WP_VERSION }})-wc(${{ env.E2E_WC_VERSION }})-${{ env.E2E_GROUP }}-${{ env.E2E_BRANCH }} path: | screenshots + tests/e2e/screenshots tests/e2e/docker/wordpress/wp-content/debug.log ${{ env.E2E_RESULT_FILEPATH }} if-no-files-found: ignore