Refine Your Playgrounds overlay for autosaves

Author: adamziel

packages/playground/website/playwright/e2e/blueprints.spec.ts

@@ -114,12 +114,13 @@ test('?blueprint-url=... should work with simple blueprints', async ({
 		browserName === 'webkit',
 		'This test is flaky in WebKit. It seems like a GitHub CI issue rather than an actual flakiness since it is reliable locally.'
 	);
-	await website.goto('/');
-	const websiteUrl = page.url();
-	const blueprintUrl = encodeURIComponent(
-		`${websiteUrl}test-fixtures/blueprint/blueprint-simple.json`
+	await website.goto('./?storage=temp');
+	const websiteUrl = new URL(
+		'test-fixtures/blueprint/blueprint-simple.json',
+		page.url()
 	);
-	await website.goto(`/?blueprint-url=${blueprintUrl}`);
+	const blueprintUrl = encodeURIComponent(websiteUrl.href);
+	await website.goto(`./?storage=temp&blueprint-url=${blueprintUrl}`);
 	await expect(wordpress.locator('body')).toContainText(
 		'PREFACE TO PYGMALION'
 	);
@@ -130,11 +131,11 @@ test('?blueprint-url=... should accept data URLs', async ({
 	website,
 	wordpress,
 }) => {
-	await website.goto('/');
+	await website.goto('./?storage=temp');
 	const blueprintUrl = encodeURIComponent(
 		`data:application/json;base64,eyJsYW5kaW5nUGFnZSI6Ii9weWdtYWxpb24udHh0Iiwic3RlcHMiOlt7InN0ZXAiOiJ3cml0ZUZpbGUiLCJwYXRoIjoiL3dvcmRwcmVzcy9weWdtYWxpb24udHh0IiwiZGF0YSI6IlBSRUZBQ0UgVE8gUFlHTUFMSU9OIn1dfQ==`
 	);
-	await website.goto(`/?blueprint-url=${blueprintUrl}`);
+	await website.goto(`./?storage=temp&blueprint-url=${blueprintUrl}`);
 	await expect(wordpress.locator('body')).toContainText(
 		'PREFACE TO PYGMALION'
 	);
@@ -145,12 +146,13 @@ test('?blueprint-url=... should work with ZIP bundles', async ({
 	website,
 	wordpress,
 }) => {
-	await website.goto('/');
-	const websiteUrl = page.url();
-	const blueprintUrl = encodeURIComponent(
-		`${websiteUrl}test-fixtures/blueprint/blueprint.zip`
+	await website.goto('./?storage=temp');
+	const websiteUrl = new URL(
+		'test-fixtures/blueprint/blueprint.zip',
+		page.url()
 	);
-	await website.goto(`/?blueprint-url=${blueprintUrl}`);
+	const blueprintUrl = encodeURIComponent(websiteUrl.href);
+	await website.goto(`./?storage=temp&blueprint-url=${blueprintUrl}`);
 	await expect(wordpress.locator('body')).toContainText(
 		'PREFACE TO PYGMALION'
 	);
@@ -161,12 +163,13 @@ test('?blueprint-url=... should work with JSON blueprints referring bundled reso
 	website,
 	wordpress,
 }) => {
-	await website.goto('/');
-	const websiteUrl = page.url();
-	const blueprintUrl = encodeURIComponent(
-		`${websiteUrl}test-fixtures/blueprint/blueprint-with-bundled-resources.json`
+	await website.goto('./?storage=temp');
+	const websiteUrl = new URL(
+		'test-fixtures/blueprint/blueprint-with-bundled-resources.json',
+		page.url()
 	);
-	await website.goto(`/?blueprint-url=${blueprintUrl}`);
+	const blueprintUrl = encodeURIComponent(websiteUrl.href);
+	await website.goto(`./?storage=temp&blueprint-url=${blueprintUrl}`);
 	await expect(wordpress.locator('body')).toContainText(
 		'PREFACE TO PYGMALION'
 	);

packages/playground/website/playwright/e2e/client-side-media.spec.ts

@@ -68,7 +68,9 @@ test('Post editor should be cross-origin isolated with SharedArrayBuffer availab
 	website,
 	wordpress,
 }) => {
-	await website.goto(`./#${JSON.stringify(clientSideMediaBlueprint)}`);
+	await website.goto(
+		`./?storage=temp#${JSON.stringify(clientSideMediaBlueprint)}`
+	);
 
 	// Wait for the block editor to fully load. The editor header is visible in both
 	// fullscreen and non-fullscreen modes.
@@ -96,7 +98,9 @@ test('Gutenberg should report client-side media processing as enabled', async ({
 	website,
 	wordpress,
 }) => {
-	await website.goto(`./#${JSON.stringify(clientSideMediaBlueprint)}`);
+	await website.goto(
+		`./?storage=temp#${JSON.stringify(clientSideMediaBlueprint)}`
+	);
 
 	await expect(
 		wordpress.locator('.edit-post-header, .editor-header')

packages/playground/website/playwright/e2e/deployment.spec.ts

@@ -15,6 +15,7 @@ const url = new URL(`http://localhost:${port}`);
 // disable auto-login, the old Playground build encounters
 // a boot error.
 url.searchParams.set('login', 'no');
+url.searchParams.set('storage', 'temp');
 // Specify the theme so we can assert against expected default content.
 // This theme is also what the reference screenshots are based on.
 url.searchParams.set('theme', 'twentytwentyfour');

packages/playground/website/playwright/e2e/error-handling.spec.ts

@@ -44,7 +44,7 @@ test('should show download error modal when a resource download fails', async ({
 	// fetches the zip from downloads.wordpress.org via the CORS
 	// proxy, triggering the resource-download-failed error through
 	// the normal pipeline.
-	await page.goto('./?plugin=hello-dolly');
+	await page.goto('./?storage=temp&plugin=hello-dolly');
 
 	const title = page.getByText('Could not download required files');
 	await expect(title).toBeVisible();

packages/playground/website/playwright/e2e/opfs.spec.ts

@@ -96,7 +96,8 @@ test('should switch between sites', async ({ website, browserName }) => {
 	await website.ensureSiteManagerIsOpen();
 
 	// Save the temporary site using the modal
-	await saveSiteViaModal(website.page);
+	const firstSiteName = 'Switching Test Site';
+	await saveSiteViaModal(website.page, { customName: firstSiteName });
 
 	await expect(website.page.getByLabel('Playground title')).not.toContainText(
 		'Unsaved Playground',
@@ -105,19 +106,46 @@ test('should switch between sites', async ({ website, browserName }) => {
 			timeout: 90000,
 		}
 	);
+	await expect(website.page.getByLabel('Playground title')).toContainText(
+		firstSiteName
+	);
 
 	// Open the saved playgrounds overlay to switch sites
 	await website.openSavedPlaygroundsOverlay();
 
-	// Click on Temporary Playground in the overlay's site list
+	// Start another saved Playground, then switch back to the first one.
+	await website.page.getByRole('button', { name: 'New Playground' }).click();
+	await website.waitForNestedIframes();
+	await website.ensureSiteManagerIsOpen();
+
+	await expect(website.page.getByLabel('Playground title')).not.toContainText(
+		firstSiteName
+	);
+	await expect(
+		website.page.getByText('Autosaved in this browser')
+	).toBeVisible({ timeout: 120000 });
+	await expect
+		.poll(() =>
+			website.page.evaluate(() => {
+				const activeSite = (window as any).playgroundSites
+					.list()
+					.find((site: any) => site.isActive);
+				return activeSite
+					? `${activeSite.storage}:${activeSite.persistence}`
+					: null;
+			})
+		)
+		.toBe('opfs:autosave');
+
+	await website.openSavedPlaygroundsOverlay();
 	await website.page
 		.locator('[class*="siteRowContent"]')
-		.filter({ hasText: 'Unsaved Playground' })
+		.filter({ hasText: firstSiteName })
 		.click();
+	await website.ensureSiteManagerIsOpen();
 
-	// The overlay closes and site manager opens with the selected site
 	await expect(website.page.getByLabel('Playground title')).toContainText(
-		'Unsaved Playground'
+		firstSiteName
 	);
 });
 
@@ -169,11 +197,9 @@ test('should preserve PHP constants when saving a temporary site to OPFS', async
 	// Open the saved playgrounds overlay to switch sites
 	await website.openSavedPlaygroundsOverlay();
 
-	// Switch to Temporary Playground
-	await website.page
-		.locator('[class*="siteRowContent"]')
-		.filter({ hasText: 'Unsaved Playground' })
-		.click();
+	// Create another Playground, then switch back.
+	await website.page.getByRole('button', { name: 'New Playground' }).click();
+	await website.waitForNestedIframes();
 
 	// Open the overlay again to switch back to the stored site
 	await website.openSavedPlaygroundsOverlay();
@@ -471,7 +497,7 @@ test('should display OPFS storage option as selected by default', async ({
 	await dialog.getByRole('button', { name: 'Cancel' }).click();
 });
 
-test('should import ZIP into temporary site when a saved site exists', async ({
+test('should import ZIP into a new saved site when a saved site exists', async ({
 	website,
 	wordpress,
 	browserName,
@@ -536,12 +562,14 @@ test('should import ZIP into temporary site when a saved site exists', async ({
 		buffer: zipBuffer,
 	});
 
-	// The import should switch us to a temporary playground.
-	// Wait for the site title to show "Temporary Playground"
-	await expect(website.page.getByLabel('Playground title')).toContainText(
-		'Unsaved Playground',
+	// The import should switch us to a new saved Playground by default.
+	await expect(website.page.getByLabel('Playground title')).not.toContainText(
+		savedSiteName,
 		{ timeout: 30000 }
 	);
+	await expect(website.page.getByLabel('Playground title')).not.toContainText(
+		'Unsaved Playground'
+	);
 
 	// Now verify the saved site still has the original content.
 	// Open the saved playgrounds overlay and switch to the saved site
@@ -551,16 +579,17 @@ test('should import ZIP into temporary site when a saved site exists', async ({
 		.locator('[class*="siteRowContent"]')
 		.filter({ hasText: savedSiteName })
 		.click();
+	await website.ensureSiteManagerIsOpen();
 
 	// Wait for the saved site to load - this verifies the saved site wasn't overwritten
-	// by the ZIP import (which went to a temporary site instead)
+	// by the ZIP import (which went to a new saved site instead)
 	await expect(website.page.getByLabel('Playground title')).toContainText(
 		savedSiteName,
 		{ timeout: 30000 }
 	);
 });
 
-test('should create temporary site when importing ZIP while on a saved site with no existing temporary site', async ({
+test('should create a saved site when importing ZIP while on a saved site with no existing temporary site', async ({
 	website,
 	wordpress,
 	browserName,
@@ -618,14 +647,10 @@ test('should create temporary site when importing ZIP while on a saved site with
 	// Open the saved playgrounds overlay
 	await website.openSavedPlaygroundsOverlay();
 
-	// Verify there's no "Temporary Playground" in the list initially
-	// (the temporary site row should show but clicking it would create one)
-	const tempPlaygroundRow = website.page
-		.locator('[class*="siteRowContent"]')
-		.filter({ hasText: 'Unsaved Playground' });
-
-	// The row exists but it's for creating a new temporary playground
-	await expect(tempPlaygroundRow).toBeVisible();
+	const importZipButton = website.page.getByRole('button', {
+		name: 'Import a .zip',
+	});
+	await expect(importZipButton).toBeVisible();
 
 	// Create a test ZIP
 	const importedMarker = 'FRESH_IMPORT_MARKER_BBBBB';
@@ -648,12 +673,14 @@ test('should create temporary site when importing ZIP while on a saved site with
 		buffer: zipBuffer,
 	});
 
-	// The import should trigger creation of a new temporary site.
-	// Wait for the site title to show "Temporary Playground"
-	await expect(website.page.getByLabel('Playground title')).toContainText(
-		'Unsaved Playground',
+	// The import should trigger creation of a new saved site by default.
+	await expect(website.page.getByLabel('Playground title')).not.toContainText(
+		savedSiteName,
 		{ timeout: 30000 }
 	);
+	await expect(website.page.getByLabel('Playground title')).not.toContainText(
+		'Unsaved Playground'
+	);
 
 	// Verify the saved site is still intact by switching to it
 	await website.openSavedPlaygroundsOverlay();
@@ -662,9 +689,10 @@ test('should create temporary site when importing ZIP while on a saved site with
 		.locator('[class*="siteRowContent"]')
 		.filter({ hasText: savedSiteName })
 		.click();
+	await website.ensureSiteManagerIsOpen();
 
 	// Wait for the saved site to load - this verifies the saved site wasn't overwritten
-	// by the ZIP import (which went to a temporary site instead)
+	// by the ZIP import (which went to a new saved site instead)
 	await expect(website.page.getByLabel('Playground title')).toContainText(
 		savedSiteName,
 		{ timeout: 30000 }

packages/playground/website/playwright/e2e/shutdown-loopback-prefetch.spec.ts

@@ -72,7 +72,7 @@ add_action( 'shutdown', function() {
 	// Navigate without waiting for nested iframes. We only need the boot
 	// process to run prefetchUpdateChecks(); we don't need wp-admin to render.
 	await website.page.goto(
-		`./?networking=yes&url=/wp-admin/#${JSON.stringify(blueprint)}`
+		`./?storage=temp&networking=yes&url=/wp-admin/#${JSON.stringify(blueprint)}`
 	);
 
 	// Wait for the playground client to be available (set before prefetch runs).
@@ -114,7 +114,8 @@ echo (string) get_option('${optName}', '');
 	expect(parsed.kind).toBe('wp_error');
 	if (parsed.kind === 'wp_error') {
 		expect(parsed.code).toBe('http_request_block');
-		expect(parsed.message).toBe('Loopback requests are not to be pre-fetched');
+		expect(parsed.message).toBe(
+			'Loopback requests are not to be pre-fetched'
+		);
 	}
 });
-