@wordpress/e2e-tests 7.22.4 → 7.24.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 7.24.0 (2024-03-06)
+
+## 7.23.0 (2024-02-21)
+
 ## 7.22.0 (2024-02-09)
 
 ## 7.21.0 (2024-01-24)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.22.4",
+	"version": "7.24.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,13 +23,13 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.22.1",
-		"@wordpress/interactivity": "^5.0.3",
-		"@wordpress/interactivity-router": "^1.1.3",
-		"@wordpress/jest-console": "^7.22.1",
-		"@wordpress/jest-puppeteer-axe": "^6.22.1",
-		"@wordpress/scripts": "^27.2.4",
-		"@wordpress/url": "^3.52.1",
+		"@wordpress/e2e-test-utils": "^10.24.0",
+		"@wordpress/interactivity": "^5.2.0",
+		"@wordpress/interactivity-router": "^1.3.0",
+		"@wordpress/jest-console": "^7.24.0",
+		"@wordpress/jest-puppeteer-axe": "^6.24.0",
+		"@wordpress/scripts": "^27.4.0",
+		"@wordpress/url": "^3.54.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

package/plugins/interactive-blocks/directive-bind/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-bind-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-bind" }'>
+<div data-wp-interactive="directive-bind">
 	<a
 		data-wp-bind--href="state.url"
 		data-testid="add missing href at hydration"

package/plugins/interactive-blocks/directive-context/render.php

@@ -117,6 +117,24 @@ wp_enqueue_script_module( 'directive-context-view' );
 			>
 				obj.prop6
 			</button>
+			<button
+				data-testid="child copy obj"
+				data-wp-on--click="actions.copyObj"
+			>
+				Copy obj
+			</button>
+			<div>
+				Is proxy preserved? <span
+					data-testid="is proxy preserved"
+					data-wp-text="state.isProxyPreserved"
+				></span>
+			</div>
+			<div>
+				Is proxy preserved on copy? <span
+					data-testid="is proxy preserved on copy"
+					data-wp-text="state.isProxyPreservedOnCopy"
+				></span>
+			</div>
 		</div>
 		<br />
 

package/plugins/interactive-blocks/directive-context/view.js

@@ -12,6 +12,15 @@ store( 'directive-context', {
 		get selected() {
 			const { list, selected } = getContext();
 			return list.find( ( obj ) => obj === selected )?.text;
+		},
+		get isProxyPreserved() {
+			const ctx = getContext();
+			const pointer = ctx.obj;
+			return pointer === ctx.obj;
+		},
+		get isProxyPreservedOnCopy() {
+			const { obj, obj2 } = getContext();
+			return obj === obj2;
 		}
 	},
 	actions: {
@@ -34,13 +43,17 @@ store( 'directive-context', {
 		replaceObj() {
 			const ctx = getContext();
 			ctx.obj = { overwritten: true };
+		},
+		copyObj() {
+			const ctx = getContext();
+			ctx.obj2 = ctx.obj;
 		}
 	},
 } );
 
 const html = `
 		<div
-			data-wp-interactive='{ "namespace": "directive-context-navigate" }'
+			data-wp-interactive="directive-context-navigate"
 			data-wp-router-region="navigation"
 			data-wp-context='{ "text": "second page", "text2": "second page" }'
 		>

package/plugins/interactive-blocks/directive-each/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-each-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-each" }'>
+<div data-wp-interactive="directive-each">
 	<div data-testid="letters">
 		<template data-wp-each="state.letters">
 			<p data-wp-text="context.item" data-testid="item"></p>
@@ -220,7 +220,7 @@ wp_enqueue_script_module( 'directive-each-view' );
 <hr>
 
 <div
-	data-wp-interactive='{ "namespace": "directive-each" }'
+	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
 	data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
 	data-testid="navigation-updated list"

package/plugins/interactive-blocks/directive-each/view.js

@@ -157,7 +157,7 @@ store( 'directive-each', {
 
 const html = `
 <div
-	data-wp-interactive='{ "namespace": "directive-each" }'
+	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
 	data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
 	data-testid="navigation-updated list"

package/plugins/interactive-blocks/directive-init/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-init-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-init" }'>
+<div data-wp-interactive="directive-init">
 	<div
 		data-testid="single init"
 		data-wp-context='{"isReady":[false],"calls":[0]}'

package/plugins/interactive-blocks/directive-key/render.php

@@ -9,7 +9,7 @@ wp_enqueue_script_module( 'directive-key-view' );
 ?>
 
 <div
-	data-wp-interactive='{ "namespace": "directive-key" }'
+	data-wp-interactive="directive-key"
 	data-wp-router-region="some-id"
 >
 	<ul>

package/plugins/interactive-blocks/directive-key/view.js

@@ -5,7 +5,7 @@ import { store } from '@wordpress/interactivity';
 
 const html = `
 		<div
-			data-wp-interactive='{ "namespace": "directive-key" }'
+			data-wp-interactive="directive-key"
 			data-wp-router-region="some-id"
 		>
 			<ul>

package/plugins/interactive-blocks/directive-on/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-on-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-on" }'>
+<div data-wp-interactive="directive-on">
 	<div>
 		<p data-wp-text="state.counter" data-testid="counter">0</p>
 		<button

package/plugins/interactive-blocks/directive-on-document/render.php

@@ -8,8 +8,8 @@
 wp_enqueue_script_module( 'directive-on-document-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-on-document" }'>
-	<button 
+<div data-wp-interactive="directive-on-document">
+	<button
 		data-testid="visibility"
 		data-wp-on--click="actions.visibilityHandler"
 	>

package/plugins/interactive-blocks/directive-on-window/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-on-window-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-on-window" }'>
+<div data-wp-interactive="directive-on-window">
 	<button
 		data-wp-on--click="actions.visibilityHandler"
 		data-testid="visibility">

package/plugins/interactive-blocks/directive-priorities/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-priorities-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-priorities" }'>
+<div data-wp-interactive="directive-priorities">
 	<pre data-testid="execution order"></pre>
 
 	<!-- Element with test directives -->
@@ -25,5 +25,5 @@ wp_enqueue_script_module( 'directive-priorities-view' );
 	<!-- WARNING: the `div` with `data-wp-non-existent-directive` should remain
 		inline (i.e., without new line or blank characters in between) to
 		ensure it is the only child node. Otherwise, tests could fail. -->
-	<div data-wp-interactive='{ "namespace": "directive-priorities" }'><div data-wp-non-existent-directive></div></div>
+	<div data-wp-interactive="directive-priorities"><div data-wp-non-existent-directive></div></div>
 </div>

package/plugins/interactive-blocks/directive-run/render.php

@@ -9,7 +9,7 @@ wp_enqueue_script_module( 'directive-run-view' );
 ?>
 
 <div
-	data-wp-interactive='{ "namespace": "directive-run" }'
+	data-wp-interactive="directive-run"
 	data-wp-router-region='test-directive-run'
 >
 	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
@@ -24,7 +24,7 @@ wp_enqueue_script_module( 'directive-run-view' );
 	></div>
 </div>
 
-<div data-wp-interactive='{ "namespace": "directive-run" }' >
+<div data-wp-interactive="directive-run" >
 	<button data-testid="toggle" data-wp-on--click="actions.toggle">
 		Toggle
 	</button>

package/plugins/interactive-blocks/directive-run/view.js

@@ -29,7 +29,7 @@ directive(
 
 const html = `
 <div
-	data-wp-interactive='{ "namespace": "directive-run" }'
+	data-wp-interactive="directive-run"
 	data-wp-router-region='test-directive-run'
 >
 	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>

package/plugins/interactive-blocks/directive-style/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-style-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-style" }'>
+<div data-wp-interactive="directive-style">
 	<button
 		data-wp-on--click="actions.toggleColor"
 		data-testid="toggle color"

package/plugins/interactive-blocks/directive-text/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-text-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-context" }'>
+<div data-wp-interactive="directive-context">
 	<div>
 		<span
 			data-wp-text="state.text"

package/plugins/interactive-blocks/directive-watch/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-watch-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-watch" }'>
+<div data-wp-interactive="directive-watch">
 	<div data-wp-show-mock="state.isOpen">
 		<input
 			data-testid="input"

package/plugins/interactive-blocks/negation-operator/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'negation-operator-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "negation-operator" }'>
+<div data-wp-interactive="negation-operator">
 	<button
 		data-wp-on--click="actions.toggle"
 		data-testid="toggle active value"

package/plugins/interactive-blocks/store-tag/render.php

@@ -14,7 +14,7 @@ $test_store_tag_counter = 'ok' === $attributes['condition'] ? 3 : 0;
 $test_store_tag_double  = $test_store_tag_counter * 2;
 ?>
 
-<div data-wp-interactive='{ "namespace": "store-tag" }'>
+<div data-wp-interactive="store-tag">
 	<div>
 		Counter:
 		<span

package/plugins/interactive-blocks/tovdom/render.php

@@ -12,7 +12,7 @@ $src_cdata    = $plugin_url . 'tovdom/cdata.js';
 wp_enqueue_script_module( 'tovdom-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "tovdom" }'>
+<div data-wp-interactive="tovdom">
 	<div data-testid="it should delete comments">
 		<!-- ##1## -->
 		<div data-testid="it should keep this node between comments">

package/plugins/interactive-blocks/tovdom-islands/render.php

@@ -15,7 +15,7 @@ wp_enqueue_script_module( 'tovdom-islands-view' );
 		</span>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+	<div data-wp-interactive="tovdom-islands">
 		<div data-wp-show-mock="state.falseValue">
 			<span data-testid="inside an island with json object">
 				This should not be shown because it is inside an island.
@@ -31,7 +31,7 @@ wp_enqueue_script_module( 'tovdom-islands-view' );
 		</div>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+	<div data-wp-interactive="tovdom-islands">
 		<div data-wp-ignore>
 			<div data-wp-show-mock="state.falseValue">
 				<span
@@ -44,8 +44,8 @@ wp_enqueue_script_module( 'tovdom-islands-view' );
 		</div>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
-		<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-interactive="tovdom-islands">
 			<div
 				data-wp-show-mock="state.falseValue"
 				data-testid="island inside another island"
@@ -58,10 +58,10 @@ wp_enqueue_script_module( 'tovdom-islands-view' );
 		</div>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+	<div data-wp-interactive="tovdom-islands">
 		<div>
 			<div
-				data-wp-interactive='{ "namespace": "tovdom-islands" }'
+				data-wp-interactive="tovdom-islands"
 				data-wp-ignore
 			>
 				<div data-wp-show-mock="state.falseValue">
@@ -77,8 +77,8 @@ wp_enqueue_script_module( 'tovdom-islands-view' );
 		</div>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
-		<div data-wp-interactive='{ "namespace": "something-new" }'></div>
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-interactive="something-new"></div>
 		<div data-wp-show-mock="state.falseValue">
 			<span data-testid="directive after different namespace">
 				The directive above should keep the `tovdom-island` namespace,

package/plugins/interactive-blocks/with-scope/render.php

@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'with-scope-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "with-scope" }' data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>
+<div data-wp-interactive="with-scope" data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>
 		<p data-wp-text="context.asyncCounter" data-testid="asyncCounter">0</p>
 		<p data-wp-text="context.syncCounter" data-testid="syncCounter">0</p>
 </div>

package/specs/editor/various/autosave.test.js

@@ -1,346 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	getEditedPostContent,
-	pressKeyWithModifier,
-	publishPost,
-	saveDraft,
-	toggleOfflineMode,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-// Constant to override editor preference
-const AUTOSAVE_INTERVAL_SECONDS = 5;
-
-const AUTOSAVE_NOTICE_REMOTE =
-	'There is an autosave of this post that is more recent than the version below.';
-const AUTOSAVE_NOTICE_LOCAL =
-	'The backup of this post in your browser is different from the version below.';
-
-// Save and wait for "Saved" to confirm save complete. Preserves focus in the
-// editing area.
-async function saveDraftWithKeyboard() {
-	await page.waitForSelector( '.editor-post-save-draft' );
-	await Promise.all( [
-		page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-		pressKeyWithModifier( 'primary', 'S' ),
-	] );
-}
-
-async function sleep( durationInSeconds ) {
-	// Rule `no-restricted-syntax` recommends `waitForSelector` against
-	// `waitFor`, which isn't apt for the use case, when provided an integer,
-	// of waiting for a given amount of time.
-	// eslint-disable-next-line no-restricted-syntax
-	await page.waitForTimeout( durationInSeconds * 1000 );
-}
-
-async function clearSessionStorage() {
-	await page.evaluate( () => window.sessionStorage.clear() );
-}
-
-async function readSessionStorageAutosave( postId ) {
-	return page.evaluate(
-		( key ) => window.sessionStorage.getItem( key ),
-		`wp-autosave-block-editor-post-${ postId ? postId : 'auto-draft' }`
-	);
-}
-
-async function getCurrentPostId() {
-	return page.evaluate( () =>
-		window.wp.data.select( 'core/editor' ).getCurrentPostId()
-	);
-}
-
-async function setLocalAutosaveInterval( value ) {
-	return page.evaluate( ( _value ) => {
-		window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
-			localAutosaveInterval: _value,
-		} );
-	}, value );
-}
-
-function wrapParagraph( text ) {
-	return `<!-- wp:paragraph -->
-<p>${ text }</p>
-<!-- /wp:paragraph -->`;
-}
-
-describe( 'autosave', () => {
-	beforeEach( async () => {
-		await clearSessionStorage();
-		await createNewPost();
-		await setLocalAutosaveInterval( AUTOSAVE_INTERVAL_SECONDS );
-	} );
-
-	it( 'should save to sessionStorage', async () => {
-		// Wait for the original timeout to kick in, it will schedule
-		// another run using the updated interval length of AUTOSAVE_INTERVAL_SECONDS.
-		await sleep( 15 );
-
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await sleep( 1 );
-		await page.keyboard.type( ' after save' );
-
-		// Wait long enough for local autosave to kick in.
-		await sleep( AUTOSAVE_INTERVAL_SECONDS + 1 );
-
-		const id = await getCurrentPostId();
-		const autosave = await readSessionStorageAutosave( id );
-		const { content } = JSON.parse( autosave );
-		expect( content ).toBe( wrapParagraph( 'before save after save' ) );
-	} );
-
-	it( 'should recover from sessionStorage', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		// Reload without saving on the server.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		const notice = await page.$eval(
-			'.components-notice__content',
-			( element ) => element.innerText
-		);
-		expect( notice ).toContain( AUTOSAVE_NOTICE_LOCAL );
-
-		expect( await getEditedPostContent() ).toEqual(
-			wrapParagraph( 'before save' )
-		);
-		await page.click( '.components-notice__action' );
-		expect( await getEditedPostContent() ).toEqual(
-			wrapParagraph( 'before save after save' )
-		);
-	} );
-
-	it( "shouldn't contaminate other posts", async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraft();
-
-		// Fake local autosave.
-		await page.evaluate(
-			( postId ) =>
-				window.sessionStorage.setItem(
-					`wp-autosave-block-editor-post-${ postId }`,
-					JSON.stringify( {
-						post_title: 'A',
-						content: 'B',
-						excerpt: 'C',
-					} )
-				),
-			await getCurrentPostId()
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		const notice = await page.$eval(
-			'.components-notice__content',
-			( element ) => element.innerText
-		);
-		expect( notice ).toContain(
-			'The backup of this post in your browser is different from the version below.'
-		);
-
-		await createNewPost();
-		expect( await page.$( '.components-notice__content' ) ).toBe( null );
-	} );
-
-	it( 'should clear local autosave after successful remote autosave', async () => {
-		// Edit, save draft, edit again.
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBeGreaterThanOrEqual( 1 );
-
-		// Trigger remote autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave()
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 0 );
-	} );
-
-	it( "shouldn't clear local autosave if remote autosave fails", async () => {
-		// Edit, save draft, edit again.
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-
-		// Bring network down and attempt to autosave remotely.
-		toggleOfflineMode( true );
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave()
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-	} );
-
-	it( 'should clear local autosave after successful save', async () => {
-		// Edit, save draft, edit again.
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-
-		await saveDraftWithKeyboard();
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 0 );
-	} );
-
-	it( "shouldn't clear local autosave if save fails", async () => {
-		// Edit, save draft, edit again.
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBeGreaterThanOrEqual( 1 );
-
-		// Bring network down and attempt to save.
-		toggleOfflineMode( true );
-		saveDraftWithKeyboard();
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBeGreaterThanOrEqual( 1 );
-	} );
-
-	it( "shouldn't conflict with server-side autosave", async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'before publish' );
-		await publishPost();
-
-		await canvas().click( '[data-type="core/paragraph"]' );
-		await page.keyboard.type( ' after publish' );
-
-		// Trigger remote autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave()
-		);
-
-		// Force conflicting local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBeGreaterThanOrEqual( 1 );
-
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// FIXME: Occasionally, upon reload, there is no server-provided
-		// autosave value available, despite our having previously explicitly
-		// autosaved. The reasons for this are still unknown. Since this is
-		// unrelated to *local* autosave, until we can understand them, we'll
-		// drop this test's expectations if we don't have an autosave object
-		// available.
-		const stillHasRemoteAutosave = await page.evaluate(
-			() =>
-				window.wp.data.select( 'core/editor' ).getEditorSettings()
-					.autosave
-		);
-		if ( ! stillHasRemoteAutosave ) {
-			return;
-		}
-
-		// Only one autosave notice should be displayed.
-		const notices = await page.$$( '.components-notice' );
-		expect( notices.length ).toBe( 1 );
-		const notice = await page.$eval(
-			'.components-notice__content',
-			( element ) => element.innerText
-		);
-		expect( notice ).toContain( AUTOSAVE_NOTICE_REMOTE );
-	} );
-
-	it( 'should clear sessionStorage upon user logout', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraft();
-
-		// Fake local autosave.
-		await page.evaluate(
-			( postId ) =>
-				window.sessionStorage.setItem(
-					`wp-autosave-block-editor-post-${ postId }`,
-					JSON.stringify( {
-						post_title: 'A',
-						content: 'B',
-						excerpt: 'C',
-					} )
-				),
-			await getCurrentPostId()
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-
-		await Promise.all( [
-			page.waitForSelector( '#wp-admin-bar-logout', { visible: true } ),
-			page.hover( '#wp-admin-bar-my-account' ),
-		] );
-		await Promise.all( [
-			page.waitForNavigation(),
-			page.click( '#wp-admin-bar-logout' ),
-		] );
-
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 0 );
-	} );
-
-	afterEach( async () => {
-		toggleOfflineMode( false );
-		await clearSessionStorage();
-	} );
-} );

package/specs/editor/various/change-detection.test.js

@@ -1,417 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	pressKeyWithModifier,
-	ensureSidebarOpened,
-	publishPost,
-	saveDraft,
-	openDocumentSettingsSidebar,
-	isCurrentURL,
-	openTypographyToolsPanelMenu,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Change detection', () => {
-	let handleInterceptedRequest, hadInterceptedSave;
-
-	beforeEach( async () => {
-		hadInterceptedSave = false;
-
-		await createNewPost();
-	} );
-
-	afterEach( async () => {
-		if ( handleInterceptedRequest ) {
-			await releaseSaveIntercept();
-		}
-	} );
-
-	async function assertIsDirty( isDirty ) {
-		let hadDialog = false;
-
-		function handleOnDialog() {
-			hadDialog = true;
-		}
-
-		try {
-			page.on( 'dialog', handleOnDialog );
-			await page.reload();
-
-			// Ensure whether it was expected that dialog was encountered.
-			expect( hadDialog ).toBe( isDirty );
-		} catch ( error ) {
-			throw error;
-		} finally {
-			page.removeListener( 'dialog', handleOnDialog );
-		}
-	}
-
-	async function interceptSave() {
-		await page.setRequestInterception( true );
-
-		handleInterceptedRequest = ( interceptedRequest ) => {
-			if ( interceptedRequest.url().includes( '/wp/v2/posts' ) ) {
-				hadInterceptedSave = true;
-			} else {
-				interceptedRequest.continue();
-			}
-		};
-		page.on( 'request', handleInterceptedRequest );
-	}
-
-	async function releaseSaveIntercept() {
-		page.removeListener( 'request', handleInterceptedRequest );
-		await page.setRequestInterception( false );
-		hadInterceptedSave = false;
-		handleInterceptedRequest = null;
-	}
-
-	it( 'Should not save on new unsaved post', async () => {
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		expect( hadInterceptedSave ).toBe( false );
-	} );
-
-	it( 'Should autosave post', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		// Force autosave to occur immediately.
-		await Promise.all( [
-			page.evaluate( () =>
-				window.wp.data.dispatch( 'core/editor' ).autosave()
-			),
-			page.waitForSelector( '.editor-post-saved-state.is-autosaving' ),
-			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-		] );
-
-		// Autosave draft as same user should do full save, i.e. not dirty.
-		await assertIsDirty( false );
-	} );
-
-	it( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		// Toggle post as needing review (not persisted for autosave).
-		await ensureSidebarOpened();
-
-		const postPendingReviewButton = (
-			await page.$x( "//label[contains(text(), 'Pending review')]" )
-		)[ 0 ];
-		await postPendingReviewButton.click( 'button' );
-
-		// Force autosave to occur immediately.
-		await Promise.all( [
-			page.evaluate( () =>
-				window.wp.data.dispatch( 'core/editor' ).autosave()
-			),
-			page.waitForSelector( '.editor-post-saved-state.is-autosaving' ),
-			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-		] );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		await publishPost();
-
-		// Close publish panel.
-		await Promise.all( [
-			page.waitForFunction(
-				() => ! document.querySelector( '.editor-post-publish-panel' )
-			),
-			page.click( '.editor-post-publish-panel__header button' ),
-		] );
-
-		// Should be dirty after autosave change of published post.
-		await canvas().type( '.editor-post-title__input', '!' );
-
-		await Promise.all( [
-			page.waitForSelector(
-				'.editor-post-publish-button[aria-disabled="true"]'
-			),
-			page.waitForSelector(
-				'.editor-post-publish-button[aria-disabled="false"]'
-			),
-			page.evaluate( () =>
-				window.wp.data.dispatch( 'core/editor' ).autosave()
-			),
-		] );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should not prompt to confirm unsaved changes for new post', async () => {
-		await assertIsDirty( false );
-	} );
-
-	it( 'Should prompt to confirm unsaved changes for new post with initial edits', async () => {
-		await createNewPost( {
-			title: 'My New Post',
-			content: 'My content',
-			excerpt: 'My excerpt',
-		} );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt if property changed without save', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt if content added without save', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'Paragraph' );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should not prompt if changes saved', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		await saveDraft();
-
-		await assertIsDirty( false );
-	} );
-
-	it( 'Should not prompt if changes saved right after typing', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello World' );
-
-		await saveDraft();
-
-		await assertIsDirty( false );
-	} );
-
-	it( 'Should not save if all changes saved', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		await saveDraft();
-
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		expect( hadInterceptedSave ).toBe( false );
-	} );
-
-	it( 'Should prompt if save failed', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		await page.setOfflineMode( true );
-
-		await Promise.all( [
-			// Keyboard shortcut Ctrl+S save.
-			pressKeyWithModifier( 'primary', 'S' ),
-
-			// Ensure save update fails and presents button.
-			page.waitForXPath(
-				'//*[contains(@class, "components-notice") and contains(@class, "is-error")]/*[text()="Updating failed. You are probably offline."]'
-			),
-			page.waitForSelector( '.editor-post-save-draft' ),
-		] );
-
-		// Need to disable offline to allow reload.
-		await page.setOfflineMode( false );
-
-		await assertIsDirty( true );
-
-		expect( console ).toHaveErroredWith(
-			'Failed to load resource: net::ERR_INTERNET_DISCONNECTED'
-		);
-	} );
-
-	it( 'Should prompt if changes and save is in-flight', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		// Hold the posts request so we don't deal with race conditions of the
-		// save completing early. Other requests should be allowed to continue,
-		// for example the page reload test.
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		await assertIsDirty( true );
-
-		await releaseSaveIntercept();
-	} );
-
-	it( 'Should prompt if changes made while save is in-flight', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		// Hold the posts request so we don't deal with race conditions of the
-		// save completing early. Other requests should be allowed to continue,
-		// for example the page reload test.
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		await canvas().type( '.editor-post-title__input', '!' );
-		await page.waitForSelector( '.editor-post-save-draft' );
-
-		await releaseSaveIntercept();
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt if property changes made while save is in-flight, and save completes', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		// Hold the posts request so we don't deal with race conditions of the
-		// save completing early.
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		// Start this check immediately after save since dirtying the post will
-		// remove the "Saved" with the Save button.
-		const savedPromise = page.waitForSelector(
-			'.editor-post-saved-state.is-saved'
-		);
-
-		// Dirty post while save is in-flight.
-		await canvas().type( '.editor-post-title__input', '!' );
-
-		// Allow save to complete. Disabling interception flushes pending.
-		await Promise.all( [ savedPromise, releaseSaveIntercept() ] );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt if block revision is made while save is in-flight, and save completes', async () => {
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		// Hold the posts request so we don't deal with race conditions of the
-		// save completing early.
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		// Start this check immediately after save since dirtying the post will
-		// remove the "Saved" with the Save button.
-		const savedPromise = page.waitForSelector(
-			'.editor-post-saved-state.is-saved'
-		);
-
-		await clickBlockAppender();
-		await page.keyboard.type( 'Paragraph' );
-
-		// Allow save to complete. Disabling interception flushes pending.
-		await Promise.all( [ savedPromise, releaseSaveIntercept() ] );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'should save posts without titles and persist and overwrite the auto draft title', async () => {
-		// Enter content.
-		await clickBlockAppender();
-		await page.keyboard.type( 'Paragraph' );
-
-		// Save.
-		await saveDraft();
-
-		// Verify that the title is empty.
-		const title = await canvas().$eval(
-			'.editor-post-title__input',
-			// Trim padding non-breaking space.
-			( element ) => element.textContent.trim()
-		);
-		expect( title ).toBe( '' );
-
-		// Verify that the post is not dirty.
-		await assertIsDirty( false );
-	} );
-
-	it( 'should not prompt to confirm unsaved changes when trashing an existing post', async () => {
-		// Enter title.
-		await canvas().type( '.editor-post-title__input', 'Hello World' );
-
-		// Save.
-		await saveDraft();
-		const postId = await page.evaluate( () =>
-			window.wp.data.select( 'core/editor' ).getCurrentPostId()
-		);
-
-		// Trash post.
-		await openDocumentSettingsSidebar();
-		await page.click( '.editor-post-trash.components-button' );
-		await page.click( '.components-confirm-dialog .is-primary' );
-
-		await Promise.all( [
-			// Wait for "Saved" to confirm save complete.
-			await page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-
-			// Make sure redirection happens.
-			await page.waitForNavigation(),
-		] );
-
-		expect(
-			isCurrentURL(
-				'/wp-admin/edit.php',
-				`post_type=post&ids=${ postId }`
-			)
-		).toBe( true );
-	} );
-
-	it( 'consecutive edits to the same attribute should mark the post as dirty after a save', async () => {
-		// Open the sidebar block settings.
-		await openDocumentSettingsSidebar();
-
-		const blockInspectorTab = await page.waitForXPath(
-			'//button[@role="tab"][contains(text(), "Block")]'
-		);
-		await blockInspectorTab.click();
-
-		// Insert a paragraph.
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello, World!' );
-
-		// Save and wait till the post is clean.
-		await Promise.all( [
-			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-			pressKeyWithModifier( 'primary', 'S' ),
-		] );
-
-		// Change the paragraph's `drop cap`.
-		await canvas().click( '[data-type="core/paragraph"]' );
-
-		await openTypographyToolsPanelMenu();
-		await page.click( 'button[aria-label="Show Drop cap"]' );
-
-		const [ dropCapToggle ] = await page.$x(
-			"//label[contains(text(), 'Drop cap')]"
-		);
-		await dropCapToggle.click();
-		await canvas().click( '[data-type="core/paragraph"]' );
-
-		// Check that the post is dirty.
-		await page.waitForSelector( '.editor-post-save-draft' );
-
-		// Save and wait till the post is clean.
-		await Promise.all( [
-			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-			pressKeyWithModifier( 'primary', 'S' ),
-		] );
-
-		// Change the paragraph's `drop cap` again.
-		await canvas().click( '[data-type="core/paragraph"]' );
-		await dropCapToggle.click();
-
-		// Check that the post is dirty.
-		await page.waitForSelector( '.editor-post-save-draft' );
-	} );
-} );