chore: reduce flakiness around asserting Shadow DOM content

alexlafroscia · Aug 8, 2019 · 86d6601 · 86d6601
1 parent b258588
commit 86d6601
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/packages/ember-cli-stencil/tests/integration/generating-ember-components-test.js b/packages/ember-cli-stencil/tests/integration/generating-ember-components-test.js
@@ -3,8 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { click, find, render, clearRender } from '@ember/test-helpers';
 import {
   findInShadowRoot,
-  getShadowRoot,
-  nextRAF
+  getShadowRoot
 } from 'ember-cli-stencil/test-support';
 import hbs from 'htmlbars-inline-precompile';
 import td from 'testdouble';
@@ -44,12 +43,17 @@ module('generating ember components', function(hooks) {
       const el = await find('demo-passing-props');
       const shadowRoot = await getShadowRoot(el);
 
-      assert.equal(shadowRoot.textContent, 'foo', 'Has the initial text');
+      await assert.convergeOn(
+        () => shadowRoot.textContent === 'foo',
+        'Has the initial text'
+      );
 
       this.set('text', 'bar');
-      await nextRAF();
 
-      assert.equal(shadowRoot.textContent, 'bar', 'Has the updated text value');
+      await assert.convergeOn(
+        () => shadowRoot.textContent === 'bar',
+        'Has the updated text value'
+      );
     });
 
     test('binding complex props', async function(assert) {
@@ -62,12 +66,11 @@ module('generating ember components', function(hooks) {
       const el = await find('demo-rich-props');
       const shadowRoot = await getShadowRoot(el);
 
-      assert.equal(shadowRoot.textContent, 'foobar');
+      await assert.convergeOn(() => shadowRoot.textContent === 'foobar');
 
       this.set('list', ['foo', 'bar', 'baz']);
-      await nextRAF();
 
-      assert.equal(shadowRoot.textContent, 'foobarbaz');
+      await assert.convergeOn(() => shadowRoot.textContent === 'foobarbaz');
     });
   });
 

diff --git a/packages/ember-cli-stencil/tests/integration/passing-props-test.js b/packages/ember-cli-stencil/tests/integration/passing-props-test.js
@@ -3,8 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { click, find, render } from '@ember/test-helpers';
 import {
   findInShadowRoot,
-  getShadowRoot,
-  nextRAF
+  getShadowRoot
 } from 'ember-cli-stencil/test-support';
 import hbs from 'htmlbars-inline-precompile';
 import td from 'testdouble';
@@ -18,7 +17,7 @@ module('passing props', function(hooks) {
     const el = await find('demo-passing-props');
     const shadowRoot = await getShadowRoot(el);
 
-    assert.equal(shadowRoot.textContent, 'Foobar');
+    await assert.convergeOn(() => shadowRoot.textContent === 'Foobar');
   });
 
   test('passing a dynamic property into a component', async function(assert) {
@@ -30,12 +29,17 @@ module('passing props', function(hooks) {
     const el = await find('demo-passing-props');
     const shadowRoot = await getShadowRoot(el);
 
-    assert.equal(shadowRoot.textContent, 'foo', 'Has the initial text');
+    await assert.convergeOn(
+      () => shadowRoot.textContent === 'foo',
+      'Has the initial text'
+    );
 
     this.set('text', 'bar');
-    await nextRAF();
 
-    assert.equal(shadowRoot.textContent, 'bar', 'Has the updated text value');
+    await assert.convergeOn(
+      () => shadowRoot.textContent === 'bar',
+      'Has the updated text value'
+    );
   });
 
   test('passing a function as a property', async function(assert) {

diff --git a/packages/ember-cli-stencil/tests/test-helper.js b/packages/ember-cli-stencil/tests/test-helper.js
@@ -1,9 +1,27 @@
+import QUnit from 'qunit';
+import { setApplication, waitUntil } from '@ember/test-helpers';
+import { start } from 'ember-qunit';
 import Application from '../app';
 import config from '../config/environment';
-import { setApplication } from '@ember/test-helpers';
-import { start } from 'ember-qunit';
+
 import 'ember-cli-testdouble-qunit';
 
 setApplication(Application.create(config.APP));
 
 start();
+
+QUnit.extend(QUnit.assert, {
+  async convergeOn(condition, message) {
+    try {
+      await waitUntil(condition);
+
+      this.pushResult({ result: true, message });
+    } catch (e) {
+      if (e.message === 'waitUntil timed out') {
+        this.pushResult({ result: false, message });
+      } else {
+        throw e;
+      }
+    }
+  }
+});