@wordpress/e2e-tests 5.6.0 → 6.1.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.
Files changed (35) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/assets/small-post-with-containers.html +77 -0
  3. package/config/performance-reporter.js +22 -6
  4. package/config/setup-performance-test.js +3 -0
  5. package/package.json +9 -9
  6. package/plugins/inner-blocks-templates/index.js +29 -0
  7. package/specs/editor/blocks/__snapshots__/heading.test.js.snap +7 -7
  8. package/specs/editor/blocks/heading.test.js +1 -1
  9. package/specs/editor/plugins/block-directory-add.test.js +1 -1
  10. package/specs/editor/various/__snapshots__/block-grouping.test.js.snap +4 -4
  11. package/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap +2 -2
  12. package/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap +3 -3
  13. package/specs/editor/various/__snapshots__/list-view.test.js.snap +1 -1
  14. package/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap +4 -4
  15. package/specs/editor/various/__snapshots__/rich-text.test.js.snap +1 -1
  16. package/specs/editor/various/a11y.test.js +3 -1
  17. package/specs/editor/various/block-hierarchy-navigation.test.js +2 -4
  18. package/specs/editor/various/block-switcher.test.js +14 -13
  19. package/specs/editor/various/editor-modes.test.js +3 -7
  20. package/specs/editor/various/keyboard-navigable-blocks.test.js +7 -0
  21. package/specs/editor/various/multi-block-selection.test.js +1 -1
  22. package/specs/editor/various/reusable-blocks.test.js +2 -2
  23. package/specs/editor/various/sidebar.test.js +0 -2
  24. package/specs/experiments/blocks/post-comments-form.test.js +7 -8
  25. package/specs/performance/post-editor.test.js +98 -44
  26. package/specs/performance/site-editor.test.js +3 -0
  27. package/specs/site-editor/global-styles-sidebar.test.js +2 -0
  28. package/specs/site-editor/multi-entity-saving.test.js +18 -12
  29. package/specs/site-editor/settings-sidebar.test.js +3 -0
  30. package/specs/site-editor/site-editor-export.test.js +2 -0
  31. package/specs/editor/blocks/__snapshots__/quote.test.js.snap +0 -123
  32. package/specs/editor/blocks/quote.test.js +0 -199
  33. package/specs/editor/various/font-size-picker.test.js +0 -314
  34. package/specs/editor/various/toolbar-roving-tabindex.test.js +0 -142
  35. package/specs/site-editor/multi-entity-editing.test.js +0 -309
@@ -1,199 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import {
5
- clickBlockAppender,
6
- getEditedPostContent,
7
- createNewPost,
8
- pressKeyTimes,
9
- transformBlockTo,
10
- insertBlock,
11
- } from '@wordpress/e2e-test-utils';
12
-
13
- describe( 'Quote', () => {
14
- beforeEach( async () => {
15
- await createNewPost();
16
- } );
17
-
18
- it( 'can be created by using > at the start of a paragraph block', async () => {
19
- // Create a block with some text that will trigger a list creation.
20
- await clickBlockAppender();
21
- await page.keyboard.type( '> A quote' );
22
-
23
- // Create a second list item.
24
- await page.keyboard.press( 'Enter' );
25
- await page.keyboard.type( 'Another paragraph' );
26
-
27
- expect( await getEditedPostContent() ).toMatchSnapshot();
28
- } );
29
-
30
- it( 'can be created by typing > in front of text of a paragraph block', async () => {
31
- // Create a list with the slash block shortcut.
32
- await clickBlockAppender();
33
- await page.keyboard.type( 'test' );
34
- await pressKeyTimes( 'ArrowLeft', 4 );
35
- await page.keyboard.type( '> ' );
36
-
37
- expect( await getEditedPostContent() ).toMatchSnapshot();
38
- } );
39
-
40
- it( 'can be created by typing "/quote"', async () => {
41
- // Create a list with the slash block shortcut.
42
- await clickBlockAppender();
43
- await page.keyboard.type( '/quote' );
44
- await page.waitForXPath(
45
- `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Quote')]`
46
- );
47
- await page.keyboard.press( 'Enter' );
48
- await page.keyboard.type( 'I’m a quote' );
49
-
50
- expect( await getEditedPostContent() ).toMatchSnapshot();
51
- } );
52
-
53
- it( 'can be created by converting a paragraph', async () => {
54
- await clickBlockAppender();
55
- await page.keyboard.type( 'test' );
56
- await transformBlockTo( 'Quote' );
57
-
58
- expect( await getEditedPostContent() ).toMatchSnapshot();
59
- } );
60
-
61
- it( 'can be created by converting multiple paragraphs', async () => {
62
- await clickBlockAppender();
63
- await page.keyboard.type( 'one' );
64
- await page.keyboard.press( 'Enter' );
65
- await page.keyboard.type( 'two' );
66
- await page.keyboard.down( 'Shift' );
67
- await page.click( '[data-type="core/paragraph"]' );
68
- await page.keyboard.up( 'Shift' );
69
- await transformBlockTo( 'Quote' );
70
-
71
- expect( await getEditedPostContent() ).toMatchSnapshot();
72
- } );
73
-
74
- describe( 'can be converted to paragraphs', () => {
75
- it( 'and renders one paragraph block per <p> within quote', async () => {
76
- await insertBlock( 'Quote' );
77
- await page.keyboard.type( 'one' );
78
- await page.keyboard.press( 'Enter' );
79
- await page.keyboard.type( 'two' );
80
- // Navigate to the citation to select the block.
81
- await page.keyboard.press( 'ArrowRight' );
82
- await transformBlockTo( 'Unwrap' );
83
-
84
- expect( await getEditedPostContent() ).toMatchSnapshot();
85
- } );
86
-
87
- it( 'and renders a paragraph for the cite, if it exists', async () => {
88
- await insertBlock( 'Quote' );
89
- await page.keyboard.type( 'one' );
90
- await page.keyboard.press( 'Enter' );
91
- await page.keyboard.type( 'two' );
92
- await page.keyboard.press( 'ArrowRight' );
93
- await page.keyboard.type( 'cite' );
94
- await transformBlockTo( 'Unwrap' );
95
-
96
- expect( await getEditedPostContent() ).toMatchSnapshot();
97
- } );
98
-
99
- it( 'and renders only one paragraph for the cite, if the quote is void', async () => {
100
- await insertBlock( 'Quote' );
101
- await page.keyboard.press( 'ArrowRight' );
102
- await page.keyboard.type( 'cite' );
103
- await transformBlockTo( 'Unwrap' );
104
-
105
- expect( await getEditedPostContent() ).toMatchSnapshot();
106
- } );
107
-
108
- it( 'and renders a void paragraph if both the cite and quote are void', async () => {
109
- await insertBlock( 'Quote' );
110
- await page.keyboard.press( 'ArrowRight' ); // Select the quote
111
- await transformBlockTo( 'Unwrap' );
112
-
113
- expect( await getEditedPostContent() ).toMatchSnapshot();
114
- } );
115
- } );
116
-
117
- it( 'can be created by converting a heading', async () => {
118
- await insertBlock( 'Heading' );
119
- await page.keyboard.type( 'test' );
120
- await transformBlockTo( 'Quote' );
121
-
122
- expect( await getEditedPostContent() ).toMatchSnapshot();
123
- } );
124
-
125
- it( 'can be converted to a pullquote', async () => {
126
- await insertBlock( 'Quote' );
127
- await page.keyboard.type( 'one' );
128
- await page.keyboard.press( 'Enter' );
129
- await page.keyboard.type( 'two' );
130
- await page.keyboard.press( 'ArrowRight' );
131
- await page.keyboard.type( 'cite' );
132
- await transformBlockTo( 'Pullquote' );
133
- expect( await getEditedPostContent() ).toMatchSnapshot();
134
- } );
135
-
136
- it( 'can be split at the end', async () => {
137
- await insertBlock( 'Quote' );
138
- await page.keyboard.type( '1' );
139
- await page.keyboard.press( 'Enter' );
140
- await page.keyboard.press( 'Enter' );
141
-
142
- // Expect empty paragraph outside quote block.
143
- expect( await getEditedPostContent() ).toMatchSnapshot();
144
-
145
- await page.keyboard.press( 'Backspace' );
146
- // Allow time for selection to update.
147
- await page.evaluate( () => new Promise( window.requestIdleCallback ) );
148
- await page.keyboard.type( '2' );
149
-
150
- // Expect the paragraph to be merged into the quote block.
151
- expect( await getEditedPostContent() ).toMatchSnapshot();
152
- } );
153
-
154
- it( 'can be unwrapped on Backspace', async () => {
155
- await insertBlock( 'Quote' );
156
-
157
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
158
- "<!-- wp:quote -->
159
- <blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
160
- <p></p>
161
- <!-- /wp:paragraph --></blockquote>
162
- <!-- /wp:quote -->"
163
- ` );
164
-
165
- await page.keyboard.press( 'Backspace' );
166
-
167
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `""` );
168
- } );
169
-
170
- it( 'can be unwrapped with content on Backspace', async () => {
171
- await insertBlock( 'Quote' );
172
- await page.keyboard.type( '1' );
173
- await page.keyboard.press( 'ArrowRight' );
174
- await page.keyboard.type( '2' );
175
-
176
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
177
- "<!-- wp:quote -->
178
- <blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
179
- <p>1</p>
180
- <!-- /wp:paragraph --><cite>2</cite></blockquote>
181
- <!-- /wp:quote -->"
182
- ` );
183
-
184
- await page.keyboard.press( 'ArrowLeft' );
185
- await page.keyboard.press( 'ArrowUp' );
186
- await page.keyboard.press( 'ArrowUp' );
187
- await page.keyboard.press( 'Backspace' );
188
-
189
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
190
- "<!-- wp:paragraph -->
191
- <p>1</p>
192
- <!-- /wp:paragraph -->
193
-
194
- <!-- wp:paragraph -->
195
- <p>2</p>
196
- <!-- /wp:paragraph -->"
197
- ` );
198
- } );
199
- } );
@@ -1,314 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import {
5
- clickBlockAppender,
6
- getEditedPostContent,
7
- createNewPost,
8
- pressKeyWithModifier,
9
- pressKeyTimes,
10
- openTypographyToolsPanelMenu,
11
- } from '@wordpress/e2e-test-utils';
12
-
13
- const openFontSizeSelectControl = async () => {
14
- const selectControlSelector =
15
- "//div[contains(@class, 'components-font-size-picker__controls')]//button[contains(@class, 'components-custom-select-control__button')]";
16
- const selectControl = await page.waitForXPath( selectControlSelector );
17
- return selectControl.click();
18
- };
19
-
20
- const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
21
- "//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";
22
-
23
- // Click a button by its label - applies when ToggleGroupControl is used.
24
- const clickFontSizeButtonByLabel = async ( label ) => {
25
- const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-label='${ label }']`;
26
- const button = await page.waitForXPath( buttonSelector );
27
- return button.click();
28
- };
29
-
30
- // Clicks the button to toggle between custom size input and the control for the presets.
31
- const toggleCustomInput = async ( showCustomInput ) => {
32
- const label = showCustomInput ? 'Set custom size' : 'Use size preset';
33
- const toggleButton = await page.waitForXPath(
34
- `//button[@aria-label='${ label }']`
35
- );
36
- return toggleButton.click();
37
- };
38
-
39
- const clickCustomInput = async () => {
40
- const customInput = await page.waitForXPath( "//input[@type='number']" );
41
- return customInput.click();
42
- };
43
-
44
- describe( 'Font Size Picker', () => {
45
- beforeEach( async () => {
46
- await createNewPost();
47
- } );
48
- describe( 'Common', () => {
49
- it( 'should apply a named font size using the font size input', async () => {
50
- // Create a paragraph block with some content.
51
- await clickBlockAppender();
52
- await page.keyboard.type( 'Paragraph to be made "small"' );
53
-
54
- await toggleCustomInput( true );
55
- await clickCustomInput();
56
- // This should be the "small" font-size of the editor defaults.
57
- await page.keyboard.type( '13' );
58
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
59
- "<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
60
- <p class=\\"has-small-font-size\\">Paragraph to be made \\"small\\"</p>
61
- <!-- /wp:paragraph -->"
62
- ` );
63
- } );
64
- it( 'should apply a custom font size using the font size input', async () => {
65
- // Create a paragraph block with some content.
66
- await clickBlockAppender();
67
- await page.keyboard.type( 'Paragraph to be made "small"' );
68
-
69
- await toggleCustomInput( true );
70
- await clickCustomInput();
71
- await page.keyboard.type( '23' );
72
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
73
- "<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
74
- <p style=\\"font-size:23px\\">Paragraph to be made \\"small\\"</p>
75
- <!-- /wp:paragraph -->"
76
- ` );
77
- } );
78
- it( 'should reset a custom font size using input field', async () => {
79
- // Create a paragraph block with some content.
80
- await clickBlockAppender();
81
- await page.keyboard.type( 'Paragraph reset - custom size' );
82
-
83
- await toggleCustomInput( true );
84
- await clickCustomInput();
85
- await page.keyboard.type( '23' );
86
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
87
- "<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
88
- <p style=\\"font-size:23px\\">Paragraph reset - custom size</p>
89
- <!-- /wp:paragraph -->"
90
- ` );
91
-
92
- await pressKeyTimes( 'Backspace', 2 );
93
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
94
- "<!-- wp:paragraph -->
95
- <p>Paragraph reset - custom size</p>
96
- <!-- /wp:paragraph -->"
97
- ` );
98
- } );
99
- } );
100
-
101
- // A different control is rendered based on the available font sizes number.
102
- describe( 'More font sizes', () => {
103
- beforeEach( async () => {
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
-
117
- wp.data.dispatch( 'core/block-editor' ).updateSettings(
118
- setDeep(
119
- wp.data.select( 'core/block-editor' ).getSettings(),
120
- [
121
- '__experimentalFeatures',
122
- 'typography',
123
- 'fontSizes',
124
- 'default',
125
- ],
126
- [
127
- {
128
- name: 'Tiny',
129
- slug: 'tiny',
130
- size: '11px',
131
- },
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
- ]
158
- )
159
- );
160
- } );
161
- } );
162
-
163
- it( 'should apply a named font size using the font size buttons', async () => {
164
- // Create a paragraph block with some content.
165
- await clickBlockAppender();
166
- await page.keyboard.type( 'Paragraph to be made "large"' );
167
-
168
- await openFontSizeSelectControl();
169
- await pressKeyTimes( 'ArrowDown', 4 );
170
- await page.keyboard.press( 'Enter' );
171
-
172
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
173
- "<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
174
- <p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
175
- <!-- /wp:paragraph -->"
176
- ` );
177
- } );
178
- it( 'should reset a named font size using the tools panel menu', async () => {
179
- // Create a paragraph block with some content.
180
- await clickBlockAppender();
181
- await page.keyboard.type(
182
- 'Paragraph with font size reset using tools panel menu'
183
- );
184
-
185
- await openFontSizeSelectControl();
186
- await pressKeyTimes( 'ArrowDown', 3 );
187
- await page.keyboard.press( 'Enter' );
188
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
189
- "<!-- wp:paragraph {\\"fontSize\\":\\"medium\\"} -->
190
- <p class=\\"has-medium-font-size\\">Paragraph with font size reset using tools panel menu</p>
191
- <!-- /wp:paragraph -->"
192
- ` );
193
-
194
- // Open Typography ToolsPanel, font size will be first in menu and gain focus.
195
- await openTypographyToolsPanelMenu();
196
-
197
- await page.keyboard.press( 'Enter' );
198
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
199
- "<!-- wp:paragraph -->
200
- <p>Paragraph with font size reset using tools panel menu</p>
201
- <!-- /wp:paragraph -->"
202
- ` );
203
- } );
204
-
205
- it( 'should reset a named font size using input field', async () => {
206
- // Create a paragraph block with some content.
207
- await clickBlockAppender();
208
- await page.keyboard.type(
209
- 'Paragraph with font size reset using input field'
210
- );
211
-
212
- await openFontSizeSelectControl();
213
- await pressKeyTimes( 'ArrowDown', 2 );
214
- await page.keyboard.press( 'Enter' );
215
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
216
- "<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
217
- <p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
218
- <!-- /wp:paragraph -->"
219
- ` );
220
-
221
- await toggleCustomInput( true );
222
- await clickCustomInput();
223
- await pressKeyWithModifier( 'primary', 'A' );
224
- await page.keyboard.press( 'Backspace' );
225
-
226
- // Disable reason: Wait for changes to apply.
227
- // eslint-disable-next-line no-restricted-syntax
228
- await page.waitForTimeout( 1000 );
229
-
230
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
231
- "<!-- wp:paragraph -->
232
- <p>Paragraph with font size reset using input field</p>
233
- <!-- /wp:paragraph -->"
234
- ` );
235
- } );
236
- } );
237
- describe( 'Few font sizes', () => {
238
- it( 'should apply a named font size using the font size buttons', async () => {
239
- // Create a paragraph block with some content.
240
- await clickBlockAppender();
241
- await page.keyboard.type( 'Paragraph to be made "large"' );
242
-
243
- await clickFontSizeButtonByLabel( 'Large' );
244
- const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-checked='true']`;
245
- const [ activeButton ] = await page.$x( buttonSelector );
246
- const activeLabel = await page.evaluate(
247
- ( element ) => element?.getAttribute( 'aria-label' ),
248
- activeButton
249
- );
250
- expect( activeLabel ).toEqual( 'Large' );
251
-
252
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
253
- "<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
254
- <p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
255
- <!-- /wp:paragraph -->"
256
- ` );
257
- } );
258
-
259
- it( 'should reset a named font size using the tools panel menu', async () => {
260
- // Create a paragraph block with some content.
261
- await clickBlockAppender();
262
- await page.keyboard.type(
263
- 'Paragraph with font size reset using tools panel menu'
264
- );
265
-
266
- await clickFontSizeButtonByLabel( 'Small' );
267
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
268
- "<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
269
- <p class=\\"has-small-font-size\\">Paragraph with font size reset using tools panel menu</p>
270
- <!-- /wp:paragraph -->"
271
- ` );
272
-
273
- // Open Typography ToolsPanel, font size will be first in menu and gain focus.
274
- await openTypographyToolsPanelMenu();
275
-
276
- await page.keyboard.press( 'Enter' );
277
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
278
- "<!-- wp:paragraph -->
279
- <p>Paragraph with font size reset using tools panel menu</p>
280
- <!-- /wp:paragraph -->"
281
- ` );
282
- } );
283
-
284
- it( 'should reset a named font size using input field', async () => {
285
- // Create a paragraph block with some content.
286
- await clickBlockAppender();
287
- await page.keyboard.type(
288
- 'Paragraph with font size reset using input field'
289
- );
290
-
291
- await clickFontSizeButtonByLabel( 'Small' );
292
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
293
- "<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
294
- <p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
295
- <!-- /wp:paragraph -->"
296
- ` );
297
-
298
- await toggleCustomInput( true );
299
- await clickCustomInput();
300
- await pressKeyWithModifier( 'primary', 'A' );
301
- await page.keyboard.press( 'Backspace' );
302
-
303
- // Disable reason: Wait for changes to apply.
304
- // eslint-disable-next-line no-restricted-syntax
305
- await page.waitForTimeout( 1000 );
306
-
307
- expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
308
- "<!-- wp:paragraph -->
309
- <p>Paragraph with font size reset using input field</p>
310
- <!-- /wp:paragraph -->"
311
- ` );
312
- } );
313
- } );
314
- } );
@@ -1,142 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import {
5
- createNewPost,
6
- pressKeyWithModifier,
7
- insertBlock,
8
- } from '@wordpress/e2e-test-utils';
9
-
10
- async function focusBlockToolbar() {
11
- await pressKeyWithModifier( 'alt', 'F10' );
12
- }
13
-
14
- async function expectLabelToHaveFocus( label ) {
15
- let ariaLabel = await page.evaluate( () =>
16
- document.activeElement.getAttribute( 'aria-label' )
17
- );
18
- // If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block.
19
- if ( ariaLabel !== label ) {
20
- await page.keyboard.press( 'ArrowUp' );
21
- ariaLabel = await page.evaluate( () =>
22
- document.activeElement.getAttribute( 'aria-label' )
23
- );
24
- }
25
- await expect( ariaLabel ).toBe( label );
26
- }
27
-
28
- async function testBlockToolbarKeyboardNavigation(
29
- currentBlockLabel,
30
- currentBlockTitle
31
- ) {
32
- await focusBlockToolbar();
33
- await expectLabelToHaveFocus( currentBlockTitle );
34
- await page.keyboard.press( 'ArrowRight' );
35
- await expectLabelToHaveFocus( 'Move up' );
36
- await page.keyboard.press( 'Tab' );
37
- await expectLabelToHaveFocus( currentBlockLabel );
38
- await pressKeyWithModifier( 'shift', 'Tab' );
39
- await expectLabelToHaveFocus( 'Move up' );
40
- }
41
-
42
- async function wrapCurrentBlockWithGroup( currentBlockTitle ) {
43
- await page.click( `[aria-label="${ currentBlockTitle }"]` );
44
- await page.click( '.editor-block-list-item-group' );
45
- }
46
-
47
- async function testGroupKeyboardNavigation(
48
- currentBlockLabel,
49
- currentBlockTitle
50
- ) {
51
- await expectLabelToHaveFocus( 'Block: Group' );
52
- await page.keyboard.press( 'ArrowRight' );
53
- await expectLabelToHaveFocus( currentBlockLabel );
54
- await pressKeyWithModifier( 'shift', 'Tab' );
55
- await expectLabelToHaveFocus( 'Select Group' );
56
- await page.keyboard.press( 'ArrowRight' );
57
- await expectLabelToHaveFocus( currentBlockTitle );
58
- }
59
-
60
- describe( 'Toolbar roving tabindex', () => {
61
- beforeEach( async () => {
62
- await createNewPost();
63
- await insertBlock( 'Paragraph' );
64
- await page.keyboard.type( 'First block' );
65
- } );
66
-
67
- it( 'ensures paragraph block toolbar uses roving tabindex', async () => {
68
- await insertBlock( 'Paragraph' );
69
- await page.keyboard.type( 'Paragraph' );
70
- await testBlockToolbarKeyboardNavigation(
71
- 'Paragraph block',
72
- 'Paragraph'
73
- );
74
- await wrapCurrentBlockWithGroup( 'Paragraph' );
75
- await testGroupKeyboardNavigation( 'Paragraph block', 'Paragraph' );
76
- } );
77
-
78
- it( 'ensures heading block toolbar uses roving tabindex', async () => {
79
- await insertBlock( 'Heading' );
80
- await page.keyboard.type( 'Heading' );
81
- await testBlockToolbarKeyboardNavigation( 'Block: Heading', 'Heading' );
82
- await wrapCurrentBlockWithGroup( 'Heading' );
83
- await testGroupKeyboardNavigation( 'Block: Heading', 'Heading' );
84
- } );
85
-
86
- it( 'ensures list block toolbar uses roving tabindex', async () => {
87
- await insertBlock( 'List' );
88
- await page.keyboard.type( 'List' );
89
- await testBlockToolbarKeyboardNavigation( 'List text', 'Select List' );
90
- await page.click( `[aria-label="Select List"]` );
91
- await wrapCurrentBlockWithGroup( 'List' );
92
- await testGroupKeyboardNavigation( 'Block: List', 'List' );
93
- } );
94
-
95
- it( 'ensures image block toolbar uses roving tabindex', async () => {
96
- await insertBlock( 'Image' );
97
- await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' );
98
- await wrapCurrentBlockWithGroup( 'Image' );
99
- await testGroupKeyboardNavigation( 'Block: Image', 'Image' );
100
- } );
101
-
102
- it( 'ensures table block toolbar uses roving tabindex', async () => {
103
- await insertBlock( 'Table' );
104
- await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
105
- // Move focus to the first toolbar item.
106
- await page.keyboard.press( 'Home' );
107
- await expectLabelToHaveFocus( 'Table' );
108
- await page.click( '.blocks-table__placeholder-button' );
109
- await page.keyboard.press( 'Tab' );
110
- await testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' );
111
- await wrapCurrentBlockWithGroup( 'Table' );
112
- await testGroupKeyboardNavigation( 'Block: Table', 'Table' );
113
- } );
114
-
115
- it( 'ensures custom html block toolbar uses roving tabindex', async () => {
116
- await insertBlock( 'Custom HTML' );
117
- await testBlockToolbarKeyboardNavigation( 'HTML', 'Custom HTML' );
118
- await wrapCurrentBlockWithGroup( 'Custom HTML' );
119
- await testGroupKeyboardNavigation(
120
- 'Block: Custom HTML',
121
- 'Custom HTML'
122
- );
123
- } );
124
-
125
- it( 'ensures block toolbar remembers the last focused item', async () => {
126
- await insertBlock( 'Paragraph' );
127
- await page.keyboard.type( 'Paragraph' );
128
- await focusBlockToolbar();
129
- await page.keyboard.press( 'ArrowRight' );
130
- await expectLabelToHaveFocus( 'Move up' );
131
- await page.keyboard.press( 'Tab' );
132
- await pressKeyWithModifier( 'shift', 'Tab' );
133
- await expectLabelToHaveFocus( 'Move up' );
134
- } );
135
-
136
- it( 'can reach toolbar items with arrow keys after pressing alt+F10', async () => {
137
- await pressKeyWithModifier( 'alt', 'F10' );
138
- await page.keyboard.press( 'ArrowRight' );
139
- await page.keyboard.press( 'ArrowRight' );
140
- await expectLabelToHaveFocus( 'Bold' );
141
- } );
142
- } );