@brightspace-ui/testing 1.44.2 → 1.45.0

package/README.md

@@ -139,9 +139,9 @@ it('should work when printing', async() => {
 });
 ```
 
-### Accessibility Testing with aXe
+### Accessibility Testing with axe
 
-Elements can be processed by the [aXe accessibility validator](https://github.com/dequelabs/axe-core), which will automatically fail the test if any violations are detected.
+Elements can be processed by the [axe accessibility validator](https://github.com/dequelabs/axe-core), which will automatically fail the test if any violations are detected.
 
 ```javascript
 it('should be accessible', async() => {
@@ -302,6 +302,20 @@ it('should wait for updates', async() => {
 });
 ```
 
+If that change causes a different set of nested components to be rendered, and those nested components take some time to finish *their* rendering, it's possible that awaiting `updateComplete` isn't enough.
+
+In this case, `waitForElem` can be used to recursively wait in a similar way to the original `fixture` call:
+
+```javascript
+import { fixture, waitForElem } from '@brightspace-ui/testing';
+
+it('should wait for recursive re-rendering', async() => {
+  const elem = await fixture(html`<my-elem></my-elem>`);
+  elem.errorState = true;
+  await waitForElem(elem);
+});
+```
+
 #### Waiting for `setTimeout` or `requestAnimationFrame`
 
 To wait a fixed amount of time (analogous to `setTimeout`), use `aTimeout`. To wait until the moment before browser repaints the screen (analogous to `requestAnimationFrame`), use `nextFrame`.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.44.2",
+  "version": "1.45.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",

package/src/browser/fixture.js

@@ -36,20 +36,20 @@ function getComposedChildren(node) {
  * @param {*} elem
  * @param {boolean} awaitLoadingComplete
  */
-async function waitForElem(elem, awaitLoadingComplete = true) {
+export async function waitForElem(elem, awaitLoadingComplete = true) {
 
 	if (!elem) return;
 
 	const doWait = async() => {
 
-		const update = elem.updateComplete;
-		if (typeof update === 'object' && Promise.resolve(update) === update) {
-			await update;
+		if (awaitLoadingComplete && typeof elem.getLoadingComplete === 'function') {
+			await elem.getLoadingComplete();
 			await nextFrame();
 		}
 
-		if (awaitLoadingComplete && typeof elem.getLoadingComplete === 'function') {
-			await elem.getLoadingComplete();
+		const update = elem.updateComplete;
+		if (typeof update === 'object' && Promise.resolve(update) === update) {
+			await update;
 			await nextFrame();
 		}
 

package/src/browser/index.js

@@ -3,5 +3,5 @@ import './axe.js';
 
 export { assert, aTimeout, defineCE, expect, html, nextFrame, oneDefaultPreventedEvent, oneEvent, waitUntil } from '@open-wc/testing';
 export { clickAt, clickElem, clickElemAt, dragDropElems, focusElem, hoverAt, hoverElem, hoverElemAt, sendKeys, sendKeysElem, setViewport } from './commands.js';
-export { fixture } from './fixture.js';
+export { fixture, waitForElem } from './fixture.js';
 export { runConstructor } from './constructor.js';