Add basic e2e tests

See #73

package.json

@@ -31,6 +31,7 @@
 	},
 	"devDependencies": {
 		"@mexp/eslint-import-resolver": "*",
+		"@playwright/test": "^1.40.1",
 		"@shopify/web-worker": "^6.0.5",
 		"@testing-library/jest-dom": "^6.1.4",
 		"@testing-library/react": "^14.1.0",
@@ -43,13 +44,15 @@
 		"@wordpress/env": "^8.11.0",
 		"@wordpress/eslint-plugin": "^17.0.0",
 		"@wordpress/scripts": "^26.16.0",
+		"@wp-now/wp-now": "^0.1.63",
 		"blob-polyfill": "^7.0.20220408",
 		"eslint": "^8.55.0",
 		"mini-css-extract-plugin": "^2.7.6",
 		"patch-package": "^8.0.0",
 		"prettier": "npm:wp-prettier@^3.0.3",
 		"rtlcss-webpack-plugin": "^4.0.7",
 		"typescript": "^5.2.2",
+		"uuid": "^9.0.1",
 		"webpack": "^5.89.0",
 		"webpack-cli": "^5.1.4",
 		"webpack-virtual-modules": "^0.5.0"
@@ -70,6 +73,7 @@
 		"test:unit:help": "wp-scripts test-unit-js --help",
 		"test:unit:watch": "wp-scripts test-unit-js --watch",
 		"test:unit:debug": "wp-scripts --inspect-brk test-unit-js --runInBand --no-cache",
-		"wp-env": "wp-env"
+		"wp-env": "wp-env",
+		"wp-now": "wp-now start --port=8889"
 	}
 }

packages/edit-post/src/blockMediaPanel/debugInfo.tsx

@@ -6,6 +6,8 @@ import {
 	PanelRow,
 	useBaseControlProps,
 	Tooltip,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalText as Text,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
@@ -96,12 +98,19 @@ export function DebugInfo( { id }: DebugInfoProps ) {
 											attachment.meta.mexp_dominant_color
 										}
 									>
-										<ColorIndicator
-											colorValue={
+										<Text
+											aria-label={
 												attachment.meta
 													.mexp_dominant_color
 											}
-										/>
+										>
+											<ColorIndicator
+												colorValue={
+													attachment.meta
+														.mexp_dominant_color
+												}
+											/>
+										</Text>
 									</Tooltip>
 								),
 							}

tests/e2e/fixtures/index.ts

@@ -0,0 +1,15 @@
+import { test as base } from '@wordpress/e2e-test-utils-playwright';
+
+import { MediaUtils } from './mediaUtils';
+
+type E2EFixture = {
+	mediaUtils: MediaUtils;
+};
+
+export const test = base.extend< E2EFixture, {} >( {
+	mediaUtils: async ( { page }, use ) => {
+		await use( new MediaUtils( { page } ) );
+	},
+} );
+
+export { expect } from '@wordpress/e2e-test-utils-playwright';

tests/e2e/fixtures/mediaUtils.ts

@@ -0,0 +1,43 @@
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { copyFile, mkdtemp } from 'node:fs/promises';
+
+import { v4 as uuidv4 } from 'uuid';
+import type { Page, ElementHandle, Locator } from '@playwright/test';
+
+export class MediaUtils {
+	page: Page;
+	basePath: string;
+	DEFAULT_IMAGE_PATH: string;
+
+	constructor( { page } ) {
+		this.page = page;
+		this.basePath = join( __dirname, '..', 'assets' );
+
+		this.DEFAULT_IMAGE_PATH = join(
+			this.basePath,
+			'wordpress-logo-512x512.png'
+		);
+	}
+
+	async upload( inputElement: Locator, fileName?: string ) {
+		const tmpDirectory = await mkdtemp(
+			join( tmpdir(), 'gutenberg-test-image-' )
+		);
+		const newFileName = uuidv4();
+		const tmpFileName = join( tmpDirectory, `${ newFileName }.png` );
+		const filepath = fileName
+			? join( this.basePath, fileName )
+			: this.DEFAULT_IMAGE_PATH;
+		await copyFile( filepath, tmpFileName );
+
+		await inputElement.setInputFiles( tmpFileName );
+
+		return newFileName;
+	}
+
+	async getImageBuffer( url: string ) {
+		const response = await this.page.request.get( url );
+		return await response.body();
+	}
+}

tests/e2e/specs/imageBlock.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '../fixtures';
+
+test.describe( 'Image block', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'uploads a file and allows optimizing it afterwards', async ( {
+		page,
+		editor,
+		mediaUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+
+		const imageBlock = editor.canvas.locator(
+			'role=document[name="Block: Image"i]'
+		);
+		await expect( imageBlock ).toBeVisible();
+
+		await mediaUtils.upload(
+			imageBlock.locator( 'data-testid=form-file-upload-input' )
+		);
+
+		const settingsPanel = page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'tabpanel', {
+				name: 'Settings',
+			} );
+
+		await expect( settingsPanel ).toHaveText( /Mime type: image\/png/ );
+		await expect( settingsPanel.getByLabel( '#696969' ) ).toBeVisible();
+
+		await page.getByRole( 'button', { name: 'Optimize' } ).click();
+
+		const dialog = page.getByRole( 'dialog', {
+			name: 'Compare media quality',
+		} );
+
+		await expect( dialog ).toBeVisible();
+
+		await dialog
+			.getByRole( 'button', { name: 'Use optimized version' } )
+			.click();
+
+		await expect( settingsPanel ).toHaveText( /Mime type: image\/webp/ );
+		await expect( settingsPanel.getByLabel( '#696969' ) ).toBeVisible();
+	} );
+} );

tests/e2e/specs/preferencesModal.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '../fixtures';
+
+test.describe( 'Preferences Modal', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'opens from the options menu, closes with its close button and returns focus', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page
+			.getByRole( 'menuitem', {
+				name: 'Media Preferences',
+			} )
+			.click();
+
+		const dialog = page.getByRole( 'dialog', {
+			name: 'Preferences',
+		} );
+		await expect( dialog ).toBeVisible();
+
+		await dialog.getByRole( 'button', { name: 'Close' } ).click();
+		await expect( dialog ).toBeHidden();
+	} );
+} );