add comments, update tests

Author: kaeizen

e2e/config/reporter.ts

@@ -49,6 +49,12 @@ class StkReporter implements Reporter {
 	}
 
 	onTestEnd( test: TestCase, result: TestResult ) {
+		// Console Reporter similar to Playwright's Dot Reporter:
+		// '·' for passed test
+		// '×' for attempt for retry
+		// 'T' for timed out
+		// 'F' for failed test
+
 		if ( test.outcome() === 'expected' ) {
 			process.stdout.write( '·' )
 		} else {
@@ -57,6 +63,7 @@ class StkReporter implements Reporter {
 			const out = test.results.length <= test.retries ? '×' : ( result.status === 'timedOut' ? 'T' : 'F' )
 			process.stdout.write( out )
 
+			// Compile error messages and snippets
 			let testResult = `${ titlePath } ${ test.results.length > 1 ? `(retry #${ test.results.length - 1 }) ` : '' }[${ ms( result.duration ) }]` + '\n\n'
 			if ( result.errors.length >= 1 ) {
 				result.errors.forEach( error => {
@@ -103,6 +110,7 @@ class StkReporter implements Reporter {
 			console.log( `---\n\nFailed Tests:` )
 			console.log( this.failedTestErrors.join( '' ) )
 
+			// Generate md file for GitHub Job Summary Report
 			const md = `
 | PASSED | FLAKY | SKIPPED | FAILED |
 | ------ | ----- | ------- | ------ |

e2e/playwright.config.ts

@@ -23,8 +23,7 @@ export default defineConfig( {
 	/* Fail the build on CI if you accidentally left test.only in the source code. */
 	// forbidOnly: !! process.env.CI,
 	/* Retry on CI only */
-	// retries: process.env.CI ? 1 : 0,
-	retries: 1,
+	retries: process.env.CI ? 1 : 0,
 	// Locally, we could take advantage of parallelism due to multicore systems.
 	// However, in the CI, we typically can use only one worker at a time.
 	// It's more straightforward to align how we run tests in both systems.

e2e/test-utils/editor.ts

@@ -0,0 +1,30 @@
+import { Editor as BaseEditor } from '@wordpress/e2e-test-utils-playwright'
+
+class ExtendedEditor extends BaseEditor {
+	blockErrors: Array<String> = []
+
+	getBlockAttributes = async function( clientId : String ) {
+		await this.page.waitForFunction(
+			() => window?.wp?.blocks && window?.wp?.data
+		)
+
+		const attributes = await this.page.evaluate( async ( [ _clientId ] ) => {
+			return await window.wp.data.select( 'core/block-editor' ).getBlockAttributes( _clientId )
+		}, [ clientId ] )
+
+		return attributes
+	}
+
+	getBlockErrors() :Array<String> {
+		this.blockErrors = []
+		this.page.on( 'console', msg => {
+			if ( msg.type() === 'error' && msg.text().startsWith( 'Block validation' ) ) {
+				this.blockErrors.push( msg.text() )
+			}
+		} )
+
+		return this.blockErrors
+	}
+}
+
+export { ExtendedEditor }

e2e/test-utils/stackable.ts

@@ -8,6 +8,8 @@ export class StackableFixture {
 	  this.page = page
 	}
 
+	// When loading the Stackable settings in the Admin, there are 4 requests to wp/v2/settings
+	// This function waits for all 4 requests to finish to ensure Stackable settings are loaded and reflected on the page
 	async waitForSettings(): Promise<void> {
 		return new Promise( ( resolve, reject ) => {
 			let responseCount = 0

e2e/test-utils/test.ts

@@ -6,6 +6,7 @@ import {
 
 import { ExtendedRequestUtils } from './requestUtils'
 import { StackableFixture } from './stackable'
+import { ExtendedEditor } from './editor'
 
 // We could also import utils from other packages.
 // import { StoreApiUtils } from '@woocommerce/e2e-utils';
@@ -19,6 +20,7 @@ import { StackableFixture } from './stackable'
 const test = base.extend<{
     requestUtils: ExtendedRequestUtils;
 	stackable: StackableFixture;
+	editor: ExtendedEditor;
 }>( {
 	requestUtils: async ( {}, use ) => {
 		let requestUtils = null
@@ -38,6 +40,10 @@ const test = base.extend<{
 	stackable: async ( { page }, use ) => {
 		await use( new StackableFixture( page ) )
 	},
+
+	editor: async ( { page }, use ) => {
+		await use( new ExtendedEditor( { page } ) )
+	},
 } )
 
 export { test, expect }

e2e/tests/admin.spec.ts

@@ -34,8 +34,7 @@ test( 'Stackable settings should be saved', async ( {
 	stackable,
 } ) => {
 	// Start waiting for Stackable Settings JSON Response before visiting the page
-	let settings = null
-	 settings = stackable.waitForSettings()
+	let settings = stackable.waitForSettings()
 
 	await admin.visitAdminPage( 'options-general.php?page=stackable' )
 	// Make sure all Stackable settings are loaded

e2e/tests/block-editor.spec.ts

@@ -1,3 +1,4 @@
+import { Page } from '@playwright/test'
 import { test, expect } from 'e2e/test-utils'
 
 test.describe( 'Block Editor', () => {
@@ -21,8 +22,9 @@ test.describe( 'Block Editor', () => {
 
 		editor,
 	} ) => {
+		// Insert Stackable Text Block through block inserter
+		// Also checks if Stackable Block is in the list of blocks in the Editor
 		await page.getByLabel( 'Toggle block inserter' ).click()
-
 		await page.locator( '.editor-block-list-item-stackable-text' ).click()
 
 		await expect( editor.canvas.getByLabel( 'Block: Text' ) ).toBeVisible()
@@ -54,25 +56,22 @@ test.describe( 'Block Editor', () => {
 		await editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ).fill( 'test' )
 		await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
 		await page.getByLabel( 'Hex color' ).fill( 'ff0000' )
+
+		// Click on the body to close the Color Picker popup
 		await editor.canvas.locator( 'body' ).click()
 
+		// Verify if Text block contains correct content and color
 		await expect( editor.canvas.locator( '[data-type="stackable/text"]' ) ).toContainText( 'test' )
 		await expect( editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
 
 		await editor.saveDraft()
 
-		await page.waitForFunction(
-			() => window?.wp?.blocks && window?.wp?.data
-		)
-
+		// Verify block attributes
 		const clientId = await editor.canvas.getByLabel( 'Block: Text' ).getAttribute( 'data-block' )
+		const attributes = await editor.getBlockAttributes( clientId )
 
-		const attributes = await page.evaluate( async ( [ _clientId ] ) => {
-			return await window.wp.data.select( 'core/block-editor' ).getBlockAttributes( _clientId )
-		}, [ clientId ] )
-
-		expect( attributes ).toHaveAttribute( 'textColor1', '#ff0000' )
-		expect( attributes ).toHaveAttribute( 'text', 'test' )
+		expect( attributes ).toHaveProperty( 'textColor1', '#ff0000' )
+		expect( attributes ).toHaveProperty( 'text', 'test' )
 	} )
 
 	test( 'The Stackable block added in the editor should be visible in the frontend', async ( {
@@ -86,25 +85,27 @@ test.describe( 'Block Editor', () => {
 			},
 		} )
 
-		await page.waitForFunction(
-			() => window?.wp?.blocks && window?.wp?.data
-		)
-
 		const clientId = await editor.canvas.getByLabel( 'Block: Text' ).getAttribute( 'data-block' )
-
-		const attributes = await page.evaluate( async ( [ _clientId ] ) => {
-			return await window.wp.data.select( 'core/block-editor' ).getBlockAttributes( _clientId )
-		}, [ clientId ] )
-
-		const uniqueId = attributes.uniqueId
+		const uniqueId = ( await editor.getBlockAttributes( clientId ) ).uniqueId
 
 		await editor.saveDraft()
 
-		const preview = await editor.openPreviewPage()
+		let preview : Page
+
+		// openPreviewPage() from WordPress may fail as it relies on a button with a attribute name of 'view'
+		// https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-test-utils-playwright/src/editor/preview.ts
+		// Older versions of WordPress uses 'Preview' as the label for the Preview Button
+		if ( await page.getByLabel( 'View', { exact: true } ).isVisible() ) {
+			preview = await editor.openPreviewPage()
+		} else {
+			await page.getByLabel( 'Preview' ).click()
+			const previewPromise = page.waitForEvent( 'popup' )
+			await page.getByRole( 'menuitem', { name: 'Preview in new tab' } ).click()
+			preview = await previewPromise
+		}
 
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toBeVisible()
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toContainText( 'test' )
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"] p` ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
 	} )
 } )
-

e2e/tests/existing-blocks.spec.ts

@@ -0,0 +1,16 @@
+/* eslint-disable jest/no-disabled-tests */
+import { test, expect } from 'e2e/test-utils'
+
+test.skip( process.env.WP_TEST_POSTID === undefined, 'For existing test page only' )
+
+test( 'Existing Stackable blocks should have no errors', async ( {
+	admin,
+	editor,
+} ) => {
+	// Start listening on console errors for block validation
+	const blockErrors = editor.getBlockErrors()
+
+	await admin.editPost( process.env.WP_TEST_POSTID )
+
+	expect( blockErrors ).toHaveLength( 0 )
+} )

e2e/tests/global-settings.spec.ts

@@ -30,25 +30,34 @@ test.describe( 'Global Settigs', () => {
 		const globalColors = panel.locator( '.ugb-global-settings-color-picker__color-indicators > div' )
 		const count = ( await globalColors.evaluate( node => Array.from( node.childNodes ) ) ).length
 
+		// Verify if a new color is added to the list
 		const newColor = globalColors.getByRole( 'button', { name: `Custom Color ${ count } ` } )
 		await expect( newColor ).toBeVisible()
+
+		// Get the value of the new global color
 		await newColor.click()
 		const hexValue = await page.getByLabel( 'Hex color' ).inputValue()
 
-		// Insert a Stackable Text Block and check if the added Global Colors is in the color picker
 		await page.getByLabel( 'Settings', { exact: true } ).click()
 		editor.insertBlock( {
 			name: 'stackable/text',
 			attributes: {
 				text: 'test',
 			},
 		} )
+
+		// Open the color picker
 		await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
 
+		// Verify the newly added global color is in the color picker
 		await expect( page.getByRole( 'heading', { name: 'Global Colors' } ) ).toBeVisible()
 		await expect( page.getByLabel( `Color: Custom Color ${ count }` ) ).toBeVisible()
+
+		// Verify the color value
 		await page.getByLabel( `Color: Custom Color ${ count }` ).click()
 		await expect( page.getByLabel( 'Hex color' ) ).toHaveValue( hexValue )
+
+		// Click on the color picker button to close the popup
 		await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
 
 		// Delete added Global Color
@@ -67,7 +76,11 @@ test.describe( 'Global Settigs', () => {
 		await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).locator( '.components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
 		await page.locator( '.stk-popover .components-base-control:nth-of-type(2)', { hasText: /Size/ } ).getByRole( 'textbox' ).fill( '32' )
 		await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).locator( '.components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
+
+		// Verify if the Heading 2 in Global Typography Styles has correct font size
 		await expect( page.getByRole( 'heading', { name: 'Heading 2' } ) ).toHaveCSS( 'font-size', '32px' )
+
+		// Open Block Settings
 		await page.getByLabel( 'Settings', { exact: true } ).click()
 
 		// Check if the added Stackable Heading Block has a font-size of 32