add tests for settings page and editor page

Author: kaeizen

e2e/playwright.config.ts

@@ -61,6 +61,13 @@ export default defineConfig( {
 			// testDir,
 			testMatch: 'setup/auth.js',
 		},
+		{
+			name: 'tests',
+			use: {
+				storageState: process.env.WP_AUTH_STORAGE,
+			},
+			testMatch: 'tests/*.ts',
+		},
 		{
 			name: 'chromium',
 			use: { ...devices[ 'Desktop Chrome' ] },

e2e/tests/admin.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '@wordpress/e2e-test-utils-playwright'
+
+test( 'Activating Stackable should redirect to the Getting Started Page', async ( {
+	page,
+	admin,
+} ) => {
+	await admin.visitAdminPage( 'plugins.php' )
+
+	// Deactivate Stackable
+	const deactivate = page.locator( '#deactivate-stackable-ultimate-gutenberg-blocks' )
+	await expect( deactivate ).toBeVisible()
+	await deactivate.click()
+
+	// Activate Stackable
+	const activate = page.locator( '#activate-stackable-ultimate-gutenberg-blocks' )
+	await expect( activate ).toBeVisible()
+	await activate.click()
+
+	await expect( page ).toHaveURL( /stackable-getting-started/ )
+} )
+
+test( 'Stackable settings should be saved', async ( {
+	page,
+	admin,
+	baseURL,
+} ) => {
+	// Start waiting for Stackable Settings JSON Response before visiting the page
+	let settings = page.waitForResponse( response =>
+		response.url() === `${ baseURL }wp-json/wp/v2/settings/` && response.request().method() === 'POST'
+	)
+	await admin.visitAdminPage( 'options-general.php?page=stackable' )
+	// Make sure all Stackable settings are loaded
+	let response = await settings
+	await response.finished()
+
+	// Retrieves the value of the first option, toggles it and check if the value changed
+	const option = page.locator( '.ugb-admin-toggle-setting__button' ).first()
+	const oldVal = await option.evaluate( node => node.getAttribute( 'aria-checked' ) )
+
+	await option.click()
+	const newVal = await option.evaluate( node => node.getAttribute( 'aria-checked' ) )
+
+	expect( newVal ).not.toBe( oldVal )
+
+	// Check if the value is correct after reloading
+	settings = page.waitForResponse( response =>
+		response.url() === `${ baseURL }wp-json/wp/v2/settings/` && response.request().method() === 'POST'
+	)
+	await page.reload()
+	response = await settings
+	await response.finished()
+
+	const _option = page.locator( '.ugb-admin-toggle-setting__button' ).first()
+	expect( await _option.evaluate( node => node.getAttribute( 'aria-checked' ) ) ).toBe( newVal )
+} )

e2e/tests/block-editor.spec.ts

@@ -0,0 +1,88 @@
+import { test, expect } from '@wordpress/e2e-test-utils-playwright'
+
+test( 'Stackable blocks can be added in the editor', async ( {
+	page,
+	admin,
+	editor,
+} ) => {
+	await admin.createNewPost()
+	await page.getByLabel( 'Toggle block inserter' ).click()
+
+	await page.locator( '.editor-block-list-item-stackable-text' ).click()
+
+	const blocks = await editor.getBlocks()
+
+	expect( blocks[ 0 ].name ).toContain( 'stackable/text' )
+} )
+
+test( 'Stackable Inspector Controls should show up upon clicking a Stackable block', async ( {
+	page,
+	admin,
+	editor,
+} ) => {
+	await admin.createNewPost()
+
+	await editor.insertBlock( {
+		name: 'stackable/text',
+	} )
+
+	await editor.selectBlocks( page.locator( 'iframe[name="editor-canvas"]' ).contentFrame().getByLabel( 'Block: Text' ) )
+	await expect( page.getByLabel( 'Layout Tab' ) ).toBeVisible()
+	await expect( page.getByLabel( 'Style Tab' ) ).toBeVisible()
+	await expect( page.getByLabel( 'Advanced Tab' ) ).toBeVisible()
+} )
+
+test( 'A Stackable block\'s attributes should update when settings are changed in the Inspector Controls.', async ( {
+	page,
+	admin,
+	editor,
+} ) => {
+	await admin.createNewPost()
+
+	await editor.insertBlock( {
+		name: 'stackable/text',
+	} )
+
+	const editorCanvas = page.locator( 'iframe[name="editor-canvas"]' ).contentFrame()
+	await editorCanvas.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' )
+	await editorCanvas.locator( 'body' ).click()
+
+	await expect( editorCanvas.locator( '[data-type="stackable/text"]' ) ).toContainText( 'test' )
+	await expect( editorCanvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
+
+	await editor.saveDraft()
+
+	const blocks = await editor.getBlocks()
+	const attributes = blocks[ 0 ].attributes
+
+	expect( attributes.textColor1 ).toBe( '#ff0000' )
+	expect( attributes.text ).toBe( 'test' )
+} )
+
+test( 'The Stackable block added in the editor should be visible in the frontend', async ( {
+	admin,
+	editor,
+} ) => {
+	await admin.createNewPost()
+
+	await editor.insertBlock( {
+		name: 'stackable/text',
+		attributes: {
+			text: 'test',
+			textColor1: '#ff0000',
+		},
+	} )
+
+	const blocks = await editor.getBlocks()
+	const uniqueId = blocks[ 0 ].attributes.uniqueId
+
+	await editor.saveDraft()
+
+	const preview = await editor.openPreviewPage()
+
+	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)' )
+} )