@open-wc/testing-helpers - npm Package Compare versions

Comparing version 0.7.11 to 0.7.12

elementUpdated.js

+import { nextFrame } from './helpers.js';
+
+const isDefinedPromise = action => typeof action === 'object' && Promise.resolve(action) === action;
+
+/**
+ * Awaits for "update complete promises" of elements
+ * - updateComplete [lit-element]
+ * - componentOnReady() [stencil]
+ *
+ * If none of these is available we await the next frame.
+ *
+ * @param {HTMLElement} el
+ * @returns {Promise<Element>}
+ */
+export async function elementUpdated(el) {
+  let hasSpecificAwait = false;
+  let update = el.updateComplete;
+  if (isDefinedPromise(update)) {
+    await update;
+    hasSpecificAwait = true;
+  }
+
+  update = el.componentOnReady ? el.componentOnReady() : false;
+  if (isDefinedPromise(update)) {
+    await update;
+    hasSpecificAwait = true;
+  }
+
+  if (!hasSpecificAwait) {
+    await nextFrame();
+  }
+  return el;
+}

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.7.12](https://github.com/open-wc/open-wc/tree/master/packages/testing-helpers/compare/@open-wc/testing-helpers@0.7.11...@open-wc/testing-helpers@0.7.12) (2019-02-04)
+
+
+### Bug Fixes
+
+* **testing-helpers:** add `await elementUpdated(el)` supports stencil ([c442f21](https://github.com/open-wc/open-wc/tree/master/packages/testing-helpers/commit/c442f21))
+
+
+
+
+
 ## [0.7.11](https://github.com/open-wc/open-wc/tree/master/packages/testing-helpers/compare/@open-wc/testing-helpers@0.7.10...@open-wc/testing-helpers@0.7.11) (2019-02-02)
@@ -8,0 +19,0 @@

index-no-side-effects.js

@@ -15,1 +15,2 @@ export { html, unsafeStatic } from './lit-html.js';
 export { cachedWrappers, fixtureWrapper, fixtureCleanup } from './fixtureWrapper.js';
+export { elementUpdated } from './elementUpdated.js';

index.js

@@ -15,1 +15,2 @@ export { html, unsafeStatic } from './lit-html.js';
 export { cachedWrappers, fixtureWrapper, fixtureCleanup } from './fixtureWrapper.js';
+export { elementUpdated } from './elementUpdated.js';

litFixture.js

 import { fixtureWrapper } from './fixtureWrapper.js';
 import { render } from './lit-html.js';
-import { nextFrame } from './helpers.js';
+import { elementUpdated } from './elementUpdated.js';
 
@@ -25,9 +25,4 @@ /**
   const el = litFixtureSync(template);
-  const update = el.updateComplete;
-  if (typeof update === 'object' && Promise.resolve(update) === update) {
-    await update;
-  } else {
-    await nextFrame();
-  }
+  await elementUpdated(el);
   return el;
 }

package.json

 {
   "name": "@open-wc/testing-helpers",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "description": "Testing Helpers following open-wc recommendations",
@@ -32,3 +32,3 @@ "author": "open-wc",
   },
-  "gitHead": "d32e8443a74121f4fbcb775669deab80633b8fd3"
+  "gitHead": "c09ae19c31e87f836982bb3b9ee5539db8331346"
 }

README.md

@@ -73,16 +73,35 @@ # Testing Helpers
 ## Timings
-If you need to wait for multiple elements to update you can use `nextFrame`.  
+By default fixture awaits the elements "update complete" Promise.
+- for [lit-element](https://github.com/polymer/lit-element) that is `el.updateComplete`;
+- for [stencil](https://github.com/ionic-team/stencil/) that is `el.componentOnReady()`;
 
+If none of those specfic Promise hooks are found, it will wait for one frame via `await nextFrame()`.<br>
+**Note**: this does not guarantee that the element is done rendering - it just waits for the next JavaScript tick.
+
+Essentially, `fixture` creates a synchronous fixture, then waits for the element to finish updating, checking `updateComplete` first, then falling back to `componentReady()`, and `nextFrame()` as a last resort.
+
+This way, you can write your tests more succinctly, without having to explicitly `await` those hooks yourself.
 ```js
-import { nextFrame, aTimeout, html, fixture } from '@open-wc/testing-helpers';
-
 const el = await fixture(html`<my-el .foo=${'bar'}></my-el>`);
 expect(el.foo).to.equal('bar');
-el.foo = 'baz';
+
+// vs
+
+const el = fixtureSync(html`<my-el .foo=${'bar'}></my-el>`);
+await elementUpdated(el);
+expect(el.foo).to.equal('bar');
+```
+
+### nextFrame
+Uses `requestAnimationFrame` to wait for the next frame.
+```js
 await nextFrame();
-// or as an alternative us timeout
-// await aTimeout(10); // would wait 10ms
-expect(el.shadowRoot.querySelector('#foo').innerText).to.equal('baz');
 ```
 
+### aTimeout
+Waits for `x` ms via `setTimeout`;
+```js
+await aTimeout(10); // would wait 10ms
+```
+
 ## Fixture Cleanup
@@ -89,0 +108,0 @@ By default, if you import anything via `import { ... } from '@open-wc/testing-helpers';`, it will automatically register a side-effect that cleans up your fixtures.

stringFixture.js

@@ -1,3 +0,3 @@
-import { nextFrame } from './helpers.js';
 import { fixtureWrapper } from './fixtureWrapper.js';
+import { elementUpdated } from './elementUpdated.js';
 
@@ -26,9 +26,4 @@ /**
   const el = stringFixtureSync(template);
-  const update = el.updateComplete;
-  if (typeof update === 'object' && Promise.resolve(update) === update) {
-    await update;
-  } else {
-    await nextFrame();
-  }
+  await elementUpdated(el);
   return el;
 }

No alert changes

Improved metrics

Total package byte prevSize

29572

6.5%

Number of package files

22

4.76%

Lines of code

383

5.8%

Number of lines in readme file

135

16.38%

No dependency changes