Iframed editor: add jQuery integration e2e test (#33007)

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' );
+	}
+);

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"
+}

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;
+}

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 );

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 );

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 );
+

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;
+}

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 -->"
+`;

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)' );
+	} );
+} );