Try: Visual regression test coverage for Cover block

package.json

@@ -166,6 +166,7 @@
 		"inquirer": "7.1.0",
 		"jest": "26.6.3",
 		"jest-emotion": "10.0.32",
+		"jest-image-snapshot": "4.3.0",
 		"jest-junit": "11.0.0",
 		"jest-serializer-enzyme": "1.0.0",
 		"jest-watch-typeahead": "0.6.1",

packages/e2e-tests/config/setup-visual-regression-test.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
+
+const root = process.env.GITHUB_WORKSPACE || process.cwd();
+const ARTIFACTS_PATH = root + '/artifacts';
+
+function slugify( testName ) {
+	const slug = testName
+		.toLowerCase()
+		.replace( /:/g, '-' )
+		.replace( /[^0-9a-zA-Z \-\(\)]/g, '' )
+		.replace( / /g, '-' );
+	return slug;
+}
+
+// All available options: https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api
+const toMatchImageSnapshot = configureToMatchImageSnapshot( {
+	customDiffDir: ARTIFACTS_PATH,
+	customSnapshotIdentifier: ( { currentTestName } ) =>
+		slugify( currentTestName ),
+} );
+
+// Extend Jest's "expect" with image snapshot functionality.
+expect.extend( { toMatchImageSnapshot } );

packages/e2e-tests/jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
 	setupFilesAfterEnv: [
 		'<rootDir>/config/setup-debug-artifacts.js',
 		'<rootDir>/config/setup-test-framework.js',
+		'<rootDir>/config/setup-visual-regression-test.js',
 		'@wordpress/jest-console',
 		'@wordpress/jest-puppeteer-axe',
 		'expect-puppeteer',

packages/e2e-tests/package.json

@@ -30,6 +30,7 @@
 		"@wordpress/url": "file:../url",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
+		"jest-image-snapshot": "^4.3.0",
 		"lodash": "^4.17.19",
 		"uuid": "^8.3.0"
 	},

packages/e2e-tests/specs/editor/blocks/cover.test.js

@@ -1,18 +1,49 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import { v4 as uuid } from 'uuid';
+
 /**
  * WordPress dependencies
  */
 import {
 	insertBlock,
 	createNewPost,
 	openDocumentSettingsSidebar,
+	openPreviewPage,
 } from '@wordpress/e2e-test-utils';
 
-describe( 'Cover', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
+// Copied from image.test.js. TODO: Extract into @wordpress/e2e-test-utils.
+async function upload( selector ) {
+	await page.waitForSelector( selector );
+	const inputElement = await page.$( selector );
+	const testImagePath = path.join(
+		__dirname,
+		'..',
+		'..',
+		'..',
+		'assets',
+		'1024x768_e2e_test_image_size.jpg'
+	);
+	const filename = uuid();
+	const tmpFileName = path.join( os.tmpdir(), filename + '.jpg' );
+	fs.copyFileSync( testImagePath, tmpFileName );
+	await inputElement.uploadFile( tmpFileName );
+	return filename;
+}
+
+async function waitForImage( filename ) {
+	await page.waitForSelector(
+		`.wp-block-cover img[src$="${ filename }.jpg"]`
+	);
+}
 
+describe( 'Cover', () => {
 	it( 'can be resized using drag & drop', async () => {
+		await createNewPost();
 		await insertBlock( 'Cover' );
 		// Close the inserter
 		await page.click( '.edit-post-header-toolbar__inserter-toggle' );
@@ -87,4 +118,33 @@ describe( 'Cover', () => {
 			)
 		).toBeGreaterThan( 100 );
 	} );
+
+	it( 'renders correctly in the editor', async () => {
+		await createNewPost();
+		await insertBlock( 'Cover' );
+		const filename = await upload( '.wp-block-cover input[type="file"]' );
+		await waitForImage( filename );
+
+		await page.type(
+			'.wp-block-cover [data-type="core/paragraph"]',
+			'Cover Block'
+		);
+
+		// Unselect the cover block (to remove the 'selected' highlight frame).
+		await page.$eval(
+			'.wp-block-cover [data-type="core/paragraph"]',
+			( e ) => e.blur()
+		);
+
+		const coverBlockElement = await page.$( '.wp-block-cover' );
+		const screenshot = await coverBlockElement.screenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+
+	it( 'renders correctly on the frontend', async () => {
+		const previewPage = await openPreviewPage( page );
+		const coverBlockElement = await previewPage.$( '.wp-block-cover' );
+		const screenshot = await coverBlockElement.screenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
 } );

packages/scripts/config/puppeteer.config.js

@@ -1,5 +1,6 @@
 module.exports = {
 	launch: {
+		args: [ '--font-render-hinting=none' ],
 		devtools: process.env.PUPPETEER_DEVTOOLS === 'true',
 		headless: process.env.PUPPETEER_HEADLESS !== 'false',
 		slowMo: parseInt( process.env.PUPPETEER_SLOWMO, 10 ) || 0,