@wordpress/e2e-tests 4.9.1 → 5.0.1-next.957ca95e4c.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 (38) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/README.md +1 -1
  3. package/assets/large-post.html +364 -182
  4. package/package.json +8 -8
  5. package/specs/editor/blocks/__snapshots__/navigation.test.js.snap +2 -2
  6. package/specs/editor/blocks/__snapshots__/quote.test.js.snap +5 -1
  7. package/specs/editor/blocks/navigation.test.js +392 -154
  8. package/specs/editor/blocks/quote.test.js +4 -1
  9. package/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap +5 -3
  10. package/specs/editor/plugins/inner-blocks-allowed-blocks.test.js +3 -0
  11. package/specs/editor/various/__snapshots__/block-deletion.test.js.snap +3 -1
  12. package/specs/editor/various/__snapshots__/block-grouping.test.js.snap +5 -5
  13. package/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap +1 -1
  14. package/specs/editor/various/__snapshots__/draggable-block.test.js.snap +22 -2
  15. package/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap +1 -1
  16. package/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap +1 -7
  17. package/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap +34 -6
  18. package/specs/editor/various/__snapshots__/rich-text.test.js.snap +19 -5
  19. package/specs/editor/various/__snapshots__/writing-flow.test.js.snap +3 -11
  20. package/specs/editor/various/block-grouping.test.js +2 -2
  21. package/specs/editor/various/block-switcher.test.js +11 -3
  22. package/specs/editor/various/draggable-block.test.js +83 -14
  23. package/specs/editor/various/inserting-blocks.test.js +4 -0
  24. package/specs/editor/various/keep-styles-on-block-transforms.test.js +0 -17
  25. package/specs/editor/various/multi-block-selection.test.js +36 -5
  26. package/specs/editor/various/post-visibility.test.js +2 -4
  27. package/specs/editor/various/rich-text.test.js +9 -6
  28. package/specs/editor/various/scheduling.test.js +2 -6
  29. package/specs/editor/various/splitting-merging.test.js +7 -2
  30. package/specs/editor/various/switch-to-draft.test.js +2 -4
  31. package/specs/editor/various/toolbar-roving-tabindex.test.js +2 -1
  32. package/specs/editor/various/writing-flow.test.js +8 -4
  33. package/specs/performance/post-editor.test.js +3 -3
  34. package/specs/site-editor/global-styles-sidebar.test.js +2 -1
  35. package/specs/editor/plugins/register-block-type-hooks.test.js +0 -32
  36. package/specs/editor/plugins/wp-editor-meta-box.test.js +0 -58
  37. package/specs/editor/various/__snapshots__/duplicating-blocks.test.js.snap +0 -21
  38. package/specs/editor/various/duplicating-blocks.test.js +0 -47
@@ -143,8 +143,11 @@ describe( 'Quote', () => {
143
143
  expect( await getEditedPostContent() ).toMatchSnapshot();
144
144
 
145
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' );
146
149
 
147
- // Expect the paragraph to be deleted.
150
+ // Expect the paragraph to be merged into the quote block.
148
151
  expect( await getEditedPostContent() ).toMatchSnapshot();
149
152
  } );
150
153
 
@@ -41,7 +41,7 @@ exports[`cpt locking template_lock all should not error when deleting the cotent
41
41
  `;
42
42
 
43
43
  exports[`cpt locking template_lock all unlocked group should allow blocks to be moved 1`] = `
44
- "<!-- wp:group {\\"templateLock\\":false} -->
44
+ "<!-- wp:group {\\"templateLock\\":false,\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
45
45
  <div class=\\"wp-block-group\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
46
46
  <p>p1</p>
47
47
  <!-- /wp:paragraph -->
@@ -55,7 +55,7 @@ exports[`cpt locking template_lock all unlocked group should allow blocks to be
55
55
  `;
56
56
 
57
57
  exports[`cpt locking template_lock all unlocked group should allow blocks to be removed 1`] = `
58
- "<!-- wp:group {\\"templateLock\\":false} -->
58
+ "<!-- wp:group {\\"templateLock\\":false,\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
59
59
  <div class=\\"wp-block-group\\"><!-- wp:quote -->
60
60
  <blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
61
61
  <p></p>
@@ -84,7 +84,9 @@ exports[`cpt locking template_lock false should allow blocks to be inserted 1`]
84
84
  <!-- /wp:columns -->
85
85
 
86
86
  <!-- wp:list -->
87
- <ul><li>List content</li></ul>
87
+ <ul><!-- wp:list-item -->
88
+ <li>List content</li>
89
+ <!-- /wp:list-item --></ul>
88
90
  <!-- /wp:list -->"
89
91
  `;
90
92
 
@@ -75,6 +75,9 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
75
75
  await page.$x( `//button//span[contains(text(), 'List')]` )
76
76
  )[ 0 ];
77
77
  await insertButton.click();
78
+ // Select the list wrapper so the image is inserable.
79
+ await page.keyboard.press( 'ArrowUp' );
80
+ await page.keyboard.press( 'ArrowUp' );
78
81
  await insertBlock( 'Image' );
79
82
  await closeGlobalBlockInserter();
80
83
  await page.waitForSelector( '.product[data-number-of-children="2"]' );
@@ -24,7 +24,9 @@ exports[`block deletion - deleting the third and fourth blocks using backspace w
24
24
  <!-- /wp:paragraph -->
25
25
 
26
26
  <!-- wp:list -->
27
- <ul><li>caret was here</li></ul>
27
+ <ul><!-- wp:list-item -->
28
+ <li>caret was here</li>
29
+ <!-- /wp:list-item --></ul>
28
30
  <!-- /wp:list -->"
29
31
  `;
30
32
 
@@ -1,7 +1,7 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
4
- "<!-- wp:group -->
4
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
5
5
  <div class=\\"wp-block-group\\"><!-- wp:heading -->
6
6
  <h2>Group Heading</h2>
7
7
  <!-- /wp:heading -->
@@ -17,7 +17,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of d
17
17
  `;
18
18
 
19
19
  exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via block transforms 1`] = `
20
- "<!-- wp:group -->
20
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
21
21
  <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
22
22
  <p>First Paragraph</p>
23
23
  <!-- /wp:paragraph -->
@@ -33,7 +33,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
33
33
  `;
34
34
 
35
35
  exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via options toolbar 1`] = `
36
- "<!-- wp:group -->
36
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
37
37
  <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
38
38
  <p>First Paragraph</p>
39
39
  <!-- /wp:paragraph -->
@@ -49,7 +49,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
49
49
  `;
50
50
 
51
51
  exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = `
52
- "<!-- wp:group -->
52
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
53
53
  <div class=\\"wp-block-group\\"><!-- wp:heading -->
54
54
  <h2>Group Heading</h2>
55
55
  <!-- /wp:heading -->
@@ -79,7 +79,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
79
79
  `;
80
80
 
81
81
  exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
82
- "<!-- wp:group {\\"align\\":\\"full\\"} -->
82
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"},\\"align\\":\\"full\\"} -->
83
83
  <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
84
84
  <h2>Group Heading</h2>
85
85
  <!-- /wp:heading -->
@@ -51,7 +51,7 @@ exports[`Navigating the block hierarchy should navigate using the list view side
51
51
  `;
52
52
 
53
53
  exports[`Navigating the block hierarchy should select the wrapper div for a group 1`] = `
54
- "<!-- wp:group -->
54
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
55
55
  <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
56
56
  <p>just a paragraph</p>
57
57
  <!-- /wp:paragraph -->
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Draggable block should drag and drop 1`] = `
3
+ exports[`Draggable block can drag and drop to the bottom of a block list 1`] = `
4
4
  "<!-- wp:paragraph -->
5
5
  <p>1</p>
6
6
  <!-- /wp:paragraph -->
@@ -10,7 +10,27 @@ exports[`Draggable block should drag and drop 1`] = `
10
10
  <!-- /wp:paragraph -->"
11
11
  `;
12
12
 
13
- exports[`Draggable block should drag and drop 2`] = `
13
+ exports[`Draggable block can drag and drop to the bottom of a block list 2`] = `
14
+ "<!-- wp:paragraph -->
15
+ <p>2</p>
16
+ <!-- /wp:paragraph -->
17
+
18
+ <!-- wp:paragraph -->
19
+ <p>1</p>
20
+ <!-- /wp:paragraph -->"
21
+ `;
22
+
23
+ exports[`Draggable block can drag and drop to the top of a block list 1`] = `
24
+ "<!-- wp:paragraph -->
25
+ <p>1</p>
26
+ <!-- /wp:paragraph -->
27
+
28
+ <!-- wp:paragraph -->
29
+ <p>2</p>
30
+ <!-- /wp:paragraph -->"
31
+ `;
32
+
33
+ exports[`Draggable block can drag and drop to the top of a block list 2`] = `
14
34
  "<!-- wp:paragraph -->
15
35
  <p>2</p>
16
36
  <!-- /wp:paragraph -->
@@ -54,7 +54,7 @@ lines preserved[/myshortcode]
54
54
  `;
55
55
 
56
56
  exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from block appender 1`] = `
57
- "<!-- wp:group -->
57
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
58
58
  <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
59
59
  <p>Paragraph inside group</p>
60
60
  <!-- /wp:paragraph --></div>
@@ -6,12 +6,6 @@ exports[`Keep styles on block transforms Should keep colors during a transform 1
6
6
  <!-- /wp:paragraph -->"
7
7
  `;
8
8
 
9
- exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into a single one 1`] = `
10
- "<!-- wp:list {\\"fontSize\\":\\"large\\"} -->
11
- <ul class=\\"has-large-font-size\\"><li>Line 1 to be made large</li><li>Line 2 to be made large</li><li>Line 3 to be made large</li></ul>
12
- <!-- /wp:list -->"
13
- `;
14
-
15
9
  exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into multiple blocks 1`] = `
16
10
  "<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
17
11
  <h2 class=\\"has-large-font-size\\">Line 1 to be made large</h2>
@@ -27,7 +21,7 @@ exports[`Keep styles on block transforms Should keep the font size during a tran
27
21
  `;
28
22
 
29
23
  exports[`Keep styles on block transforms Should not include styles in the group block when grouping a block 1`] = `
30
- "<!-- wp:group -->
24
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
31
25
  <div class=\\"wp-block-group\\"><!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
32
26
  <p class=\\"has-large-font-size\\">Line 1 to be made large</p>
33
27
  <!-- /wp:paragraph --></div>
@@ -152,7 +152,9 @@ exports[`Multi-block selection should multi-select from within the list block 1`
152
152
  <!-- /wp:paragraph -->
153
153
 
154
154
  <!-- wp:list -->
155
- <ul><li>1</li></ul>
155
+ <ul><!-- wp:list-item -->
156
+ <li>1</li>
157
+ <!-- /wp:list-item --></ul>
156
158
  <!-- /wp:list -->"
157
159
  `;
158
160
 
@@ -248,6 +250,28 @@ exports[`Multi-block selection should preserve dragged selection on move 1`] = `
248
250
  <!-- /wp:paragraph -->"
249
251
  `;
250
252
 
253
+ exports[`Multi-block selection should properly select multiple blocks if selected nested blocks belong to different parent 1`] = `
254
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
255
+ <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
256
+ <p>first</p>
257
+ <!-- /wp:paragraph -->
258
+
259
+ <!-- wp:paragraph -->
260
+ <p>group</p>
261
+ <!-- /wp:paragraph --></div>
262
+ <!-- /wp:group -->
263
+
264
+ <!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
265
+ <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
266
+ <p>second</p>
267
+ <!-- /wp:paragraph -->
268
+
269
+ <!-- wp:paragraph -->
270
+ <p>group</p>
271
+ <!-- /wp:paragraph --></div>
272
+ <!-- /wp:group -->"
273
+ `;
274
+
251
275
  exports[`Multi-block selection should return original focus after failed multi selection attempt 1`] = `
252
276
  "<!-- wp:paragraph -->
253
277
  <p>2</p>
@@ -267,13 +291,17 @@ exports[`Multi-block selection should select all from empty selection 1`] = `
267
291
  exports[`Multi-block selection should select all from empty selection 2`] = `""`;
268
292
 
269
293
  exports[`Multi-block selection should select separator (single element block) 1`] = `
270
- "<!-- wp:separator -->
271
- <hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
272
- <!-- /wp:separator -->
294
+ "<!-- wp:paragraph -->
295
+ <p>a</p>
296
+ <!-- /wp:paragraph -->
273
297
 
274
298
  <!-- wp:paragraph -->
275
- <p>a</p>
276
- <!-- /wp:paragraph -->"
299
+ <p></p>
300
+ <!-- /wp:paragraph -->
301
+
302
+ <!-- wp:separator -->
303
+ <hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
304
+ <!-- /wp:separator -->"
277
305
  `;
278
306
 
279
307
  exports[`Multi-block selection should select separator (single element block) 2`] = `
@@ -102,12 +102,24 @@ exports[`RichText should only mutate text data on input 1`] = `
102
102
 
103
103
  exports[`RichText should paste list contents into paragraph 1`] = `
104
104
  "<!-- wp:list -->
105
- <ul><li>1<ul><li>2</li></ul></li></ul>
105
+ <ul><!-- wp:list-item -->
106
+ <li>1<!-- wp:list -->
107
+ <ul><!-- wp:list-item -->
108
+ <li>2</li>
109
+ <!-- /wp:list-item --></ul>
110
+ <!-- /wp:list --></li>
111
+ <!-- /wp:list-item --></ul>
106
112
  <!-- /wp:list -->
107
113
 
108
- <!-- wp:paragraph -->
109
- <p>1<br>2</p>
110
- <!-- /wp:paragraph -->"
114
+ <!-- wp:list -->
115
+ <ul><!-- wp:list-item -->
116
+ <li>1<!-- wp:list -->
117
+ <ul><!-- wp:list-item -->
118
+ <li>2</li>
119
+ <!-- /wp:list-item --></ul>
120
+ <!-- /wp:list --></li>
121
+ <!-- /wp:list-item --></ul>
122
+ <!-- /wp:list -->"
111
123
  `;
112
124
 
113
125
  exports[`RichText should paste paragraph contents into list 1`] = `
@@ -116,7 +128,9 @@ exports[`RichText should paste paragraph contents into list 1`] = `
116
128
  <!-- /wp:paragraph -->
117
129
 
118
130
  <!-- wp:list -->
119
- <ul><li>1</li><li>2</li></ul>
131
+ <ul><!-- wp:list-item -->
132
+ <li>1<br>2</li>
133
+ <!-- /wp:list-item --></ul>
120
134
  <!-- /wp:list -->"
121
135
  `;
122
136
 
@@ -24,16 +24,6 @@ exports[`Writing Flow Should navigate inner blocks with arrow keys 1`] = `
24
24
  <!-- /wp:paragraph -->"
25
25
  `;
26
26
 
27
- exports[`Writing Flow should allow selecting entire list with longer last item 1`] = `
28
- "<!-- wp:paragraph -->
29
- <p>a</p>
30
- <!-- /wp:paragraph -->
31
-
32
- <!-- wp:list -->
33
- <ul><li></li></ul>
34
- <!-- /wp:list -->"
35
- `;
36
-
37
27
  exports[`Writing Flow should create valid paragraph blocks when rapidly pressing Enter 1`] = `
38
28
  "<!-- wp:paragraph -->
39
29
  <p></p>
@@ -208,7 +198,9 @@ exports[`Writing Flow should navigate empty paragraphs 1`] = `
208
198
 
209
199
  exports[`Writing Flow should not create extra line breaks in multiline value 1`] = `
210
200
  "<!-- wp:list -->
211
- <ul><li></li></ul>
201
+ <ul><!-- wp:list-item -->
202
+ <li></li>
203
+ <!-- /wp:list-item --></ul>
212
204
  <!-- /wp:list -->"
213
205
  `;
214
206
 
@@ -148,8 +148,8 @@ describe( 'Block Grouping', () => {
148
148
  await clickBlockToolbarButton( 'Options' );
149
149
  await clickMenuItem( 'Group' );
150
150
  expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
151
- "<!-- wp:group -->
152
- <div class=\\"wp-block-group\\"><!-- wp:group -->
151
+ "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
152
+ <div class=\\"wp-block-group\\"><!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
153
153
  <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
154
154
  <p>1</p>
155
155
  <!-- /wp:paragraph --></div>
@@ -18,6 +18,8 @@ describe( 'Block Switcher', () => {
18
18
  // Insert a list block.
19
19
  await insertBlock( 'List' );
20
20
  await page.keyboard.type( 'List content' );
21
+ await page.keyboard.press( 'ArrowUp' );
22
+ await page.keyboard.press( 'ArrowUp' );
21
23
  await pressKeyWithModifier( 'alt', 'F10' );
22
24
 
23
25
  // Verify the block switcher exists.
@@ -31,7 +33,6 @@ describe( 'Block Switcher', () => {
31
33
  'Heading',
32
34
  'Quote',
33
35
  'Columns',
34
- 'Table of Contents',
35
36
  ] )
36
37
  );
37
38
  } );
@@ -45,6 +46,8 @@ describe( 'Block Switcher', () => {
45
46
  // Insert a list block.
46
47
  await insertBlock( 'List' );
47
48
  await page.keyboard.type( 'List content' );
49
+ await page.keyboard.press( 'ArrowUp' );
50
+ await page.keyboard.press( 'ArrowUp' );
48
51
  await pressKeyWithModifier( 'alt', 'F10' );
49
52
 
50
53
  // Verify the block switcher exists.
@@ -56,7 +59,7 @@ describe( 'Block Switcher', () => {
56
59
  'Group',
57
60
  'Paragraph',
58
61
  'Heading',
59
- 'Table of Contents',
62
+ 'Columns',
60
63
  ] )
61
64
  );
62
65
  } );
@@ -71,13 +74,14 @@ describe( 'Block Switcher', () => {
71
74
  'core/group',
72
75
  'core/heading',
73
76
  'core/columns',
74
- 'core/table-of-contents',
75
77
  ].map( ( block ) => wp.blocks.unregisterBlockType( block ) );
76
78
  } );
77
79
 
78
80
  // Insert a list block.
79
81
  await insertBlock( 'List' );
80
82
  await page.keyboard.type( 'List content' );
83
+ await page.keyboard.press( 'ArrowUp' );
84
+ await page.keyboard.press( 'ArrowUp' );
81
85
  await pressKeyWithModifier( 'alt', 'F10' );
82
86
 
83
87
  // Verify the block switcher exists.
@@ -91,6 +95,8 @@ describe( 'Block Switcher', () => {
91
95
  it( 'Should show Columns block only if selected blocks are between limits (1-6)', async () => {
92
96
  await insertBlock( 'List' );
93
97
  await page.keyboard.type( 'List content' );
98
+ await page.keyboard.press( 'ArrowUp' );
99
+ await page.keyboard.press( 'ArrowUp' );
94
100
  await insertBlock( 'Heading' );
95
101
  await page.keyboard.type( 'I am a header' );
96
102
  await page.keyboard.down( 'Shift' );
@@ -103,6 +109,8 @@ describe( 'Block Switcher', () => {
103
109
  it( 'Should NOT show Columns transform only if selected blocks are more than max limit(6)', async () => {
104
110
  await insertBlock( 'List' );
105
111
  await page.keyboard.type( 'List content' );
112
+ await page.keyboard.press( 'ArrowUp' );
113
+ await page.keyboard.press( 'ArrowUp' );
106
114
  await insertBlock( 'Heading' );
107
115
  await page.keyboard.type( 'I am a header' );
108
116
  await page.keyboard.press( 'Enter' );
@@ -7,51 +7,120 @@ import {
7
7
  deactivatePlugin,
8
8
  activatePlugin,
9
9
  showBlockToolbar,
10
+ setBrowserViewport,
11
+ waitForWindowDimensions,
10
12
  } from '@wordpress/e2e-test-utils';
11
13
 
12
14
  describe( 'Draggable block', () => {
13
- beforeAll( async () => {
14
- await page.setDragInterception( true );
15
+ // Tests don't seem to pass if beforeAll and afterAll are used.
16
+ // Unsure why.
17
+ beforeEach( async () => {
15
18
  await deactivatePlugin(
16
19
  'gutenberg-test-plugin-disables-the-css-animations'
17
20
  );
21
+
22
+ // Set the viewport at a larger size than normal to ensure scrolling doesn't occur.
23
+ // Scrolling can interfere with the drag coordinates.
24
+ await page.setViewport( { width: 960, height: 1024 } );
25
+ await waitForWindowDimensions( 960, 1024 );
26
+ await createNewPost();
27
+ await page.setDragInterception( true );
18
28
  } );
19
29
 
20
- afterAll( async () => {
30
+ afterEach( async () => {
21
31
  await page.setDragInterception( false );
32
+
33
+ // Reset the viewport to normal large size.
34
+ await setBrowserViewport( 'large' );
22
35
  await activatePlugin(
23
36
  'gutenberg-test-plugin-disables-the-css-animations'
24
37
  );
25
38
  } );
26
39
 
27
- beforeEach( async () => {
28
- await createNewPost();
40
+ it( 'can drag and drop to the top of a block list', async () => {
41
+ await page.keyboard.press( 'Enter' );
42
+ await page.keyboard.type( '1' );
43
+ await page.keyboard.press( 'Enter' );
44
+ await page.keyboard.type( '2' );
45
+
46
+ // Confirm correct setup.
47
+ expect( await getEditedPostContent() ).toMatchSnapshot();
48
+
49
+ await showBlockToolbar();
50
+ const dragHandle = await page.waitForSelector(
51
+ '.block-editor-block-mover__drag-handle'
52
+ );
53
+ const dragHandlePoint = await dragHandle.clickablePoint();
54
+
55
+ const firstParagraph = await page.$( '[data-type="core/paragraph"]' );
56
+ const targetPoint = await firstParagraph.clickablePoint();
57
+ const targetRect = await firstParagraph.boundingBox();
58
+ const target = {
59
+ x: targetPoint.x,
60
+ // Drag to the top half.
61
+ y: targetPoint.y - targetRect.height * 0.25,
62
+ };
63
+
64
+ const dragData = await page.mouse.drag( dragHandlePoint, target );
65
+ await page.mouse.dragEnter( target, dragData );
66
+ await page.mouse.dragOver( target, dragData );
67
+
68
+ // Wait for the insertion point to be visible.
69
+ const insertionPoint = await page.waitForSelector(
70
+ '.block-editor-block-list__insertion-point'
71
+ );
72
+
73
+ // Expect the insertion point to be visible above the first paragraph.
74
+ const insertionPointBoundingBox = await insertionPoint.boundingBox();
75
+ expect( insertionPointBoundingBox.y ).toBeLessThan( target.y );
76
+
77
+ await page.mouse.drop( target, dragData );
78
+
79
+ expect( await getEditedPostContent() ).toMatchSnapshot();
29
80
  } );
30
81
 
31
- it( 'should drag and drop', async () => {
82
+ it( 'can drag and drop to the bottom of a block list', async () => {
32
83
  await page.keyboard.press( 'Enter' );
33
84
  await page.keyboard.type( '1' );
34
85
  await page.keyboard.press( 'Enter' );
35
86
  await page.keyboard.type( '2' );
87
+ await page.keyboard.press( 'ArrowUp' );
36
88
 
37
89
  // Confirm correct setup.
38
90
  expect( await getEditedPostContent() ).toMatchSnapshot();
39
91
 
92
+ const [ , secondParagraph ] = await page.$$(
93
+ '[data-type="core/paragraph"]'
94
+ );
95
+
40
96
  await showBlockToolbar();
41
97
  const dragHandle = await page.waitForSelector(
42
98
  '.block-editor-block-mover__drag-handle'
43
99
  );
44
100
  const dragHandlePoint = await dragHandle.clickablePoint();
45
101
 
46
- const paragraph = await page.$( '[data-type="core/paragraph"]' );
47
- const paragraphPoint = await paragraph.clickablePoint();
48
- const paragraphRect = await paragraph.boundingBox();
102
+ const targetPoint = await secondParagraph.clickablePoint();
103
+ const targetRect = await secondParagraph.boundingBox();
104
+ const target = {
105
+ x: targetPoint.x,
106
+ // Drag to the bottom half.
107
+ y: targetPoint.y + targetRect.height * 0.25,
108
+ };
49
109
 
50
- await page.mouse.dragAndDrop( dragHandlePoint, {
51
- x: paragraphPoint.x,
52
- // Drag to the top half.
53
- y: paragraphPoint.y - paragraphRect.height / 4,
54
- } );
110
+ const dragData = await page.mouse.drag( dragHandlePoint, target );
111
+ await page.mouse.dragEnter( target, dragData );
112
+ await page.mouse.dragOver( target, dragData );
113
+
114
+ // Wait for the insertion point to be visible.
115
+ const insertionPoint = await page.waitForSelector(
116
+ '.block-editor-block-list__insertion-point'
117
+ );
118
+
119
+ // Expect the insertion point to be visible below the first paragraph.
120
+ const insertionPointBoundingBox = await insertionPoint.boundingBox();
121
+ expect( insertionPointBoundingBox.y ).toBeGreaterThan( target.y );
122
+
123
+ await page.mouse.drop( target, dragData );
55
124
 
56
125
  expect( await getEditedPostContent() ).toMatchSnapshot();
57
126
  } );
@@ -279,6 +279,8 @@ describe( 'Inserting blocks', () => {
279
279
  await insertBlock( 'Group' );
280
280
  await insertBlock( 'Paragraph' );
281
281
  await page.keyboard.type( 'Paragraph after group' );
282
+ // Click the Group first to make the appender inside it clickable.
283
+ await page.click( '[data-type="core/group"]' );
282
284
  await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
283
285
  const browseAll = await page.waitForXPath(
284
286
  '//button[text()="Browse all"]'
@@ -295,6 +297,8 @@ describe( 'Inserting blocks', () => {
295
297
  await insertBlock( 'Group' );
296
298
  await insertBlock( 'Paragraph' );
297
299
  await page.keyboard.type( 'Text' );
300
+ // Click the Group first to make the appender inside it clickable.
301
+ await page.click( '[data-type="core/group"]' );
298
302
  await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
299
303
  await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
300
304
  await page.focus( INSERTER_SEARCH_SELECTOR );
@@ -34,23 +34,6 @@ describe( 'Keep styles on block transforms', () => {
34
34
  expect( await getEditedPostContent() ).toMatchSnapshot();
35
35
  } );
36
36
 
37
- it( 'Should keep the font size during a transform from multiple blocks into a single one', async () => {
38
- // Create a paragraph block with some content.
39
- await clickBlockAppender();
40
- await page.keyboard.type( 'Line 1 to be made large' );
41
- await page.keyboard.press( 'Enter' );
42
- await page.keyboard.type( 'Line 2 to be made large' );
43
- await page.keyboard.press( 'Enter' );
44
- await page.keyboard.type( 'Line 3 to be made large' );
45
- await pressKeyWithModifier( 'shift', 'ArrowUp' );
46
- await pressKeyWithModifier( 'shift', 'ArrowUp' );
47
- await page.click(
48
- '[role="radiogroup"][aria-label="Font size"] [aria-label="Large"]'
49
- );
50
- await transformBlockTo( 'List' );
51
- expect( await getEditedPostContent() ).toMatchSnapshot();
52
- } );
53
-
54
37
  it( 'Should keep the font size during a transform from multiple blocks into multiple blocks', async () => {
55
38
  // Create a paragraph block with some content.
56
39
  await clickBlockAppender();