Add e2e tests for the format API (WordPress#11948)

* Add e2e tests for the format API

* Fixes some whitespace issues

* Update format-api.test.js

* Add missing dependencies to the script registration

* Add snapshot to test

* Check for custom button, remove extra lines

* Change modifier keys used

From WordPress#11855

test/e2e/specs/__snapshots__/format-api.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Using Format API Clicking the control wraps the selected text properly with HTML code 1`] = `
+"<!-- wp:paragraph -->
+<p><a href=\\"#test\\" class=\\"my-plugin-link\\">First paragraph</a></p>
+<!-- /wp:paragraph -->"
+`;

test/e2e/specs/format-api.test.js

@@ -0,0 +1,41 @@
+/**
+ * Internal dependencies
+ */
+import {
+	clickBlockAppender,
+	getEditedPostContent,
+	newPost,
+	pressWithModifier,
+} from '../support/utils';
+import { activatePlugin, deactivatePlugin } from '../support/plugins';
+
+describe( 'Using Format API', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'gutenberg-test-format-api' );
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-format-api' );
+	} );
+
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	it( 'Format toolbar is present in a paragraph block', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'First paragraph' );
+		await page.mouse.move( 200, 300, { steps: 10 } );
+		expect( await page.$( '[aria-label="Custom Link"]' ) ).not.toBeNull();
+	} );
+
+	it( 'Clicking the control wraps the selected text properly with HTML code', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'First paragraph' );
+		await pressWithModifier( 'shiftAlt', 'ArrowLeft' );
+		await pressWithModifier( 'primary', 'A' );
+		await page.mouse.move( 200, 300, { steps: 10 } );
+		await page.click( '[aria-label="Custom Link"]' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );

test/e2e/test-plugins/format-api.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Format API
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-format-api
+ */
+
+/**
+ * Enqueue plugin JavaScript for the editor
+ */
+function gutenberg_test_format_api_scripts() {
+	wp_enqueue_script(
+		'gutenberg-test-format-api',
+		plugins_url( 'format-api/index.js', __FILE__ ),
+		array( 'wp-editor', 'wp-element', 'wp-rich-text' ),
+		filemtime( plugin_dir_path( __FILE__ ) . 'format-api/index.js' ),
+		true
+	);
+}
+
+add_action( 'enqueue_block_editor_assets', 'gutenberg_test_format_api_scripts' );

test/e2e/test-plugins/format-api/index.js

@@ -0,0 +1,33 @@
+( function() {
+	wp.richText.registerFormatType(
+		'my-plugin/link', {
+			title: 'Custom Link',
+			tagName: 'a',
+			attributes: {
+				url: 'href',
+			},
+			className: 'my-plugin-link',
+			edit: function( props ) {
+				return wp.element.createElement(
+					wp.editor.RichTextToolbarButton, {
+						icon: 'admin-links',
+						title: 'Custom Link',
+						onClick: function() {
+							props.onChange(
+								wp.richText.toggleFormat(
+									props.value, {
+										type: 'my-plugin/link',
+										attributes: {
+											url: '#test',
+										}
+									}
+								)
+							);
+						},
+						isActive: props.isActive,
+					}
+				);
+			}
+		}
+	);
+} )();