@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 CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 5.6.0 (2022-11-16)
6
+
7
+ ## 5.5.0 (2022-11-02)
8
+
5
9
  ## 5.4.0 (2022-10-19)
6
10
 
7
11
  ## 5.3.0 (2022-10-05)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/e2e-tests",
3
- "version": "5.4.0",
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.4.0",
27
- "@wordpress/jest-console": "^6.3.0",
28
- "@wordpress/jest-puppeteer-axe": "^5.3.0",
29
- "@wordpress/scripts": "^24.4.0",
30
- "@wordpress/url": "^3.21.0",
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": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
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( '.edit-post-header-toolbar__list-view-toggle' );
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
- // Aquire fresh reference to block
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
- const editableSiteTitleSelector = '[aria-label="Block: Site Title"] a';
74
- await page.waitForSelector( editableSiteTitleSelector );
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
- editableSiteTitleSelector,
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( '.edit-post-header-toolbar__list-view-toggle' );
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', 2 );
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( '.edit-post-header-toolbar__list-view-toggle' );
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
- // eslint-disable-next-line no-undef
107
- lodash.merge(
118
+ setDeep(
108
119
  wp.data.select( 'core/block-editor' ).getSettings(),
109
- {
110
- __experimentalFeatures: {
111
- typography: {
112
- fontSizes: {
113
- default: [
114
- {
115
- name: 'Tiny',
116
- slug: 'tiny',
117
- size: '11px',
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', 5 );
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', 4 );
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', 3 );
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 }//div[@data-active='true']//button`;
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 assertExistance = async ( selector, shouldBePresent ) => {
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 assertExistance( publishA11ySelector, true );
106
- await assertExistance( saveA11ySelector, false );
107
- await assertExistance( publishPanelSelector, false );
108
- await assertExistance( savePanelSelector, false );
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 assertExistance( publishA11ySelector, false );
121
- await assertExistance( saveA11ySelector, true );
122
- await assertExistance( publishPanelSelector, false );
123
- await assertExistance( savePanelSelector, false );
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 assertExistance( publishA11ySelector, false );
132
- await assertExistance( saveA11ySelector, false );
133
- await assertExistance( publishPanelSelector, false );
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 assertExistance( publishA11ySelector, false );
141
- await assertExistance( saveA11ySelector, false );
142
- await assertExistance( savePanelSelector, false );
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 assertExistance( saveA11ySelector, false );
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 assertExistance( saveA11ySelector, false );
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 assertExistance( saveA11ySelector, true );
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 assertExistance( saveA11ySelector, false );
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 assertExistance( saveA11ySelector, true );
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
- } );