Testing: Add E2E test to verify demo errors (#9924)

* Packages: jest-console: Capture logging in test lifecycle

* Testing: Add E2E test to verify demo errors

* Demo: Update demo content to avoid invalidations

* Testing: Mock response of embed demo content

packages/jest-console/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.0.1 (Unreleased)
+
+### Bug Fixes
+
+- Captures and protects against unexpected console logging occurring during lifecycle.
+
 ## 2.0.0 (2018-07-12)
 
 ### Breaking Change

packages/jest-console/src/index.js

@@ -18,16 +18,31 @@ import supportedMatchers from './supported-matchers';
 const setConsoleMethodSpy = ( matcherName, methodName ) => {
 	const spy = jest.spyOn( console, methodName ).mockName( `console.${ methodName }` );
 
-	beforeEach( () => {
+	/**
+	 * Resets the spy to its initial state.
+	 */
+	function resetSpy() {
 		spy.mockReset();
 		spy.assertionsNumber = 0;
-	} );
+	}
 
-	afterEach( () => {
+	/**
+	 * Verifies that the spy has only been called if expected.
+	 */
+	function assertExpectedCalls() {
 		if ( spy.assertionsNumber === 0 && spy.mock.calls.length > 0 ) {
 			expect( console ).not[ matcherName ]();
 		}
+	}
+
+	beforeAll( resetSpy );
+
+	beforeEach( () => {
+		assertExpectedCalls();
+		resetSpy();
 	} );
+
+	afterEach( assertExpectedCalls );
 };
 
 forEach( supportedMatchers, setConsoleMethodSpy );

packages/jest-console/src/test/index.test.js

@@ -72,6 +72,18 @@ describe( 'jest-console', () => {
 					expect( console )[ matcherNameWith ]( message );
 					expect( spy.assertionsNumber ).toBe( 2 );
 				} );
+
+				describe( 'lifecycle', () => {
+					beforeAll( () => {
+						// This is a difficult one to test, since the matcher's
+						// own lifecycle is defined to run before ours. Infer
+						// that we're being watched by testing the console
+						// method as being a spy.
+						expect( console[ methodName ].assertionsNumber ).toBeGreaterThanOrEqual( 0 );
+					} );
+
+					it( 'captures logging in lifecycle', () => {} );
+				} );
 			} );
 		}
 	);

post-content.php

@@ -132,15 +132,17 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:core-embed/vimeo {"url":"https://vimeo.com/22439234","align":"wide","type":"video","providerNameSlug":"vimeo"} -->
-<figure class="wp-block-embed-vimeo wp-block-embed alignwide is-type-video is-provider-vimeo">https://vimeo.com/22439234</figure>
+<figure class="wp-block-embed-vimeo alignwide wp-block-embed is-type-video is-provider-vimeo"><div class="wp-block-embed__wrapper">
+https://vimeo.com/22439234
+</div></figure>
 <!-- /wp:core-embed/vimeo -->
 
 <!-- wp:paragraph -->
 <p><?php _e( 'You can build any block you like, static or dynamic, decorative or plain. Here&#8217;s a pullquote block:', 'gutenberg' ); ?></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:pullquote -->
-<blockquote class="wp-block-pullquote"><p><?php _e( 'Code is Poetry', 'gutenberg' ); ?></p><cite><?php _e( 'The WordPress community', 'gutenberg' ); ?></cite></blockquote>
+<figure class="wp-block-pullquote"><blockquote><p><?php _e( 'Code is Poetry', 'gutenberg' ); ?></p><cite><?php _e( 'The WordPress community', 'gutenberg' ); ?></cite></blockquote></figure>
 <!-- /wp:pullquote -->
 
 <!-- wp:paragraph {"align":"center"} -->

test/e2e/specs/demo.test.js

@@ -0,0 +1,58 @@
+/**
+ * Internal dependencies
+ */
+import { visitAdmin } from '../support/utils';
+
+// The response from Vimeo, but with the iframe taken out.
+const MOCK_EMBED_RESPONSE = {
+	type: 'video',
+	version: '1.0',
+	provider_name: 'Vimeo',
+	provider_url: 'https://vimeo.com/',
+	title: 'The Mountain',
+	author_name: 'TSO Photography',
+	author_url: 'https://vimeo.com/terjes',
+	is_plus: '0',
+	account_type: 'basic',
+	html: '<p>Embedded content</p>',
+	width: 600,
+	height: 338,
+	duration: 189,
+	thumbnail_url: 'https://i.vimeocdn.com/video/145026168_295x166.jpg',
+	thumbnail_width: 295,
+	thumbnail_height: 166,
+	thumbnail_url_with_play_button: 'https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F145026168_295x166.jpg&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png',
+	upload_date: '2011-04-15 08:35:35',
+	video_id: 22439234,
+	uri: '/videos/22439234',
+};
+
+describe( 'new editor state', () => {
+	beforeAll( async () => {
+		// Intercept embed requests so that scripts loaded from third parties
+		// cannot leave errors in the console and cause the test to fail.
+		await page.setRequestInterception( true );
+		page.on( 'request', ( request ) => {
+			if ( request.url().indexOf( 'oembed/1.0/proxy' ) !== -1 ) {
+				request.respond( {
+					content: 'application/json',
+					body: JSON.stringify( MOCK_EMBED_RESPONSE ),
+				} );
+			} else {
+				request.continue();
+			}
+		} );
+
+		await visitAdmin( 'post-new.php', 'gutenberg-demo' );
+	} );
+
+	it( 'should not error', () => {
+		// This test case is intentionally empty. The `beforeAll` lifecycle of
+		// navigating to the Demo page is sufficient assertion in itself, as it
+		// will trigger the global console error capturing if an error occurs
+		// during this process.
+		//
+		// If any other test cases are added which verify expected behavior of
+		// the demo post, this empty test case can be removed.
+	} );
+} );