Testing: Add automated testing for Format API

[gziolo]

In #11110 we reported a bunch of missing unit test for the new Format API. @Pixelrobin opened #11562 which is going to resolve this issue.

We also miss end to end tests which would help to prevent future regressions and ensure all external plugins can safely use provided API. @iseulde shared an example for the custom format registration in #11488. We can reuse this code to build a suite of e2e tests for Format API. Code looks this way:

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

In the past we built a few custom plugins which are used with e2e tests and cover different aspects of extensibility:

1. https://github.com/WordPress/gutenberg/blob/master/test/e2e/test-plugins/hooks-api/
2. https://github.com/WordPress/gutenberg/tree/master/test/e2e/test-plugins/plugins-api
3. https://github.com/WordPress/gutenberg/blob/master/test/e2e/test-plugins/block-icons/

They also have the corresponding test suites:

1. https://github.com/WordPress/gutenberg/blob/master/test/e2e/specs/hooks-api.test.js
2. https://github.com/WordPress/gutenberg/blob/master/test/e2e/specs/plugins-api.test.js
3. https://github.com/WordPress/gutenberg/blob/master/test/e2e/specs/block-icons.test.js

We should create a new plugin called format-api which uses code shared earlier, registered in PHP file. This plugin should be activated only inside a test suite called format-api.test.js. The tests themselves should ensure:

1. The control is present when using RichText with one of the block types which uses it (paragraph, quote, list or anything else).
2. Clicking on the control wraps the selected text properly with a proper HTML code.

[danielbachhuber]

@raquelmsmith Something you'd want to work on?

[raquelmsmith]

Yep, I can take a look early next week 👍

[zhengjianhong001]

cool..