From a84c037a0e62a344005054102544c34d7b970a6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?=
 <4710635+ellatrix@users.noreply.github.com>
Date: Fri, 10 Sep 2021 20:51:23 +0300
Subject: [PATCH] Iframed editor: add jQuery integration e2e test (#33007)

---
 packages/e2e-tests/plugins/iframed-block.php  | 46 +++++++++++++++
 .../plugins/iframed-block/block.json          | 16 ++++++
 .../plugins/iframed-block/editor.css          |  6 ++
 .../e2e-tests/plugins/iframed-block/editor.js | 18 ++++++
 .../plugins/iframed-block/jquery.test.js      |  7 +++
 .../e2e-tests/plugins/iframed-block/script.js |  7 +++
 .../e2e-tests/plugins/iframed-block/style.css |  9 +++
 .../__snapshots__/iframed-block.test.js.snap  |  7 +++
 .../editor/plugins/iframed-block.test.js      | 57 +++++++++++++++++++
 9 files changed, 173 insertions(+)
 create mode 100644 packages/e2e-tests/plugins/iframed-block.php
 create mode 100644 packages/e2e-tests/plugins/iframed-block/block.json
 create mode 100644 packages/e2e-tests/plugins/iframed-block/editor.css
 create mode 100644 packages/e2e-tests/plugins/iframed-block/editor.js
 create mode 100644 packages/e2e-tests/plugins/iframed-block/jquery.test.js
 create mode 100644 packages/e2e-tests/plugins/iframed-block/script.js
 create mode 100644 packages/e2e-tests/plugins/iframed-block/style.css
 create mode 100644 packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-block.test.js.snap
 create mode 100644 packages/e2e-tests/specs/editor/plugins/iframed-block.test.js

diff --git a/packages/e2e-tests/plugins/iframed-block.php b/packages/e2e-tests/plugins/iframed-block.php
new file mode 100644
index 00000000000000..29e71fa75a2ec8
--- /dev/null
+++ b/packages/e2e-tests/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' );
+	}
+);
diff --git a/packages/e2e-tests/plugins/iframed-block/block.json b/packages/e2e-tests/plugins/iframed-block/block.json
new file mode 100644
index 00000000000000..f1110534e27dc1
--- /dev/null
+++ b/packages/e2e-tests/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"
+}
diff --git a/packages/e2e-tests/plugins/iframed-block/editor.css b/packages/e2e-tests/plugins/iframed-block/editor.css
new file mode 100644
index 00000000000000..53e65acc3579bb
--- /dev/null
+++ b/packages/e2e-tests/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;
+}
diff --git a/packages/e2e-tests/plugins/iframed-block/editor.js b/packages/e2e-tests/plugins/iframed-block/editor.js
new file mode 100644
index 00000000000000..c56a678926456d
--- /dev/null
+++ b/packages/e2e-tests/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 );
diff --git a/packages/e2e-tests/plugins/iframed-block/jquery.test.js b/packages/e2e-tests/plugins/iframed-block/jquery.test.js
new file mode 100644
index 00000000000000..901a6f1281927b
--- /dev/null
+++ b/packages/e2e-tests/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 );
diff --git a/packages/e2e-tests/plugins/iframed-block/script.js b/packages/e2e-tests/plugins/iframed-block/script.js
new file mode 100644
index 00000000000000..f8872070f682b7
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-block/script.js
@@ -0,0 +1,7 @@
+( ( win ) => {
+	const { jQuery: $ } = win;
+	win.addEventListener( 'DOMContentLoaded', () => {
+		$( '.wp-block-test-iframed-block' ).test();
+	} );
+} )( window );
+
diff --git a/packages/e2e-tests/plugins/iframed-block/style.css b/packages/e2e-tests/plugins/iframed-block/style.css
new file mode 100644
index 00000000000000..42708ad70cbadb
--- /dev/null
+++ b/packages/e2e-tests/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;
+}
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-block.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-block.test.js.snap
new file mode 100644
index 00000000000000..a4efcd222188ef
--- /dev/null
+++ b/packages/e2e-tests/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 -->"
+`;
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-block.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-block.test.js
new file mode 100644
index 00000000000000..ba3255a83a3300
--- /dev/null
+++ b/packages/e2e-tests/specs/editor/plugins/iframed-block.test.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	insertBlock,
+	getEditedPostContent,
+	openDocumentSettingsSidebar,
+	clickButton,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'changing image size', () => {
+	beforeEach( async () => {
+		await activatePlugin( 'gutenberg-test-iframed-block' );
+		await createNewPost( { postType: 'page' } );
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin( 'gutenberg-test-iframed-block' );
+	} );
+
+	it( 'should load script and dependencies in iframe', async () => {
+		await insertBlock( 'Iframed Block' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.waitForSelector( '.wp-block-test-iframed-block' );
+		const text = await page.evaluate( () => {
+			return document.querySelector( '.wp-block-test-iframed-block' )
+				.innerText;
+		} );
+
+		expect( text ).toBe( 'Iframed Block (set with jQuery)' );
+
+		await openDocumentSettingsSidebar();
+		await clickButton( 'Page' );
+		await clickButton( 'Template' );
+		await clickButton( 'New' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.type( 'Iframed Test' );
+		await clickButton( 'Create' );
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+
+		const iframedText = await canvas().evaluate( () => {
+			return document.querySelector( '.wp-block-test-iframed-block' )
+				.innerText;
+		} );
+
+		// Expect the script to load in the iframe, which replaces the block
+		// text.
+		expect( iframedText ).toBe( 'Iframed Block (set with jQuery)' );
+	} );
+} );