Updating dummy app in preparation for tests
MODIFY
addon/index.js
addon/index.js
@@ -4,7 +4,7 @@ export {
beginTransition,
endTransition,
didTransition,
- afterFirstRoutePaint,
- afterContentPaint,
+ whenRoutePainted,
+ whenRouteIdle,
TRANSITION_INTERUPTED,
} from './scheduler';

MODIFY
addon/scheduler.js
addon/scheduler.js
@@ -5,8 +5,8 @@ import { registerWaiter } from '@ember/test';
const USE_RAF = typeof requestAnimationFrame === 'function';
let _didTransition;
-let _afterFirstRoutePaint;
-let _afterContentPaint;
+let _whenRoutePainted;
+let _whenRouteIdle;
reset();
@@ -16,8 +16,8 @@ export function beginTransition() {
_checkForPriorTransition();
_didTransition = _defer();
- _afterFirstRoutePaint = _didTransition.promise.then(() => _afterNextPaint());
- _afterContentPaint = _afterFirstRoutePaint.then(() => _afterNextPaint());
+ _whenRoutePainted = _didTransition.promise.then(() => _afterNextPaint());
+ _whenRouteIdle = _whenRoutePainted.then(() => _afterNextPaint());
}
export function endTransition() {
@@ -31,8 +31,8 @@ export function setupRouter(router) {
export function reset() {
_didTransition = _defer();
- _afterFirstRoutePaint = _didTransition.promise.then(() => {});
- _afterContentPaint = _afterFirstRoutePaint.then(() => {});
+ _whenRoutePainted = _didTransition.promise.then(() => {});
+ _whenRouteIdle = _whenRoutePainted.then(() => {});
_didTransition.resolve();
_activeRAFs = 0;
}
@@ -51,15 +51,15 @@ export function didTransition() {
* This can be used to schedule work to occur that is lower priority than initial
* work (content outside of the viewport, rendering non-critical content).
*/
-export function afterFirstRoutePaint() {
- return _afterFirstRoutePaint;
+export function whenRoutePainted() {
+ return _whenRoutePainted;
}
/**
* This promise, when resolved, approximates after content is painted.
*/
-export function afterContentPaint() {
- return _afterContentPaint;
+export function whenRouteIdle() {
+ return _whenRouteIdle;
}
function _checkForPriorTransition() {

MODIFY
tests/acceptance/deferred-render-test.js
tests/acceptance/deferred-render-test.js
-import { module } from 'qunit';
+import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
+import { visit } from '@ember/test-helpers';
import { setupRouter, reset } from 'ember-app-scheduler';
module('Acceptance | deferred render', function(hooks) {
@@ -11,7 +12,25 @@ module('Acceptance | deferred render', function(hooks) {
setupRouter(this.router);
});
- hooks.afterEach(() => {
+ hooks.afterEach(function() {
reset();
});
+
+ test('visiting route renders deferred content via whenRoutePainted', async function(assert) {
+ assert.expect(0);
+
+ await visit('/first-paint');
+ });
+
+ test('visiting route renders deferred content via whenRouteIdle', async function(assert) {
+ assert.expect(0);
+
+ await visit('/content-paint');
+ });
+
+ test('visiting a route and immediately transitioning correctly aborts current transition', async function(assert) {
+ assert.expect(0);
+
+ await visit('/aborted-paint');
+ });
});

ADD
tests/dummy/app/components/when-route-idle.js
+import Ember from 'ember';
+import layout from '../templates/components/when-route-idle';
+import { whenRoutePainted } from 'ember-app-scheduler';
+
+export default Ember.Component.extend({
+ layout,
+ whenRouteIdle: false,
+
+ init() {
+ this._super(...arguments);
+
+ whenRoutePainted().then(() => {
+ this.set('whenRouteIdle', true);
+ });
+ },
+});

ADD
tests/dummy/app/components/when-route-painted.js
+import Ember from 'ember';
+import layout from '../templates/components/when-route-painted';
+import { whenRoutePainted } from 'ember-app-scheduler';
+
+export default Ember.Component.extend({
+ layout,
+ whenRoutePainted: false,
+
+ init() {
+ this._super(...arguments);
+
+ whenRoutePainted().then(() => {
+ this.set('whenRoutePainted', true);
+ });
+ },
+});

MODIFY
tests/dummy/app/router.js
tests/dummy/app/router.js
@@ -8,6 +8,9 @@ const Router = EmberRouter.extend({
Router.map(function() {
this.route('demo');
+ this.route('first-paint');
+ this.route('content-paint');
+ this.route('aborted-paint');
});
export default Router;

ADD
tests/dummy/app/routes/aborted-paint.js
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+ beforeModel() {
+ this.transitionTo('first-paint');
+ },
+});

ADD
tests/dummy/app/routes/content-paint.js
+import Ember from 'ember';
+
+export default Ember.Route.extend({});

ADD
tests/dummy/app/routes/first-paint.js
+import Ember from 'ember';
+
+export default Ember.Route.extend({});

ADD
tests/dummy/app/templates/aborted-paint.hbs
+{{outlet}}
\ No newline at end of file

MODIFY
tests/dummy/app/templates/application.hbs
tests/dummy/app/templates/application.hbs
<h2 id="title">Welcome to app scheduler dummy app</h2>
{{#link-to "index"}}Home{{/link-to}}
{{#link-to "demo"}}Demo{{/link-to}}
+{{#link-to "first-paint"}}First Paint{{/link-to}}
+{{#link-to "content-paint"}}Content Paint{{/link-to}}
+{{#link-to "aborted-paint"}}Aborted Paint{{/link-to}}
{{outlet}}

ADD
tests/dummy/app/templates/components/when-route-idle.hbs
+{{#if whenRouteIdle}}
+ {{yield}}
+{{/if}}
\ No newline at end of file

ADD
tests/dummy/app/templates/components/when-route-painted.hbs
+{{#if whenRoutePainted}}
+ {{yield}}
+{{/if}}
\ No newline at end of file

ADD
tests/dummy/app/templates/content-paint.hbs
+{{#when-route-idle}}
+ <span class="only-when-route-idle">When Route Idle</span>
+{{/when-route-idle}}
\ No newline at end of file

ADD
tests/dummy/app/templates/first-paint.hbs
+{{#when-route-painted}}
+ <span class="only-when-route-painted">When Route Painted</span>
+{{/when-route-painted}}
\ No newline at end of file

MODIFY
tests/integration/deferred-render-in-component-test.js
tests/integration/deferred-render-in-component-test.js
@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
import { setupRenderingTest } from 'ember-qunit';
import { render, find, waitFor } from '@ember/test-helpers';
import { beginTransition, endTransition } from 'ember-app-scheduler/scheduler';
-import { afterFirstRoutePaint, afterContentPaint } from 'ember-app-scheduler';
+import { whenRoutePainted, whenRouteIdle } from 'ember-app-scheduler';
module('deferred render in component', function(hooks) {
setupRenderingTest(hooks);
@@ -28,11 +28,11 @@ module('deferred render in component', function(hooks) {
},
didInsertElement() {
- afterFirstRoutePaint().then(() => {
+ whenRoutePainted().then(() => {
this.set('showFoo', true);
});
- afterContentPaint().then(() => {
+ whenRouteIdle().then(() => {
this.set('showBar', true);
});
},
@@ -44,7 +44,7 @@ module('deferred render in component', function(hooks) {
: this.owner._lookupFactory(name);
});
- test('deferred element is visible following afterFirstRoutePaint', async function(assert) {
+ test('deferred element is visible following whenRoutePainted', async function(assert) {
let foo;
this.owner.register(
@@ -67,7 +67,7 @@ module('deferred render in component', function(hooks) {
assert.isVisible(foo);
});
- test('deferred element is visible following afterContentPaint', async function(assert) {
+ test('deferred element is visible following whenRouteIdle', async function(assert) {
let foo;
this.owner.register(

Updating dummy app in preparation for tests