Add visual tests support

.circleci/config.yml

@@ -132,6 +132,11 @@ commands:
         - run:
             name: Create reports directory
             command: mkdir reports && mkdir reports/test-results
+  add-jest-snapshot-dir:
+      steps:
+        - run:
+            name: Create snapshots directory
+            command: mkdir __device-tests__/image-snapshots/diff
   install-node-version:
     steps:
       - run:
@@ -248,6 +253,7 @@ jobs:
       - install-node-version
       - run: node -v
       - npm-install-e2e-tests
+      - add-jest-snapshot-dir
       - run: mkdir /home/circleci/test-results
       - run:
           name: Run Device Tests
@@ -356,6 +362,7 @@ jobs:
     - install-node-version
     - npm-install-e2e-tests
     - add-jest-reporter-dir
+    - add-jest-snapshot-dir
     - run:
         name: Set Environment Variables
         command: |

__device-tests__/gutenberg-editor-gallery-visual.test.js

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+const { blockNames } = editorPage;
+import { takeScreenshot } from './utils';
+
+describe( 'Gutenberg Editor Visual test for Gallery Block', () => {
+	it( 'should be able to render the placeholder correctly', async () => {
+		await editorPage.addNewBlock( blockNames.gallery );
+		await editorPage.closePicker();
+
+		// Visual test check
+		const screenshot = await takeScreenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+
+		await editorPage.removeBlockAtPosition( blockNames.gallery );
+	} );
+
+	it( 'should be able to render a gallery correctly', async () => {
+		await editorPage.setHtmlContent(
+			[ e2eTestData.galleryBlock ].join( '\n\n' )
+		);
+		const galleryBlock = await editorPage.getBlockAtPosition(
+			blockNames.gallery
+		);
+		expect( galleryBlock ).toBeTruthy();
+
+		// Wait for images to load
+		await editorPage.driver.sleep( 5000 );
+
+		// Visual test check
+		const screenshot = await takeScreenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+} );

__device-tests__/gutenberg-editor-group-visual.test.js

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+const { blockNames } = editorPage;
+import { takeScreenshot } from './utils';
+
+describe( 'Gutenberg Editor Visual test for Group Block', () => {
+	it( 'should show the empty placeholder for the unselected state', async () => {
+		await editorPage.addNewBlock( blockNames.group );
+
+		// Select title to unfocus the block
+		const titleElement = await editorPage.getTitleElement();
+		titleElement.click();
+
+		await editorPage.dismissKeyboard();
+		// Wait for the keyboard to be hidden
+		await editorPage.driver.sleep( 3000 );
+
+		// Visual test check
+		const screenshot = await takeScreenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+} );

__device-tests__/utils.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import jimp from 'jimp';
+
+const { isAndroid } = e2eUtils;
+
+export async function takeScreenshot() {
+	const statusBarHeight = isAndroid() ? 100 : 94;
+	const screenshot = await editorPage.driver.takeScreenshot();
+
+	const base64Image = Buffer.from( screenshot, 'base64' );
+	const image = await jimp.read( base64Image );
+	image.crop(
+		0,
+		statusBarHeight,
+		image.getWidth(),
+		image.getHeight() - statusBarHeight
+	);
+	const resizedImage = await image.resize( 320, jimp.AUTO );
+	return resizedImage.getBufferAsync( jimp.MIME_PNG );
+}

jest_ui.config.js

@@ -3,6 +3,7 @@ const gutenbergJestUIConfig = require( './gutenberg/packages/react-native-editor
 module.exports = {
 	...gutenbergJestUIConfig,
 	setupFilesAfterEnv: [
+		'./jest_ui_setup_after_env.js',
 		'./gutenberg/packages/react-native-editor/jest_ui_setup_after_env.js',
 	],
 	testEnvironment:

jest_ui_setup_after_env.js

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+const {
+	isAndroid,
+} = require( './gutenberg/packages/react-native-editor/__device-tests__/helpers/utils' );
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { configureToMatchImageSnapshot } = require( 'jest-image-snapshot' );
+
+const toMatchImageSnapshot = configureToMatchImageSnapshot( {
+	failureThreshold: 0.01, // 1% threshold.
+	failureThresholdType: 'percent',
+	dumpInlineDiffToConsole: true,
+	runInProcess: true,
+	customSnapshotIdentifier( data ) {
+		return `${ data.defaultIdentifier }-${
+			isAndroid() ? 'android' : 'ios'
+		}`;
+	},
+	customSnapshotsDir: '__device-tests__/image-snapshots',
+	customDiffDir: '__device-tests__/image-snapshots/diff',
+} );
+expect.extend( { toMatchImageSnapshot } );