Releases: cloudfour/pleasantest
v5.0.0
Major Changes
-
#715
78cecbe
Thanks @renovate! -aria-query
was updated to5.3.0
.
This update provides updated alignment with the ARIA spec,
and will affect Testing Library queries andgetAccessibilityTree
results. -
#715
78cecbe
Thanks @renovate! - We are now using@testing-library/jest-dom@6
.
We now support all of the jest-dom matchers, except for the deprecated ones.toHaveErrorMessage
was deprecated, usetoHaveAccessibleErrorMessage
insteadtoHaveRole
was added
Minor Changes
-
#732
29b8671
Thanks @calebeby! - Allow returning non-serializable values fromwaitFor
-
#754
6f8ba78
Thanks @renovate! - Updatepuppeteer
tov22
. The Puppeteer changelog is available here -
#728
76f1862
Thanks @calebeby! - Re-export devices frompuppeteer.KnownDevices
instead of deprecatedpuppeteer.devices
-
#748
6d757ef
Thanks @calebeby! - Reimplement windows supportLong ago, Pleasantest worked on Windows, but without regular testing it gradually diverged. This release adds proper Windows support back and adds automated testing for it.
Patch Changes
v4.0.0
Major Changes
-
#684
53fe380
Thanks @renovate! - Update@testing-library/dom
tov9
.Breaking changes:
ByRole
now only allows string as a role. Theexact
,trim
,collapseWhitespace
, andnormalizer
options are no longer supported for role queries.
-
#681
f00efad
Thanks @calebeby! - Drop support for node 14 and 19 -
#686
563cd06
Thanks @renovate! - Update Puppeteer fromv18
tov20
. Thepuppeteer
changelog is available here.
Minor Changes
v3.1.0
v3.0.1
Patch Changes
-
#631
f124a5a
Thanks @calebeby! - [bugfix] Don't override<head>
when usingutils.injectHTML
This was a bug introduced in
3.0.0
. This change fixes that behavior to match what is documented. The documented behavior is thatinjectHTML
replaces the content of the body only. The behavior introduced in3.0.0
also resets the<head>
to the default; that was unintended behavior that is now removed.
v3.0.0
Major Changes
-
#561
b565e0b
Thanks @calebeby! - Normalize whitespace in element accessible names ingetAccessibilityTree
. Markup with elements which have an accessible name that includes irregular whitespace, like non-breaking spaces, will now have a different output forgetAccessibilityTree
snapshots. Previously, the whitespace was included, now, whitespace is replaced with a single space. -
#535
dc6f81c
Thanks @calebeby! - Values exported fromrunJS
are now available in Node.For example:
test( 'receiving exported values from runJS', withBrowser(async ({ utils }) => { // Each export is available in the returned object. // Each export is wrapped in a JSHandle, meaning that it points to an in-browser object const { focusTarget, favoriteNumber } = await utils.runJS(` export const focusTarget = document.activeElement export const favoriteNumber = 20 `); // Serializable JSHandles can be unwrapped using JSONValue: console.log(await favoriteNumber.jsonValue()); // Logs "20" // A JSHandle<Element>, or ElementHandle is not serializable // But we can pass it back into the browser to use it (it will be unwrapped in the browser): await utils.runJS( ` // The import.meta.pleasantestArgs context object receives the parameters passed in below const [focusTarget] = import.meta.pleasantestArgs; console.log(focusTarget) // Logs the element in the browser `, // Passing the JSHandle in here passes it into the browser (unwrapped) in import.meta.pleasantestArgs [focusTarget], ); }), );
We've also introduced a utility function to make it easier to call
JSHandle
s that point to functions,makeCallableJSHandle
. This function takes aJSHandle<Function>
and returns a node function that calls the corresponding browser function, passing along the parameters, and returning the return value wrapped inPromise<JSHandle<T>>
:// new import: import { makeCallableJSHandle } from 'pleasantest'; test( 'calling functions with makeCallableJSHandle', withBrowser(async ({ utils }) => { const { displayFavoriteNumber } = await utils.runJS(` export const displayFavoriteNumber = (number) => { document.querySelector('.output').innerHTML = "Favorite number is: " + number } `); // displayFavoriteNumber is a JSHandle<Function> // (a pointer to a function in the browser) // so we cannot call it directly, so we wrap it in a node function first: const displayFavoriteNumberNode = makeCallableJSHandle( displayFavoriteNumber, ); // Note the added `await`. // Even though the original function was not async, the wrapped function is. // This is needed because the wrapped function needs to asynchronously communicate with the browser. await displayFavoriteNumberNode(42); }), );
For TypeScript users,
runJS
now accepts a new optional type parameter, to specify the exported types of the in-browser module that is passed in. The default value for this parameter isRecord<string, unknown>
(an object with string properties and unknown values). Note that this type does not includeJSHandles
, those are wrapped in the return type fromrunJS
automatically.Using the first example, the optional type would be:
test( 'receiving exported values from runJS', withBrowser(async ({ utils }) => { const { focusTarget, favoriteNumber } = await utils.runJS<{ focusTarget: Element; favoriteNumber: number; }>(` export const focusTarget = document.activeElement export const favoriteNumber = 20 `); }), );
Now
focusTarget
automatically has the typeJSHandle<Element>
andfavoriteNumber
automatically has the typeJSHandle<number>
. Without passing in the type parameter torunJS
, their types would both beJSHandle<unknown>
. -
#541
39085ac
Thanks @calebeby! -injectHTML
now executes script tags in the injected markup by default. This can be disabled by passing theexecuteScriptTags: false
option as the second parameter.For example, the script tag is now executed by default:
await utils.injectHTML( "<script>document.querySelector('div').textContent = 'changed'</script>", );
But by passing
executeScriptTags: false
, we can disable execution:await utils.injectHTML( "<script>document.querySelector('div').textContent = 'changed'</script>", { executeScriptTags: false }, );
-
#535
dc6f81c
Thanks @calebeby! - The way thatrunJS
receives parameters in the browser has changed. Now, parameters are available asimport.meta.pleasantestArgs
instead of through an automatically-called default export.For example, code that used to work like this:
test( 'old version of runJS parameters', withBrowser(async ({ utils }) => { // Pass a variable from node to the browser const url = isDev ? 'dev.example.com' : 'prod.example.com'; await utils.runJS( ` // Parameters get passed into the default-export function, which is called automatically export default (url) => { console.log(url) } `, // array of parameters passed here [url], ); }), );
Now should be written like this:
test( 'new version of runJS parameters', withBrowser(async ({ utils }) => { // Pass a variable from node to the browser const url = isDev ? 'dev.example.com' : 'prod.example.com'; await utils.runJS( ` // Parameters get passed as an array into this context variable, and we can destructure them const [url] = import.meta.pleasantestArgs console.log(url) // If we added a default exported function here, it would no longer be automatically called. `, // array of parameters passed here [url], ); }), );
This is a breaking change, because the previous mechanism for receiving parameters no longer works, and functions that are
default export
s from runJS are no longer called automatically. -
#506
7592994
Thanks @calebeby! - Drop support for Node 12 and 17
Minor Changes
v2.2.0
Minor Changes
-
#494
730300e
Thanks @calebeby! - New assertion:expect(page).toPassAxeTests()
This assertion is based on the
jest-puppeteer-axe
package. (That package already works with Pleasantest, our new feature just formats error messages a little differently)It allows you to pass a page to be checked with the axe accessibility linter.
test( 'Axe tests', withBrowser(async ({ utils, page }) => { await utils.injectHTML(` <h1>Some html</h1> `); await expect(page).toPassAxeTests(); }), );
-
#459
d36f234
Thanks @renovate! - Update dependency@testing-library/dom
tov8.13.0
.This adds support to filtering
ByRole
queries by description:// Select by accessible role and description await screen.getByRole('button', { description: /^items in the trash will be/i, });
v2.1.0
v2.0.0
Major Changes
-
#345
847cbd8
Thanks @calebeby! - Normalize whitespace ingetAccessibilityTree
Now anytime there is contiguous whitespace in text strings it is collapsed into a single space. This matches the behavior of browser accessibility trees.
This is a breaking change because it changes the
getAccessibilityTree
output, and may break your snapshots. Update your snapshots with Jest and review the changes. -
#446
1eaa648
Thanks @calebeby! - Use document.title as fallback implicit accessible name for html root element in accessibility tree snapshots -
#445
5fa4103
Thanks @calebeby! - Add heading levels togetAccessibilityTree
. The heading levels are computed from the corresponding element number in<h1>
-<h6>
, or from thearia-level
role.In the accessibility tree snapshot, it looks like this:
heading "Name of Heading" (level=2)
This is a breaking change because it will cause existing accessibility tree snapshots to fail which contain headings. Update the snapshots to make them pass again.
-
#451
eb364cc
Thanks @calebeby! - Addedaria-expanded
support togetAccessibilityTree
and fix handling for<details>
/<summary>
Now, elements which have the
aria-expanded
attribute will represent the state of that attribute in accessibility tree snapshots.<details>
/<summary>
elements will represent their expanded state in the tree as well.Also, for collapsed
<details>
/<summary>
elements, the hidden content is now hidden in the accessibility tree, to match screen reader behavior. -
#248
abe22a6
Thanks @gerardo-rodriguez! - Enforce minimum target size when callinguser.click()
, per WCAG Success Criterion 2.5.5 Target Size guideline.
Minor Changes
v1.7.0
Minor Changes
-
#403
6ceb029
Thanks @calebeby! - ExposeaccessibilityTreeSnapshotSerializer
. This is the snapshot serializer that Pleasantest configures Jest to use to format accessibility tree snapshots. It was enabled by default in previous versions, and it still is, just now it is also exposed as an export so you can pass the snapshot serializer to other tools, likesnapshot-diff
.Here's an example of using this:
This part you'd put in your test setup file (configured in Jest's
setupFilesAfterEnv
):import snapshotDiff from 'snapshot-diff'; expect.addSnapshotSerializer(snapshotDiff.getSnapshotDiffSerializer()); snapshotDiff.setSerializers([ { test: accessibilityTreeSnapshotSerializer.test, // @ts-ignore print: (value) => accessibilityTreeSnapshotSerializer.serialize(value), diffOptions: () => ({ expand: true }), }, ]);
Then in your tests:
const beforeSnap = await getAccessibilityTree(element); // ... interact with the DOM const afterSnap = await getAccessibilityTree(element); expect(snapshotDiff(beforeSnap, afterSnap)).toMatchInlineSnapshot(` Snapshot Diff: - First value + Second value region "Summary" heading "Summary" text "Summary" list listitem text "Items:" - text "2" + text "5" link "Checkout" text "Checkout" `);
The diff provided by snapshotDiff automatically highlights the differences between the snapshots, to make it clear to the test reader what changed in the page accessibility structure as the interactions happened.
Patch Changes
v1.6.0
Minor Changes
Patch Changes
-
#391
55a7d42
Thanks @renovate! - Updatedom-accessibility-api
to 0.5.11<input type="number" />
now maps to rolespinbutton
(wastextbox
before).This is technically a breaking change for users which depended on the incorrect behavior of
getAccessibilityTree
withinput[type="number"]
previously mapping totextbox
.