From 4f2ed8d2627ab53f997b1f1d937f2520e1a98115 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Mon, 25 Mar 2024 10:28:02 +0100 Subject: [PATCH] [CYS - Core] E2E tests: add coverage for the Intro page (#45356) * Add test for the offline intro banner * WIP * WIP * Add more tests * Remove unnecessary code * Remove consoles * Remove console * Update strings * Add changefile(s) from automation for the following project(s): woocommerce * Remove unnecessary code --------- Co-authored-by: github-actions --- .../changelog/45356-45341-add-intro-e2e-tests | 4 + .../tests/customize-store/intro.spec.js | 154 ++++++++++++++++++ 2 files changed, 158 insertions(+) create mode 100644 plugins/woocommerce/changelog/45356-45341-add-intro-e2e-tests create mode 100644 plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js diff --git a/plugins/woocommerce/changelog/45356-45341-add-intro-e2e-tests b/plugins/woocommerce/changelog/45356-45341-add-intro-e2e-tests new file mode 100644 index 00000000000..83b43c014fc --- /dev/null +++ b/plugins/woocommerce/changelog/45356-45341-add-intro-e2e-tests @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +[CYS - E2E tests] Add E2E tests for the intro screen. \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js new file mode 100644 index 00000000000..d08a323b9e2 --- /dev/null +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js @@ -0,0 +1,154 @@ +const { test, expect, request } = require('@playwright/test'); +const { BASE_URL } = process.env; +const { features } = require('../../utils'); +const { activateTheme } = require('../../utils/themes'); +const { setOption } = require('../../utils/options'); + +const CUSTOMIZE_STORE_URL = + '/wp-admin/admin.php?page=wc-admin&path=%2Fcustomize-store'; + +test.describe( 'Store owner can view the Intro page', () => { + test.use( { storageState: process.env.ADMINSTATE } ); + + test.beforeAll( async ( { baseURL } ) => { + // In some environments the tour blocks clicking other elements. + await setOption( + request, + baseURL, + 'woocommerce_customize_store_onboarding_tour_hidden', + 'yes' + ); + + // Need a block enabled theme to test + await activateTheme( 'twentytwentyfour' ); + } ); + + test.beforeEach( async ( { baseURL } ) => { + try { + await setOption( + request, + baseURL, + 'woocommerce_admin_customize_store_completed', + 'no' + ); + } catch ( error ) { + console.log( 'Store completed option not updated', error ); + } + } ); + + test.afterAll( async ( { baseURL } ) => { + // Reset theme back to twentynineteen + await activateTheme( 'twentynineteen' ); + + // Reset tour to visible. + await setOption( + request, + baseURL, + 'woocommerce_customize_store_onboarding_tour_hidden', + 'no' + ); + } ); + + test( 'it shows the "offline banner" when the network is offline', async ( { + page, + context, + } ) => { + await page.goto( CUSTOMIZE_STORE_URL ); + await expect( page.locator( 'text=Design your own' ) ).toBeVisible(); + await context.setOffline( true ); + + await expect( page.locator( '.offline-banner' ) ).toBeVisible(); + await expect( + page.locator( 'text=Looking to design your store using AI?' ) + ).toBeVisible(); + } ); + + test( 'it shows the "no AI" banner on Core when the task is not completed', async ( { + page, + } ) => { + await page.goto( CUSTOMIZE_STORE_URL ); + + await expect( page.locator( '.no-ai-banner' ) ).toBeVisible(); + await expect( page.locator( 'text=Design your own' ) ).toBeVisible(); + await expect( + page.getByRole( 'button', { name: 'Start designing' } ) + ).toBeVisible(); + } ); + + test( 'it shows the "no AI customize theme" banner when the task is completed', async ( { + page, + baseURL, + } ) => { + try { + await setOption( + request, + baseURL, + 'woocommerce_admin_customize_store_completed', + 'yes' + ); + } catch ( error ) { + console.log( 'Store completed option not updated', error ); + } + await page.goto( CUSTOMIZE_STORE_URL ); + + await expect( + page.locator( '.existing-no-ai-theme-banner' ) + ).toBeVisible(); + await expect( + page.locator( 'text=Edit your custom theme' ) + ).toBeVisible(); + await expect( + page.getByRole( 'button', { name: 'Customize your theme' } ) + ).toBeVisible(); + } ); + + test( 'it shows the "no AI" banner when the task is completed and the theme is not the default', async ( { + page, + baseURL, + } ) => { + try { + await setOption( + request, + baseURL, + 'woocommerce_admin_customize_store_completed', + 'yes' + ); + } catch ( error ) { + console.log( 'Store completed option not updated', error ); + } + await activateTheme( 'twentytwentythree' ); + + await page.goto( CUSTOMIZE_STORE_URL ); + + await expect( page.locator( '.no-ai-banner' ) ).toBeVisible(); + await expect( page.locator( 'text=Design your own' ) ).toBeVisible(); + await expect( + page.getByRole( 'button', { name: 'Start designing' } ) + ).toBeVisible(); + } ); + + test( 'it shows the "no AI" banner, when the task is completed and the theme is not the default', async ( { + page, + baseURL, + } ) => { + try { + await setOption( + request, + baseURL, + 'woocommerce_admin_customize_store_completed', + 'yes' + ); + } catch ( error ) { + console.log( 'Store completed option not updated', error ); + } + await activateTheme( 'twentytwentythree' ); + + await page.goto( CUSTOMIZE_STORE_URL ); + + await expect( page.locator( '.no-ai-banner' ) ).toBeVisible(); + await expect( page.locator( 'text=Design your own' ) ).toBeVisible(); + await expect( + page.getByRole( 'button', { name: 'Start designing' } ) + ).toBeVisible(); + } ); +} );