@wordpress/e2e-tests 4.2.0 → 4.3.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/package.json +6 -6
- package/specs/editor/blocks/__snapshots__/heading.test.js.snap +0 -6
- package/specs/editor/blocks/heading.test.js +8 -4
- package/specs/editor/blocks/table.test.js +14 -1
- package/specs/editor/fixtures/menu-items-response-fixture.json +48 -144
- package/specs/editor/various/block-switcher.test.js +3 -0
- package/specs/editor/various/inserting-blocks.test.js +1 -1
- package/specs/editor/various/keyboard-navigable-blocks.test.js +0 -3
- package/specs/editor/various/writing-flow.test.js +0 -16
- package/specs/editor/blocks/__snapshots__/image.test.js.snap +0 -25
- package/specs/editor/blocks/image.test.js +0 -373
- package/specs/editor/various/block-locking.test.js +0 -120
- package/specs/editor/various/popovers.test.js +0 -27
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@wordpress/e2e-tests",
|
3
|
-
"version": "4.
|
3
|
+
"version": "4.3.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": ">=12"
|
24
24
|
},
|
25
25
|
"dependencies": {
|
26
|
-
"@wordpress/e2e-test-utils": "^7.
|
27
|
-
"@wordpress/jest-console": "^5.0
|
26
|
+
"@wordpress/e2e-test-utils": "^7.5.0",
|
27
|
+
"@wordpress/jest-console": "^5.1.0",
|
28
28
|
"@wordpress/jest-puppeteer-axe": "^4.0.2",
|
29
|
-
"@wordpress/scripts": "^23.
|
30
|
-
"@wordpress/url": "^3.
|
29
|
+
"@wordpress/scripts": "^23.1.0",
|
30
|
+
"@wordpress/url": "^3.10.0",
|
31
31
|
"chalk": "^4.0.0",
|
32
32
|
"expect-puppeteer": "^4.4.0",
|
33
33
|
"filenamify": "^4.2.0",
|
@@ -46,5 +46,5 @@
|
|
46
46
|
"publishConfig": {
|
47
47
|
"access": "public"
|
48
48
|
},
|
49
|
-
"gitHead": "
|
49
|
+
"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
|
50
50
|
}
|
@@ -12,12 +12,6 @@ exports[`Heading can be created by prefixing number sign and a space 1`] = `
|
|
12
12
|
<!-- /wp:heading -->"
|
13
13
|
`;
|
14
14
|
|
15
|
-
exports[`Heading should correctly apply custom colors 1`] = `
|
16
|
-
"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#0782f6\\"}}} -->
|
17
|
-
<h3 class=\\"has-text-color\\" style=\\"color:#0782f6\\">Heading</h3>
|
18
|
-
<!-- /wp:heading -->"
|
19
|
-
`;
|
20
|
-
|
21
15
|
exports[`Heading should correctly apply named colors 1`] = `
|
22
16
|
"<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
|
23
17
|
<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
|
@@ -86,10 +86,14 @@ describe( 'Heading', () => {
|
|
86
86
|
await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
|
87
87
|
await page.click( COLOR_INPUT_FIELD_SELECTOR );
|
88
88
|
await pressKeyWithModifier( 'primary', 'A' );
|
89
|
-
await page.keyboard.type( '
|
90
|
-
await page.
|
91
|
-
await page.
|
92
|
-
expect( await getEditedPostContent() ).
|
89
|
+
await page.keyboard.type( '4b7f4d' );
|
90
|
+
await page.waitForXPath( '//button//span[contains(text(), "4b7f4d")]' );
|
91
|
+
await page.click( '.wp-block-post-title' );
|
92
|
+
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
|
93
|
+
"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#4b7f4d\\"}}} -->
|
94
|
+
<h3 class=\\"has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
|
95
|
+
<!-- /wp:heading -->"
|
96
|
+
` );
|
93
97
|
} );
|
94
98
|
|
95
99
|
it( 'should correctly apply named colors', async () => {
|
@@ -269,7 +269,6 @@ describe( 'Table', () => {
|
|
269
269
|
// Create the table.
|
270
270
|
await clickButton( createButtonLabel );
|
271
271
|
|
272
|
-
await page.keyboard.press( 'Tab' );
|
273
272
|
await page.keyboard.type( '1' );
|
274
273
|
await page.keyboard.press( 'ArrowDown' );
|
275
274
|
await page.keyboard.type( '2' );
|
@@ -280,4 +279,18 @@ describe( 'Table', () => {
|
|
280
279
|
|
281
280
|
expect( await getEditedPostContent() ).toMatchSnapshot();
|
282
281
|
} );
|
282
|
+
|
283
|
+
it( 'should not have focus loss after creation', async () => {
|
284
|
+
// Insert table block.
|
285
|
+
await insertBlock( 'Table' );
|
286
|
+
|
287
|
+
// Create the table.
|
288
|
+
await clickButton( createButtonLabel );
|
289
|
+
|
290
|
+
// Focus should be in first td.
|
291
|
+
const isInTd = await page.waitForSelector(
|
292
|
+
'td[contentEditable="true"]'
|
293
|
+
);
|
294
|
+
await expect( isInTd ).toHaveFocus();
|
295
|
+
} );
|
283
296
|
} );
|
@@ -16,16 +16,10 @@
|
|
16
16
|
"parent": 0,
|
17
17
|
"menu_order": 1,
|
18
18
|
"target": "",
|
19
|
-
"classes": [
|
20
|
-
|
21
|
-
],
|
22
|
-
"xfn": [
|
23
|
-
""
|
24
|
-
],
|
19
|
+
"classes": [ "" ],
|
20
|
+
"xfn": [ "" ],
|
25
21
|
"meta": [],
|
26
|
-
"menus": [
|
27
|
-
23
|
28
|
-
],
|
22
|
+
"menus": [ 23 ],
|
29
23
|
"_links": {
|
30
24
|
"self": [
|
31
25
|
{
|
@@ -95,16 +89,10 @@
|
|
95
89
|
"parent": 0,
|
96
90
|
"menu_order": 2,
|
97
91
|
"target": "",
|
98
|
-
"classes": [
|
99
|
-
|
100
|
-
],
|
101
|
-
"xfn": [
|
102
|
-
""
|
103
|
-
],
|
92
|
+
"classes": [ "" ],
|
93
|
+
"xfn": [ "" ],
|
104
94
|
"meta": [],
|
105
|
-
"menus": [
|
106
|
-
23
|
107
|
-
],
|
95
|
+
"menus": [ 23 ],
|
108
96
|
"_links": {
|
109
97
|
"self": [
|
110
98
|
{
|
@@ -181,16 +169,10 @@
|
|
181
169
|
"parent": 95,
|
182
170
|
"menu_order": 3,
|
183
171
|
"target": "",
|
184
|
-
"classes": [
|
185
|
-
|
186
|
-
],
|
187
|
-
"xfn": [
|
188
|
-
""
|
189
|
-
],
|
172
|
+
"classes": [ "" ],
|
173
|
+
"xfn": [ "" ],
|
190
174
|
"meta": [],
|
191
|
-
"menus": [
|
192
|
-
23
|
193
|
-
],
|
175
|
+
"menus": [ 23 ],
|
194
176
|
"_links": {
|
195
177
|
"self": [
|
196
178
|
{
|
@@ -267,16 +249,10 @@
|
|
267
249
|
"parent": 0,
|
268
250
|
"menu_order": 4,
|
269
251
|
"target": "",
|
270
|
-
"classes": [
|
271
|
-
|
272
|
-
],
|
273
|
-
"xfn": [
|
274
|
-
""
|
275
|
-
],
|
252
|
+
"classes": [ "" ],
|
253
|
+
"xfn": [ "" ],
|
276
254
|
"meta": [],
|
277
|
-
"menus": [
|
278
|
-
23
|
279
|
-
],
|
255
|
+
"menus": [ 23 ],
|
280
256
|
"_links": {
|
281
257
|
"self": [
|
282
258
|
{
|
@@ -353,16 +329,10 @@
|
|
353
329
|
"parent": 97,
|
354
330
|
"menu_order": 5,
|
355
331
|
"target": "",
|
356
|
-
"classes": [
|
357
|
-
|
358
|
-
],
|
359
|
-
"xfn": [
|
360
|
-
""
|
361
|
-
],
|
332
|
+
"classes": [ "" ],
|
333
|
+
"xfn": [ "" ],
|
362
334
|
"meta": [],
|
363
|
-
"menus": [
|
364
|
-
23
|
365
|
-
],
|
335
|
+
"menus": [ 23 ],
|
366
336
|
"_links": {
|
367
337
|
"self": [
|
368
338
|
{
|
@@ -439,16 +409,10 @@
|
|
439
409
|
"parent": 98,
|
440
410
|
"menu_order": 6,
|
441
411
|
"target": "",
|
442
|
-
"classes": [
|
443
|
-
|
444
|
-
],
|
445
|
-
"xfn": [
|
446
|
-
""
|
447
|
-
],
|
412
|
+
"classes": [ "" ],
|
413
|
+
"xfn": [ "" ],
|
448
414
|
"meta": [],
|
449
|
-
"menus": [
|
450
|
-
23
|
451
|
-
],
|
415
|
+
"menus": [ 23 ],
|
452
416
|
"_links": {
|
453
417
|
"self": [
|
454
418
|
{
|
@@ -525,16 +489,10 @@
|
|
525
489
|
"parent": 99,
|
526
490
|
"menu_order": 7,
|
527
491
|
"target": "",
|
528
|
-
"classes": [
|
529
|
-
|
530
|
-
],
|
531
|
-
"xfn": [
|
532
|
-
""
|
533
|
-
],
|
492
|
+
"classes": [ "" ],
|
493
|
+
"xfn": [ "" ],
|
534
494
|
"meta": [],
|
535
|
-
"menus": [
|
536
|
-
23
|
537
|
-
],
|
495
|
+
"menus": [ 23 ],
|
538
496
|
"_links": {
|
539
497
|
"self": [
|
540
498
|
{
|
@@ -611,16 +569,10 @@
|
|
611
569
|
"parent": 100,
|
612
570
|
"menu_order": 8,
|
613
571
|
"target": "",
|
614
|
-
"classes": [
|
615
|
-
|
616
|
-
],
|
617
|
-
"xfn": [
|
618
|
-
""
|
619
|
-
],
|
572
|
+
"classes": [ "" ],
|
573
|
+
"xfn": [ "" ],
|
620
574
|
"meta": [],
|
621
|
-
"menus": [
|
622
|
-
23
|
623
|
-
],
|
575
|
+
"menus": [ 23 ],
|
624
576
|
"_links": {
|
625
577
|
"self": [
|
626
578
|
{
|
@@ -697,16 +649,10 @@
|
|
697
649
|
"parent": 0,
|
698
650
|
"menu_order": 9,
|
699
651
|
"target": "",
|
700
|
-
"classes": [
|
701
|
-
|
702
|
-
],
|
703
|
-
"xfn": [
|
704
|
-
""
|
705
|
-
],
|
652
|
+
"classes": [ "" ],
|
653
|
+
"xfn": [ "" ],
|
706
654
|
"meta": [],
|
707
|
-
"menus": [
|
708
|
-
23
|
709
|
-
],
|
655
|
+
"menus": [ 23 ],
|
710
656
|
"_links": {
|
711
657
|
"self": [
|
712
658
|
{
|
@@ -783,16 +729,10 @@
|
|
783
729
|
"parent": 0,
|
784
730
|
"menu_order": 10,
|
785
731
|
"target": "",
|
786
|
-
"classes": [
|
787
|
-
|
788
|
-
],
|
789
|
-
"xfn": [
|
790
|
-
""
|
791
|
-
],
|
732
|
+
"classes": [ "" ],
|
733
|
+
"xfn": [ "" ],
|
792
734
|
"meta": [],
|
793
|
-
"menus": [
|
794
|
-
23
|
795
|
-
],
|
735
|
+
"menus": [ 23 ],
|
796
736
|
"_links": {
|
797
737
|
"self": [
|
798
738
|
{
|
@@ -869,16 +809,10 @@
|
|
869
809
|
"parent": 0,
|
870
810
|
"menu_order": 11,
|
871
811
|
"target": "",
|
872
|
-
"classes": [
|
873
|
-
|
874
|
-
],
|
875
|
-
"xfn": [
|
876
|
-
""
|
877
|
-
],
|
812
|
+
"classes": [ "" ],
|
813
|
+
"xfn": [ "" ],
|
878
814
|
"meta": [],
|
879
|
-
"menus": [
|
880
|
-
23
|
881
|
-
],
|
815
|
+
"menus": [ 23 ],
|
882
816
|
"_links": {
|
883
817
|
"self": [
|
884
818
|
{
|
@@ -955,16 +889,10 @@
|
|
955
889
|
"parent": 104,
|
956
890
|
"menu_order": 12,
|
957
891
|
"target": "",
|
958
|
-
"classes": [
|
959
|
-
|
960
|
-
],
|
961
|
-
"xfn": [
|
962
|
-
""
|
963
|
-
],
|
892
|
+
"classes": [ "" ],
|
893
|
+
"xfn": [ "" ],
|
964
894
|
"meta": [],
|
965
|
-
"menus": [
|
966
|
-
23
|
967
|
-
],
|
895
|
+
"menus": [ 23 ],
|
968
896
|
"_links": {
|
969
897
|
"self": [
|
970
898
|
{
|
@@ -1041,16 +969,10 @@
|
|
1041
969
|
"parent": 105,
|
1042
970
|
"menu_order": 13,
|
1043
971
|
"target": "",
|
1044
|
-
"classes": [
|
1045
|
-
|
1046
|
-
],
|
1047
|
-
"xfn": [
|
1048
|
-
""
|
1049
|
-
],
|
972
|
+
"classes": [ "" ],
|
973
|
+
"xfn": [ "" ],
|
1050
974
|
"meta": [],
|
1051
|
-
"menus": [
|
1052
|
-
23
|
1053
|
-
],
|
975
|
+
"menus": [ 23 ],
|
1054
976
|
"_links": {
|
1055
977
|
"self": [
|
1056
978
|
{
|
@@ -1127,16 +1049,10 @@
|
|
1127
1049
|
"parent": 106,
|
1128
1050
|
"menu_order": 14,
|
1129
1051
|
"target": "",
|
1130
|
-
"classes": [
|
1131
|
-
|
1132
|
-
],
|
1133
|
-
"xfn": [
|
1134
|
-
""
|
1135
|
-
],
|
1052
|
+
"classes": [ "" ],
|
1053
|
+
"xfn": [ "" ],
|
1136
1054
|
"meta": [],
|
1137
|
-
"menus": [
|
1138
|
-
23
|
1139
|
-
],
|
1055
|
+
"menus": [ 23 ],
|
1140
1056
|
"_links": {
|
1141
1057
|
"self": [
|
1142
1058
|
{
|
@@ -1213,16 +1129,10 @@
|
|
1213
1129
|
"parent": 0,
|
1214
1130
|
"menu_order": 15,
|
1215
1131
|
"target": "",
|
1216
|
-
"classes": [
|
1217
|
-
|
1218
|
-
],
|
1219
|
-
"xfn": [
|
1220
|
-
""
|
1221
|
-
],
|
1132
|
+
"classes": [ "" ],
|
1133
|
+
"xfn": [ "" ],
|
1222
1134
|
"meta": [],
|
1223
|
-
"menus": [
|
1224
|
-
23
|
1225
|
-
],
|
1135
|
+
"menus": [ 23 ],
|
1226
1136
|
"_links": {
|
1227
1137
|
"self": [
|
1228
1138
|
{
|
@@ -1292,16 +1202,10 @@
|
|
1292
1202
|
"parent": 108,
|
1293
1203
|
"menu_order": 16,
|
1294
1204
|
"target": "",
|
1295
|
-
"classes": [
|
1296
|
-
|
1297
|
-
],
|
1298
|
-
"xfn": [
|
1299
|
-
""
|
1300
|
-
],
|
1205
|
+
"classes": [ "" ],
|
1206
|
+
"xfn": [ "" ],
|
1301
1207
|
"meta": [],
|
1302
|
-
"menus": [
|
1303
|
-
23
|
1304
|
-
],
|
1208
|
+
"menus": [ 23 ],
|
1305
1209
|
"_links": {
|
1306
1210
|
"self": [
|
1307
1211
|
{
|
@@ -32,6 +32,7 @@ describe( 'Block Switcher', () => {
|
|
32
32
|
'Heading',
|
33
33
|
'Pullquote',
|
34
34
|
'Columns',
|
35
|
+
'Table of Contents',
|
35
36
|
] )
|
36
37
|
);
|
37
38
|
} );
|
@@ -57,6 +58,7 @@ describe( 'Block Switcher', () => {
|
|
57
58
|
'Paragraph',
|
58
59
|
'Pullquote',
|
59
60
|
'Heading',
|
61
|
+
'Table of Contents',
|
60
62
|
] )
|
61
63
|
);
|
62
64
|
} );
|
@@ -71,6 +73,7 @@ describe( 'Block Switcher', () => {
|
|
71
73
|
'core/group',
|
72
74
|
'core/heading',
|
73
75
|
'core/columns',
|
76
|
+
'core/table-of-contents',
|
74
77
|
].map( ( block ) => wp.blocks.unregisterBlockType( block ) );
|
75
78
|
} );
|
76
79
|
|
@@ -299,7 +299,7 @@ describe( 'Inserting blocks', () => {
|
|
299
299
|
await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
|
300
300
|
await page.focus( INSERTER_SEARCH_SELECTOR );
|
301
301
|
await pressKeyWithModifier( 'primary', 'a' );
|
302
|
-
const searchTerm = '
|
302
|
+
const searchTerm = 'Verse';
|
303
303
|
await page.keyboard.type( searchTerm );
|
304
304
|
const browseAll = await page.waitForXPath(
|
305
305
|
'//button[text()="Browse all"]'
|
@@ -26,9 +26,6 @@ const navigateToContentEditorTop = async () => {
|
|
26
26
|
};
|
27
27
|
|
28
28
|
const tabThroughParagraphBlock = async ( paragraphText ) => {
|
29
|
-
await page.keyboard.press( 'Tab' );
|
30
|
-
await expect( await getActiveLabel() ).toBe( 'Add block' );
|
31
|
-
|
32
29
|
await tabThroughBlockToolbar();
|
33
30
|
|
34
31
|
await page.keyboard.press( 'Tab' );
|
@@ -679,27 +679,11 @@ describe( 'Writing Flow', () => {
|
|
679
679
|
await page.keyboard.press( 'Tab' );
|
680
680
|
// Create the table.
|
681
681
|
await page.keyboard.press( 'Space' );
|
682
|
-
// Return focus after focus loss. This should be fixed.
|
683
|
-
await page.keyboard.press( 'Tab' );
|
684
682
|
// Navigate to the second cell.
|
685
683
|
await page.keyboard.press( 'ArrowRight' );
|
686
684
|
await page.keyboard.type( '2' );
|
687
685
|
// Confirm correct setup.
|
688
686
|
expect( await getEditedPostContent() ).toMatchSnapshot();
|
689
|
-
// The content should only have one tab stop.
|
690
|
-
await page.keyboard.press( 'Tab' );
|
691
|
-
expect(
|
692
|
-
await page.evaluate( () =>
|
693
|
-
document.activeElement.getAttribute( 'aria-label' )
|
694
|
-
)
|
695
|
-
).toBe( 'Post' );
|
696
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
697
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
698
|
-
expect(
|
699
|
-
await page.evaluate( () =>
|
700
|
-
document.activeElement.getAttribute( 'aria-label' )
|
701
|
-
)
|
702
|
-
).toBe( 'Table' );
|
703
687
|
} );
|
704
688
|
|
705
689
|
it( 'should unselect all blocks when hitting double escape', async () => {
|
@@ -1,25 +0,0 @@
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
-
|
3
|
-
exports[`Image allows changing aspect ratio using the crop tools 1`] = `"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAoACgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAJB//EACAQAAADCQEAAAAAAAAAAAAAAAAEBQEDBgk1OHR3srX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlMlS6eKdfnvRTgrytVTuQ86aChkqXTxTr896KcFeVqqdyHnTQH//2Q=="`;
|
4
|
-
|
5
|
-
exports[`Image allows changing aspect ratio using the crop tools 2`] = `"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAYACgMBIgACEQEDEQH/xAAWAAEBAQAAAAAAAAAAAAAAAAAABwn/xAAgEAABAgUFAAAAAAAAAAAAAAAABAUBAwYJNTh0d7K1/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJTZU1T1Tx+u9FuNXnbKrdxM7RAA/9k="`;
|
6
|
-
|
7
|
-
exports[`Image allows rotating using the crop tools 1`] = `"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAoACgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAJB//EACAQAAADCQEAAAAAAAAAAAAAAAAEBQEDBgk1OHR3srX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlMlS6eKdfnvRTgrytVTuQ86aChkqXTxTr896KcFeVqqdyHnTQH//2Q=="`;
|
8
|
-
|
9
|
-
exports[`Image allows rotating using the crop tools 2`] = `"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAoACgMBIgACEQEDEQH/xAAWAAEBAQAAAAAAAAAAAAAAAAAABwn/xAAhEAAAAgsBAAAAAAAAAAAAAAAABQIEBwgVGVVWk5XR1P/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCUyVHp7+ZVtTHwhJUenv5lW1MfCNXosa1NbzJdCLGtTW8yXQH/2Q=="`;
|
10
|
-
|
11
|
-
exports[`Image allows zooming using the crop tools 1`] = `"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAoACgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAJB//EACAQAAADCQEAAAAAAAAAAAAAAAAEBQEDBgk1OHR3srX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlMlS6eKdfnvRTgrytVTuQ86aChkqXTxTr896KcFeVqqdyHnTQH//2Q=="`;
|
12
|
-
|
13
|
-
exports[`Image allows zooming using the crop tools 2`] = `"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAUABQMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABoQAQABBQAAAAAAAAAAAAAAAAAEBwk4hbX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Aqm1xgnTLddiaAD//2Q=="`;
|
14
|
-
|
15
|
-
exports[`Image should drag and drop files into media placeholder 1`] = `
|
16
|
-
"<!-- wp:image -->
|
17
|
-
<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
|
18
|
-
<!-- /wp:image -->"
|
19
|
-
`;
|
20
|
-
|
21
|
-
exports[`Image should undo without broken temporary state 1`] = `
|
22
|
-
"<!-- wp:image -->
|
23
|
-
<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
|
24
|
-
<!-- /wp:image -->"
|
25
|
-
`;
|
@@ -1,373 +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
|
-
clickBlockToolbarButton,
|
18
|
-
clickMenuItem,
|
19
|
-
openDocumentSettingsSidebar,
|
20
|
-
pressKeyWithModifier,
|
21
|
-
} from '@wordpress/e2e-test-utils';
|
22
|
-
|
23
|
-
async function upload( selector ) {
|
24
|
-
await page.waitForSelector( selector );
|
25
|
-
const inputElement = await page.$( selector );
|
26
|
-
const testImagePath = path.join(
|
27
|
-
__dirname,
|
28
|
-
'..',
|
29
|
-
'..',
|
30
|
-
'..',
|
31
|
-
'assets',
|
32
|
-
'10x10_e2e_test_image_z9T8jK.png'
|
33
|
-
);
|
34
|
-
const filename = uuid();
|
35
|
-
const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
|
36
|
-
fs.copyFileSync( testImagePath, tmpFileName );
|
37
|
-
await inputElement.uploadFile( tmpFileName );
|
38
|
-
return filename;
|
39
|
-
}
|
40
|
-
|
41
|
-
async function waitForImage( filename ) {
|
42
|
-
await page.waitForSelector(
|
43
|
-
`.wp-block-image img[src$="${ filename }.png"]`
|
44
|
-
);
|
45
|
-
}
|
46
|
-
|
47
|
-
async function getSrc( elementHandle ) {
|
48
|
-
return elementHandle.evaluate( ( node ) => node.src );
|
49
|
-
}
|
50
|
-
async function getDataURL( elementHandle ) {
|
51
|
-
return elementHandle.evaluate( ( node ) => {
|
52
|
-
const canvas = document.createElement( 'canvas' );
|
53
|
-
const context = canvas.getContext( '2d' );
|
54
|
-
canvas.width = node.width;
|
55
|
-
canvas.height = node.height;
|
56
|
-
context.drawImage( node, 0, 0 );
|
57
|
-
return canvas.toDataURL( 'image/jpeg' );
|
58
|
-
} );
|
59
|
-
}
|
60
|
-
|
61
|
-
describe( 'Image', () => {
|
62
|
-
beforeEach( async () => {
|
63
|
-
await createNewPost();
|
64
|
-
} );
|
65
|
-
|
66
|
-
it( 'can be inserted', async () => {
|
67
|
-
await insertBlock( 'Image' );
|
68
|
-
const filename = await upload( '.wp-block-image input[type="file"]' );
|
69
|
-
await waitForImage( filename );
|
70
|
-
|
71
|
-
const regex = new RegExp(
|
72
|
-
`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
|
73
|
-
);
|
74
|
-
expect( await getEditedPostContent() ).toMatch( regex );
|
75
|
-
} );
|
76
|
-
|
77
|
-
it( 'should replace, reset size, and keep selection', async () => {
|
78
|
-
await insertBlock( 'Image' );
|
79
|
-
const filename1 = await upload( '.wp-block-image input[type="file"]' );
|
80
|
-
await waitForImage( filename1 );
|
81
|
-
|
82
|
-
const regex1 = new RegExp(
|
83
|
-
`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename1 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
|
84
|
-
);
|
85
|
-
expect( await getEditedPostContent() ).toMatch( regex1 );
|
86
|
-
|
87
|
-
await openDocumentSettingsSidebar();
|
88
|
-
await page.click( '[aria-label="Image size presets"] button' );
|
89
|
-
|
90
|
-
const regex2 = new RegExp(
|
91
|
-
`<!-- wp:image {"id":\\d+,"width":3,"height":3,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full is-resized"><img src="[^"]+\\/${ filename1 }\\.png" alt="" class="wp-image-\\d+" width="3" height="3"\\/><\\/figure>\\s*<!-- /wp:image -->`
|
92
|
-
);
|
93
|
-
|
94
|
-
expect( await getEditedPostContent() ).toMatch( regex2 );
|
95
|
-
|
96
|
-
await clickButton( 'Replace' );
|
97
|
-
const filename2 = await upload(
|
98
|
-
'.block-editor-media-replace-flow__options input[type="file"]'
|
99
|
-
);
|
100
|
-
await waitForImage( filename2 );
|
101
|
-
|
102
|
-
const regex3 = new RegExp(
|
103
|
-
`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
|
104
|
-
);
|
105
|
-
expect( await getEditedPostContent() ).toMatch( regex3 );
|
106
|
-
// Focus outside the block to avoid the image caption being selected
|
107
|
-
// It can happen on CI specially.
|
108
|
-
await page.click( '.wp-block-post-title' );
|
109
|
-
await page.click( '.wp-block-image img' );
|
110
|
-
await page.keyboard.press( 'Backspace' );
|
111
|
-
|
112
|
-
expect( await getEditedPostContent() ).toBe( '' );
|
113
|
-
} );
|
114
|
-
|
115
|
-
it.skip( 'should place caret at end of caption after merging empty paragraph', async () => {
|
116
|
-
await insertBlock( 'Image' );
|
117
|
-
const fileName = await upload( '.wp-block-image input[type="file"]' );
|
118
|
-
await waitForImage( fileName );
|
119
|
-
await page.keyboard.type( '1' );
|
120
|
-
await page.keyboard.press( 'Enter' );
|
121
|
-
await page.keyboard.press( 'Backspace' );
|
122
|
-
await page.keyboard.type( '2' );
|
123
|
-
|
124
|
-
expect(
|
125
|
-
await page.evaluate( () => document.activeElement.innerHTML )
|
126
|
-
).toBe( '12' );
|
127
|
-
} );
|
128
|
-
|
129
|
-
it( 'should allow soft line breaks in caption', async () => {
|
130
|
-
await insertBlock( 'Image' );
|
131
|
-
const fileName = await upload( '.wp-block-image input[type="file"]' );
|
132
|
-
await waitForImage( fileName );
|
133
|
-
await page.keyboard.type( '12' );
|
134
|
-
await page.keyboard.press( 'ArrowLeft' );
|
135
|
-
await page.keyboard.press( 'Enter' );
|
136
|
-
|
137
|
-
expect(
|
138
|
-
await page.evaluate( () => document.activeElement.innerHTML )
|
139
|
-
).toBe( '1<br data-rich-text-line-break="true">2' );
|
140
|
-
} );
|
141
|
-
|
142
|
-
it( 'should have keyboard navigable toolbar for caption', async () => {
|
143
|
-
await insertBlock( 'Image' );
|
144
|
-
const fileName = await upload( '.wp-block-image input[type="file"]' );
|
145
|
-
await waitForImage( fileName );
|
146
|
-
// Navigate to More, Link, Italic and finally Bold.
|
147
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
148
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
149
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
150
|
-
await pressKeyWithModifier( 'shift', 'Tab' );
|
151
|
-
await page.keyboard.press( 'Space' );
|
152
|
-
await page.keyboard.press( 'a' );
|
153
|
-
await page.keyboard.press( 'ArrowRight' );
|
154
|
-
|
155
|
-
expect(
|
156
|
-
await page.evaluate( () => document.activeElement.innerHTML )
|
157
|
-
).toBe( '<strong>a</strong>' );
|
158
|
-
} );
|
159
|
-
|
160
|
-
it( 'should drag and drop files into media placeholder', async () => {
|
161
|
-
await page.keyboard.press( 'Enter' );
|
162
|
-
await insertBlock( 'Image' );
|
163
|
-
|
164
|
-
// Confirm correct setup.
|
165
|
-
expect( await getEditedPostContent() ).toMatchSnapshot();
|
166
|
-
|
167
|
-
const image = await page.$( '[data-type="core/image"]' );
|
168
|
-
|
169
|
-
await image.evaluate( () => {
|
170
|
-
const input = document.createElement( 'input' );
|
171
|
-
input.type = 'file';
|
172
|
-
input.id = 'wp-temp-test-input';
|
173
|
-
document.body.appendChild( input );
|
174
|
-
} );
|
175
|
-
|
176
|
-
const fileName = await upload( '#wp-temp-test-input' );
|
177
|
-
|
178
|
-
const paragraphRect = await image.boundingBox();
|
179
|
-
const pX = paragraphRect.x + paragraphRect.width / 2;
|
180
|
-
const pY = paragraphRect.y + paragraphRect.height / 3;
|
181
|
-
|
182
|
-
await image.evaluate(
|
183
|
-
( element, clientX, clientY ) => {
|
184
|
-
const input = document.getElementById( 'wp-temp-test-input' );
|
185
|
-
const dataTransfer = new DataTransfer();
|
186
|
-
dataTransfer.items.add( input.files[ 0 ] );
|
187
|
-
const event = new DragEvent( 'drop', {
|
188
|
-
bubbles: true,
|
189
|
-
clientX,
|
190
|
-
clientY,
|
191
|
-
dataTransfer,
|
192
|
-
} );
|
193
|
-
element.dispatchEvent( event );
|
194
|
-
},
|
195
|
-
pX,
|
196
|
-
pY
|
197
|
-
);
|
198
|
-
|
199
|
-
await waitForImage( fileName );
|
200
|
-
} );
|
201
|
-
|
202
|
-
it( 'allows zooming using the crop tools', async () => {
|
203
|
-
// Insert the block, upload a file and crop.
|
204
|
-
await insertBlock( 'Image' );
|
205
|
-
const filename = await upload( '.wp-block-image input[type="file"]' );
|
206
|
-
await waitForImage( filename );
|
207
|
-
|
208
|
-
// Assert that the image is initially unscaled and unedited.
|
209
|
-
const initialImage = await page.$( '.wp-block-image img' );
|
210
|
-
const initialImageSrc = await getSrc( initialImage );
|
211
|
-
const initialImageDataURL = await getDataURL( initialImage );
|
212
|
-
expect( initialImageDataURL ).toMatchSnapshot();
|
213
|
-
|
214
|
-
// Zoom in to twice the amount using the zoom input.
|
215
|
-
await clickBlockToolbarButton( 'Crop' );
|
216
|
-
await clickBlockToolbarButton( 'Zoom' );
|
217
|
-
await page.waitForFunction( () =>
|
218
|
-
document.activeElement.classList.contains(
|
219
|
-
'components-range-control__slider'
|
220
|
-
)
|
221
|
-
);
|
222
|
-
await page.keyboard.press( 'Tab' );
|
223
|
-
await page.waitForFunction( () =>
|
224
|
-
document.activeElement.classList.contains(
|
225
|
-
'components-input-control__input'
|
226
|
-
)
|
227
|
-
);
|
228
|
-
await pressKeyWithModifier( 'primary', 'a' );
|
229
|
-
await page.keyboard.type( '200' );
|
230
|
-
await page.keyboard.press( 'Escape' );
|
231
|
-
await clickBlockToolbarButton( 'Apply', 'content' );
|
232
|
-
|
233
|
-
// Wait for the cropping tools to disappear.
|
234
|
-
await page.waitForSelector(
|
235
|
-
'.wp-block-image img:not( .reactEasyCrop_Image )'
|
236
|
-
);
|
237
|
-
|
238
|
-
// Assert that the image is edited.
|
239
|
-
const updatedImage = await page.$( '.wp-block-image img' );
|
240
|
-
const updatedImageSrc = await getSrc( updatedImage );
|
241
|
-
expect( initialImageSrc ).not.toEqual( updatedImageSrc );
|
242
|
-
const updatedImageDataURL = await getDataURL( updatedImage );
|
243
|
-
expect( initialImageDataURL ).not.toEqual( updatedImageDataURL );
|
244
|
-
expect( updatedImageDataURL ).toMatchSnapshot();
|
245
|
-
} );
|
246
|
-
|
247
|
-
it( 'allows changing aspect ratio using the crop tools', async () => {
|
248
|
-
// Insert the block, upload a file and crop.
|
249
|
-
await insertBlock( 'Image' );
|
250
|
-
const filename = await upload( '.wp-block-image input[type="file"]' );
|
251
|
-
await waitForImage( filename );
|
252
|
-
|
253
|
-
// Assert that the image is initially unscaled and unedited.
|
254
|
-
const initialImage = await page.$( '.wp-block-image img' );
|
255
|
-
const initialImageSrc = await getSrc( initialImage );
|
256
|
-
const initialImageDataURL = await getDataURL( initialImage );
|
257
|
-
expect( initialImageDataURL ).toMatchSnapshot();
|
258
|
-
|
259
|
-
// Zoom in to twice the amount using the zoom input.
|
260
|
-
await clickBlockToolbarButton( 'Crop' );
|
261
|
-
await clickBlockToolbarButton( 'Aspect Ratio' );
|
262
|
-
await page.waitForFunction( () =>
|
263
|
-
document.activeElement.classList.contains(
|
264
|
-
'components-menu-item__button'
|
265
|
-
)
|
266
|
-
);
|
267
|
-
await clickMenuItem( '16:10' );
|
268
|
-
await clickBlockToolbarButton( 'Apply', 'content' );
|
269
|
-
|
270
|
-
// Wait for the cropping tools to disappear.
|
271
|
-
await page.waitForSelector(
|
272
|
-
'.wp-block-image img:not( .reactEasyCrop_Image )'
|
273
|
-
);
|
274
|
-
|
275
|
-
// Assert that the image is edited.
|
276
|
-
const updatedImage = await page.$( '.wp-block-image img' );
|
277
|
-
const updatedImageSrc = await getSrc( updatedImage );
|
278
|
-
expect( initialImageSrc ).not.toEqual( updatedImageSrc );
|
279
|
-
const updatedImageDataURL = await getDataURL( updatedImage );
|
280
|
-
expect( initialImageDataURL ).not.toEqual( updatedImageDataURL );
|
281
|
-
expect( updatedImageDataURL ).toMatchSnapshot();
|
282
|
-
} );
|
283
|
-
|
284
|
-
it( 'allows rotating using the crop tools', async () => {
|
285
|
-
// Insert the block, upload a file and crop.
|
286
|
-
await insertBlock( 'Image' );
|
287
|
-
const filename = await upload( '.wp-block-image input[type="file"]' );
|
288
|
-
await waitForImage( filename );
|
289
|
-
|
290
|
-
// Assert that the image is initially unscaled and unedited.
|
291
|
-
const initialImage = await page.$( '.wp-block-image img' );
|
292
|
-
const initialImageDataURL = await getDataURL( initialImage );
|
293
|
-
expect( initialImageDataURL ).toMatchSnapshot();
|
294
|
-
|
295
|
-
// Double the image's size using the zoom input.
|
296
|
-
await clickBlockToolbarButton( 'Crop' );
|
297
|
-
await page.waitForSelector( '.wp-block-image img.reactEasyCrop_Image' );
|
298
|
-
await clickBlockToolbarButton( 'Rotate' );
|
299
|
-
await clickBlockToolbarButton( 'Apply', 'content' );
|
300
|
-
|
301
|
-
await page.waitForSelector(
|
302
|
-
'.wp-block-image img:not( .reactEasyCrop_Image )'
|
303
|
-
);
|
304
|
-
|
305
|
-
// Assert that the image is edited.
|
306
|
-
const updatedImage = await page.$( '.wp-block-image img' );
|
307
|
-
const updatedImageDataURL = await getDataURL( updatedImage );
|
308
|
-
expect( initialImageDataURL ).not.toEqual( updatedImageDataURL );
|
309
|
-
expect( updatedImageDataURL ).toMatchSnapshot();
|
310
|
-
} );
|
311
|
-
|
312
|
-
it( 'Should reset dimensions on change URL', async () => {
|
313
|
-
const imageUrl = '/wp-includes/images/w-logo-blue.png';
|
314
|
-
|
315
|
-
await insertBlock( 'Image' );
|
316
|
-
|
317
|
-
// Upload an initial image.
|
318
|
-
const filename = await upload( '.wp-block-image input[type="file"]' );
|
319
|
-
await waitForImage( filename );
|
320
|
-
// Resize the Uploaded Image.
|
321
|
-
await openDocumentSettingsSidebar();
|
322
|
-
await page.waitForSelector(
|
323
|
-
'[aria-label="Image size presets"] button:first-child',
|
324
|
-
{ visible: true }
|
325
|
-
);
|
326
|
-
await page.click(
|
327
|
-
'[aria-label="Image size presets"] button:first-child'
|
328
|
-
);
|
329
|
-
|
330
|
-
const regexBefore = new RegExp(
|
331
|
-
`<!-- wp:image {"id":\\d+,"width":3,"height":3,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full is-resized"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\d+" width="3" height="3"\\/><\\/figure>\\s*<!-- /wp:image -->`
|
332
|
-
);
|
333
|
-
|
334
|
-
// Check if dimensions are changed.
|
335
|
-
expect( await getEditedPostContent() ).toMatch( regexBefore );
|
336
|
-
|
337
|
-
// Replace uploaded image with an URL.
|
338
|
-
await clickButton( 'Replace' );
|
339
|
-
|
340
|
-
const [ editButton ] = await page.$x(
|
341
|
-
'//button[contains(@aria-label, "Edit")]'
|
342
|
-
);
|
343
|
-
await editButton.click();
|
344
|
-
|
345
|
-
await page.waitForSelector( '.block-editor-url-input__input' );
|
346
|
-
|
347
|
-
// Clear the input field. Delay added to account for typing delays.
|
348
|
-
const inputField = await page.$( '.block-editor-url-input__input' );
|
349
|
-
await inputField.click( { clickCount: 3, delay: 200 } );
|
350
|
-
|
351
|
-
// Replace the url. Delay added to account for typing delays.
|
352
|
-
await page.focus( '.block-editor-url-input__input' );
|
353
|
-
await page.keyboard.type( imageUrl, { delay: 100 } );
|
354
|
-
await page.click( '.block-editor-link-control__search-submit' );
|
355
|
-
|
356
|
-
const regexAfter = new RegExp(
|
357
|
-
`<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-large"><img src="${ imageUrl }" alt=""/></figure>\\s*<!-- /wp:image -->`
|
358
|
-
);
|
359
|
-
|
360
|
-
// Check if dimensions are reset.
|
361
|
-
expect( await getEditedPostContent() ).toMatch( regexAfter );
|
362
|
-
} );
|
363
|
-
|
364
|
-
it( 'should undo without broken temporary state', async () => {
|
365
|
-
await insertBlock( 'Image' );
|
366
|
-
const fileName = await upload( '.wp-block-image input[type="file"]' );
|
367
|
-
await waitForImage( fileName );
|
368
|
-
await pressKeyWithModifier( 'primary', 'z' );
|
369
|
-
// Expect an empty image block (placeholder) rather than one with a
|
370
|
-
// broken temporary URL.
|
371
|
-
expect( await getEditedPostContent() ).toMatchSnapshot();
|
372
|
-
} );
|
373
|
-
} );
|
@@ -1,120 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import {
|
5
|
-
createNewPost,
|
6
|
-
clickButton,
|
7
|
-
clickMenuItem,
|
8
|
-
clickBlockToolbarButton,
|
9
|
-
getEditedPostContent,
|
10
|
-
insertBlock,
|
11
|
-
} from '@wordpress/e2e-test-utils';
|
12
|
-
|
13
|
-
describe( 'Block Grouping', () => {
|
14
|
-
beforeEach( async () => {
|
15
|
-
await createNewPost();
|
16
|
-
} );
|
17
|
-
|
18
|
-
describe( 'General', () => {
|
19
|
-
it( 'can prevent removal', async () => {
|
20
|
-
await insertBlock( 'Paragraph' );
|
21
|
-
await page.keyboard.type( 'Some paragraph' );
|
22
|
-
|
23
|
-
await clickBlockToolbarButton( 'Options' );
|
24
|
-
await clickMenuItem( 'Lock' );
|
25
|
-
|
26
|
-
const [ checkbox ] = await page.$x(
|
27
|
-
'//label[contains(text(), "Prevent removal")]'
|
28
|
-
);
|
29
|
-
await checkbox.click();
|
30
|
-
|
31
|
-
await clickButton( 'Apply' );
|
32
|
-
|
33
|
-
const [ removeBlock ] = await page.$x(
|
34
|
-
'//*[@role="menu"]//*[text()="Remove Paragraph"]'
|
35
|
-
);
|
36
|
-
|
37
|
-
expect( removeBlock ).toBeFalsy();
|
38
|
-
} );
|
39
|
-
|
40
|
-
it( 'can disable movement', async () => {
|
41
|
-
await insertBlock( 'Paragraph' );
|
42
|
-
await page.keyboard.type( 'First paragraph' );
|
43
|
-
|
44
|
-
await insertBlock( 'Paragraph' );
|
45
|
-
await page.keyboard.type( 'Second paragraph' );
|
46
|
-
|
47
|
-
await clickBlockToolbarButton( 'Options' );
|
48
|
-
await clickMenuItem( 'Lock' );
|
49
|
-
|
50
|
-
const [ checkbox ] = await page.$x(
|
51
|
-
'//label[contains(text(), "Disable movement")]'
|
52
|
-
);
|
53
|
-
await checkbox.click();
|
54
|
-
|
55
|
-
await clickButton( 'Apply' );
|
56
|
-
|
57
|
-
// Hide options.
|
58
|
-
await clickBlockToolbarButton( 'Options' );
|
59
|
-
|
60
|
-
const blockMover = await page.$( '.block-editor-block-mover' );
|
61
|
-
expect( blockMover ).toBeNull();
|
62
|
-
|
63
|
-
const [ lockButton ] = await page.$x(
|
64
|
-
'//button[@aria-label="Unlock Paragraph"]'
|
65
|
-
);
|
66
|
-
expect( lockButton ).toBeTruthy();
|
67
|
-
} );
|
68
|
-
|
69
|
-
it( 'can lock everything', async () => {
|
70
|
-
await insertBlock( 'Paragraph' );
|
71
|
-
await page.keyboard.type( 'Some paragraph' );
|
72
|
-
|
73
|
-
await clickBlockToolbarButton( 'Options' );
|
74
|
-
await clickMenuItem( 'Lock' );
|
75
|
-
|
76
|
-
const [ checkbox ] = await page.$x(
|
77
|
-
'//label//*[contains(text(), "Lock all")]'
|
78
|
-
);
|
79
|
-
await checkbox.click();
|
80
|
-
|
81
|
-
await clickButton( 'Apply' );
|
82
|
-
|
83
|
-
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
|
84
|
-
"<!-- wp:paragraph {\\"lock\\":{\\"move\\":true,\\"remove\\":true}} -->
|
85
|
-
<p>Some paragraph</p>
|
86
|
-
<!-- /wp:paragraph -->"
|
87
|
-
` );
|
88
|
-
} );
|
89
|
-
|
90
|
-
it( 'can unlock from toolbar', async () => {
|
91
|
-
await insertBlock( 'Paragraph' );
|
92
|
-
await page.keyboard.type( 'Some paragraph' );
|
93
|
-
|
94
|
-
await clickBlockToolbarButton( 'Options' );
|
95
|
-
await clickMenuItem( 'Lock' );
|
96
|
-
|
97
|
-
const [ lockCheckbox ] = await page.$x(
|
98
|
-
'//label//*[contains(text(), "Lock all")]'
|
99
|
-
);
|
100
|
-
await lockCheckbox.click();
|
101
|
-
|
102
|
-
await clickButton( 'Apply' );
|
103
|
-
|
104
|
-
await clickBlockToolbarButton( 'Unlock Paragraph' );
|
105
|
-
|
106
|
-
const [ unlockCheckbox ] = await page.$x(
|
107
|
-
'//label//*[contains(text(), "Lock all")]'
|
108
|
-
);
|
109
|
-
await unlockCheckbox.click();
|
110
|
-
|
111
|
-
await clickButton( 'Apply' );
|
112
|
-
|
113
|
-
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
|
114
|
-
"<!-- wp:paragraph {\\"lock\\":{\\"move\\":false,\\"remove\\":false}} -->
|
115
|
-
<p>Some paragraph</p>
|
116
|
-
<!-- /wp:paragraph -->"
|
117
|
-
` );
|
118
|
-
} );
|
119
|
-
} );
|
120
|
-
} );
|
@@ -1,27 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* WordPress dependencies
|
3
|
-
*/
|
4
|
-
import { createNewPost } from '@wordpress/e2e-test-utils';
|
5
|
-
|
6
|
-
describe( 'popovers', () => {
|
7
|
-
beforeEach( async () => {
|
8
|
-
await createNewPost();
|
9
|
-
} );
|
10
|
-
|
11
|
-
describe( 'dropdown', () => {
|
12
|
-
it( 'toggles via click', async () => {
|
13
|
-
const isMoreMenuOpen = async () =>
|
14
|
-
!! ( await page.$( '.interface-more-menu-dropdown__content' ) );
|
15
|
-
|
16
|
-
expect( await isMoreMenuOpen() ).toBe( false );
|
17
|
-
|
18
|
-
// Toggle opened.
|
19
|
-
await page.click( '.interface-more-menu-dropdown > button' );
|
20
|
-
expect( await isMoreMenuOpen() ).toBe( true );
|
21
|
-
|
22
|
-
// Toggle closed.
|
23
|
-
await page.click( '.interface-more-menu-dropdown > button' );
|
24
|
-
expect( await isMoreMenuOpen() ).toBe( false );
|
25
|
-
} );
|
26
|
-
} );
|
27
|
-
} );
|