Address review comments

WordPress · Oct 19, 2021 · 2b5cad2 · 2b5cad2
1 parent f28e6f8
commit 2b5cad2
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 30 deletions.
diff --git a/tests/visual-regression/config/bootstrap.js b/tests/visual-regression/config/bootstrap.js
@@ -1,6 +1,8 @@
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 
+// All available options: https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api
 const toMatchImageSnapshot = configureToMatchImageSnapshot( {
+	// Maximum diff to allow in px.
 	failureThreshold: 1,
 } );
 

diff --git a/tests/visual-regression/specs/visual-snapshots.test.js b/tests/visual-regression/specs/visual-snapshots.test.js
@@ -1,26 +1,37 @@
 import { visitAdminPage } from '@wordpress/e2e-test-utils';
 
+// See https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagescreenshotoptions for more available options.
 const screenshotOptions = {
 	fullPage: true,
 };
 
-async function hideDynamicElements( elements ) {
+async function hideElementVisibility( elements ) {
 	for ( let i = 0; i < elements.length; i++ ) {
 		const elementOnPage = await page.$( elements[ i ] );
 		if ( elementOnPage ) {
-			await page.$eval( elements[ i ], ( el ) => {
+			await elementOnPage.evaluate( ( el ) => {
 				el.style.visibility = 'hidden';
 			} );
 		}
 	}
 	await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
 }
 
-const commonDynamicElements = [
-	'#footer-upgrade',
-	'#wp-admin-bar-root-default',
-	'#toplevel_page_gutenberg',
-];
+async function removeElementFromLayout( elements ) {
+	for ( let i = 0; i < elements.length; i++ ) {
+		const elementOnPage = await page.$( elements[ i ] );
+		if ( elementOnPage ) {
+			await elementOnPage.evaluate( ( el ) => {
+				el.style.visibility = 'hidden';
+			} );
+		}
+	}
+	await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
+}
+
+const elementsToHide = [ '#footer-upgrade', '#wp-admin-bar-root-default' ];
+
+const elementsToRemove = [ '#toplevel_page_gutenberg' ];
 
 describe( 'Admin Visual Snapshots', () => {
 	beforeAll( async () => {
@@ -32,157 +43,179 @@ describe( 'Admin Visual Snapshots', () => {
 
 	it( 'All Posts', async () => {
 		await visitAdminPage( '/edit.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Categories', async () => {
 		await visitAdminPage( '/edit-tags.php', 'taxonomy=category' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Tags', async () => {
 		await visitAdminPage( '/edit-tags.php', 'taxonomy=post_tag' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Media Library', async () => {
 		await visitAdminPage( '/upload.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Add New Media', async () => {
 		await visitAdminPage( '/media-new.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'All Pages', async () => {
 		await visitAdminPage( '/edit.php', 'post_type=page' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Comments', async () => {
 		await visitAdminPage( '/edit-comments.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Widgets', async () => {
 		await visitAdminPage( '/widgets.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Menus', async () => {
 		await visitAdminPage( '/nav-menus.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Plugins', async () => {
 		await visitAdminPage( '/plugins.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'All Users', async () => {
 		await visitAdminPage( '/users.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Add New User', async () => {
 		await visitAdminPage( '/user-new.php' );
-		await hideDynamicElements( [
-			...commonDynamicElements,
+		await hideElementVisibility( [
+			...elementsToHide,
 			'.password-input-wrapper',
 		] );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Your Profile', async () => {
 		await visitAdminPage( '/profile.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Available Tools', async () => {
 		await visitAdminPage( '/tools.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Import', async () => {
 		await visitAdminPage( '/import.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Export', async () => {
 		await visitAdminPage( '/export.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Export Personal Data', async () => {
 		await visitAdminPage( '/export-personal-data.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Erase Personal Data', async () => {
 		await visitAdminPage( '/erase-personal-data.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Reading Settings', async () => {
 		await visitAdminPage( '/options-reading.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Discussion Settings', async () => {
 		await visitAdminPage( '/options-discussion.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Media Settings', async () => {
 		await visitAdminPage( '/options-media.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );
 
 	it( 'Privacy Settings', async () => {
 		await visitAdminPage( '/options-privacy.php' );
-		await hideDynamicElements( commonDynamicElements );
+		await hideElementVisibility( elementsToHide );
+		await removeElementFromLayout( elementsToRemove );
 		const image = await page.screenshot( screenshotOptions );
 		expect( image ).toMatchImageSnapshot();
 	} );