Releases: cloudfour/pleasantest
v5.0.0
Major Changes
-
#715
78cecbeThanks @renovate! -aria-querywas updated to5.3.0.
This update provides updated alignment with the ARIA spec,
and will affect Testing Library queries andgetAccessibilityTreeresults. -
#715
78cecbeThanks @renovate! - We are now using@testing-library/jest-dom@6.
We now support all of the jest-dom matchers, except for the deprecated ones.toHaveErrorMessagewas deprecated, usetoHaveAccessibleErrorMessageinsteadtoHaveRolewas added
Minor Changes
-
#732
29b8671Thanks @calebeby! - Allow returning non-serializable values fromwaitFor -
#754
6f8ba78Thanks @renovate! - Updatepuppeteertov22. The Puppeteer changelog is available here -
#728
76f1862Thanks @calebeby! - Re-export devices frompuppeteer.KnownDevicesinstead of deprecatedpuppeteer.devices -
#748
6d757efThanks @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
53fe380Thanks @renovate! - Update@testing-library/domtov9.Breaking changes:
ByRolenow only allows string as a role. Theexact,trim,collapseWhitespace, andnormalizeroptions are no longer supported for role queries.
-
#681
f00efadThanks @calebeby! - Drop support for node 14 and 19 -
#686
563cd06Thanks @renovate! - Update Puppeteer fromv18tov20. Thepuppeteerchangelog is available here.
Minor Changes
v3.1.0
v3.0.1
Patch Changes
-
#631
f124a5aThanks @calebeby! - [bugfix] Don't override<head>when usingutils.injectHTMLThis was a bug introduced in
3.0.0. This change fixes that behavior to match what is documented. The documented behavior is thatinjectHTMLreplaces the content of the body only. The behavior introduced in3.0.0also resets the<head>to the default; that was unintended behavior that is now removed.
v3.0.0
Major Changes
-
#561
b565e0bThanks @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 forgetAccessibilityTreesnapshots. Previously, the whitespace was included, now, whitespace is replaced with a single space. -
#535
dc6f81cThanks @calebeby! - Values exported fromrunJSare 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
JSHandles 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,
runJSnow 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 fromrunJSautomatically.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
focusTargetautomatically has the typeJSHandle<Element>andfavoriteNumberautomatically has the typeJSHandle<number>. Without passing in the type parameter torunJS, their types would both beJSHandle<unknown>. -
#541
39085acThanks @calebeby! -injectHTMLnow executes script tags in the injected markup by default. This can be disabled by passing theexecuteScriptTags: falseoption 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
dc6f81cThanks @calebeby! - The way thatrunJSreceives parameters in the browser has changed. Now, parameters are available asimport.meta.pleasantestArgsinstead 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 exports from runJS are no longer called automatically. -
#506
7592994Thanks @calebeby! - Drop support for Node 12 and 17
Minor Changes
v2.2.0
Minor Changes
-
#494
730300eThanks @calebeby! - New assertion:expect(page).toPassAxeTests()This assertion is based on the
jest-puppeteer-axepackage. (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
d36f234Thanks @renovate! - Update dependency@testing-library/domtov8.13.0.This adds support to filtering
ByRolequeries 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
847cbd8Thanks @calebeby! - Normalize whitespace ingetAccessibilityTreeNow 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
getAccessibilityTreeoutput, and may break your snapshots. Update your snapshots with Jest and review the changes. -
#446
1eaa648Thanks @calebeby! - Use document.title as fallback implicit accessible name for html root element in accessibility tree snapshots -
#445
5fa4103Thanks @calebeby! - Add heading levels togetAccessibilityTree. The heading levels are computed from the corresponding element number in<h1>-<h6>, or from thearia-levelrole.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
eb364ccThanks @calebeby! - Addedaria-expandedsupport togetAccessibilityTreeand fix handling for<details>/<summary>Now, elements which have the
aria-expandedattribute 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
abe22a6Thanks @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
6ceb029Thanks @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
55a7d42Thanks @renovate! - Updatedom-accessibility-apito 0.5.11<input type="number" />now maps to rolespinbutton(wastextboxbefore).This is technically a breaking change for users which depended on the incorrect behavior of
getAccessibilityTreewithinput[type="number"]previously mapping totextbox.