Merge pull request #38 from cibernox/make-it-work-in-acceptance

Acceptance test tentative API

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 6,
+    ecmaVersion: 2017,
     sourceType: 'module'
   },
   extends: [

addon-test-support/helpers.js

@@ -6,3 +6,5 @@ export { tap } from './tap';
 export { fillIn } from './fill-in';
 export { keyEvent } from './key-event';
 export { triggerEvent } from './trigger-event';
+export { visit } from './visit';
+export { waitUntil } from './wait-until';

addon-test-support/visit.js

@@ -0,0 +1,7 @@
+export function visit() {
+  if (!window.visit) {
+    throw new Error('visit is only available during acceptance tests');
+  }
+
+  return window.visit(...arguments);
+}

addon-test-support/wait-until.js

@@ -0,0 +1,25 @@
+import Ember from 'ember';
+const { run, RSVP } = Ember;
+
+export function waitUntil(callback, { timeout = 1000 } = {}) {
+  return new RSVP.Promise(function(resolve, reject) {
+    let value = run(callback);
+    if (value) {
+      resolve(value);
+      return;
+    }
+    let time = 0;
+    let tick = function() {
+      time += 10;
+      let value = run(callback);
+      if (value) {
+        resolve(value);
+      } else if (time < timeout) {
+        setTimeout(tick, 10);
+      } else {
+        reject('waitUntil timed out');
+      }
+    };
+    setTimeout(tick, 10);
+  });
+}

package.json

@@ -44,6 +44,7 @@
     "ember-cli-uglify": "^1.2.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
+    "ember-maybe-import-regenerator": "^0.1.5",
     "ember-load-initializers": "^0.6.0",
     "ember-resolver": "^3.0.0",
     "ember-source": "~2.12.0",

tests/acceptance/usage-in-acceptance-test.js

@@ -0,0 +1,39 @@
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+import { visit, click, find, fillIn, waitUntil } from 'ember-native-dom-helpers/test-support/helpers';
+
+moduleForAcceptance('Acceptance | usage in acceptance', {
+  beforeEach() {
+    window.server.timing = 300;
+  }
+});
+
+if (window.jQuery) {
+  test('Usage awaiting the world to settle', async function(assert) {
+    await visit('/signup-example');
+
+    assert.ok(find('.signup-example-form'), 'The signup form is displayed');
+    await fillIn('.signup-example-form__email', 'some@email.com');
+    await fillIn('.signup-example-form__password', '123123');
+    await fillIn('.signup-example-form__password-confirmation', '123123');
+    await click('.signup-example-form__submit-btn');
+
+    assert.ok(find('.dashboard-example-header'), 'We are on the dashboard now');
+  });
+
+  test('Usage using `waitUntil` to test unsettled state', async function(assert) {
+    await visit('/signup-example');
+
+    assert.ok(find('.signup-example-form'), 'The signup form is displayed');
+    fillIn('.signup-example-form__email', 'some@email.com');
+    fillIn('.signup-example-form__password', '123123');
+    fillIn('.signup-example-form__password-confirmation', '123123');
+    let submitPromise = click('.signup-example-form__submit-btn');
+
+    await waitUntil(() => find('.dashbord-loading-substate-header'));
+    assert.equal(find('.dashbord-loading-substate-header').textContent.trim(), 'Loading data for your dashboard. Please be patient.');
+
+    await submitPromise;
+    assert.ok(find('.dashboard-example-header'), 'We are on the dashboard now');
+  });
+}

tests/dummy/app/templates/dashboard-example-loading.hbs

@@ -1,3 +1,3 @@
-<h1>
+<h1 class="dashbord-loading-substate-header">
   Loading data for your dashboard. Please be patient.
 </h1>

tests/dummy/app/templates/dashboard-example.hbs

@@ -1,4 +1,4 @@
-<h1>Dashboard Example</h1>
+<h1 class="dashboard-example-header">Dashboard Example</h1>
 <p>
   id: {{model.id}}
 </p>

tests/dummy/app/templates/signup-example.hbs

@@ -1,20 +1,20 @@
 <h1>Signup example</h1>
 
-<form {{action "signup" on="submit"}}>
+<form class="signup-example-form" {{action "signup" on="submit"}}>
   <p>
     Email:
-    <input type="text" onchange={{action (mut email) value="target.value"}}>
+    <input type="text" class="signup-example-form__email" onchange={{action (mut email) value="target.value"}}>
   </p>
   <p>
     Password:
-    <input type="password" onchange={{action (mut password) value="target.value"}}>
+    <input type="password" class="signup-example-form__password" onchange={{action (mut password) value="target.value"}}>
   </p>
   <p>
     Password Confirmation:
-    <input type="password" onchange={{action (mut passwordConfirmation) value="target.value"}}>
+    <input type="password" class="signup-example-form__password-confirmation" onchange={{action (mut passwordConfirmation) value="target.value"}}>
   </p>
 
-  <button type="submit" disabled={{isSaving}}>
+  <button type="submit" class="signup-example-form__submit-btn" disabled={{isSaving}}>
     {{if isSaving 'Loading, please wait...' 'Sign up'}}
   </button>
 </form>

tests/dummy/config/targets.js

@@ -1,10 +1,13 @@
 /* eslint-env node */
-
+let browsers = [
+  'ie 9',
+  'last 1 Chrome versions',
+  'last 1 Firefox versions',
+  'last 1 Safari versions'
+];
+if (process.env.EMBER_ENV === 'development') {
+  browsers = ['last 1 Chrome versions'];
+}
 module.exports = {
-  browsers: [
-    'ie 9',
-    'last 1 Chrome versions',
-    'last 1 Firefox versions',
-    'last 1 Safari versions'
-  ]
+  browsers
 };

tests/integration/visit.js

@@ -0,0 +1,12 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import { visit } from 'ember-native-dom-helpers/test-support/helpers';
+
+moduleForComponent('fillIn', 'Integration | Test Helper | visit', {
+  integration: true
+});
+
+test('It raises an error in integration', function(assert) {
+  assert.throws(function() {
+    visit('/somewhere');
+  }, 'visit is only available during acceptance tests');
+});

tests/integration/wait-until-test.js

@@ -0,0 +1,114 @@
+import Ember from 'ember';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { waitUntil } from 'ember-native-dom-helpers/test-support/helpers';
+const { run } = Ember;
+
+moduleForComponent('wait-until', 'Integration | Test Helper | waitUntil', {
+  integration: true
+});
+
+test('It returns a promise that resolves when the given callback returns a non-falsey value', async function(assert) {
+  setTimeout(() => run(() => this.set('timeout1', true)), 100);
+  setTimeout(() => run(() => this.set('timeout2', true)), 200);
+  setTimeout(() => run(() => this.set('timeout3', true)), 300);
+
+  this.render(hbs`
+    {{#if timeout1}}<span id="wait-until-step1">Step 1</span>{{/if}}
+    {{#if timeout2}}<span id="wait-until-step2">Step 1</span>{{/if}}
+    {{#if timeout3}}<span id="wait-until-step3">Step 1</span>{{/if}}
+  `);
+
+  assert.notOk(document.querySelector('#wait-until-step1')
+    || document.querySelector('#wait-until-step2')
+    || document.querySelector('#wait-until-step3'),
+    'No element is rendered'
+  );
+
+  await waitUntil(() => document.querySelector('#wait-until-step1'));
+  assert.ok(document.querySelector('#wait-until-step1'), 'The first element appeared');
+  assert.notOk(document.querySelector('#wait-until-step2')
+    || document.querySelector('#wait-until-step3'),
+    'The second and third element are not rendered'
+  );
+
+  await waitUntil(() => document.querySelector('#wait-until-step2'));
+  assert.ok(document.querySelector('#wait-until-step1'), 'The first element appeared');
+  assert.ok(document.querySelector('#wait-until-step2'), 'The second element appeared');
+  assert.notOk(document.querySelector('#wait-until-step3'), 'The third element is not rendered');
+
+  await waitUntil(() => document.querySelector('#wait-until-step3'));
+  assert.ok(document.querySelector('#wait-until-step1'), 'The first element appeared');
+  assert.ok(document.querySelector('#wait-until-step2'), 'The second element appeared');
+  assert.ok(document.querySelector('#wait-until-step3'), 'The third element appeared');
+});
+
+test('It waits until the given callback returns true', async function(assert) {
+  setTimeout(() => run(() => this.set('timeout1', true)), 100);
+  setTimeout(() => run(() => this.set('timeout2', true)), 200);
+  setTimeout(() => run(() => this.set('timeout3', true)), 300);
+
+  this.render(hbs`
+    {{#if timeout1}}<span id="wait-until-step1">Step 1</span>{{/if}}
+    {{#if timeout2}}<span id="wait-until-step2">Step 1</span>{{/if}}
+    {{#if timeout3}}<span id="wait-until-step3">Step 1</span>{{/if}}
+  `);
+
+  assert.notOk(document.querySelector('#wait-until-step1')
+    || document.querySelector('#wait-until-step2')
+    || document.querySelector('#wait-until-step3'),
+    'No element is rendered'
+  );
+
+  await waitUntil(() => document.querySelector('#wait-until-step1'));
+  assert.ok(document.querySelector('#wait-until-step1'), 'The first element appeared');
+  assert.notOk(document.querySelector('#wait-until-step2')
+    || document.querySelector('#wait-until-step3'),
+    'The second and third element are not rendered'
+  );
+
+  await waitUntil(() => document.querySelector('#wait-until-step2'));
+  assert.ok(document.querySelector('#wait-until-step1'), 'The first element appeared');
+  assert.ok(document.querySelector('#wait-until-step2'), 'The second element appeared');
+  assert.notOk(document.querySelector('#wait-until-step3'), 'The third element is not rendered');
+
+  await waitUntil(() => document.querySelector('#wait-until-step3'));
+  assert.ok(document.querySelector('#wait-until-step1'), 'The first element appeared');
+  assert.ok(document.querySelector('#wait-until-step2'), 'The second element appeared');
+  assert.ok(document.querySelector('#wait-until-step3'), 'The third element appeared');
+});
+
+test('It was a default timeout of 1 second', async function(assert) {
+  assert.expect(2);
+  this.render(hbs``);
+  let initialTime = +new Date();
+  try {
+    await waitUntil(() => document.querySelector('#wait-until-step1'));
+  } catch(e) {
+    let finalTime = +new Date();
+    assert.equal(e, 'waitUntil timed out');
+    let elapsedTime = finalTime - initialTime;
+    assert.ok(elapsedTime >= 1000 && elapsedTime <= 1500, 'The default timeout is 1s');
+  }
+});
+
+test('The default timeout can be adjusted using passing options as a second argument', async function(assert) {
+  assert.expect(2);
+  this.render(hbs``);
+  let initialTime = +new Date();
+  try {
+    await waitUntil(() => document.querySelector('#wait-until-step1'), { timeout: 2000 });
+  } catch(e) {
+    let finalTime = +new Date();
+    assert.equal(e, 'waitUntil timed out');
+    let elapsedTime = finalTime - initialTime;
+    assert.ok(elapsedTime >= 2000 && elapsedTime <= 2500, 'The timeout was set to 2s');
+  }
+});
+
+test('The promise resolved with the return value of the callback', async function(assert) {
+  assert.expect(1);
+  this.render(hbs`<span id="wait-until-thing"></span>`);
+  let element = await waitUntil(() => document.querySelector('#wait-until-thing'));
+  assert.equal(element.id, 'wait-until-thing', 'waitUntil resoleved with the DOM element');
+});

yarn.lock

@@ -2235,6 +2235,15 @@ ember-lodash@^4.0:
     ember-cli-babel "^5.1.7"
     lodash-es "^4.17.4"
 
+ember-maybe-import-regenerator@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/ember-maybe-import-regenerator/-/ember-maybe-import-regenerator-0.1.5.tgz#9f488a6406a04478dfd5784f2defa56f06b08288"
+  dependencies:
+    broccoli-funnel "^1.0.1"
+    broccoli-merge-trees "^1.0.0"
+    ember-cli-babel "^6.0.0-beta.4"
+    regenerator-runtime "^0.9.5"
+
 ember-qunit@^2.0.0-beta.1:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ember-qunit/-/ember-qunit-2.0.0.tgz#dfb6549655220ee31df0bf26f5316ffe5c8f8061"
@@ -4237,14 +4246,10 @@ mute-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
 
-mute-stream@0.0.6:
+mute-stream@0.0.6, mute-stream@~0.0.4:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.6.tgz#48962b19e169fd1dfc240b3f1e7317627bbc47db"
 
-mute-stream@~0.0.4:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -4969,6 +4974,10 @@ regenerator-runtime@^0.10.0:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
 
+regenerator-runtime@^0.9.5:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"
+
 regenerator-transform@0.9.8:
   version "0.9.8"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c"