fix(testing): use viewport for Puppeteer screenshot clip dimensions

[tanner-reits]

What is the current behavior?

Screenshots generated by Stencil's screenshot testing (via Puppeteer) do not have the dimensions of the viewport specified in the Stencil config's testing.emulate option.

Fixes: #5353

What is the new behavior?

If clip options are not explicitly passed to page.compareScreenshot(), Stencil will default the clip option width and height to the width and height dimensions of the viewport in the emulate config.

Documentation

N/A

Does this introduce a breaking change?

• Yes
• No

Testing

Other information

[github-actions]

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1144 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files

Path	Error Count
src/dev-server/index.ts	37
src/dev-server/server-process.ts	32
src/compiler/prerender/prerender-main.ts	22
src/testing/puppeteer/puppeteer-element.ts	22
src/runtime/client-hydrate.ts	20
src/screenshot/connector-base.ts	19
src/runtime/vdom/vdom-render.ts	17
src/dev-server/request-handler.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/compiler/transpile/transpile-module.ts	14
src/sys/node/node-sys.ts	14
src/compiler/prerender/prerender-queue.ts	13
src/compiler/sys/in-memory-fs.ts	13
src/runtime/connected-callback.ts	13
src/runtime/set-value.ts	13
src/compiler/output-targets/output-www.ts	12
src/compiler/transformers/test/parse-vdom.spec.ts	12
src/compiler/transformers/transform-utils.ts	12
src/mock-doc/test/attribute.spec.ts	12

Our most common errors

Typescript Error Code	Count
TS2322	361
TS2345	349
TS18048	206
TS18047	82
TS2722	37
TS2532	24
TS2531	21
TS2454	14
TS2790	11
TS2352	10
TS2769	8
TS2538	8
TS2416	6
TS2493	3
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 14 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports

File	Line	Identifier
src/runtime/bootstrap-lazy.ts	21	setNonce
src/screenshot/screenshot-fs.ts	18	readScreenshotData
src/testing/testing-utils.ts	198	withSilentWarn
src/utils/index.ts	145	CUSTOM
src/utils/index.ts	269	normalize
src/utils/index.ts	7	escapeRegExpSpecialCharacters
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	115	Env
src/compiler/app-core/app-data.ts	117	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	123	updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts	61	satisfies
src/compiler/types/validate-primary-package-output-target.ts	61	Record
src/testing/puppeteer/puppeteer-declarations.ts	485	WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts	7	writeFetchSuccessSync

[github-actions]

PR built and packed!

Download the tarball here: https://github.com/ionic-team/stencil/actions/runs/8191450212/artifacts/1306519190

If your browser saves files to ~/Downloads you can install it like so:

unzip -d ~/Downloads ~/Downloads/stencil-core-4.12.5-dev.1709828622.ba1e193.tgz.zip && npm install ~/Downloads/stencil-core-4.12.5-dev.1709828622.ba1e193.tgz

[christian-bromann]

👍

[rwaskiewicz]

Two small asks, otherwise LGTM!

[christian-bromann]

@tanner-reits I verified this change while looking into #5421 and it seems the behavior changed with this patch. While before the baseline for this screenshot test had a dimension of 800x600px, the new captured image has a dimension of 600x600px. I can't spot an emulate configuration within a stencil.config.ts anywhere in our repository so I am not sure if it is desired to have the screenshot taken at this dimension.

This might be related to a patch I made some month ago: #5205.

[tanner-reits]

@christian-bromann Got to the bottom of that. If no emulate config is specified in a Stencil config's testing object, a default config is provided by validateTesting during config validation.

This is a bit confusing, however, because we also have a stock emulate config in setScreenshotEmulateData, but based on the validation logic this will always get overridden.

That being said, I am still confused why the screenshot being generated on main is 600x800 and not 600x600. The master.json file that gets generated says the dimensions are 600x600. So, truthfully not sure what the correct behavior here is.

[christian-bromann]

That being said, I am still confused why the screenshot being generated on main is 600x800 and not 600x600.

I was able to verify that with this branch the screenshots when running ❯ npm run test.end-to-end are correctly taken with 600x600 pixel as noted in the master.json. 🙌

This leaves with the one last remaining confusion which is when does Stencil default back to the values set in setScreenshotEmulateData. Regardless of this, we should move forward with merging this.

[christian-bromann]

This has been released with Stencil 🚞 v4.13.0