Block Directory: Add end 2 end tests. (#20023)

* Add empty block-directory e2e test file.

* Rough in a test that is throwing async issues.

* Add test for empty results and adding block.

* Change button from isDefault -> isSecondary which is breaking test.

* Fix a typo in a comment.

* Lint the test files based on the new linter.

* Change the url because its no longer being encoded.

* Appropriately name the response functions.

* Try clearing the mock responses after each test for Travis CI.

* Add some logging to test travis CI.

* Change the urls to be an array to see if it will pass Travis CI.

* Support both urls to test travis CI.

* Add some more logging.

* More logging to debug travis

* Make sure the experiment is turned on.

* Depending on the environment the urls can be different.

* Update tests to reflect changes in core.

* Add console.logs to debug integration server test errors.

* Remove the console logs from the e2e tests.

* Move the test & snapshot to the experiments folder.

* Update mock variables to be uppercase.

* Move mock responses above the tests.

* Update packages/e2e-tests/specs/experiments/block-directory-add.test.js

Add a delay before checking the post content for reliability.

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>

* Remove unused function.

* Switch json responses to used export function.

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>

packages/block-directory/src/components/downloadable-block-header/index.js

@@ -44,7 +44,7 @@ function DownloadableBlockHeader( {
 				<BlockRatings rating={ rating } ratingCount={ ratingCount } />
 			</div>
 			<Button
-				isDefault
+				isSecondary
 				onClick={ ( event ) => {
 					event.preventDefault();
 					onClick();

packages/e2e-tests/specs/experiments/__snapshots__/block-directory-add.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`adding blocks from block directory Should be able to add (the first) block. 1`] = `"<!-- wp:block-directory-test-block/main-block /-->"`;

packages/e2e-tests/specs/experiments/block-directory-add.test.js

@@ -0,0 +1,166 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	searchForBlock,
+	setUpResponseMocking,
+	getEditedPostContent,
+	createJSONResponse,
+} from '@wordpress/e2e-test-utils';
+/**
+ * Internal dependencies
+ */
+import { enableExperimentalFeatures } from '../../experimental-features';
+
+// Urls to mock
+const SEARCH_URLS = [
+	'/__experimental/block-directory/search',
+	`rest_route=${ encodeURIComponent(
+		'/__experimental/block-directory/search'
+	) }`,
+];
+
+const INSTALL_URLS = [
+	'/__experimental/block-directory/install',
+	`rest_route=${ encodeURIComponent(
+		'/__experimental/block-directory/install'
+	) }`,
+];
+
+// Example Blocks
+const MOCK_BLOCK1 = {
+	name: 'block-directory-test-block/main-block',
+	title: 'Block Directory Test Block',
+	description: 'This plugin is useful for the block.',
+	id: 'block-directory-test-block',
+	rating: 0,
+	rating_count: 0,
+	active_installs: 0,
+	author_block_rating: 0,
+	author_block_count: 1,
+	author: 'No Author',
+	icon: 'block-default',
+	assets: [
+		'fake_url.com/block.js', // we will mock this
+	],
+	humanized_updated: '5 months ago',
+};
+
+const MOCK_BLOCK2 = {
+	...MOCK_BLOCK1,
+	name: 'block-directory-test-block/secondary-block',
+	title: 'Block Directory Test Block - Pt Deux',
+	id: 'block-directory-test-secondary-block',
+};
+
+// Block that will be registered
+const block = `( function() {
+	var registerBlockType = wp.blocks.registerBlockType;
+	var el = wp.element.createElement;
+
+	registerBlockType( '${ MOCK_BLOCK1.name }', {
+		title: 'Test Block for Block Directory',
+		icon: 'hammer',
+		category: 'common',
+		attributes: {},
+		edit: function( props ) {
+			return el( 'p', null, 'Test Copy' );
+		},
+		save: function() {
+			return null;
+		},
+	} );
+} )();`;
+
+const MOCK_EMPTY_RESPONSES = [
+	{
+		match: ( request ) => matchUrl( request.url(), SEARCH_URLS ),
+		onRequestMatch: createJSONResponse( [] ),
+	},
+];
+
+const MOCK_BLOCKS_RESPONSES = [
+	{
+		// Mock response for search with the block
+		match: ( request ) => matchUrl( request.url(), SEARCH_URLS ),
+		onRequestMatch: createJSONResponse( [ MOCK_BLOCK1, MOCK_BLOCK2 ] ),
+	},
+	{
+		// Mock response for install
+		match: ( request ) => matchUrl( request.url(), INSTALL_URLS ),
+		onRequestMatch: createJSONResponse( true ),
+	},
+	{
+		// Mock the response for the js asset once it gets injected
+		match: ( request ) => request.url().includes( MOCK_BLOCK1.assets[ 0 ] ),
+		onRequestMatch: createResponse(
+			Buffer.from( block, 'utf8' ),
+			'application/javascript; charset=utf-8'
+		),
+	},
+];
+
+function getResponseObject( obj, contentType ) {
+	return {
+		status: 200,
+		contentType,
+		body: obj,
+	};
+}
+
+function createResponse( mockResponse, contentType ) {
+	return async ( request ) =>
+		request.respond( getResponseObject( mockResponse, contentType ) );
+}
+
+const matchUrl = ( reqUrl, urls ) => {
+	return urls.some( ( el ) => reqUrl.indexOf( el ) >= 0 );
+};
+
+describe( 'adding blocks from block directory', () => {
+	beforeEach( async () => {
+		await enableExperimentalFeatures( [ '#gutenberg-block-directory' ] );
+		await createNewPost();
+	} );
+
+	it( 'Should show an empty state when no plugin is found.', async () => {
+		// Be super weird so there won't be a matching block installed
+		const impossibleBlockName = '@#$@@Dsdsdfw2#$@';
+
+		// Return an empty list of plugins
+		await setUpResponseMocking( MOCK_EMPTY_RESPONSES );
+
+		// Search for the block via the inserter
+		await searchForBlock( impossibleBlockName );
+
+		const selectorContent = await page.evaluate(
+			() =>
+				document.querySelector( '.block-editor-inserter__block-list' )
+					.innerHTML
+		);
+		expect( selectorContent ).toContain( 'has-no-results' );
+	} );
+
+	it( 'Should be able to add (the first) block.', async () => {
+		// Setup our mocks
+		await setUpResponseMocking( MOCK_BLOCKS_RESPONSES );
+
+		// Search for the block via the inserter
+		await searchForBlock( MOCK_BLOCK1.title );
+
+		// Grab the first block in the list -> Needs to be the first one, the mock response expects it.
+		const addBtn = await page.waitForSelector(
+			'.block-directory-downloadable-blocks-list li:first-child button'
+		);
+
+		// Add the block
+		await addBtn.click();
+
+		// Delay to let block script load
+		await new Promise( ( resolve ) => setTimeout( resolve, 100 ) );
+
+		// The block will auto select and get added, make sure we see it in the content
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );