@wordpress/e2e-tests 7.4.0 → 7.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 7.5.0 (2023-05-24)
6
+
5
7
  ## 7.4.0 (2023-05-10)
6
8
 
7
9
  ## 7.3.0 (2023-04-26)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/e2e-tests",
3
- "version": "7.4.0",
3
+ "version": "7.5.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.4.0",
27
- "@wordpress/jest-console": "^7.4.0",
28
- "@wordpress/jest-puppeteer-axe": "^6.4.0",
29
- "@wordpress/scripts": "^26.4.0",
30
- "@wordpress/url": "^3.34.0",
26
+ "@wordpress/e2e-test-utils": "^10.5.0",
27
+ "@wordpress/jest-console": "^7.5.0",
28
+ "@wordpress/jest-puppeteer-axe": "^6.5.0",
29
+ "@wordpress/scripts": "^26.5.0",
30
+ "@wordpress/url": "^3.35.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": "e936127e1e13881f1a940b7bd1593a9e500147f3"
48
+ "gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
49
49
  }
@@ -0,0 +1,82 @@
1
+ ( function () {
2
+ const { registerBlockType } = wp.blocks;
3
+ const { createElement: el } = wp.element;
4
+ const { InnerBlocks } = wp.blockEditor;
5
+
6
+ const divProps = {
7
+ className: 'product',
8
+ style: { outline: '1px solid gray', padding: 5 },
9
+ };
10
+
11
+ // without a placeholder within the inner blocks it can be difficult to select the block using e2e tests
12
+ // especially using Puppeteer, so we use an image block which has a placeholder.
13
+ const template = [
14
+ [ 'core/image' ],
15
+ ];
16
+
17
+ const save = function () {
18
+ return el( 'div', divProps, el( InnerBlocks.Content ) );
19
+ };
20
+ registerBlockType( 'test/prioritized-inserter-blocks-unset', {
21
+ title: 'Prioritized Inserter Blocks Unset',
22
+ icon: 'carrot',
23
+ category: 'text',
24
+
25
+ edit() {
26
+ return el( 'div', divProps, el( InnerBlocks, { template } ) );
27
+ },
28
+
29
+ save,
30
+ } );
31
+
32
+ registerBlockType( 'test/prioritized-inserter-blocks-set', {
33
+ title: 'Prioritized Inserter Blocks Set',
34
+ icon: 'carrot',
35
+ category: 'text',
36
+ edit() {
37
+ return el(
38
+ 'div',
39
+ divProps,
40
+ el( InnerBlocks, {
41
+ template,
42
+ prioritizedInserterBlocks: [
43
+ 'core/audio',
44
+ 'core/spacer',
45
+ 'core/code',
46
+ ],
47
+ } )
48
+ );
49
+ },
50
+
51
+ save,
52
+ } );
53
+
54
+ registerBlockType( 'test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks', {
55
+ title: 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks',
56
+ icon: 'carrot',
57
+ category: 'text',
58
+ edit() {
59
+ return el(
60
+ 'div',
61
+ divProps,
62
+ el( InnerBlocks, {
63
+ template,
64
+ allowedBlocks: [
65
+ 'core/spacer',
66
+ 'core/code',
67
+ 'core/paragraph',
68
+ 'core/heading'
69
+ ],
70
+ prioritizedInserterBlocks: [
71
+ 'core/audio', // this is **not** in the allowedBlocks list
72
+ 'core/spacer',
73
+ 'core/code',
74
+ ],
75
+ } )
76
+ );
77
+ },
78
+
79
+ save,
80
+ } );
81
+
82
+ } )();
@@ -0,0 +1,28 @@
1
+ <?php
2
+ /**
3
+ * Plugin Name: Gutenberg Test InnerBlocks Prioritized Inserter Blocks
4
+ * Plugin URI: https://github.com/WordPress/gutenberg
5
+ * Author: Gutenberg Team
6
+ *
7
+ * @package gutenberg-test-inner-blocks-prioritized-inserter-blocks
8
+ */
9
+
10
+ /**
11
+ * Registers a custom script for the plugin.
12
+ */
13
+ function enqueue_inner_blocks_prioritized_inserter_blocks_script() {
14
+ wp_enqueue_script(
15
+ 'gutenberg-test-inner-blocks-prioritized-inserter-blocks',
16
+ plugins_url( 'inner-blocks-prioritized-inserter-blocks/index.js', __FILE__ ),
17
+ array(
18
+ 'wp-blocks',
19
+ 'wp-block-editor',
20
+ 'wp-element',
21
+ 'wp-i18n',
22
+ ),
23
+ filemtime( plugin_dir_path( __FILE__ ) . 'inner-blocks-prioritized-inserter-blocks/index.js' ),
24
+ true
25
+ );
26
+ }
27
+
28
+ add_action( 'init', 'enqueue_inner_blocks_prioritized_inserter_blocks_script' );
@@ -56,7 +56,8 @@ describe( 'Child Blocks', () => {
56
56
  '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender'
57
57
  );
58
58
  await openGlobalBlockInserter();
59
- expect( await getAllBlockInserterItemTitles() ).toEqual( [
59
+ const allowedBlocks = await getAllBlockInserterItemTitles();
60
+ expect( allowedBlocks.sort() ).toEqual( [
60
61
  'Child Blocks Child',
61
62
  'Image',
62
63
  'Paragraph',
@@ -31,8 +31,7 @@ describe( 'iframed inline styles', () => {
31
31
  await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
32
32
  } );
33
33
 
34
- // Skip flaky test. See https://github.com/WordPress/gutenberg/issues/35172
35
- it.skip( 'should load inline styles in iframe', async () => {
34
+ it( 'should load inline styles in iframe', async () => {
36
35
  await insertBlock( 'Iframed Inline Styles' );
37
36
 
38
37
  expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -50,7 +50,8 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
50
50
  await page.waitForSelector( childParagraphSelector );
51
51
  await page.click( childParagraphSelector );
52
52
  await openGlobalBlockInserter();
53
- expect( await getAllBlockInserterItemTitles() ).toEqual( [
53
+ const allowedBlocks = await getAllBlockInserterItemTitles();
54
+ expect( allowedBlocks.sort() ).toEqual( [
54
55
  'Button',
55
56
  'Gallery',
56
57
  'List',
@@ -75,7 +76,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
75
76
  await page.$x( `//button//span[contains(text(), 'List')]` )
76
77
  )[ 0 ];
77
78
  await insertButton.click();
78
- // Select the list wrapper so the image is inserable.
79
+ // Select the list wrapper so the image is insertable.
79
80
  await page.keyboard.press( 'ArrowUp' );
80
81
  await insertBlock( 'Image' );
81
82
  await closeGlobalBlockInserter();
@@ -0,0 +1,131 @@
1
+ /**
2
+ * WordPress dependencies
3
+ */
4
+ import {
5
+ activatePlugin,
6
+ createNewPost,
7
+ deactivatePlugin,
8
+ getAllBlockInserterItemTitles,
9
+ insertBlock,
10
+ closeGlobalBlockInserter,
11
+ } from '@wordpress/e2e-test-utils';
12
+
13
+ const QUICK_INSERTER_RESULTS_SELECTOR =
14
+ '.block-editor-inserter__quick-inserter-results';
15
+
16
+ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => {
17
+ beforeAll( async () => {
18
+ await activatePlugin(
19
+ 'gutenberg-test-innerblocks-prioritized-inserter-blocks'
20
+ );
21
+ } );
22
+
23
+ beforeEach( async () => {
24
+ await createNewPost();
25
+ } );
26
+
27
+ afterAll( async () => {
28
+ await deactivatePlugin(
29
+ 'gutenberg-test-innerblocks-prioritized-inserter-blocks'
30
+ );
31
+ } );
32
+
33
+ describe( 'Quick inserter', () => {
34
+ it( 'uses defaulting ordering if prioritzed blocks setting was not set', async () => {
35
+ const parentBlockSelector =
36
+ '[data-type="test/prioritized-inserter-blocks-unset"]';
37
+ await insertBlock( 'Prioritized Inserter Blocks Unset' );
38
+ await closeGlobalBlockInserter();
39
+
40
+ await page.waitForSelector( parentBlockSelector );
41
+
42
+ await page.click(
43
+ `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
44
+ );
45
+
46
+ await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
47
+
48
+ await expect( await getAllBlockInserterItemTitles() ).toHaveLength(
49
+ 6
50
+ );
51
+ } );
52
+
53
+ it( 'uses the priority ordering if prioritzed blocks setting is set', async () => {
54
+ const parentBlockSelector =
55
+ '[data-type="test/prioritized-inserter-blocks-set"]';
56
+ await insertBlock( 'Prioritized Inserter Blocks Set' );
57
+ await closeGlobalBlockInserter();
58
+
59
+ await page.waitForSelector( parentBlockSelector );
60
+
61
+ await page.click(
62
+ `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
63
+ );
64
+
65
+ await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
66
+
67
+ // Should still be only 6 results regardless of the priority ordering.
68
+ const inserterItems = await getAllBlockInserterItemTitles();
69
+
70
+ // Should still be only 6 results regardless of the priority ordering.
71
+ expect( inserterItems ).toHaveLength( 6 );
72
+
73
+ expect( inserterItems.slice( 0, 3 ) ).toEqual( [
74
+ 'Audio',
75
+ 'Spacer',
76
+ 'Code',
77
+ ] );
78
+ } );
79
+
80
+ it( 'obeys allowed blocks over prioritzed blocks setting if conflicted', async () => {
81
+ const parentBlockSelector =
82
+ '[data-type="test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks"]';
83
+ await insertBlock(
84
+ 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks'
85
+ );
86
+ await closeGlobalBlockInserter();
87
+
88
+ await page.waitForSelector( parentBlockSelector );
89
+
90
+ await page.click(
91
+ `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
92
+ );
93
+
94
+ await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
95
+
96
+ const inserterItems = await getAllBlockInserterItemTitles();
97
+
98
+ expect( inserterItems.slice( 0, 3 ) ).toEqual( [
99
+ 'Spacer',
100
+ 'Code',
101
+ 'Paragraph',
102
+ ] );
103
+ expect( inserterItems ).toEqual(
104
+ expect.not.arrayContaining( [ 'Audio' ] )
105
+ );
106
+ } );
107
+ } );
108
+ describe( 'Slash inserter', () => {
109
+ it( 'uses the priority ordering if prioritzed blocks setting is set', async () => {
110
+ await insertBlock( 'Prioritized Inserter Blocks Set' );
111
+ await page.click( '[data-type="core/image"]' );
112
+ await page.keyboard.press( 'Enter' );
113
+ await page.keyboard.type( '/' );
114
+ // Wait for the results to display.
115
+ await page.waitForSelector( '.components-autocomplete__result' );
116
+ const inserterItemTitles = await page.evaluate( () => {
117
+ return Array.from(
118
+ document.querySelectorAll(
119
+ '.components-autocomplete__result'
120
+ )
121
+ ).map( ( { innerText } ) => innerText );
122
+ } );
123
+ expect( inserterItemTitles ).toHaveLength( 9 ); // Default suggested blocks number.
124
+ expect( inserterItemTitles.slice( 0, 3 ) ).toEqual( [
125
+ 'Audio',
126
+ 'Spacer',
127
+ 'Code',
128
+ ] );
129
+ } );
130
+ } );
131
+ } );
@@ -1,177 +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
- createNewPost,
15
- openDocumentSettingsSidebar,
16
- switchBlockInspectorTab,
17
- transformBlockTo,
18
- } from '@wordpress/e2e-test-utils';
19
-
20
- async function upload( selector ) {
21
- const inputElement = await page.waitForSelector(
22
- `${ selector } input[type="file"]`
23
- );
24
- const testImagePath = path.join(
25
- __dirname,
26
- '..',
27
- '..',
28
- '..',
29
- 'assets',
30
- '10x10_e2e_test_image_z9T8jK.png'
31
- );
32
- const filename = uuid();
33
- const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
34
- fs.copyFileSync( testImagePath, tmpFileName );
35
- await inputElement.uploadFile( tmpFileName );
36
- await page.waitForSelector( `${ selector } img[src$="${ filename }.png"]` );
37
- return filename;
38
- }
39
-
40
- describe( 'Cover', () => {
41
- beforeEach( async () => {
42
- await createNewPost();
43
- } );
44
-
45
- it( 'can set background image using image upload on block placeholder', async () => {
46
- await insertBlock( 'Cover' );
47
- // Create the block using uploaded image.
48
- const sourceImageFilename = await upload( '.wp-block-cover' );
49
- // Get the block's background image URL.
50
- const blockImage = await page.waitForSelector( '.wp-block-cover img' );
51
- const blockImageUrl = await blockImage.evaluate( ( el ) => el.src );
52
-
53
- expect( blockImageUrl ).toContain( sourceImageFilename );
54
- } );
55
-
56
- it( 'dims background image down by 50% by default', async () => {
57
- await insertBlock( 'Cover' );
58
- // Create the block using uploaded image.
59
- await upload( '.wp-block-cover' );
60
- // Get the block's background dim color and its opacity.
61
- const backgroundDim = await page.waitForSelector(
62
- '.wp-block-cover .has-background-dim'
63
- );
64
- const [ backgroundDimColor, backgroundDimOpacity ] =
65
- await page.evaluate( ( el ) => {
66
- const computedStyle = window.getComputedStyle( el );
67
- return [ computedStyle.backgroundColor, computedStyle.opacity ];
68
- }, backgroundDim );
69
-
70
- expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
71
- expect( backgroundDimOpacity ).toBe( '0.5' );
72
- } );
73
-
74
- it( 'can be resized using drag & drop', async () => {
75
- await insertBlock( 'Cover' );
76
- // Close the inserter.
77
- await page.click( '.edit-post-header-toolbar__inserter-toggle' );
78
- // Open the sidebar.
79
- await openDocumentSettingsSidebar();
80
- // Choose the first solid color as the background of the cover.
81
- await page.click(
82
- '.components-circular-option-picker__option-wrapper:first-child button'
83
- );
84
-
85
- // Select the cover block. By default the child paragraph gets selected.
86
- await page.click(
87
- '.edit-post-header-toolbar__document-overview-toggle'
88
- );
89
- await page.click(
90
- '.block-editor-list-view-block__contents-container a'
91
- );
92
-
93
- switchBlockInspectorTab( 'Styles' );
94
- const heightInputHandle = await page.waitForSelector(
95
- 'input[id*="block-cover-height-input"]'
96
- );
97
-
98
- // Verify the height of the cover is not defined.
99
- expect(
100
- await page.evaluate( ( { value } ) => value, heightInputHandle )
101
- ).toBe( '' );
102
-
103
- const resizeButton = await page.$(
104
- '.components-resizable-box__handle-bottom'
105
- );
106
- const boundingBoxResizeButton = await resizeButton.boundingBox();
107
- const coordinatesResizeButton = {
108
- x: boundingBoxResizeButton.x + boundingBoxResizeButton.width / 2,
109
- y: boundingBoxResizeButton.y + boundingBoxResizeButton.height / 2,
110
- };
111
-
112
- // Move the mouse to the position of the resize button.
113
- await page.mouse.move(
114
- coordinatesResizeButton.x,
115
- coordinatesResizeButton.y
116
- );
117
-
118
- // Trigger a mousedown event against the resize button.
119
- // Using page.mouse.down does not works because it triggers a global event,
120
- // not an event for that element.
121
- page.evaluate( ( { x, y } ) => {
122
- const element = document.querySelector(
123
- '.components-resizable-box__handle-bottom'
124
- );
125
- event = document.createEvent( 'CustomEvent' );
126
- event.initCustomEvent( 'mousedown', true, true, null );
127
- event.clientX = x;
128
- event.clientY = y;
129
- element.dispatchEvent( event );
130
- }, coordinatesResizeButton );
131
-
132
- // Move the mouse to resize the cover.
133
- await page.mouse.move(
134
- coordinatesResizeButton.x,
135
- coordinatesResizeButton.y + 100,
136
- { steps: 10 }
137
- );
138
-
139
- // Release the mouse.
140
- await page.mouse.up();
141
-
142
- // Verify the height of the cover has changed.
143
- expect(
144
- await page.evaluate(
145
- ( { value } ) => Number.parseInt( value ),
146
- heightInputHandle
147
- )
148
- ).toBeGreaterThan( 100 );
149
- } );
150
-
151
- it( 'dims the background image down by 50% when transformed from the Image block', async () => {
152
- await insertBlock( 'Image' );
153
- // Upload image and transform to the Cover block.
154
- const filename = await upload( '.wp-block-image' );
155
- await page.waitForSelector(
156
- `.wp-block-image img[src$="${ filename }.png"]`
157
- );
158
-
159
- // Focus the block wrapper before trying to convert to make sure figcaption toolbar is not obscuring
160
- // the block toolbar.
161
- await page.focus( '.wp-block-image' );
162
- await transformBlockTo( 'Cover' );
163
-
164
- // Get the block's background dim color and its opacity.
165
- const backgroundDim = await page.waitForSelector(
166
- '.wp-block-cover .has-background-dim'
167
- );
168
- const [ backgroundDimColor, backgroundDimOpacity ] =
169
- await page.evaluate( ( el ) => {
170
- const computedStyle = window.getComputedStyle( el );
171
- return [ computedStyle.backgroundColor, computedStyle.opacity ];
172
- }, backgroundDim );
173
-
174
- expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
175
- expect( backgroundDimOpacity ).toBe( '0.5' );
176
- } );
177
- } );