Merge pull request #128 from cibernox/improve-set-breakpoint-test-helper

Improve `setBreakpoint` to be runloop aware and be await-able

addon-test-support/index.js

@@ -1,4 +1,5 @@
-import { getContext } from '@ember/test-helpers';
+import { getContext, settled } from '@ember/test-helpers';
+import { run } from '@ember/runloop';
 
 export function setBreakpoint(breakpointName) {
   let { owner } = getContext();
@@ -12,6 +13,10 @@ export function setBreakpoint(breakpointName) {
     throw new Error(`Breakpoint "${breakpointName}" is not defined in your breakpoints file`);
   }
   let matches = media.get('matches');
-  matches.clear();
-  matches.addObject(breakpointName);
+  run(() => {
+    matches.clear();
+    matches.addObject(breakpointName);
+    media._triggerMediaChanged();
+  });
+  return settled();
 }

package.json

@@ -44,7 +44,8 @@
     "ember-try": "^0.2.23",
     "eslint-plugin-ember": "^5.0.0",
     "eslint-plugin-node": "^5.2.1",
-    "loader.js": "^4.4.0"
+    "loader.js": "^4.4.0",
+    "qunit-dom": "^0.6.0"
   },
   "keywords": [
     "ember-addon",

tests/integration/testing-helpers-test.js

@@ -1,11 +1,12 @@
 import { module, test } from 'qunit';
-import { setupTest } from 'ember-qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from "htmlbars-inline-precompile";
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 import { setBreakpoint } from 'ember-responsive/test-support';
 
 module('Test Helpers | setBreakpoint', function(hooks) {
-  setupTest(hooks);
+  setupRenderingTest(hooks);
 
   hooks.beforeEach(function() {
     this.owner.register('breakpoints:main', {
@@ -22,8 +23,8 @@ module('Test Helpers | setBreakpoint', function(hooks) {
   test('The default breakpoint in test is "desktop"', async function(assert) {
     let subject = this.owner.factoryFor('component:dummy-component').create();
     assert.equal(subject.get('media.isDesktop'), true);
-    assert.equal(subject.get('media.isMobile'), false);
     assert.equal(subject.get('media.isTablet'), false);
+    assert.equal(subject.get('media.isMobile'), false);
     assert.equal(subject.get('media.classNames'), 'media-desktop');
   });
 
@@ -37,9 +38,30 @@ module('Test Helpers | setBreakpoint', function(hooks) {
     setBreakpoint('tablet');
     let subject = this.owner.factoryFor('component:dummy-component').create();
     assert.equal(subject.get('media.isDesktop'), false);
-    assert.equal(subject.get('media.isMobile'), false);
     assert.equal(subject.get('media.isTablet'), true);
+    assert.equal(subject.get('media.isMobile'), false);
     assert.equal(subject.get('media.classNames'), 'media-tablet');
     assert.deepEqual(subject.get('media.matches'), ['tablet']);
   });
+
+  test('`setBreakpoint` can be "awaited" to ensure the template has updated', async function(assert) {
+    setBreakpoint("tablet");
+    await this.render(hbs`
+      <div id="dom-target">
+        {{#if (media "isMobile")}}
+          Mobile
+        {{else if (media "isTablet")}}
+          Tablet
+        {{else}}
+          Desktop
+        {{/if}}
+      </div>
+    `);
+
+    assert.dom('#dom-target').hasText('Tablet');
+    await setBreakpoint('mobile');
+    assert.dom('#dom-target').hasText('Mobile');
+    await setBreakpoint('desktop');
+    assert.dom('#dom-target').hasText('Desktop');
+  });
 });

yarn.lock

@@ -4730,6 +4730,13 @@ quick-temp@^0.1.0, quick-temp@^0.1.2, quick-temp@^0.1.3, quick-temp@^0.1.5, quic
     rimraf "^2.5.4"
     underscore.string "~3.3.4"
 
+qunit-dom@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/qunit-dom/-/qunit-dom-0.6.0.tgz#ff3a50e4b70c89d1414236e0a5373fc4d81e1328"
+  dependencies:
+    broccoli-funnel "^2.0.0"
+    broccoli-merge-trees "^2.0.0"
+
 qunit@^2.5.0:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/qunit/-/qunit-2.5.1.tgz#739b0ea9595bbf508b0600d5af04dcb2ba2a74e5"