Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scripts: Install Chromium on demand together with test-e2e #20215

Merged
merged 5 commits into from
Apr 18, 2020

Conversation

gziolo
Copy link
Member

@gziolo gziolo commented Feb 13, 2020

Description

Fixes #15667.

I opened this patch puppeteer/puppeteer#5325 against Puppeteer to explore some better ideas on how this could be solved on the @wordpress/scripts side.

This change landed upstream and we can now explore ways to improve the flow in Gutenberg.

The bundled puppeteer dependency in version ^2.0.0 has been replaced with puppeteer-core requiring 3.0.0. It allowed preventing Chromium installation together with @wordpress/scripts. It happens now on-demand when running test-e2e script and only when a new version is required.

Implementation notes

I had to use a similar trick that we used for puppeteer with npm aliases to ensure that puppeteer-core integrates properly with jest-puppeteer. I'm still not sure whether it's necessary to explore ways of integrating puppeteer-core directly into jest-puppeteer as it isn't the most common use case.

I tried first to require puppeteer/install because it is a regular Node script. However, it downloads Chromium using Promises so I had to spawn the process to ensure that the process finishes first.

I don't know if there is a better way to do it so I'm happy to improve the logic :)

@gziolo gziolo self-assigned this Feb 13, 2020
@gziolo gziolo added [Tool] WP Scripts /packages/scripts [Type] Enhancement A suggestion for improvement. labels Feb 13, 2020
@gziolo gziolo requested a review from aduth February 13, 2020 15:15
@gziolo gziolo force-pushed the update/puppeteer-core branch 2 times, most recently from a931f10 to 8b1523f Compare February 13, 2020 16:16
Copy link
Member

@noahtallen noahtallen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I found an issue testing this as a 3rd party dependency in my own plugin, but it could be because I'm testing @wordpress/scripts as a file ref dependency.

packages/scripts/scripts/test-e2e.js Outdated Show resolved Hide resolved
@gziolo
Copy link
Member Author

gziolo commented Feb 14, 2020

One thing that I don't quite understand is why I see the following diff after:

$ rm -rf node_modules
$ npm i
diff --git a/package-lock.json b/package-lock.json
index b4c56d406..0c6cfb355 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9625,12 +9625,6 @@
 			"integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
 			"dev": true
 		},
-		"@types/mime-types": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz",
-			"integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=",
-			"dev": true
-		},
 		"@types/minimatch": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -10785,7 +10779,6 @@
 				"minimist": "^1.2.0",
 				"npm-package-json-lint": "^4.0.3",
 				"prettier": "npm:[email protected]",
-				"puppeteer": "npm:[email protected]",
 				"read-pkg-up": "^1.0.1",
 				"request": "^2.88.0",
 				"resolve-bin": "^0.4.0",
@@ -18775,29 +18768,6 @@
 				}
 			}
 		},
-		"extract-zip": {
-			"version": "1.6.7",
-			"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
-			"integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
-			"dev": true,
-			"requires": {
-				"concat-stream": "1.6.2",
-				"debug": "2.6.9",
-				"mkdirp": "0.5.1",
-				"yauzl": "2.4.1"
-			},
-			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				}
-			}
-		},
 		"extsprintf": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -18959,15 +18929,6 @@
 				}
 			}
 		},
-		"fd-slicer": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
-			"integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
-			"dev": true,
-			"requires": {
-				"pend": "~1.2.0"
-			}
-		},
 		"figgy-pudding": {
 			"version": "3.5.1",
 			"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -30599,12 +30560,6 @@
 			"resolved": "https://registry.npmjs.org/pegjs/-/pegjs-0.10.0.tgz",
 			"integrity": "sha1-z4uvrm7d/0tafvsYUmnqr0YQ3b0="
 		},
-		"pend": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-			"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-			"dev": true
-		},
 		"performance-now": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -32019,12 +31974,6 @@
 				"ipaddr.js": "1.8.0"
 			}
 		},
-		"proxy-from-env": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
-			"integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
-			"dev": true
-		},
 		"prr": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -32257,81 +32206,6 @@
 			"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
 			"dev": true
 		},
-		"puppeteer": {
-			"version": "npm:[email protected]",
-			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-2.1.1.tgz",
-			"integrity": "sha512-n13AWriBMPYxnpbb6bnaY5YoY6rGj8vPLrz6CZF3o0qJNEwlcfJVxBzYZ0NJsQ21UbdJoijPCDrM++SUVEz7+w==",
-			"dev": true,
-			"requires": {
-				"@types/mime-types": "^2.1.0",
-				"debug": "^4.1.0",
-				"extract-zip": "^1.6.6",
-				"https-proxy-agent": "^4.0.0",
-				"mime": "^2.0.3",
-				"mime-types": "^2.1.25",
-				"progress": "^2.0.1",
-				"proxy-from-env": "^1.0.0",
-				"rimraf": "^2.6.1",
-				"ws": "^6.1.0"
-			},
-			"dependencies": {
-				"agent-base": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
-					"integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
-					"dev": true
-				},
-				"debug": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-					"dev": true,
-					"requires": {
-						"ms": "^2.1.1"
-					}
-				},
-				"https-proxy-agent": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
-					"integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
-					"dev": true,
-					"requires": {
-						"agent-base": "5",
-						"debug": "4"
-					}
-				},
-				"mime-db": {
-					"version": "1.43.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-					"integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.26",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-					"integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.43.0"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"ws": {
-					"version": "6.2.1",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
-					"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
-					"dev": true,
-					"requires": {
-						"async-limiter": "~1.0.0"
-					}
-				}
-			}
-		},
 		"q": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -40738,15 +40612,6 @@
 				}
 			}
 		},
-		"yauzl": {
-			"version": "2.4.1",
-			"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
-			"integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
-			"dev": true,
-			"requires": {
-				"fd-slicer": "~1.0.1"
-			}
-		},
 		"zwitch": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.4.tgz",

When I run npm i again, then all the changes get removed 🤔

@jsnajdr, did you encounter something similar when aliasing prettier? It feels like a bug with npm.

@noahtallen
Copy link
Member

I'll take this comment out of the resolved thread so it has more visibility now that the older issue was solved :)

I see this issue running the script locally. I wonder if @wordpress/scripts might be calling puppeteer expecting a certain API, but puppeteer-core has a different API?

> npx wp-scripts test-e2e --wordpress-base-url='http://localhost:4013'
Chromium downloaded to /Users/noah.allen/source/gutenberg/packages/scripts/node_modules/puppeteer/.local-chromium/mac-722234
● Validation Error:
  Preset jest-puppeteer is invalid:
  The "id" argument must be of type string. Received type object
  TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type object
    at validateString (internal/validators.js:112:11)
    at Module.require (internal/modules/cjs/loader.js:841:3)
    at require (internal/modules/cjs/helpers.js:74:18)
    at setupPreset (/Users/noah.allen/source/gutenberg/packages/scripts/node_modules/jest-config/build/normalize.js:230:14)
    at normalize (/Users/noah.allen/source/gutenberg/packages/scripts/node_modules/jest-config/build/normalize.js:554:15)
    at readConfig (/Users/noah.allen/source/gutenberg/packages/scripts/node_modules/jest-config/build/index.js:163:46)
    at readConfigs (/Users/noah.allen/source/gutenberg/packages/scripts/node_modules/jest-config/build/index.js:373:26)
    at /Users/noah.allen/source/gutenberg/packages/scripts/node_modules/@jest/core/build/cli/index.js:155:58
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/noah.allen/source/gutenberg/packages/scripts/node_modules/@jest/core/build/cli/index.js:108:24)
  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

@gziolo
Copy link
Member Author

gziolo commented Feb 14, 2020

@noahtallen - the difference between puppeteer and puppeteer-core is mostly summarized in this file:
https://github.com/puppeteer/puppeteer/blob/master/utils/prepare_puppeteer_core.js

However, there are some other checks in the code that I need to double-check now.

In addition, I plan to bump puppeteer to the latest version in separate PR to ensure it applies cleanly.

Update: I found other places where puppeteer-core is handled differently:

https://github.com/puppeteer/puppeteer/search?q=isPuppeteerCore&unscoped_q=isPuppeteerCore

The most important part is here:

https://github.com/puppeteer/puppeteer/blob/8b49dc62a62282543ead43541316e23d3450ff3c/lib/Launcher.js#L817-L863

I don't think we use those env variables.

@gziolo
Copy link
Member Author

gziolo commented Feb 17, 2020

I opened #20268 to perform Puppeteer upgrade in smaller steps.

@github-actions
Copy link

github-actions bot commented Apr 17, 2020

Size Change: +1.02 kB (0%)

Total Size: 841 kB

Filename Size Change
build/a11y/index.js 1.02 kB +1 B
build/api-fetch/index.js 4.01 kB +1 B
build/block-directory/style.css 761 B +1 B
build/block-editor/index.js 105 kB +124 B (0%)
build/block-editor/style-rtl.css 10.2 kB -9 B (0%)
build/block-editor/style.css 10.2 kB -13 B (0%)
build/block-library/editor-rtl.css 7.08 kB -6 B (0%)
build/block-library/editor.css 7.09 kB -4 B (0%)
build/block-library/index.js 112 kB -4 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +2 B (0%)
build/blocks/index.js 57.7 kB +1 B
build/components/index.js 198 kB -11 B (0%)
build/components/style-rtl.css 16.9 kB +194 B (1%)
build/components/style.css 16.9 kB +197 B (1%)
build/compose/index.js 6.66 kB +3 B (0%)
build/core-data/index.js 11.2 kB +126 B (1%)
build/data/index.js 8.43 kB +1 B
build/date/index.js 5.47 kB -1 B
build/edit-post/index.js 27.9 kB +232 B (0%)
build/edit-post/style-rtl.css 12.3 kB -24 B (0%)
build/edit-post/style.css 12.3 kB -21 B (0%)
build/edit-site/index.js 10.5 kB +81 B (0%)
build/edit-site/style-rtl.css 5.05 kB +28 B (0%)
build/edit-site/style.css 5.05 kB +28 B (0%)
build/edit-widgets/index.js 7.49 kB +24 B (0%)
build/edit-widgets/style-rtl.css 4.67 kB +28 B (0%)
build/edit-widgets/style.css 4.67 kB +28 B (0%)
build/editor/index.js 43.3 kB +10 B (0%)
build/element/index.js 4.65 kB +2 B (0%)
build/i18n/index.js 3.56 kB -1 B
build/is-shallow-equal/index.js 711 B +1 B
build/keycodes/index.js 1.91 kB -1 B
build/media-utils/index.js 5.29 kB +6 B (0%)
build/notices/index.js 1.79 kB +1 B
build/priority-queue/index.js 789 B +1 B
build/rich-text/index.js 14.8 kB +1 B
build/token-list/index.js 1.28 kB +1 B
build/url/index.js 4.02 kB -2 B (0%)
build/viewport/index.js 1.84 kB -2 B (0%)
build/warning/index.js 1.14 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/annotations/index.js 3.62 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.24 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-library/style-rtl.css 7.17 kB 0 B
build/block-library/style.css 7.17 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/data-controls/index.js 1.25 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 3.54 kB 0 B
build/edit-navigation/style-rtl.css 485 B 0 B
build/edit-navigation/style.css 485 B 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/style-rtl.css 3.48 kB 0 B
build/editor/style.css 3.47 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.32 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.67 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/server-side-render/index.js 2.67 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@@ -60,7 +60,7 @@
"minimist": "^1.2.0",
"npm-package-json-lint": "^5.0.0",
"prettier": "npm:[email protected]",
"puppeteer": "^2.0.0",
"puppeteer": "npm:puppeteer-core@3.0.0",
Copy link
Member Author

@gziolo gziolo Apr 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like aliasing is required only temporary until a new version of jest-environment-puppeteer is published:
argos-ci/jest-puppeteer#315

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The e2e tests are failing in WordPress/wordpress-develop#347. Does this have something to do with it?

@gziolo
Copy link
Member Author

gziolo commented Apr 17, 2020

There is still one test suite failing with the following error:

Screen Shot 2020-04-17 at 13 24 34

I have no idea where it comes from. It works with the same file uploaded using the Classic Media modal.

I'm able to upload the same file manually when using Puppeteer in the interactive mode 🤷‍♂️

@gziolo
Copy link
Member Author

gziolo commented Apr 17, 2020

I tried different file types: svg and jpg with no luck.

I recreated the scenario where we upload files through Media modal and it worked just fine.

I tried to apply the same attributes (accept, style) that Media modal has but it didn't help.

Should I skip those tests for now and proceed? I don't know why the type of image gets set to undefined...

@gziolo
Copy link
Member Author

gziolo commented Apr 17, 2020

This fixes this issue:

diff --git a/packages/media-utils/src/utils/upload-media.js b/packages/media-utils/src/utils/upload-media.js
index fb31af14cf..b80f2e85b5 100644
--- a/packages/media-utils/src/utils/upload-media.js
+++ b/packages/media-utils/src/utils/upload-media.js
@@ -121,6 +121,7 @@ export async function uploadMedia( {
 		// verify if user is allowed to upload this mime type
 		if (
 			allowedMimeTypesForUser &&
+			mediaFile.type &&
 			! isAllowedMimeTypeForUser( mediaFile.type )
 		) {
 			triggerError( {
@@ -134,7 +135,7 @@ export async function uploadMedia( {
 		}
 
 		// Check if the block supports this mime type
-		if ( ! isAllowedType( mediaFile.type ) ) {
+		if ( mediaFile.type && ! isAllowedType( mediaFile.type ) ) {
 			triggerError( {
 				code: 'MIME_TYPE_NOT_SUPPORTED',
 				message: __( 'Sorry, this file type is not supported here.' ),

It looks like type is not reliable,

I also see the following note in bold at https://developer.mozilla.org/en-US/docs/Web/API/File/type

Developers are advised not to rely on this property as a sole validation scheme.

Copy link
Member

@noahtallen noahtallen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code makes sense to me here! 🚀

Giving a plus one because:

  • ✅ Gutenberg e2e tests are passing (🎉)
  • ✅ Not seeing chromium install in Gutenberg on npm i in gutenberg

Additionally, I tested this (via a file ref with this branch checked out) in a 3rd party plugin I develop, and:

  • ✅ No chromium install on npm i
  • ✅ When I run test e2e there, chromium is installed and I can see its progress indicator
  • ✅ The e2e test that I have completes successfully

@gziolo gziolo merged commit 8afed75 into master Apr 18, 2020
@gziolo gziolo deleted the update/puppeteer-core branch April 18, 2020 05:23
@github-actions github-actions bot added this to the Gutenberg 8.0 milestone Apr 18, 2020
@noahtallen
Copy link
Member

strangely, I'm seeing this error again in my plugin: #20215 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Tool] WP Scripts /packages/scripts [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Scripts: Download Puppeteer's Chromium binary on-demand
4 participants