Site Editor: Add e2e tests for templates export (#28324)

Add end-to-end tests for site editor templates export functionality.

packages/e2e-tests/experimental-features.js

@@ -100,3 +100,33 @@ export const navigationPanel = {
 		await item.click();
 	},
 };
+
+export const siteEditor = {
+	async visit() {
+		const query = addQueryArgs( '', {
+			page: 'gutenberg-edit-site',
+		} ).slice( 1 );
+		await visitAdminPage( 'admin.php', query );
+		await page.waitForSelector( '.edit-site-visual-editor iframe' );
+	},
+
+	async toggleMoreMenu() {
+		// eslint-disable-next-line jest/no-standalone-expect
+		await expect( page ).toClick(
+			'.edit-site-more-menu [aria-label="More tools & options"]'
+		);
+	},
+
+	async clickOnMoreMenuItem( buttonLabel ) {
+		await this.toggleMoreMenu();
+		const moreMenuContainerSelector =
+			'//*[contains(concat(" ", @class, " "), " edit-site-more-menu__content ")]';
+		const elementToClick = (
+			await page.$x(
+				`${ moreMenuContainerSelector }//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ buttonLabel }")]`
+			)
+		 )[ 0 ];
+
+		await elementToClick.click();
+	},
+};

packages/e2e-tests/specs/experiments/multi-entity-editing.test.js

@@ -3,27 +3,17 @@
  */
 import {
 	insertBlock,
-	visitAdminPage,
 	createNewPost,
 	publishPost,
 	trashAllPosts,
 	activateTheme,
 	canvas,
 } from '@wordpress/e2e-test-utils';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import { navigationPanel } from '../../experimental-features';
-
-const visitSiteEditor = async () => {
-	const query = addQueryArgs( '', {
-		page: 'gutenberg-edit-site',
-	} ).slice( 1 );
-	await visitAdminPage( 'admin.php', query );
-	await page.waitForSelector( '.edit-site-visual-editor iframe' );
-};
+import { navigationPanel, siteEditor } from '../../experimental-features';
 
 const clickTemplateItem = async ( menus, itemName ) => {
 	await navigationPanel.open();
@@ -138,12 +128,12 @@ describe( 'Multi-entity editor states', () => {
 	} );
 
 	it( 'should not display any dirty entities when loading the site editor', async () => {
-		await visitSiteEditor();
+		await siteEditor.visit();
 		expect( await openEntitySavePanel() ).toBe( false );
 	} );
 
 	it( 'should not dirty an entity by switching to it in the template dropdown', async () => {
-		await visitSiteEditor();
+		await siteEditor.visit();
 		await clickTemplateItem( 'Template Parts', 'header' );
 		await page.waitForFunction( () =>
 			Array.from( window.frames ).find(
@@ -194,7 +184,7 @@ describe( 'Multi-entity editor states', () => {
 				true
 			);
 			await saveAllEntities();
-			await visitSiteEditor();
+			await siteEditor.visit();
 
 			// Wait for site editor to load.
 			await canvas().waitForSelector(

packages/e2e-tests/specs/experiments/multi-entity-saving.test.js

@@ -5,17 +5,15 @@ import {
 	createNewPost,
 	insertBlock,
 	publishPost,
-	visitAdminPage,
 	trashAllPosts,
 	activateTheme,
 	canvas,
 } from '@wordpress/e2e-test-utils';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import { navigationPanel } from '../../experimental-features';
+import { navigationPanel, siteEditor } from '../../experimental-features';
 
 describe( 'Multi-entity save flow', () => {
 	// Selectors - usable between Post/Site editors.
@@ -186,10 +184,7 @@ describe( 'Multi-entity save flow', () => {
 
 		it( 'Save flow should work as expected', async () => {
 			// Navigate to site editor.
-			const query = addQueryArgs( '', {
-				page: 'gutenberg-edit-site',
-			} ).slice( 1 );
-			await visitAdminPage( 'admin.php', query );
+			await siteEditor.visit();
 
 			// Ensure we are on 'front-page' demo template.
 			await navigationPanel.open();

packages/e2e-tests/specs/experiments/site-editor-export.test.js

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+
+/**
+ * WordPress dependencies
+ */
+import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { siteEditor } from '../../experimental-features';
+
+async function waitForFileExists( filePath, timeout = 10000 ) {
+	const start = Date.now();
+	while ( ! fs.existsSync( filePath ) ) {
+		// Puppeteer doesn't have an API for managing file downloads.
+		// We are using `waitForTimeout` to add delays between check of file existence.
+		// eslint-disable-next-line no-restricted-syntax
+		await page.waitForTimeout( 1000 );
+		if ( Date.now() - start > timeout ) {
+			throw Error( 'waitForFileExists timeout' );
+		}
+	}
+}
+
+describe( 'Site Editor Templates Export', () => {
+	beforeAll( async () => {
+		await activateTheme( 'tt1-blocks' );
+		await trashAllPosts( 'wp_template' );
+		await trashAllPosts( 'wp_template_part' );
+	} );
+
+	afterAll( async () => {
+		await activateTheme( 'twentytwentyone' );
+	} );
+
+	beforeEach( async () => {
+		await siteEditor.visit();
+	} );
+
+	it( 'clicking export should download edit-site-export.zip file', async () => {
+		const directory = fs.mkdtempSync(
+			path.join( os.tmpdir(), 'test-edit-site-export-' )
+		);
+		await page._client.send( 'Page.setDownloadBehavior', {
+			behavior: 'allow',
+			downloadPath: directory,
+		} );
+
+		await siteEditor.clickOnMoreMenuItem( 'Export' );
+		const filePath = path.join( directory, 'edit-site-export.zip' );
+		await waitForFileExists( filePath );
+		expect( fs.existsSync( filePath ) ).toBe( true );
+		fs.unlinkSync( filePath );
+	} );
+} );

packages/e2e-tests/specs/experiments/template-part.test.js

@@ -5,20 +5,18 @@ import {
 	createNewPost,
 	insertBlock,
 	disablePrePublishChecks,
-	visitAdminPage,
 	trashAllPosts,
 	activateTheme,
 	getAllBlocks,
 	selectBlockByClientId,
 	clickBlockToolbarButton,
 	canvas,
 } from '@wordpress/e2e-test-utils';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import { navigationPanel } from '../../experimental-features';
+import { navigationPanel, siteEditor } from '../../experimental-features';
 
 describe( 'Template Part', () => {
 	beforeAll( async () => {
@@ -34,13 +32,7 @@ describe( 'Template Part', () => {
 
 	describe( 'Template part block', () => {
 		beforeEach( async () => {
-			await visitAdminPage(
-				'admin.php',
-				addQueryArgs( '', {
-					page: 'gutenberg-edit-site',
-				} ).slice( 1 )
-			);
-			await page.waitForSelector( '.edit-site-visual-editor iframe' );
+			await siteEditor.visit();
 		} );
 
 		async function updateHeader( content ) {

packages/e2e-tests/specs/performance/site-editor.test.js

@@ -9,11 +9,14 @@ import { writeFileSync } from 'fs';
  */
 import {
 	trashAllPosts,
-	visitAdminPage,
 	activateTheme,
 	canvas,
 } from '@wordpress/e2e-test-utils';
-import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { siteEditor } from '../../experimental-features';
 
 jest.setTimeout( 1000000 );
 
@@ -39,12 +42,7 @@ describe( 'Site Editor Performance', () => {
 			inserterHover: [],
 		};
 
-		await visitAdminPage(
-			'admin.php',
-			addQueryArgs( '', {
-				page: 'gutenberg-edit-site',
-			} ).slice( 1 )
-		);
+		await siteEditor.visit();
 
 		let i = 3;