Releases · cloudfour/pleasantest

06 Jun 18:43

github-actions

v4.0.0

dbed8df

v4.0.0 Latest

Latest

Major Changes

#684 53fe380 Thanks @renovate! - Update @testing-library/dom to v9.

Breaking changes:
- ByRole now only allows string as a role. The exact, trim, collapseWhitespace, and normalizer 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 from v18 to v20. The puppeteer changelog is available here.

Minor Changes

#698 fd66068 Thanks @calebeby! - Add support for Node 20

Assets 2

01 Feb 16:03

github-actions

v3.1.0

25d252e

v3.1.0

Minor Changes

#650 d83f32b Thanks @calebeby! - Add support for node 19
#640 893d9d5 Thanks @calebeby! - Bump puppeteer and @axe-core/puppeteer versions

Assets 2

19 Dec 20:33

github-actions

v3.0.1

01bbd57

v3.0.1

Patch Changes

#631 f124a5a Thanks @calebeby! - [bugfix] Don't override <head> when using utils.injectHTML

This was a bug introduced in 3.0.0. This change fixes that behavior to match what is documented. The documented behavior is that injectHTML replaces the content of the body only. The behavior introduced in 3.0.0 also resets the <head> to the default; that was unintended behavior that is now removed.

Assets 2

31 Aug 21:14

github-actions

v3.0.0

2dc2b79

v3.0.0

Major Changes

#561 b565e0b Thanks @calebeby! - Normalize whitespace in element accessible names in getAccessibilityTree. Markup with elements which have an accessible name that includes irregular whitespace, like non-breaking spaces, will now have a different output for getAccessibilityTree snapshots. Previously, the whitespace was included, now, whitespace is replaced with a single space.

#535 dc6f81c Thanks @calebeby! - Values exported from runJS 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 JSHandles that point to functions, makeCallableJSHandle. This function takes a JSHandle<Function> and returns a node function that calls the corresponding browser function, passing along the parameters, and returning the return value wrapped in Promise<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 is Record<string, unknown> (an object with string properties and unknown values). Note that this type does not include JSHandles, those are wrapped in the return type from runJS 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 type JSHandle<Element> and favoriteNumber automatically has the type JSHandle<number>. Without passing in the type parameter to runJS, their types would both be JSHandle<unknown>.

#541 39085ac Thanks @calebeby! - injectHTML now executes script tags in the injected markup by default. This can be disabled by passing the executeScriptTags: 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 that runJS receives parameters in the browser has changed. Now, parameters are available as import.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 exports from runJS are no longer called automatically.

#506 7592994 Thanks @calebeby! - Drop support for Node 12 and 17

Minor Changes

#557 7bb10e0 Thanks @calebeby! - Update @testing-library/dom to 8.17.1 and @testing-library/jest-dom to 5.16.5

Assets 2

06 Jun 17:02

github-actions

v2.2.0

7c04ebb

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 to v8.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,
});

Assets 2

24 May 22:00

github-actions

v2.1.0

afaf16d

v2.1.0

Minor Changes

#486 c142d73 Thanks @calebeby! - Add support for node 18
#481 10a8364 Thanks @calebeby! - Add full support for Jest 28

Assets 2

31 Mar 21:08

github-actions

v2.0.0

fb458b8

v2.0.0

Major Changes

#345 847cbd8 Thanks @calebeby! - Normalize whitespace in getAccessibilityTree

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 to getAccessibilityTree. The heading levels are computed from the corresponding element number in <h1> - <h6>, or from the aria-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! - Added aria-expanded support to getAccessibilityTree 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 calling user.click(), per WCAG Success Criterion 2.5.5 Target Size guideline.

Minor Changes

#409 cf3ad32 Thanks @renovate! - Update puppeteer to 13.5.2

Assets 2

18 Feb 01:24

github-actions

v1.7.0

03aee61

v1.7.0

Minor Changes

#403 6ceb029 Thanks @calebeby! - Expose accessibilityTreeSnapshotSerializer. 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, like snapshot-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

#412 33ddf04 Thanks @calebeby! - Ignore HTML comments in getAccessibilityTree output (potentially breaking bugfix)

Assets 2

31 Jan 17:26

github-actions

v1.6.0

ec47df1

v1.6.0

Minor Changes

#353 19c7cbb Thanks @renovate! - Update puppeteer to 13.1.2

Patch Changes

#391 55a7d42 Thanks @renovate! - Update dom-accessibility-api to 0.5.11

<input type="number" /> now maps to role spinbutton (was textbox before).

This is technically a breaking change for users which depended on the incorrect behavior of getAccessibilityTree with input[type="number"] previously mapping to textbox.

Assets 2

14 Jan 02:40

github-actions

v1.5.0

4f9023e

v1.5.0

Minor Changes

#369 c0a8a0a Thanks @calebeby! - Add waitFor feature
#344 d7bbae3 Thanks @calebeby! - Allow passing page instead of an ElementHandle to getAccessibilityTree.

If page is passed, the accessibility tree will be of the root html element.
#363 4bdfb5b Thanks @calebeby! - Add support for Node 17

Assets 2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Major Changes

Minor Changes

Minor Changes

Patch Changes

Major Changes

Minor Changes

Minor Changes

Minor Changes

Major Changes

Minor Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Releases: cloudfour/pleasantest

v4.0.0

Major Changes

Minor Changes

v3.1.0

Minor Changes

v3.0.1

Patch Changes

v3.0.0

Major Changes

Minor Changes

v2.2.0

Minor Changes

v2.1.0

Minor Changes

v2.0.0

Major Changes

Minor Changes

v1.7.0

Minor Changes

Patch Changes

v1.6.0

Minor Changes

Patch Changes

v1.5.0

Minor Changes