feat(testing): add toHaveLastReceivedEventDetail event spy matcher

[tanner-reits]

What is the current behavior?

Stencil offers event matchers for toHaveFirstReceivedEventDetail and toHaveNthReceivedEventDetail.

GitHub Issue Number: Closes #2488

What is the new behavior?

Adds a matcher for toHaveLastReceivedEventDetail that will check the detail content of an event emitted from a Stencil component

Does this introduce a breaking change?

• Yes
• No

Testing

Tested the matchers (for first and last event) in a component starter.

Other information

[github-actions]

@stencil/[email protected] ts
tsc --noEmit --project scripts/tsconfig.json && tsx scripts/tech-debt-burndown-report.ts

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1084 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/runtime/vdom/vdom-render.ts	21
src/runtime/client-hydrate.ts	20
src/screenshot/connector-base.ts	19
src/testing/puppeteer/puppeteer-element.ts	19
src/dev-server/request-handler.ts	15
src/runtime/connected-callback.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.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/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
src/compiler/build/compiler-ctx.ts	11

Our most common errors

Typescript Error Code	Count
TS2322	352
TS2345	333
TS18048	193
TS18047	76
TS2722	27
TS2532	24
TS2531	19
TS2454	14
TS2790	11
TS2352	9
TS2769	8
TS2416	7
TS2538	4
TS2493	3
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 15 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	245	NODE_TYPES
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	116	Env
src/compiler/app-core/app-data.ts	118	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	123	updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts	82	satisfies
src/compiler/types/validate-primary-package-output-target.ts	82	Record
src/testing/puppeteer/puppeteer-declarations.ts	496	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/9600036407/artifacts/1621319508

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

unzip -d ~/Downloads ~/Downloads/stencil-core-4.18.3-dev.1718896583.63613f8.tgz.zip && npm install ~/Downloads/stencil-core-4.18.3-dev.1718896583.63613f8.tgz

[tanner-reits]

Don't like how Git is showing the diff, but this line used to be: expect(eventSpy.lastEvent.detail).toEqual(eventDetail)

Changed it to use firstEvent, since, well, this is supposed to be checking what event data the spy first received. Idk why this was lastEvent before, but, in testing, I setup a component to emit multiple events and checked that the assertions using toHaveFirstReceivedEventDetail and toHaveLastReceivedEventDetail were working as expected with the emitted values.

I'm not sure if this is a breaking change, but seems like the original implementation was wrong in the first place 😅

(made the change for each adapter version)

[christian-bromann]

Do you think we can add a test for this matcher?

[tanner-reits]

@christian-bromann I don't know if I'll be able to test this. The matchers use expect under-the-hood, so testing failed cases results in the test failing early because the assertion within the matcher fails

[christian-bromann]

The matchers use expect under-the-hood

I thought it would be possible somewhere in test/end-to-end where we call npm run test.spec which triggers the Stencil testrunner.

[christian-bromann]

LGTM 👍