Add an e2e test for blocks with meta attributes (#13095)

test/e2e/specs/__snapshots__/meta-attribute-block.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Block with a meta attribute Should persist the meta attribute properly 1`] = `"<!-- wp:test/test-meta-attribute-block /-->"`;

test/e2e/specs/meta-attribute-block.test.js

@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import {
+	newPost,
+	getEditedPostContent,
+	saveDraft,
+	insertBlock,
+} from '../support/utils';
+import { activatePlugin, deactivatePlugin } from '../support/plugins';
+
+describe( 'Block with a meta attribute', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'gutenberg-test-meta-attribute-block' );
+	} );
+
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-meta-attribute-block' );
+	} );
+
+	it( 'Should persist the meta attribute properly', async () => {
+		await insertBlock( 'Test Meta Attribute Block' );
+		await page.keyboard.type( 'Meta Value' );
+		await saveDraft();
+		await page.reload();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+		const persistedValue = await page.evaluate( () => document.querySelector( '.my-meta-input' ).value );
+		expect( persistedValue ).toBe( 'Meta Value' );
+	} );
+
+	it( 'Should use the same value in all the blocks', async () => {
+		await insertBlock( 'Test Meta Attribute Block' );
+		await insertBlock( 'Test Meta Attribute Block' );
+		await insertBlock( 'Test Meta Attribute Block' );
+		await page.keyboard.type( 'Meta Value' );
+
+		const persistedValues = await page.evaluate( () => Array.from( document.querySelectorAll( '.my-meta-input' ) ).map( ( input ) => input.value ) );
+		persistedValues.forEach( ( val ) => {
+			expect( val ).toBe( 'Meta Value' );
+		} );
+	} );
+} );

test/e2e/test-plugins/meta-attribute-block.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Meta Attribute Block
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-meta-attribute-block
+ */
+
+/**
+ * Registers a custom script and a custom meta for the plugin.
+ */
+function init_test_meta_attribute_block_plugin() {
+	wp_enqueue_script(
+		'gutenberg-test-meta-attribute-block',
+		plugins_url( 'meta-attribute-block/index.js', __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-element',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'meta-attribute-block/index.js' ),
+		true
+	);
+
+	register_meta(
+		'post',
+		'my_meta',
+		array(
+			'show_in_rest' => true,
+			'single'       => true,
+			'type'         => 'string',
+		)
+	);
+}
+
+add_action( 'init', 'init_test_meta_attribute_block_plugin' );

test/e2e/test-plugins/meta-attribute-block/index.js

@@ -0,0 +1,35 @@
+( function() {
+	var registerBlockType = wp.blocks.registerBlockType;
+	var el = wp.element.createElement;
+
+	registerBlockType( 'test/test-meta-attribute-block', {
+		title: 'Test Meta Attribute Block',
+		icon: 'star',
+		category: 'common',
+
+		attributes: {
+			content: {
+				type: "string",
+				source: "meta",
+				meta: "my_meta",
+			},
+		},
+
+		edit: function( props ) {
+			return el(
+					'input',
+					{
+						className: 'my-meta-input',
+						value: props.attributes.content,
+						onChange: function( event ) {
+							props.setAttributes( { content: event.target.value } );
+						},
+					}
+			);
+		},
+
+		save: function() {
+			return null;
+		},
+	} );
+} )();