Skip to content

Commit 938e9d8

Browse files
tellthemachinestellthemachines
committed
Address review comments
1 parent a0e6e66 commit 938e9d8

File tree

2 files changed

+65
-30
lines changed

2 files changed

+65
-30
lines changed

‎tests/visual-regression/config/bootstrap.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
22

3+
// All available options: https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api
34
const toMatchImageSnapshot = configureToMatchImageSnapshot( {
5+
// Maximum diff to allow in px.
46
failureThreshold: 1,
57
} );
68

‎tests/visual-regression/specs/visual-snapshots.test.js

Lines changed: 63 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,37 @@
11
import { visitAdminPage } from '@wordpress/e2e-test-utils';
22

3+
// See https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagescreenshotoptions for more available options.
34
const screenshotOptions = {
45
fullPage: true,
56
};
67

7-
async function hideDynamicElements( elements ) {
8+
async function hideElementVisibility( elements ) {
89
for ( let i = 0; i < elements.length; i++ ) {
910
const elementOnPage = await page.$( elements[ i ] );
1011
if ( elementOnPage ) {
11-
await page.$eval( elements[ i ], ( el ) => {
12+
await elementOnPage.evaluate( ( el ) => {
1213
el.style.visibility = 'hidden';
1314
} );
1415
}
1516
}
1617
await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
1718
}
1819

19-
const commonDynamicElements = [
20-
'#footer-upgrade',
21-
'#wp-admin-bar-root-default',
22-
'#toplevel_page_gutenberg',
23-
];
20+
async function removeElementFromLayout( elements ) {
21+
for ( let i = 0; i < elements.length; i++ ) {
22+
const elementOnPage = await page.$( elements[ i ] );
23+
if ( elementOnPage ) {
24+
await elementOnPage.evaluate( ( el ) => {
25+
el.style.visibility = 'hidden';
26+
} );
27+
}
28+
}
29+
await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
30+
}
31+
32+
const elementsToHide = [ '#footer-upgrade', '#wp-admin-bar-root-default' ];
33+
34+
const elementsToRemove = [ '#toplevel_page_gutenberg' ];
2435

2536
describe( 'Admin Visual Snapshots', () => {
2637
beforeAll( async () => {
@@ -32,157 +43,179 @@ describe( 'Admin Visual Snapshots', () => {
3243

3344
it( 'All Posts', async () => {
3445
await visitAdminPage( '/edit.php' );
35-
await hideDynamicElements( commonDynamicElements );
46+
await hideElementVisibility( elementsToHide );
47+
await removeElementFromLayout( elementsToRemove );
3648
const image = await page.screenshot( screenshotOptions );
3749
expect( image ).toMatchImageSnapshot();
3850
} );
3951

4052
it( 'Categories', async () => {
4153
await visitAdminPage( '/edit-tags.php', 'taxonomy=category' );
42-
await hideDynamicElements( commonDynamicElements );
54+
await hideElementVisibility( elementsToHide );
55+
await removeElementFromLayout( elementsToRemove );
4356
const image = await page.screenshot( screenshotOptions );
4457
expect( image ).toMatchImageSnapshot();
4558
} );
4659

4760
it( 'Tags', async () => {
4861
await visitAdminPage( '/edit-tags.php', 'taxonomy=post_tag' );
49-
await hideDynamicElements( commonDynamicElements );
62+
await hideElementVisibility( elementsToHide );
63+
await removeElementFromLayout( elementsToRemove );
5064
const image = await page.screenshot( screenshotOptions );
5165
expect( image ).toMatchImageSnapshot();
5266
} );
5367

5468
it( 'Media Library', async () => {
5569
await visitAdminPage( '/upload.php' );
56-
await hideDynamicElements( commonDynamicElements );
70+
await hideElementVisibility( elementsToHide );
71+
await removeElementFromLayout( elementsToRemove );
5772
const image = await page.screenshot( screenshotOptions );
5873
expect( image ).toMatchImageSnapshot();
5974
} );
6075

6176
it( 'Add New Media', async () => {
6277
await visitAdminPage( '/media-new.php' );
63-
await hideDynamicElements( commonDynamicElements );
78+
await hideElementVisibility( elementsToHide );
79+
await removeElementFromLayout( elementsToRemove );
6480
const image = await page.screenshot( screenshotOptions );
6581
expect( image ).toMatchImageSnapshot();
6682
} );
6783

6884
it( 'All Pages', async () => {
6985
await visitAdminPage( '/edit.php', 'post_type=page' );
70-
await hideDynamicElements( commonDynamicElements );
86+
await hideElementVisibility( elementsToHide );
87+
await removeElementFromLayout( elementsToRemove );
7188
const image = await page.screenshot( screenshotOptions );
7289
expect( image ).toMatchImageSnapshot();
7390
} );
7491

7592
it( 'Comments', async () => {
7693
await visitAdminPage( '/edit-comments.php' );
77-
await hideDynamicElements( commonDynamicElements );
94+
await hideElementVisibility( elementsToHide );
95+
await removeElementFromLayout( elementsToRemove );
7896
const image = await page.screenshot( screenshotOptions );
7997
expect( image ).toMatchImageSnapshot();
8098
} );
8199

82100
it( 'Widgets', async () => {
83101
await visitAdminPage( '/widgets.php' );
84-
await hideDynamicElements( commonDynamicElements );
102+
await hideElementVisibility( elementsToHide );
103+
await removeElementFromLayout( elementsToRemove );
85104
const image = await page.screenshot( screenshotOptions );
86105
expect( image ).toMatchImageSnapshot();
87106
} );
88107

89108
it( 'Menus', async () => {
90109
await visitAdminPage( '/nav-menus.php' );
91-
await hideDynamicElements( commonDynamicElements );
110+
await hideElementVisibility( elementsToHide );
111+
await removeElementFromLayout( elementsToRemove );
92112
const image = await page.screenshot( screenshotOptions );
93113
expect( image ).toMatchImageSnapshot();
94114
} );
95115

96116
it( 'Plugins', async () => {
97117
await visitAdminPage( '/plugins.php' );
98-
await hideDynamicElements( commonDynamicElements );
118+
await hideElementVisibility( elementsToHide );
119+
await removeElementFromLayout( elementsToRemove );
99120
const image = await page.screenshot( screenshotOptions );
100121
expect( image ).toMatchImageSnapshot();
101122
} );
102123

103124
it( 'All Users', async () => {
104125
await visitAdminPage( '/users.php' );
105-
await hideDynamicElements( commonDynamicElements );
126+
await hideElementVisibility( elementsToHide );
127+
await removeElementFromLayout( elementsToRemove );
106128
const image = await page.screenshot( screenshotOptions );
107129
expect( image ).toMatchImageSnapshot();
108130
} );
109131

110132
it( 'Add New User', async () => {
111133
await visitAdminPage( '/user-new.php' );
112-
await hideDynamicElements( [
113-
...commonDynamicElements,
134+
await hideElementVisibility( [
135+
...elementsToHide,
114136
'.password-input-wrapper',
115137
] );
138+
await removeElementFromLayout( elementsToRemove );
116139
const image = await page.screenshot( screenshotOptions );
117140
expect( image ).toMatchImageSnapshot();
118141
} );
119142

120143
it( 'Your Profile', async () => {
121144
await visitAdminPage( '/profile.php' );
122-
await hideDynamicElements( commonDynamicElements );
145+
await hideElementVisibility( elementsToHide );
146+
await removeElementFromLayout( elementsToRemove );
123147
const image = await page.screenshot( screenshotOptions );
124148
expect( image ).toMatchImageSnapshot();
125149
} );
126150

127151
it( 'Available Tools', async () => {
128152
await visitAdminPage( '/tools.php' );
129-
await hideDynamicElements( commonDynamicElements );
153+
await hideElementVisibility( elementsToHide );
154+
await removeElementFromLayout( elementsToRemove );
130155
const image = await page.screenshot( screenshotOptions );
131156
expect( image ).toMatchImageSnapshot();
132157
} );
133158

134159
it( 'Import', async () => {
135160
await visitAdminPage( '/import.php' );
136-
await hideDynamicElements( commonDynamicElements );
161+
await hideElementVisibility( elementsToHide );
162+
await removeElementFromLayout( elementsToRemove );
137163
const image = await page.screenshot( screenshotOptions );
138164
expect( image ).toMatchImageSnapshot();
139165
} );
140166

141167
it( 'Export', async () => {
142168
await visitAdminPage( '/export.php' );
143-
await hideDynamicElements( commonDynamicElements );
169+
await hideElementVisibility( elementsToHide );
170+
await removeElementFromLayout( elementsToRemove );
144171
const image = await page.screenshot( screenshotOptions );
145172
expect( image ).toMatchImageSnapshot();
146173
} );
147174

148175
it( 'Export Personal Data', async () => {
149176
await visitAdminPage( '/export-personal-data.php' );
150-
await hideDynamicElements( commonDynamicElements );
177+
await hideElementVisibility( elementsToHide );
178+
await removeElementFromLayout( elementsToRemove );
151179
const image = await page.screenshot( screenshotOptions );
152180
expect( image ).toMatchImageSnapshot();
153181
} );
154182

155183
it( 'Erase Personal Data', async () => {
156184
await visitAdminPage( '/erase-personal-data.php' );
157-
await hideDynamicElements( commonDynamicElements );
185+
await hideElementVisibility( elementsToHide );
186+
await removeElementFromLayout( elementsToRemove );
158187
const image = await page.screenshot( screenshotOptions );
159188
expect( image ).toMatchImageSnapshot();
160189
} );
161190

162191
it( 'Reading Settings', async () => {
163192
await visitAdminPage( '/options-reading.php' );
164-
await hideDynamicElements( commonDynamicElements );
193+
await hideElementVisibility( elementsToHide );
194+
await removeElementFromLayout( elementsToRemove );
165195
const image = await page.screenshot( screenshotOptions );
166196
expect( image ).toMatchImageSnapshot();
167197
} );
168198

169199
it( 'Discussion Settings', async () => {
170200
await visitAdminPage( '/options-discussion.php' );
171-
await hideDynamicElements( commonDynamicElements );
201+
await hideElementVisibility( elementsToHide );
202+
await removeElementFromLayout( elementsToRemove );
172203
const image = await page.screenshot( screenshotOptions );
173204
expect( image ).toMatchImageSnapshot();
174205
} );
175206

176207
it( 'Media Settings', async () => {
177208
await visitAdminPage( '/options-media.php' );
178-
await hideDynamicElements( commonDynamicElements );
209+
await hideElementVisibility( elementsToHide );
210+
await removeElementFromLayout( elementsToRemove );
179211
const image = await page.screenshot( screenshotOptions );
180212
expect( image ).toMatchImageSnapshot();
181213
} );
182214

183215
it( 'Privacy Settings', async () => {
184216
await visitAdminPage( '/options-privacy.php' );
185-
await hideDynamicElements( commonDynamicElements );
217+
await hideElementVisibility( elementsToHide );
218+
await removeElementFromLayout( elementsToRemove );
186219
const image = await page.screenshot( screenshotOptions );
187220
expect( image ).toMatchImageSnapshot();
188221
} );

0 commit comments

Comments
 (0)