@wordpress/e2e-tests 7.13.3 → 7.14.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 +2 -0
- package/package.json +7 -7
- package/plugins/iframed-inline-styles.php +0 -7
- package/plugins/iframed-masonry-block.php +0 -7
- package/plugins/iframed-multiple-stylesheets.php +0 -7
- package/specs/editor/various/change-detection.test.js +1 -0
- package/specs/editor/various/datepicker.test.js +1 -3
- package/specs/editor/various/scheduling.test.js +1 -3
- package/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap +0 -7
- package/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap +0 -7
- package/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js +0 -108
- package/specs/editor/plugins/iframed-inline-styles.test.js +0 -56
- package/specs/editor/plugins/iframed-masonry-block.test.js +0 -49
- package/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js +0 -58
- package/specs/editor/various/__snapshots__/keyboard-navigable-blocks.test.js.snap +0 -19
- package/specs/editor/various/keyboard-navigable-blocks.test.js +0 -239
- package/specs/site-editor/global-styles-sidebar.test.js +0 -45
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@wordpress/e2e-tests",
|
3
|
-
"version": "7.
|
3
|
+
"version": "7.14.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": "^10.
|
27
|
-
"@wordpress/jest-console": "^7.
|
28
|
-
"@wordpress/jest-puppeteer-axe": "^6.
|
29
|
-
"@wordpress/scripts": "^26.
|
30
|
-
"@wordpress/url": "^3.
|
26
|
+
"@wordpress/e2e-test-utils": "^10.14.0",
|
27
|
+
"@wordpress/jest-console": "^7.14.0",
|
28
|
+
"@wordpress/jest-puppeteer-axe": "^6.14.0",
|
29
|
+
"@wordpress/scripts": "^26.14.0",
|
30
|
+
"@wordpress/url": "^3.44.0",
|
31
31
|
"chalk": "^4.0.0",
|
32
32
|
"expect-puppeteer": "^4.4.0",
|
33
33
|
"filenamify": "^4.2.0",
|
@@ -45,5 +45,5 @@
|
|
45
45
|
"publishConfig": {
|
46
46
|
"access": "public"
|
47
47
|
},
|
48
|
-
"gitHead": "
|
48
|
+
"gitHead": "9b8e598c5418d38fe72197c24ef1d3dd6c712151"
|
49
49
|
}
|
@@ -349,6 +349,7 @@ describe( 'Change detection', () => {
|
|
349
349
|
// Trash post.
|
350
350
|
await openDocumentSettingsSidebar();
|
351
351
|
await page.click( '.editor-post-trash.components-button' );
|
352
|
+
await page.click( '.components-confirm-dialog .is-primary' );
|
352
353
|
|
353
354
|
await Promise.all( [
|
354
355
|
// Wait for "Saved" to confirm save complete.
|
@@ -61,9 +61,7 @@ async function getPublishingDate() {
|
|
61
61
|
);
|
62
62
|
}
|
63
63
|
|
64
|
-
|
65
|
-
// See: https://github.com/WordPress/gutenberg/pull/54806#issuecomment-1734840171.
|
66
|
-
describe.each( [ [ 'UTC-10' ], [ 'UTC+1' ], [ 'UTC+10' ] ] )(
|
64
|
+
describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
|
67
65
|
`Datepicker %s`,
|
68
66
|
( timezone ) => {
|
69
67
|
let oldTimezone;
|
@@ -23,9 +23,7 @@ describe( 'Scheduling', () => {
|
|
23
23
|
} );
|
24
24
|
};
|
25
25
|
|
26
|
-
|
27
|
-
// See: https://github.com/WordPress/gutenberg/pull/54806#issuecomment-1734840171.
|
28
|
-
describe.each( [ [ 'UTC-10' ], [ 'UTC+1' ], [ 'UTC+10' ] ] )(
|
26
|
+
describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
|
29
27
|
`Timezone %s`,
|
30
28
|
( timezone ) => {
|
31
29
|
let oldTimezone;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
-
|
3
|
-
exports[`iframed inline styles should load inline styles in iframe 1`] = `
|
4
|
-
"<!-- wp:test/iframed-inline-styles -->
|
5
|
-
<div class="wp-block-test-iframed-inline-styles">Save</div>
|
6
|
-
<!-- /wp:test/iframed-inline-styles -->"
|
7
|
-
`;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
-
|
3
|
-
exports[`iframed masonry block should load script and dependencies in iframe 1`] = `
|
4
|
-
"<!-- wp:test/iframed-masonry-block -->
|
5
|
-
<div class="wp-block-test-iframed-masonry-block"><div class="grid-item"></div><div class="grid-item grid-item--width2 grid-item--height2"></div><div class="grid-item grid-item--height3"></div><div class="grid-item grid-item--height2"></div><div class="grid-item grid-item--width3"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item grid-item--height2"></div><div class="grid-item grid-item--width2 grid-item--height3"></div><div class="grid-item"></div><div class="grid-item grid-item--height2"></div><div class="grid-item"></div><div class="grid-item grid-item--width2 grid-item--height2"></div><div class="grid-item grid-item--width2"></div><div class="grid-item"></div><div class="grid-item grid-item--height2"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item grid-item--height3"></div><div class="grid-item grid-item--height2"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item grid-item--height2"></div></div>
|
6
|
-
<!-- /wp:test/iframed-masonry-block -->"
|
7
|
-
`;
|
@@ -1,108 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import {
|
5
|
-
activatePlugin,
|
6
|
-
createNewPost,
|
7
|
-
deactivatePlugin,
|
8
|
-
canvas,
|
9
|
-
activateTheme,
|
10
|
-
} from '@wordpress/e2e-test-utils';
|
11
|
-
|
12
|
-
async function getComputedStyle( context, selector, property ) {
|
13
|
-
return await context.evaluate(
|
14
|
-
( sel, prop ) =>
|
15
|
-
window.getComputedStyle( document.querySelector( sel ) )[ prop ],
|
16
|
-
selector,
|
17
|
-
property
|
18
|
-
);
|
19
|
-
}
|
20
|
-
|
21
|
-
describe( 'iframed block editor settings styles', () => {
|
22
|
-
beforeEach( async () => {
|
23
|
-
// Activate the empty theme (block based theme), which is iframed.
|
24
|
-
await activateTheme( 'emptytheme' );
|
25
|
-
await activatePlugin(
|
26
|
-
'gutenberg-test-iframed-enqueue-block-editor-settings'
|
27
|
-
);
|
28
|
-
await createNewPost();
|
29
|
-
} );
|
30
|
-
|
31
|
-
afterEach( async () => {
|
32
|
-
await deactivatePlugin(
|
33
|
-
'gutenberg-test-iframed-enqueue-block-editor-settings'
|
34
|
-
);
|
35
|
-
await activateTheme( 'twentytwentyone' );
|
36
|
-
} );
|
37
|
-
|
38
|
-
it( 'should load styles added through block editor settings', async () => {
|
39
|
-
await page.waitForSelector( 'iframe[name="editor-canvas"]' );
|
40
|
-
// Expect a red border (added in PHP).
|
41
|
-
expect( await getComputedStyle( canvas(), 'p', 'border-color' ) ).toBe(
|
42
|
-
'rgb(255, 0, 0)'
|
43
|
-
);
|
44
|
-
|
45
|
-
await page.evaluate( () => {
|
46
|
-
const settings = window.wp.data
|
47
|
-
.select( 'core/editor' )
|
48
|
-
.getEditorSettings();
|
49
|
-
wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
|
50
|
-
...settings,
|
51
|
-
styles: [
|
52
|
-
...settings.styles,
|
53
|
-
{
|
54
|
-
css: 'p { border-width: 2px; }',
|
55
|
-
__unstableType: 'plugin',
|
56
|
-
},
|
57
|
-
],
|
58
|
-
} );
|
59
|
-
} );
|
60
|
-
|
61
|
-
// Expect a 2px border (added in JS).
|
62
|
-
expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
|
63
|
-
'2px'
|
64
|
-
);
|
65
|
-
} );
|
66
|
-
|
67
|
-
it( 'should load theme styles added through block editor settings', async () => {
|
68
|
-
await page.waitForSelector( 'iframe[name="editor-canvas"]' );
|
69
|
-
|
70
|
-
await page.evaluate( () => {
|
71
|
-
// Make sure that theme styles are added even if the theme styles
|
72
|
-
// preference is off.
|
73
|
-
window.wp.data
|
74
|
-
.dispatch( 'core/edit-post' )
|
75
|
-
.toggleFeature( 'themeStyles' );
|
76
|
-
const settings = window.wp.data
|
77
|
-
.select( 'core/editor' )
|
78
|
-
.getEditorSettings();
|
79
|
-
wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
|
80
|
-
...settings,
|
81
|
-
styles: [
|
82
|
-
...settings.styles,
|
83
|
-
{
|
84
|
-
css: 'p { border-width: 2px; }',
|
85
|
-
__unstableType: 'theme',
|
86
|
-
},
|
87
|
-
],
|
88
|
-
} );
|
89
|
-
} );
|
90
|
-
|
91
|
-
// Expect a 1px border because theme styles are disabled.
|
92
|
-
expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
|
93
|
-
'1px'
|
94
|
-
);
|
95
|
-
|
96
|
-
await page.evaluate( () => {
|
97
|
-
// Now enable theme styles.
|
98
|
-
window.wp.data
|
99
|
-
.dispatch( 'core/edit-post' )
|
100
|
-
.toggleFeature( 'themeStyles' );
|
101
|
-
} );
|
102
|
-
|
103
|
-
// Expect a 2px border because theme styles are enabled.
|
104
|
-
expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
|
105
|
-
'2px'
|
106
|
-
);
|
107
|
-
} );
|
108
|
-
} );
|
@@ -1,56 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import {
|
5
|
-
activatePlugin,
|
6
|
-
createNewPost,
|
7
|
-
deactivatePlugin,
|
8
|
-
insertBlock,
|
9
|
-
getEditedPostContent,
|
10
|
-
canvas,
|
11
|
-
createNewTemplate,
|
12
|
-
} from '@wordpress/e2e-test-utils';
|
13
|
-
|
14
|
-
async function getComputedStyle( context, property ) {
|
15
|
-
await context.waitForSelector( '.wp-block-test-iframed-inline-styles' );
|
16
|
-
return await context.evaluate( ( prop ) => {
|
17
|
-
const container = document.querySelector(
|
18
|
-
'.wp-block-test-iframed-inline-styles'
|
19
|
-
);
|
20
|
-
return window.getComputedStyle( container )[ prop ];
|
21
|
-
}, property );
|
22
|
-
}
|
23
|
-
|
24
|
-
describe( 'iframed inline styles', () => {
|
25
|
-
beforeEach( async () => {
|
26
|
-
await activatePlugin( 'gutenberg-test-iframed-inline-styles' );
|
27
|
-
await createNewPost( { postType: 'page' } );
|
28
|
-
} );
|
29
|
-
|
30
|
-
afterEach( async () => {
|
31
|
-
await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
|
32
|
-
} );
|
33
|
-
|
34
|
-
it( 'should load inline styles in iframe', async () => {
|
35
|
-
await insertBlock( 'Iframed Inline Styles' );
|
36
|
-
|
37
|
-
expect( await getEditedPostContent() ).toMatchSnapshot();
|
38
|
-
expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
|
39
|
-
expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
|
40
|
-
'2px'
|
41
|
-
);
|
42
|
-
|
43
|
-
await createNewTemplate( 'Iframed Test' );
|
44
|
-
|
45
|
-
// Inline styles of properly enqueued stylesheet should load.
|
46
|
-
expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
|
47
|
-
|
48
|
-
// Inline styles of stylesheet loaded with the compatibility layer
|
49
|
-
// should load.
|
50
|
-
expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
|
51
|
-
'2px'
|
52
|
-
);
|
53
|
-
|
54
|
-
expect( console ).toHaveWarned();
|
55
|
-
} );
|
56
|
-
} );
|
@@ -1,49 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import {
|
5
|
-
activatePlugin,
|
6
|
-
createNewPost,
|
7
|
-
deactivatePlugin,
|
8
|
-
insertBlock,
|
9
|
-
getEditedPostContent,
|
10
|
-
canvas,
|
11
|
-
createNewTemplate,
|
12
|
-
} from '@wordpress/e2e-test-utils';
|
13
|
-
|
14
|
-
async function didMasonryLoadCorrectly( context ) {
|
15
|
-
return await context.evaluate( () => {
|
16
|
-
const container = document.querySelector(
|
17
|
-
'.wp-block-test-iframed-masonry-block'
|
18
|
-
);
|
19
|
-
return (
|
20
|
-
// Expect Masonry to set a non-zero height.
|
21
|
-
parseInt( container.style.height, 10 ) > 0 &&
|
22
|
-
// Expect Masonry to absolute position items.
|
23
|
-
container.firstElementChild.style.position === 'absolute'
|
24
|
-
);
|
25
|
-
} );
|
26
|
-
}
|
27
|
-
|
28
|
-
describe( 'iframed masonry block', () => {
|
29
|
-
beforeEach( async () => {
|
30
|
-
await activatePlugin( 'gutenberg-test-iframed-masonry-block' );
|
31
|
-
await createNewPost( { postType: 'page' } );
|
32
|
-
} );
|
33
|
-
|
34
|
-
afterEach( async () => {
|
35
|
-
await deactivatePlugin( 'gutenberg-test-iframed-masonry-block' );
|
36
|
-
} );
|
37
|
-
|
38
|
-
it( 'should load script and dependencies in iframe', async () => {
|
39
|
-
await insertBlock( 'Iframed Masonry Block' );
|
40
|
-
|
41
|
-
expect( await getEditedPostContent() ).toMatchSnapshot();
|
42
|
-
expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true );
|
43
|
-
|
44
|
-
await createNewTemplate( 'Iframed Test' );
|
45
|
-
await canvas().waitForSelector( '.grid-item[style]' );
|
46
|
-
|
47
|
-
expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true );
|
48
|
-
} );
|
49
|
-
} );
|
@@ -1,58 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import {
|
5
|
-
activatePlugin,
|
6
|
-
createNewPost,
|
7
|
-
deactivatePlugin,
|
8
|
-
insertBlock,
|
9
|
-
canvas,
|
10
|
-
createNewTemplate,
|
11
|
-
} from '@wordpress/e2e-test-utils';
|
12
|
-
|
13
|
-
async function getComputedStyle( context, property ) {
|
14
|
-
await context.waitForSelector(
|
15
|
-
'.wp-block-test-iframed-multiple-stylesheets'
|
16
|
-
);
|
17
|
-
return await context.evaluate( ( prop ) => {
|
18
|
-
const container = document.querySelector(
|
19
|
-
'.wp-block-test-iframed-multiple-stylesheets'
|
20
|
-
);
|
21
|
-
return window.getComputedStyle( container )[ prop ];
|
22
|
-
}, property );
|
23
|
-
}
|
24
|
-
|
25
|
-
describe( 'iframed multiple block stylesheets', () => {
|
26
|
-
beforeEach( async () => {
|
27
|
-
await activatePlugin( 'gutenberg-test-iframed-multiple-stylesheets' );
|
28
|
-
await createNewPost( { postType: 'page' } );
|
29
|
-
} );
|
30
|
-
|
31
|
-
afterEach( async () => {
|
32
|
-
await deactivatePlugin( 'gutenberg-test-iframed-multiple-stylesheets' );
|
33
|
-
} );
|
34
|
-
|
35
|
-
it( 'should load multiple block stylesheets in iframe', async () => {
|
36
|
-
await insertBlock( 'Iframed Multiple Stylesheets' );
|
37
|
-
|
38
|
-
await canvas().waitForSelector(
|
39
|
-
'.wp-block-test-iframed-multiple-stylesheets'
|
40
|
-
);
|
41
|
-
await createNewTemplate( 'Iframed Test' );
|
42
|
-
|
43
|
-
// Style loaded from the main stylesheet.
|
44
|
-
expect( await getComputedStyle( canvas(), 'border-style' ) ).toBe(
|
45
|
-
'dashed'
|
46
|
-
);
|
47
|
-
|
48
|
-
// Style loaded from the additional stylesheet.
|
49
|
-
expect( await getComputedStyle( canvas(), 'border-color' ) ).toBe(
|
50
|
-
'rgb(255, 0, 0)'
|
51
|
-
);
|
52
|
-
|
53
|
-
// Style loaded from the a stylesheet using path instead of handle.
|
54
|
-
expect( await getComputedStyle( canvas(), 'background-color' ) ).toBe(
|
55
|
-
'rgb(0, 0, 0)'
|
56
|
-
);
|
57
|
-
} );
|
58
|
-
} );
|
@@ -1,19 +0,0 @@
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
-
|
3
|
-
exports[`Order of block keyboard navigation should navigate correctly with multi selection 1`] = `
|
4
|
-
"<!-- wp:paragraph -->
|
5
|
-
<p>1</p>
|
6
|
-
<!-- /wp:paragraph -->
|
7
|
-
|
8
|
-
<!-- wp:paragraph -->
|
9
|
-
<p>2</p>
|
10
|
-
<!-- /wp:paragraph -->
|
11
|
-
|
12
|
-
<!-- wp:paragraph -->
|
13
|
-
<p>3</p>
|
14
|
-
<!-- /wp:paragraph -->
|
15
|
-
|
16
|
-
<!-- wp:paragraph -->
|
17
|
-
<p>4</p>
|
18
|
-
<!-- /wp:paragraph -->"
|
19
|
-
`;
|
@@ -1,239 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import {
|
5
|
-
createNewPost,
|
6
|
-
insertBlock,
|
7
|
-
pressKeyWithModifier,
|
8
|
-
clickBlockAppender,
|
9
|
-
getEditedPostContent,
|
10
|
-
showBlockToolbar,
|
11
|
-
canvas,
|
12
|
-
} from '@wordpress/e2e-test-utils';
|
13
|
-
|
14
|
-
async function getActiveLabel() {
|
15
|
-
return await page.evaluate( () => {
|
16
|
-
const { activeElement } =
|
17
|
-
document.activeElement.contentDocument ?? document;
|
18
|
-
return (
|
19
|
-
activeElement.getAttribute( 'aria-label' ) ||
|
20
|
-
activeElement.innerHTML
|
21
|
-
);
|
22
|
-
} );
|
23
|
-
}
|
24
|
-
|
25
|
-
const navigateToContentEditorTop = async () => {
|
26
|
-
// Use 'Ctrl+`' to return to the top of the editor.
|
27
|
-
await pressKeyWithModifier( 'ctrl', '`' );
|
28
|
-
await pressKeyWithModifier( 'ctrl', '`' );
|
29
|
-
await pressKeyWithModifier( 'ctrl', '`' );
|
30
|
-
await pressKeyWithModifier( 'ctrl', '`' );
|
31
|
-
await pressKeyWithModifier( 'ctrl', '`' );
|
32
|
-
};
|
33
|
-
|
34
|
-
const tabThroughParagraphBlock = async ( paragraphText ) => {
|
35
|
-
await tabThroughBlockToolbar();
|
36
|
-
|
37
|
-
await page.keyboard.press( 'Tab' );
|
38
|
-
await expect( await getActiveLabel() ).toBe( 'Block: Paragraph' );
|
39
|
-
await expect(
|
40
|
-
await page.evaluate( () => {
|
41
|
-
const { activeElement } =
|
42
|
-
document.activeElement.contentDocument ?? document;
|
43
|
-
return activeElement.innerHTML;
|
44
|
-
} )
|
45
|
-
).toBe( paragraphText );
|
46
|
-
|
47
|
-
await page.keyboard.press( 'Tab' );
|
48
|
-
await expect( await getActiveLabel() ).toBe( 'Open document settings' );
|
49
|
-
|
50
|
-
// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
|
51
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
52
|
-
await expect( await getActiveLabel() ).toBe( 'Block: Paragraph' );
|
53
|
-
};
|
54
|
-
|
55
|
-
const tabThroughBlockToolbar = async () => {
|
56
|
-
await page.keyboard.press( 'Tab' );
|
57
|
-
await expect( await getActiveLabel() ).toBe( 'Paragraph' );
|
58
|
-
|
59
|
-
await page.keyboard.press( 'ArrowRight' );
|
60
|
-
await expect( await getActiveLabel() ).toBe( 'Move up' );
|
61
|
-
|
62
|
-
await page.keyboard.press( 'ArrowRight' );
|
63
|
-
await expect( await getActiveLabel() ).toBe( 'Move down' );
|
64
|
-
|
65
|
-
await page.keyboard.press( 'ArrowRight' );
|
66
|
-
await expect( await getActiveLabel() ).toBe( 'Align text' );
|
67
|
-
|
68
|
-
await page.keyboard.press( 'ArrowRight' );
|
69
|
-
await expect( await getActiveLabel() ).toBe( 'Bold' );
|
70
|
-
|
71
|
-
await page.keyboard.press( 'ArrowRight' );
|
72
|
-
await expect( await getActiveLabel() ).toBe( 'Italic' );
|
73
|
-
|
74
|
-
await page.keyboard.press( 'ArrowRight' );
|
75
|
-
await expect( await getActiveLabel() ).toBe( 'Link' );
|
76
|
-
|
77
|
-
await page.keyboard.press( 'ArrowRight' );
|
78
|
-
await expect( await getActiveLabel() ).toBe( 'More' );
|
79
|
-
|
80
|
-
await page.keyboard.press( 'ArrowRight' );
|
81
|
-
await expect( await getActiveLabel() ).toBe( 'Options' );
|
82
|
-
|
83
|
-
await page.keyboard.press( 'ArrowRight' );
|
84
|
-
await expect( await getActiveLabel() ).toBe( 'Paragraph' );
|
85
|
-
};
|
86
|
-
|
87
|
-
describe( 'Order of block keyboard navigation', () => {
|
88
|
-
beforeEach( async () => {
|
89
|
-
await createNewPost();
|
90
|
-
} );
|
91
|
-
|
92
|
-
it( 'permits tabbing through paragraph blocks in the expected order', async () => {
|
93
|
-
const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
|
94
|
-
|
95
|
-
// Create 3 paragraphs blocks with some content.
|
96
|
-
for ( const paragraphBlock of paragraphBlocks ) {
|
97
|
-
await insertBlock( 'Paragraph' );
|
98
|
-
await page.keyboard.type( paragraphBlock );
|
99
|
-
}
|
100
|
-
|
101
|
-
// Select the middle block.
|
102
|
-
await page.keyboard.press( 'ArrowUp' );
|
103
|
-
await showBlockToolbar();
|
104
|
-
await navigateToContentEditorTop();
|
105
|
-
await tabThroughParagraphBlock( 'Paragraph 1' );
|
106
|
-
|
107
|
-
// Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
|
108
|
-
// This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
|
109
|
-
await navigateToContentEditorTop();
|
110
|
-
await tabThroughParagraphBlock( 'Paragraph 1' );
|
111
|
-
} );
|
112
|
-
|
113
|
-
it( 'allows tabbing in navigation mode if no block is selected', async () => {
|
114
|
-
const paragraphBlocks = [ '0', '1' ];
|
115
|
-
|
116
|
-
// Create 2 paragraphs blocks with some content.
|
117
|
-
for ( const paragraphBlock of paragraphBlocks ) {
|
118
|
-
await insertBlock( 'Paragraph' );
|
119
|
-
await page.keyboard.type( paragraphBlock );
|
120
|
-
}
|
121
|
-
|
122
|
-
// Clear the selected block.
|
123
|
-
const paragraph = await canvas().$( '[data-type="core/paragraph"]' );
|
124
|
-
const box = await paragraph.boundingBox();
|
125
|
-
await page.mouse.click( box.x - 1, box.y );
|
126
|
-
|
127
|
-
await page.keyboard.press( 'Tab' );
|
128
|
-
await expect( await getActiveLabel() ).toBe( 'Add title' );
|
129
|
-
|
130
|
-
await page.keyboard.press( 'Tab' );
|
131
|
-
await expect( await getActiveLabel() ).toBe(
|
132
|
-
'Paragraph Block. Row 1. 0'
|
133
|
-
);
|
134
|
-
|
135
|
-
await page.keyboard.press( 'Tab' );
|
136
|
-
await expect( await getActiveLabel() ).toBe(
|
137
|
-
'Paragraph Block. Row 2. 1'
|
138
|
-
);
|
139
|
-
|
140
|
-
await page.keyboard.press( 'Tab' );
|
141
|
-
await expect( await getActiveLabel() ).toBe( 'Open document settings' );
|
142
|
-
} );
|
143
|
-
|
144
|
-
it( 'allows tabbing in navigation mode if no block is selected (reverse)', async () => {
|
145
|
-
const paragraphBlocks = [ '0', '1' ];
|
146
|
-
|
147
|
-
// Create 2 paragraphs blocks with some content.
|
148
|
-
for ( const paragraphBlock of paragraphBlocks ) {
|
149
|
-
await insertBlock( 'Paragraph' );
|
150
|
-
await page.keyboard.type( paragraphBlock );
|
151
|
-
}
|
152
|
-
|
153
|
-
// Clear the selected block.
|
154
|
-
const paragraph = await canvas().$( '[data-type="core/paragraph"]' );
|
155
|
-
const box = await paragraph.boundingBox();
|
156
|
-
await page.mouse.click( box.x - 1, box.y );
|
157
|
-
|
158
|
-
// Put focus behind the block list.
|
159
|
-
await page.evaluate( () => {
|
160
|
-
document
|
161
|
-
.querySelector( '.interface-interface-skeleton__sidebar' )
|
162
|
-
.focus();
|
163
|
-
} );
|
164
|
-
|
165
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
166
|
-
await expect( await getActiveLabel() ).toBe( 'Add block' );
|
167
|
-
|
168
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
169
|
-
await expect( await getActiveLabel() ).toBe( 'Add default block' );
|
170
|
-
|
171
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
172
|
-
await expect( await getActiveLabel() ).toBe(
|
173
|
-
'Paragraph Block. Row 2. 1'
|
174
|
-
);
|
175
|
-
|
176
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
177
|
-
await expect( await getActiveLabel() ).toBe(
|
178
|
-
'Paragraph Block. Row 1. 0'
|
179
|
-
);
|
180
|
-
|
181
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
182
|
-
await expect( await getActiveLabel() ).toBe( 'Add title' );
|
183
|
-
} );
|
184
|
-
|
185
|
-
it( 'should navigate correctly with multi selection', async () => {
|
186
|
-
await clickBlockAppender();
|
187
|
-
await page.keyboard.type( '1' );
|
188
|
-
await page.keyboard.press( 'Enter' );
|
189
|
-
await page.keyboard.type( '2' );
|
190
|
-
await page.keyboard.press( 'Enter' );
|
191
|
-
await page.keyboard.type( '3' );
|
192
|
-
await page.keyboard.press( 'Enter' );
|
193
|
-
await page.keyboard.type( '4' );
|
194
|
-
await page.keyboard.press( 'ArrowUp' );
|
195
|
-
await pressKeyWithModifier( 'shift', 'ArrowUp' );
|
196
|
-
|
197
|
-
expect( await getEditedPostContent() ).toMatchSnapshot();
|
198
|
-
|
199
|
-
expect( await getActiveLabel() ).toBe( 'Multiple selected blocks' );
|
200
|
-
|
201
|
-
await page.keyboard.press( 'Tab' );
|
202
|
-
await expect( await getActiveLabel() ).toBe( 'Post' );
|
203
|
-
|
204
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
205
|
-
await expect( await getActiveLabel() ).toBe(
|
206
|
-
'Multiple selected blocks'
|
207
|
-
);
|
208
|
-
|
209
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
210
|
-
await page.keyboard.press( 'ArrowRight' );
|
211
|
-
await expect( await getActiveLabel() ).toBe( 'Move up' );
|
212
|
-
} );
|
213
|
-
|
214
|
-
it( 'allows the first element within a block to receive focus', async () => {
|
215
|
-
// Insert a image block.
|
216
|
-
await insertBlock( 'Image' );
|
217
|
-
|
218
|
-
// Make sure the upload button has focus.
|
219
|
-
const uploadButton = await canvas().waitForXPath(
|
220
|
-
'//button[contains( text(), "Upload" ) ]'
|
221
|
-
);
|
222
|
-
await expect( uploadButton ).toHaveFocus();
|
223
|
-
|
224
|
-
// Try to focus the image block wrapper.
|
225
|
-
await page.keyboard.press( 'ArrowUp' );
|
226
|
-
await expect( await getActiveLabel() ).toBe( 'Block: Image' );
|
227
|
-
} );
|
228
|
-
|
229
|
-
it( 'allows the block wrapper to gain focus for a group block instead of the first element', async () => {
|
230
|
-
// Insert a group block.
|
231
|
-
await insertBlock( 'Group' );
|
232
|
-
// Select the default, selected Group layout from the variation picker.
|
233
|
-
await canvas().click(
|
234
|
-
'button[aria-label="Group: Gather blocks in a container."]'
|
235
|
-
);
|
236
|
-
// If active label matches, that means focus did not change from group block wrapper.
|
237
|
-
await expect( await getActiveLabel() ).toBe( 'Block: Group' );
|
238
|
-
} );
|
239
|
-
} );
|
@@ -1,45 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import {
|
5
|
-
deleteAllTemplates,
|
6
|
-
activateTheme,
|
7
|
-
visitSiteEditor,
|
8
|
-
enterEditMode,
|
9
|
-
toggleGlobalStyles,
|
10
|
-
openGlobalStylesPanel,
|
11
|
-
} from '@wordpress/e2e-test-utils';
|
12
|
-
|
13
|
-
describe( 'Global styles sidebar', () => {
|
14
|
-
beforeAll( async () => {
|
15
|
-
await activateTheme( 'emptytheme' );
|
16
|
-
await Promise.all( [
|
17
|
-
deleteAllTemplates( 'wp_template' ),
|
18
|
-
deleteAllTemplates( 'wp_template_part' ),
|
19
|
-
] );
|
20
|
-
} );
|
21
|
-
afterAll( async () => {
|
22
|
-
await Promise.all( [
|
23
|
-
deleteAllTemplates( 'wp_template' ),
|
24
|
-
deleteAllTemplates( 'wp_template_part' ),
|
25
|
-
] );
|
26
|
-
await activateTheme( 'twentytwentyone' );
|
27
|
-
} );
|
28
|
-
beforeEach( async () => {
|
29
|
-
await visitSiteEditor();
|
30
|
-
await enterEditMode();
|
31
|
-
} );
|
32
|
-
describe( 'blocks list', () => {
|
33
|
-
it( 'should filter results properly', async () => {
|
34
|
-
await toggleGlobalStyles();
|
35
|
-
await openGlobalStylesPanel( 'Blocks' );
|
36
|
-
await page.focus( '.edit-site-block-types-search input' );
|
37
|
-
await page.keyboard.type( 'heading' );
|
38
|
-
const results = await page.$$(
|
39
|
-
'.edit-site-block-types-item-list div[role="listitem"]'
|
40
|
-
);
|
41
|
-
// Matches both Heading and Table of Contents blocks. (The latter contains "heading" in its description.)
|
42
|
-
expect( results.length ).toEqual( 2 );
|
43
|
-
} );
|
44
|
-
} );
|
45
|
-
} );
|