Skip to content

Commit

Permalink
Address review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
tellthemachines committed Oct 19, 2021
1 parent f28e6f8 commit 2b5cad2
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 30 deletions.
2 changes: 2 additions & 0 deletions tests/visual-regression/config/bootstrap.js
Original file line number Diff line number Diff line change
@@ -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,
} );

Expand Down
93 changes: 63 additions & 30 deletions tests/visual-regression/specs/visual-snapshots.test.js
Original file line number Diff line number Diff line change
@@ -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 () => {
Expand All @@ -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();
} );
Expand Down

0 comments on commit 2b5cad2

Please sign in to comment.