@wordpress/e2e-tests 5.4.0 → 5.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/package.json +7 -7
- package/specs/editor/blocks/cover.test.js +4 -2
- package/specs/editor/blocks/navigation.test.js +1 -1
- package/specs/editor/blocks/site-title.test.js +11 -7
- package/specs/editor/various/block-hierarchy-navigation.test.js +11 -4
- package/specs/editor/various/font-size-picker.test.js +54 -46
- package/specs/editor/various/inserting-blocks.test.js +8 -0
- package/specs/editor/various/keyboard-navigable-blocks.test.js +4 -1
- package/specs/editor/various/multi-block-selection.test.js +5 -0
- package/specs/site-editor/multi-entity-saving.test.js +20 -20
- package/specs/editor/blocks/columns.test.js +0 -31
- package/specs/editor/blocks/gallery.test.js +0 -156
- package/specs/editor/plugins/__snapshots__/templates.test.js.snap +0 -69
- package/specs/editor/plugins/templates.test.js +0 -126
- package/specs/editor/various/__snapshots__/compatibility-classic-editor.test.js.snap +0 -7
- package/specs/editor/various/__snapshots__/splitting-merging.test.js.snap +0 -101
- package/specs/editor/various/compatibility-classic-editor.test.js +0 -38
- package/specs/editor/various/fullscreen-mode.test.js +0 -31
- package/specs/editor/various/new-post-default-content.test.js +0 -52
- package/specs/editor/various/splitting-merging.test.js +0 -303
- package/specs/site-editor/iframe-rendering-mode.test.js +0 -31
- package/specs/site-editor/site-editor-inserter.test.js +0 -33
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@wordpress/e2e-tests",
|
3
|
-
"version": "5.
|
3
|
+
"version": "5.6.0",
|
4
4
|
"description": "End-To-End (E2E) tests for WordPress.",
|
5
5
|
"author": "The WordPress Contributors",
|
6
6
|
"license": "GPL-2.0-or-later",
|
@@ -23,11 +23,11 @@
|
|
23
23
|
"node": ">=14"
|
24
24
|
},
|
25
25
|
"dependencies": {
|
26
|
-
"@wordpress/e2e-test-utils": "^8.
|
27
|
-
"@wordpress/jest-console": "^6.
|
28
|
-
"@wordpress/jest-puppeteer-axe": "^5.
|
29
|
-
"@wordpress/scripts": "^24.
|
30
|
-
"@wordpress/url": "^3.
|
26
|
+
"@wordpress/e2e-test-utils": "^8.6.0",
|
27
|
+
"@wordpress/jest-console": "^6.5.0",
|
28
|
+
"@wordpress/jest-puppeteer-axe": "^5.5.0",
|
29
|
+
"@wordpress/scripts": "^24.6.0",
|
30
|
+
"@wordpress/url": "^3.23.0",
|
31
31
|
"chalk": "^4.0.0",
|
32
32
|
"expect-puppeteer": "^4.4.0",
|
33
33
|
"filenamify": "^4.2.0",
|
@@ -46,5 +46,5 @@
|
|
46
46
|
"publishConfig": {
|
47
47
|
"access": "public"
|
48
48
|
},
|
49
|
-
"gitHead": "
|
49
|
+
"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
|
50
50
|
}
|
@@ -127,14 +127,16 @@ describe( 'Cover', () => {
|
|
127
127
|
);
|
128
128
|
|
129
129
|
// Select the cover block.By default the child paragraph gets selected.
|
130
|
-
await page.click(
|
130
|
+
await page.click(
|
131
|
+
'.edit-post-header-toolbar__document-overview-toggle'
|
132
|
+
);
|
131
133
|
await page.click(
|
132
134
|
'.block-editor-list-view-block__contents-container a'
|
133
135
|
);
|
134
136
|
|
135
137
|
const heightInput = (
|
136
138
|
await page.$x(
|
137
|
-
'//div[./label[contains(text(),"Minimum height of cover")]]//input'
|
139
|
+
'//div[./label[contains(text(),"Minimum height of cover")]]/following-sibling::div//input'
|
138
140
|
)
|
139
141
|
)[ 0 ];
|
140
142
|
|
@@ -506,7 +506,7 @@ Expected mock function not to be called but it was called with: ["POST", "http:/
|
|
506
506
|
// outside of the Nav block.
|
507
507
|
await insertBlock( 'Paragraph' );
|
508
508
|
|
509
|
-
//
|
509
|
+
// Acquire fresh reference to block
|
510
510
|
navBlock = await waitForBlock( 'Navigation' );
|
511
511
|
|
512
512
|
// Check Placeholder Preview is visible.
|
@@ -3,13 +3,12 @@
|
|
3
3
|
*/
|
4
4
|
import {
|
5
5
|
createNewPost,
|
6
|
-
createUser,
|
7
|
-
deleteUser,
|
8
6
|
getOption,
|
9
7
|
insertBlock,
|
10
8
|
loginUser,
|
11
9
|
pressKeyWithModifier,
|
12
10
|
setOption,
|
11
|
+
openDocumentSettingsSidebar,
|
13
12
|
} from '@wordpress/e2e-test-utils';
|
14
13
|
|
15
14
|
const saveEntities = async () => {
|
@@ -35,11 +34,9 @@ describe( 'Site Title block', () => {
|
|
35
34
|
const username = 'testuser';
|
36
35
|
beforeAll( async () => {
|
37
36
|
originalSiteTitle = await getOption( 'blogname' );
|
38
|
-
password = await createUser( username, { role: 'editor' } );
|
39
37
|
} );
|
40
38
|
|
41
39
|
afterAll( async () => {
|
42
|
-
await deleteUser( username );
|
43
40
|
await setOption( 'blogname', originalSiteTitle );
|
44
41
|
} );
|
45
42
|
|
@@ -70,11 +67,18 @@ describe( 'Site Title block', () => {
|
|
70
67
|
await createNewPost();
|
71
68
|
await insertBlock( 'Site Title' );
|
72
69
|
|
73
|
-
|
74
|
-
|
70
|
+
await openDocumentSettingsSidebar();
|
71
|
+
|
72
|
+
const [ disableLink ] = await page.$x(
|
73
|
+
"//label[contains(text(), 'Make title link to home')]"
|
74
|
+
);
|
75
|
+
await disableLink.click();
|
76
|
+
|
77
|
+
const siteTitleSelector = '[aria-label="Block: Site Title"] span';
|
78
|
+
await page.waitForSelector( siteTitleSelector );
|
75
79
|
|
76
80
|
const editable = await page.$eval(
|
77
|
-
|
81
|
+
siteTitleSelector,
|
78
82
|
( element ) => element.contentEditable
|
79
83
|
);
|
80
84
|
expect( editable ).toBe( 'inherit' );
|
@@ -49,7 +49,9 @@ describe( 'Navigating the block hierarchy', () => {
|
|
49
49
|
await page.keyboard.type( 'First column' );
|
50
50
|
|
51
51
|
// Navigate to the columns blocks.
|
52
|
-
await page.click(
|
52
|
+
await page.click(
|
53
|
+
'.edit-post-header-toolbar__document-overview-toggle'
|
54
|
+
);
|
53
55
|
|
54
56
|
const firstColumnsBlockMenuItem = (
|
55
57
|
await getListViewBlocks( 'Columns' )
|
@@ -119,7 +121,7 @@ describe( 'Navigating the block hierarchy', () => {
|
|
119
121
|
// Navigate to the third column in the columns block.
|
120
122
|
await pressKeyWithModifier( 'ctrl', '`' );
|
121
123
|
await pressKeyWithModifier( 'ctrl', '`' );
|
122
|
-
await pressKeyTimes( 'Tab',
|
124
|
+
await pressKeyTimes( 'Tab', 4 );
|
123
125
|
await pressKeyTimes( 'ArrowDown', 4 );
|
124
126
|
await page.waitForSelector(
|
125
127
|
'.is-highlighted[aria-label="Block: Column (3 of 3)"]'
|
@@ -165,7 +167,10 @@ describe( 'Navigating the block hierarchy', () => {
|
|
165
167
|
it( 'should select the wrapper div for a group', async () => {
|
166
168
|
// Insert a group block.
|
167
169
|
await insertBlock( 'Group' );
|
168
|
-
|
170
|
+
// Select the default, selected Group layout from the variation picker.
|
171
|
+
await page.click(
|
172
|
+
'button[aria-label="Group: Gather blocks in a container."]'
|
173
|
+
);
|
169
174
|
// Insert some random blocks.
|
170
175
|
// The last block shouldn't be a textual block.
|
171
176
|
await page.click( '.block-list-appender .block-editor-inserter' );
|
@@ -183,7 +188,9 @@ describe( 'Navigating the block hierarchy', () => {
|
|
183
188
|
await page.click( '.editor-post-title' );
|
184
189
|
|
185
190
|
// Try selecting the group block using the Outline.
|
186
|
-
await page.click(
|
191
|
+
await page.click(
|
192
|
+
'.edit-post-header-toolbar__document-overview-toggle'
|
193
|
+
);
|
187
194
|
const groupMenuItem = ( await getListViewBlocks( 'Group' ) )[ 0 ];
|
188
195
|
await groupMenuItem.click();
|
189
196
|
|
@@ -102,51 +102,59 @@ describe( 'Font Size Picker', () => {
|
|
102
102
|
describe( 'More font sizes', () => {
|
103
103
|
beforeEach( async () => {
|
104
104
|
await page.evaluate( () => {
|
105
|
+
// set a deep `path[]` property in object `obj` to `value`, immutably
|
106
|
+
function setDeep( obj, path, value ) {
|
107
|
+
function doSet( o, i ) {
|
108
|
+
if ( i < path.length ) {
|
109
|
+
const key = path[ i ];
|
110
|
+
return { ...o, [ key ]: doSet( o[ key ], i + 1 ) };
|
111
|
+
}
|
112
|
+
return value;
|
113
|
+
}
|
114
|
+
return doSet( obj, 0 );
|
115
|
+
}
|
116
|
+
|
105
117
|
wp.data.dispatch( 'core/block-editor' ).updateSettings(
|
106
|
-
|
107
|
-
lodash.merge(
|
118
|
+
setDeep(
|
108
119
|
wp.data.select( 'core/block-editor' ).getSettings(),
|
109
|
-
|
110
|
-
__experimentalFeatures
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
{
|
121
|
-
name: 'Small',
|
122
|
-
slug: 'small',
|
123
|
-
size: '13px',
|
124
|
-
},
|
125
|
-
{
|
126
|
-
name: 'Medium',
|
127
|
-
slug: 'medium',
|
128
|
-
size: '20px',
|
129
|
-
},
|
130
|
-
{
|
131
|
-
name: 'Large',
|
132
|
-
slug: 'large',
|
133
|
-
size: '36px',
|
134
|
-
},
|
135
|
-
{
|
136
|
-
name: 'Extra Large',
|
137
|
-
slug: 'x-large',
|
138
|
-
size: '42px',
|
139
|
-
},
|
140
|
-
{
|
141
|
-
name: 'Huge',
|
142
|
-
slug: 'huge',
|
143
|
-
size: '48px',
|
144
|
-
},
|
145
|
-
],
|
146
|
-
},
|
147
|
-
},
|
120
|
+
[
|
121
|
+
'__experimentalFeatures',
|
122
|
+
'typography',
|
123
|
+
'fontSizes',
|
124
|
+
'default',
|
125
|
+
],
|
126
|
+
[
|
127
|
+
{
|
128
|
+
name: 'Tiny',
|
129
|
+
slug: 'tiny',
|
130
|
+
size: '11px',
|
148
131
|
},
|
149
|
-
|
132
|
+
{
|
133
|
+
name: 'Small',
|
134
|
+
slug: 'small',
|
135
|
+
size: '13px',
|
136
|
+
},
|
137
|
+
{
|
138
|
+
name: 'Medium',
|
139
|
+
slug: 'medium',
|
140
|
+
size: '20px',
|
141
|
+
},
|
142
|
+
{
|
143
|
+
name: 'Large',
|
144
|
+
slug: 'large',
|
145
|
+
size: '36px',
|
146
|
+
},
|
147
|
+
{
|
148
|
+
name: 'Extra Large',
|
149
|
+
slug: 'x-large',
|
150
|
+
size: '42px',
|
151
|
+
},
|
152
|
+
{
|
153
|
+
name: 'Huge',
|
154
|
+
slug: 'huge',
|
155
|
+
size: '48px',
|
156
|
+
},
|
157
|
+
]
|
150
158
|
)
|
151
159
|
);
|
152
160
|
} );
|
@@ -158,7 +166,7 @@ describe( 'Font Size Picker', () => {
|
|
158
166
|
await page.keyboard.type( 'Paragraph to be made "large"' );
|
159
167
|
|
160
168
|
await openFontSizeSelectControl();
|
161
|
-
await pressKeyTimes( 'ArrowDown',
|
169
|
+
await pressKeyTimes( 'ArrowDown', 4 );
|
162
170
|
await page.keyboard.press( 'Enter' );
|
163
171
|
|
164
172
|
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
|
@@ -175,7 +183,7 @@ describe( 'Font Size Picker', () => {
|
|
175
183
|
);
|
176
184
|
|
177
185
|
await openFontSizeSelectControl();
|
178
|
-
await pressKeyTimes( 'ArrowDown',
|
186
|
+
await pressKeyTimes( 'ArrowDown', 3 );
|
179
187
|
await page.keyboard.press( 'Enter' );
|
180
188
|
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
|
181
189
|
"<!-- wp:paragraph {\\"fontSize\\":\\"medium\\"} -->
|
@@ -202,7 +210,7 @@ describe( 'Font Size Picker', () => {
|
|
202
210
|
);
|
203
211
|
|
204
212
|
await openFontSizeSelectControl();
|
205
|
-
await pressKeyTimes( 'ArrowDown',
|
213
|
+
await pressKeyTimes( 'ArrowDown', 2 );
|
206
214
|
await page.keyboard.press( 'Enter' );
|
207
215
|
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
|
208
216
|
"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
|
@@ -233,7 +241,7 @@ describe( 'Font Size Picker', () => {
|
|
233
241
|
await page.keyboard.type( 'Paragraph to be made "large"' );
|
234
242
|
|
235
243
|
await clickFontSizeButtonByLabel( 'Large' );
|
236
|
-
const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//
|
244
|
+
const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-checked='true']`;
|
237
245
|
const [ activeButton ] = await page.$x( buttonSelector );
|
238
246
|
const activeLabel = await page.evaluate(
|
239
247
|
( element ) => element?.getAttribute( 'aria-label' ),
|
@@ -277,6 +277,10 @@ describe( 'Inserting blocks', () => {
|
|
277
277
|
// Check for regression of https://github.com/WordPress/gutenberg/issues/24403
|
278
278
|
it( 'inserts a block in proper place after having clicked `Browse All` from block appender', async () => {
|
279
279
|
await insertBlock( 'Group' );
|
280
|
+
// Select the default, selected Group layout from the variation picker.
|
281
|
+
await page.click(
|
282
|
+
'button[aria-label="Group: Gather blocks in a container."]'
|
283
|
+
);
|
280
284
|
await insertBlock( 'Paragraph' );
|
281
285
|
await page.keyboard.type( 'Paragraph after group' );
|
282
286
|
// Click the Group first to make the appender inside it clickable.
|
@@ -295,6 +299,10 @@ describe( 'Inserting blocks', () => {
|
|
295
299
|
const INSERTER_SEARCH_SELECTOR =
|
296
300
|
'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
|
297
301
|
await insertBlock( 'Group' );
|
302
|
+
// Select the default, selected Group layout from the variation picker.
|
303
|
+
await page.click(
|
304
|
+
'button[aria-label="Group: Gather blocks in a container."]'
|
305
|
+
);
|
298
306
|
await insertBlock( 'Paragraph' );
|
299
307
|
await page.keyboard.type( 'Text' );
|
300
308
|
// Click the Group first to make the appender inside it clickable.
|
@@ -223,7 +223,10 @@ describe( 'Order of block keyboard navigation', () => {
|
|
223
223
|
it( 'allows the block wrapper to gain focus for a group block instead of the first element', async () => {
|
224
224
|
// Insert a group block.
|
225
225
|
await insertBlock( 'Group' );
|
226
|
-
|
226
|
+
// Select the default, selected Group layout from the variation picker.
|
227
|
+
await page.click(
|
228
|
+
'button[aria-label="Group: Gather blocks in a container."]'
|
229
|
+
);
|
227
230
|
// If active label matches, that means focus did not change from group block wrapper.
|
228
231
|
await expect( await getActiveLabel() ).toBe( 'Block: Group' );
|
229
232
|
} );
|
@@ -399,6 +399,11 @@ describe( 'Multi-block selection', () => {
|
|
399
399
|
);
|
400
400
|
await page.keyboard.press( 'Enter' );
|
401
401
|
|
402
|
+
// Select the default, selected Group layout from the variation picker.
|
403
|
+
await page.click(
|
404
|
+
'button[aria-label="Group: Gather blocks in a container."]'
|
405
|
+
);
|
406
|
+
|
402
407
|
const groupAppender = await page.waitForSelector(
|
403
408
|
'.block-editor-button-block-appender'
|
404
409
|
);
|
@@ -31,7 +31,7 @@ describe( 'Multi-entity save flow', () => {
|
|
31
31
|
const checkboxInputs = await page.$$( checkboxInputSelector );
|
32
32
|
expect( checkedBoxes.length - checkboxInputs.length ).toBe( 0 );
|
33
33
|
};
|
34
|
-
const
|
34
|
+
const assertExistence = async ( selector, shouldBePresent ) => {
|
35
35
|
const element = await page.$( selector );
|
36
36
|
if ( shouldBePresent ) {
|
37
37
|
expect( element ).not.toBeNull();
|
@@ -102,10 +102,10 @@ describe( 'Multi-entity save flow', () => {
|
|
102
102
|
await assertMultiSaveDisabled();
|
103
103
|
|
104
104
|
// Should only have publish panel a11y button active with only post edited.
|
105
|
-
await
|
106
|
-
await
|
107
|
-
await
|
108
|
-
await
|
105
|
+
await assertExistence( publishA11ySelector, true );
|
106
|
+
await assertExistence( saveA11ySelector, false );
|
107
|
+
await assertExistence( publishPanelSelector, false );
|
108
|
+
await assertExistence( savePanelSelector, false );
|
109
109
|
|
110
110
|
// Add a reusable block and edit it.
|
111
111
|
await createReusableBlock( 'Hi!', 'Test' );
|
@@ -117,10 +117,10 @@ describe( 'Multi-entity save flow', () => {
|
|
117
117
|
await assertMultiSaveEnabled();
|
118
118
|
|
119
119
|
// Should only have save panel a11y button active after child entities edited.
|
120
|
-
await
|
121
|
-
await
|
122
|
-
await
|
123
|
-
await
|
120
|
+
await assertExistence( publishA11ySelector, false );
|
121
|
+
await assertExistence( saveA11ySelector, true );
|
122
|
+
await assertExistence( publishPanelSelector, false );
|
123
|
+
await assertExistence( savePanelSelector, false );
|
124
124
|
|
125
125
|
// Opening panel has boxes checked by default.
|
126
126
|
await page.click( savePostSelector );
|
@@ -128,18 +128,18 @@ describe( 'Multi-entity save flow', () => {
|
|
128
128
|
await assertAllBoxesChecked();
|
129
129
|
|
130
130
|
// Should not show other panels (or their a11y buttons) while save panel opened.
|
131
|
-
await
|
132
|
-
await
|
133
|
-
await
|
131
|
+
await assertExistence( publishA11ySelector, false );
|
132
|
+
await assertExistence( saveA11ySelector, false );
|
133
|
+
await assertExistence( publishPanelSelector, false );
|
134
134
|
|
135
135
|
// Publish panel should open after saving.
|
136
136
|
await page.click( entitiesSaveSelector );
|
137
137
|
await page.waitForSelector( publishPanelSelector );
|
138
138
|
|
139
139
|
// No other panels (or their a11y buttons) should be present with publish panel open.
|
140
|
-
await
|
141
|
-
await
|
142
|
-
await
|
140
|
+
await assertExistence( publishA11ySelector, false );
|
141
|
+
await assertExistence( saveA11ySelector, false );
|
142
|
+
await assertExistence( savePanelSelector, false );
|
143
143
|
|
144
144
|
// Close publish panel.
|
145
145
|
const closePanelButton = await page.waitForSelector(
|
@@ -151,7 +151,7 @@ describe( 'Multi-entity save flow', () => {
|
|
151
151
|
const draftSaved = await page.waitForSelector( draftSavedSelector );
|
152
152
|
expect( draftSaved ).not.toBeNull();
|
153
153
|
await assertMultiSaveDisabled();
|
154
|
-
await
|
154
|
+
await assertExistence( saveA11ySelector, false );
|
155
155
|
|
156
156
|
await publishPost();
|
157
157
|
// Wait for the success notice specifically for the published post.
|
@@ -178,7 +178,7 @@ describe( 'Multi-entity save flow', () => {
|
|
178
178
|
expect( enabledSaveButton ).not.toBeNull();
|
179
179
|
// Verify multi-entity saving not enabled.
|
180
180
|
await assertMultiSaveDisabled();
|
181
|
-
await
|
181
|
+
await assertExistence( saveA11ySelector, false );
|
182
182
|
|
183
183
|
// Update reusable block again.
|
184
184
|
await page.click( 'p[data-type="core/paragraph"]' );
|
@@ -188,7 +188,7 @@ describe( 'Multi-entity save flow', () => {
|
|
188
188
|
|
189
189
|
// Multi-entity saving should be enabled.
|
190
190
|
await assertMultiSaveEnabled();
|
191
|
-
await
|
191
|
+
await assertExistence( saveA11ySelector, true );
|
192
192
|
} );
|
193
193
|
|
194
194
|
it( 'Site blocks should save individually', async () => {
|
@@ -252,7 +252,7 @@ describe( 'Multi-entity save flow', () => {
|
|
252
252
|
await assertAllBoxesChecked();
|
253
253
|
|
254
254
|
// Save a11y button should not be present with save panel open.
|
255
|
-
await
|
255
|
+
await assertExistence( saveA11ySelector, false );
|
256
256
|
|
257
257
|
// Saving should result in items being saved.
|
258
258
|
await page.click( entitiesSaveSelector );
|
@@ -284,7 +284,7 @@ describe( 'Multi-entity save flow', () => {
|
|
284
284
|
expect( enabledButton ).not.toBeNull();
|
285
285
|
|
286
286
|
// Save a11y button should be present.
|
287
|
-
await
|
287
|
+
await assertExistence( saveA11ySelector, true );
|
288
288
|
|
289
289
|
// Save all changes.
|
290
290
|
await saveAllChanges();
|
@@ -1,31 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import {
|
5
|
-
createNewPost,
|
6
|
-
getAllBlockInserterItemTitles,
|
7
|
-
insertBlock,
|
8
|
-
openGlobalBlockInserter,
|
9
|
-
closeGlobalBlockInserter,
|
10
|
-
getListViewBlocks,
|
11
|
-
} from '@wordpress/e2e-test-utils';
|
12
|
-
|
13
|
-
describe( 'Columns', () => {
|
14
|
-
beforeEach( async () => {
|
15
|
-
await createNewPost();
|
16
|
-
} );
|
17
|
-
|
18
|
-
it( 'restricts all blocks inside the columns block', async () => {
|
19
|
-
await insertBlock( 'Columns' );
|
20
|
-
await closeGlobalBlockInserter();
|
21
|
-
await page.click( '[aria-label="Two columns; equal split"]' );
|
22
|
-
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
|
23
|
-
|
24
|
-
const columnBlockMenuItem = (
|
25
|
-
await getListViewBlocks( 'Column' )
|
26
|
-
)[ 0 ];
|
27
|
-
await columnBlockMenuItem.click();
|
28
|
-
await openGlobalBlockInserter();
|
29
|
-
expect( await getAllBlockInserterItemTitles() ).toHaveLength( 1 );
|
30
|
-
} );
|
31
|
-
} );
|
@@ -1,156 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* External dependencies
|
3
|
-
*/
|
4
|
-
import path from 'path';
|
5
|
-
import fs from 'fs';
|
6
|
-
import os from 'os';
|
7
|
-
import { v4 as uuid } from 'uuid';
|
8
|
-
|
9
|
-
/**
|
10
|
-
* WordPress dependencies
|
11
|
-
*/
|
12
|
-
import {
|
13
|
-
insertBlock,
|
14
|
-
getEditedPostContent,
|
15
|
-
createNewPost,
|
16
|
-
clickButton,
|
17
|
-
openListView,
|
18
|
-
getListViewBlocks,
|
19
|
-
clickBlockToolbarButton,
|
20
|
-
} from '@wordpress/e2e-test-utils';
|
21
|
-
|
22
|
-
async function upload( selector ) {
|
23
|
-
await page.waitForSelector( selector );
|
24
|
-
const inputElement = await page.$( selector );
|
25
|
-
const testImagePath = path.join(
|
26
|
-
__dirname,
|
27
|
-
'..',
|
28
|
-
'..',
|
29
|
-
'..',
|
30
|
-
'assets',
|
31
|
-
'10x10_e2e_test_image_z9T8jK.png'
|
32
|
-
);
|
33
|
-
const filename = uuid();
|
34
|
-
const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
|
35
|
-
fs.copyFileSync( testImagePath, tmpFileName );
|
36
|
-
await inputElement.uploadFile( tmpFileName );
|
37
|
-
await page.waitForSelector(
|
38
|
-
`.wp-block-gallery img[src$="${ filename }.png"]`
|
39
|
-
);
|
40
|
-
return filename;
|
41
|
-
}
|
42
|
-
|
43
|
-
describe( 'Gallery', () => {
|
44
|
-
beforeEach( async () => {
|
45
|
-
await createNewPost();
|
46
|
-
} );
|
47
|
-
|
48
|
-
it( 'can be created using uploaded images', async () => {
|
49
|
-
await insertBlock( 'Gallery' );
|
50
|
-
const filename = await upload( '.wp-block-gallery input[type="file"]' );
|
51
|
-
|
52
|
-
const regex = new RegExp(
|
53
|
-
`<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":\\d+,\\"sizeSlug\\":\\"(?:full|large)\\",\\"linkDestination\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-image (?:size-full|size-large)\\"><img src=\\"[^"]+\/${ filename }\.png\\" alt=\\"\\" class=\\"wp-image-\\d+\\"\/><\/figure>\\s*<!-- \/wp:image --><\/figure>\\s*<!-- \/wp:gallery -->`
|
54
|
-
);
|
55
|
-
expect( await getEditedPostContent() ).toMatch( regex );
|
56
|
-
} );
|
57
|
-
|
58
|
-
it( 'gallery caption can be edited', async () => {
|
59
|
-
const galleryCaption = 'Tested gallery caption';
|
60
|
-
|
61
|
-
await insertBlock( 'Gallery' );
|
62
|
-
await upload( '.wp-block-gallery input[type="file"]' );
|
63
|
-
await page.waitForSelector( '.wp-block-gallery .wp-block-image' );
|
64
|
-
|
65
|
-
// The Gallery needs to be selected from the List view panel due to the
|
66
|
-
// way that Image uploads take and lose focus.
|
67
|
-
await openListView();
|
68
|
-
|
69
|
-
const galleryListLink = ( await getListViewBlocks( 'Gallery' ) )[ 0 ];
|
70
|
-
await galleryListLink.click();
|
71
|
-
|
72
|
-
await page.click( '.wp-block-gallery .blocks-gallery-caption' );
|
73
|
-
|
74
|
-
await page.keyboard.type( galleryCaption );
|
75
|
-
|
76
|
-
expect( await getEditedPostContent() ).toMatch(
|
77
|
-
new RegExp( `<figcaption.*?>${ galleryCaption }</figcaption>` )
|
78
|
-
);
|
79
|
-
} );
|
80
|
-
|
81
|
-
it( "uploaded images' captions can be edited", async () => {
|
82
|
-
await insertBlock( 'Gallery' );
|
83
|
-
await upload( '.wp-block-gallery input[type="file"]' );
|
84
|
-
|
85
|
-
const figureElement = await page.waitForSelector(
|
86
|
-
'.wp-block-gallery .wp-block-image'
|
87
|
-
);
|
88
|
-
|
89
|
-
// Check that the Image is unselected, in which case the figcaption won't be
|
90
|
-
// in the DOM - due the way that the Gallery block handles the upload the latest
|
91
|
-
// image gets selected in order to scroll to the position of it, as in large
|
92
|
-
// galleries the new upload may be off-canvas. After upload the image is unselected
|
93
|
-
// so if we don't check for that it may get unselected again by this flow after we
|
94
|
-
// have re-selected it to edit it.
|
95
|
-
await page.waitForFunction(
|
96
|
-
() => ! document.querySelector( '.wp-block-image figcaption' )
|
97
|
-
);
|
98
|
-
|
99
|
-
// The Image needs to be selected from the List view panel due to the
|
100
|
-
// way that Image uploads take and lose focus.
|
101
|
-
await openListView();
|
102
|
-
|
103
|
-
// Due to collapsed state of ListView nodes Gallery must be expanded to reveal the child blocks.
|
104
|
-
// This xpath selects the anchor node for the block which has a child span which contains the text
|
105
|
-
// label of the block and then selects the expander span for that node.
|
106
|
-
const galleryExpander = await page.waitForXPath(
|
107
|
-
`//a[.//span[text()='Gallery']]/span[contains(@class, 'block-editor-list-view__expander')]`
|
108
|
-
);
|
109
|
-
|
110
|
-
await galleryExpander.click();
|
111
|
-
|
112
|
-
const imageListLink = ( await getListViewBlocks( 'Image' ) )[ 0 ];
|
113
|
-
await imageListLink.click();
|
114
|
-
await clickBlockToolbarButton( 'Caption' );
|
115
|
-
const captionElement = await figureElement.$(
|
116
|
-
'.block-editor-rich-text__editable'
|
117
|
-
);
|
118
|
-
|
119
|
-
await captionElement.click();
|
120
|
-
const caption = 'Tested caption';
|
121
|
-
|
122
|
-
await page.keyboard.type( caption );
|
123
|
-
|
124
|
-
expect( await getEditedPostContent() ).toMatch(
|
125
|
-
new RegExp( `<figcaption.*?>${ caption }</figcaption>` )
|
126
|
-
);
|
127
|
-
} );
|
128
|
-
|
129
|
-
// Disable reason:
|
130
|
-
// This test would be good to enable, but the media modal contains an
|
131
|
-
// invalid role, which is causing Axe tests to fail:
|
132
|
-
// https://core.trac.wordpress.org/ticket/50273
|
133
|
-
//
|
134
|
-
// Attempts to add an Axe exception for the media modal haven't proved
|
135
|
-
// successful:
|
136
|
-
// https://github.com/WordPress/gutenberg/pull/22719
|
137
|
-
//
|
138
|
-
// This test could be re-enabled once the trac ticket is solved.
|
139
|
-
// eslint-disable-next-line jest/no-disabled-tests
|
140
|
-
it.skip( 'when initially added the media library shows the Create Gallery view', async () => {
|
141
|
-
await insertBlock( 'Gallery' );
|
142
|
-
await clickButton( 'Media Library' );
|
143
|
-
await page.waitForSelector( '.media-frame' );
|
144
|
-
const mediaLibraryHeaderText = await page.$eval(
|
145
|
-
'.media-frame-title h1',
|
146
|
-
( element ) => element.textContent
|
147
|
-
);
|
148
|
-
const mediaLibraryButtonText = await page.$eval(
|
149
|
-
'.media-toolbar-primary button',
|
150
|
-
( element ) => element.textContent
|
151
|
-
);
|
152
|
-
|
153
|
-
expect( mediaLibraryHeaderText ).toBe( 'Create Gallery' );
|
154
|
-
expect( mediaLibraryButtonText ).toBe( 'Create a new gallery' );
|
155
|
-
} );
|
156
|
-
} );
|