@wordpress/e2e-tests 2.4.1-next.253d9b6e21.0 → 2.5.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 2.5.0 (2021-09-09)
+
+### New Features
+
+-   Emulate `prefers-reduced-motion: reduce` [#34132](https://github.com/WordPress/gutenberg/pull/34132).
+
 ## 2.4.0 (2021-07-29)
 
 ### New Features

package/README.md

@@ -10,6 +10,68 @@ Install the module
 npm install @wordpress/e2e-tests --save-dev
 ```
 
+## Running tests
+
+The following commands are available on the Gutenberg repo:
+
+```json
+{
+	"test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
+	"test-e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
+	"test-e2e:watch": "npm run test-e2e -- --watch",
+}
+```
+
+### Run all available tests
+```bash
+npm run test-e2e
+```
+### Run all available tests and listen for changes.
+```bash
+npm run test-e2e:watch
+```
+
+### Run a specific test file
+```bash
+npm run test-e2e -- packages/e2e-test/<path_to_test_file>
+# Or, in order to watch for changes:
+npm run test-e2e:watch -- packages/e2e-test/<path_to_test_file>
+```
+### Debugging
+
+Makes e2e tests available to debug in a Chrome Browser.
+```bash
+npm run test-e2e:debug
+```
+After running the command, tests will be available for debugging in Chrome by going to chrome://inspect/#devices and clicking `inspect` under the path to `/test-e2e.js`.
+
+#### Debugging in `vscode`
+
+Debugging in a Chrome browser can be replaced with `vscode`'s debugger by adding the following configuration to `.vscode/launch.json`:
+
+```json
+{
+			"type": "node",
+			"request": "launch",
+			"name": "Debug current e2e test",
+			"program": "${workspaceFolder}/node_modules/@wordpress/scripts/bin/wp-scripts.js",
+			"args": [
+				"test-e2e",
+				"--config=${workspaceFolder}/packages/e2e-tests/jest.config.js",
+				"--verbose=true",
+				"--runInBand",
+				"--watch",
+				"${file}"
+			],
+			"console": "integratedTerminal",
+			"internalConsoleOptions": "neverOpen",
+			"trace": "all"
+		}
+```
+
+This will run jest, targetting the spec file currently open in the editor. `vscode`'s debugger can now be used to add breakpoints and inspect tests as you would in Chrome DevTools.
+
+
 **Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

package/config/flaky-tests-reporter.js

@@ -0,0 +1,94 @@
+/**
+ * A **flaky** test is defined as a test which passed after auto-retrying.
+ * - By default, all tests run once if they pass.
+ * - If a test fails, it will automatically re-run at most 2 times.
+ * - If it pass after retrying (below 2 times), then it's marked as **flaky**
+ *   but displayed as **passed** in the original test suite.
+ * - If it fail all 3 times, then it's a **failed** test.
+ */
+/**
+ * External dependencies
+ */
+const fs = require( 'fs' ).promises;
+const path = require( 'path' );
+const { formatResultsErrors } = require( 'jest-message-util' );
+
+class FlakyTestsReporter {
+	constructor( globalConfig, options ) {
+		this._globalConfig = globalConfig;
+		this._options = options;
+
+		this.failingTestCaseResults = new Map();
+	}
+
+	async onRunStart() {
+		try {
+			fs.mkdir( 'flaky-tests' );
+		} catch ( err ) {
+			// Ignore the error if the directory already exists.
+			if ( err.code !== 'EEXIST' ) {
+				throw err;
+			}
+		}
+	}
+
+	async onTestCaseResult( test, testCaseResult ) {
+		const testPath = path.relative( this._globalConfig.rootDir, test.path );
+		const testTitle = testCaseResult.title;
+
+		switch ( testCaseResult.status ) {
+			case 'failed': {
+				if ( ! this.failingTestCaseResults.has( testTitle ) ) {
+					this.failingTestCaseResults.set( testTitle, [] );
+				}
+				this.failingTestCaseResults
+					.get( testTitle )
+					.push( testCaseResult );
+				break;
+			}
+			case 'passed': {
+				if ( this.failingTestCaseResults.has( testTitle ) ) {
+					const failingResults = this.failingTestCaseResults.get(
+						testTitle
+					);
+
+					await fs.writeFile(
+						`flaky-tests/${ testTitle }.json`,
+						JSON.stringify( {
+							title: testTitle,
+							path: testPath,
+							results: failingResults,
+						} ),
+						'utf-8'
+					);
+
+					// Don't silence flaky error messages for debugging reason.
+					// eslint-disable-next-line no-console
+					console.error(
+						`Test passed after ${ failingResults.length } failed ${
+							failingResults.length === 1 ? 'attempt' : 'attempts'
+						}:`
+					);
+					// eslint-disable-next-line no-console
+					console.error(
+						formatResultsErrors(
+							failingResults,
+							this._globalConfig,
+							{},
+							test.path
+						)
+					);
+				}
+				break;
+			}
+			default:
+				break;
+		}
+	}
+
+	onRunComplete() {
+		this.failingTestCaseResults.clear();
+	}
+}
+
+module.exports = FlakyTestsReporter;

package/config/setup-test-framework.js

@@ -68,6 +68,13 @@ const pageEvents = [];
 // The Jest timeout is increased because these tests are a bit slow
 jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
 
+// Retry failed tests at most 2 times in CI.
+// This enables `flaky-tests-reporter` and `report-flaky-tests` GitHub action
+// to mark test as flaky and automatically create a tracking issue about it.
+if ( process.env.CI ) {
+	jest.retryTimes( 2 );
+}
+
 async function setupBrowser() {
 	await clearLocalStorage();
 	await setBrowserViewport( 'large' );
@@ -240,6 +247,9 @@ beforeAll( async () => {
 	await trashAllPosts( 'wp_block' );
 	await setupBrowser();
 	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
+	await page.emulateMediaFeatures( [
+		{ name: 'prefers-reduced-motion', value: 'reduce' },
+	] );
 } );
 
 afterEach( async () => {

package/jest.config.js

@@ -1,5 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+const baseConfig = require( '@wordpress/scripts/config/jest-e2e.config' );
+
 module.exports = {
-	...require( '@wordpress/scripts/config/jest-e2e.config' ),
+	...baseConfig,
 	setupFiles: [ '<rootDir>/config/gutenberg-phase.js' ],
 	setupFilesAfterEnv: [
 		'<rootDir>/config/setup-test-framework.js',
@@ -12,4 +17,9 @@ module.exports = {
 		'/node_modules/',
 		'e2e-tests/specs/performance/',
 	],
+	reporters: [
+		...baseConfig.reporters,
+		// Report flaky tests results into artifacts for used in `report-flaky-tests` action.
+		process.env.CI && '<rootDir>/config/flaky-tests-reporter.js',
+	].filter( Boolean ),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.4.1-next.253d9b6e21.0",
+	"version": "2.5.1",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,13 +23,14 @@
 		"node": ">=12"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^5.4.2-next.253d9b6e21.0",
-		"@wordpress/jest-console": "^4.1.1-next.253d9b6e21.0",
-		"@wordpress/jest-puppeteer-axe": "^3.1.1-next.253d9b6e21.0",
-		"@wordpress/scripts": "^18.0.1-next.253d9b6e21.0",
-		"@wordpress/url": "^3.2.2-next.253d9b6e21.0",
+		"@wordpress/e2e-test-utils": "^5.4.4",
+		"@wordpress/jest-console": "^4.1.0",
+		"@wordpress/jest-puppeteer-axe": "^3.1.0",
+		"@wordpress/scripts": "^18.1.0",
+		"@wordpress/url": "^3.2.3",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
+		"jest-message-util": "^27.0.6",
 		"lodash": "^4.17.21",
 		"puppeteer-testing-library": "^0.5.0",
 		"uuid": "^8.3.0"
@@ -42,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c4b9acee18dfcc1767c35631f90725c7d604c5e9"
+	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
 }

package/plugins/class-test-widget.php

@@ -48,7 +48,7 @@ class Test_Widget extends WP_Widget {
 		?>
 		<p>
 			<label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
-			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $instance['title'] ); ?>" />
+			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( isset( $instance['title'] ) ? $instance['title'] : '' ); ?>" />
 		</p>
 		<?php
 	}
@@ -58,11 +58,14 @@ class Test_Widget extends WP_Widget {
 	 *
 	 * @param array $new_instance New settings for this instance as input by the user via
 	 *                            WP_Widget::form().
+	 * @param array $old_instance Old settings for this instance.
 	 *
 	 * @return array Settings to save or bool false to cancel saving.
 	 * @since 4.8.1
 	 */
-	public function update( $new_instance ) {
+	// @codingStandardsIgnoreStart – to prevent phpcs from complaining about unused function argument.
+	public function update( $new_instance, $old_instance ) {
+	// @codingStandardsIgnoreEnd
 		$instance          = array();
 		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
 		return $instance;

package/plugins/iframed-block/block.json

@@ -0,0 +1,16 @@
+{
+	"apiVersion": 2,
+	"name": "test/iframed-block",
+	"title": "Iframed Block",
+	"category": "text",
+	"icon": "smiley",
+	"description": "",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "iframed-block",
+	"editorScript": "iframed-block-editor",
+	"editorStyle": "file:./editor.css",
+	"style": "file:./style.css",
+	"script": "iframed-block-script"
+}

package/plugins/iframed-block/editor.css

@@ -0,0 +1,6 @@
+/**
+ * The following styles get applied inside the editor only.
+ */
+.wp-block-test-iframed-block {
+	border: 1px dotted #f00;
+}

package/plugins/iframed-block/editor.js

@@ -0,0 +1,18 @@
+( ( { wp: { element, blocks, blockEditor, compose }, jQuery: $ } ) => {
+	const { createElement: el } = element;
+	const { registerBlockType } = blocks;
+	const { useBlockProps } = blockEditor;
+	const { useRefEffect } = compose;
+
+	registerBlockType( 'test/iframed-block', {
+		edit: function Edit() {
+			const ref = useRefEffect( ( node ) => {
+				$( node ).test();
+			}, [] );
+			return el( 'p', useBlockProps( { ref } ), 'Iframed Block (edit)' );
+		},
+		save: function Save() {
+			return el( 'p', useBlockProps.save(), 'Iframed Block (saved)' );
+		},
+	} );
+} )( window );

package/plugins/iframed-block/jquery.test.js

@@ -0,0 +1,7 @@
+( ( $ ) => {
+	$.fn.test = function() {
+		return this.each( function() {
+			$( this ).text( 'Iframed Block (set with jQuery)' );
+		} );
+	};
+} )( window.jQuery );

package/plugins/iframed-block/script.js

@@ -0,0 +1,7 @@
+( ( win ) => {
+	const { jQuery: $ } = win;
+	win.addEventListener( 'DOMContentLoaded', () => {
+		$( '.wp-block-test-iframed-block' ).test();
+	} );
+} )( window );
+

package/plugins/iframed-block/style.css

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ */
+.wp-block-test-iframed-block {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}

package/plugins/iframed-block.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed Block
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-block
+ */
+
+add_action(
+	'setup_theme',
+	function() {
+		add_theme_support( 'block-templates' );
+	}
+);
+
+add_action(
+	'init',
+	function() {
+		wp_register_script(
+			'iframed-block-jquery-test',
+			plugin_dir_url( __FILE__ ) . 'iframed-block/jquery.test.js',
+			array( 'jquery' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-block/jquery.test.js' )
+		);
+		wp_register_script(
+			'iframed-block-editor',
+			plugin_dir_url( __FILE__ ) . 'iframed-block/editor.js',
+			array(
+				'wp-blocks',
+				'wp-block-editor',
+				'wp-element',
+				'wp-compose',
+				'iframed-block-jquery-test',
+			),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-block/editor.js' )
+		);
+		wp_register_script(
+			'iframed-block-script',
+			plugin_dir_url( __FILE__ ) . 'iframed-block/script.js',
+			array( 'iframed-block-jquery-test' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-block/script.js' )
+		);
+		register_block_type_from_metadata( __DIR__ . '/iframed-block' );
+	}
+);

package/specs/editor/blocks/buttons.test.js

@@ -38,6 +38,36 @@ describe( 'Buttons', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'moves focus from the link editor back to the button when escape is pressed after the URL has been submitted', async () => {
+		// Regression: https://github.com/WordPress/gutenberg/issues/34307
+		await insertBlock( 'Buttons' );
+		await pressKeyWithModifier( 'primary', 'k' );
+		await page.waitForFunction(
+			() => !! document.activeElement.closest( '.block-editor-url-input' )
+		);
+		await page.keyboard.type( 'https://example.com' );
+		await page.keyboard.press( 'Enter' );
+		await page.waitForFunction(
+			() =>
+				document.activeElement ===
+				document.querySelector(
+					'.block-editor-link-control a[href="https://example.com"]'
+				)
+		);
+		await page.keyboard.press( 'Escape' );
+
+		// Focus should move from the link control to the button block's text.
+		await page.waitForFunction(
+			() =>
+				document.activeElement ===
+				document.querySelector( '[aria-label="Button text"]' )
+		);
+
+		// The link control should still be visible when a URL is set.
+		const linkControl = await page.$( '.block-editor-link-control' );
+		expect( linkControl ).toBeTruthy();
+	} );
+
 	it( 'can jump to the link editor using the keyboard shortcut', async () => {
 		await insertBlock( 'Buttons' );
 		await page.keyboard.type( 'WordPress' );

package/specs/editor/blocks/post-title.test.js

@@ -28,7 +28,7 @@ describe( 'Post Title block', () => {
 		await page.waitForSelector( '.edit-post-layout' );
 		const title = await page.$eval(
 			'.editor-post-title__input',
-			( element ) => element.value
+			( element ) => element.textContent
 		);
 		expect( title ).toEqual( 'Just tweaking the post title' );
 	} );

package/specs/editor/plugins/__snapshots__/iframed-block.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`changing image size should load script and dependencies in iframe 1`] = `
+"<!-- wp:test/iframed-block -->
+<p class=\\"wp-block-test-iframed-block\\">Iframed Block (saved)</p>
+<!-- /wp:test/iframed-block -->"
+`;