fix(route-styles): making sure that the route info object has the right shape before continuing fixs #323

Author: webark

.travis.yml

@@ -3,7 +3,7 @@ language: node_js
 node_js:
   # we recommend testing addons with the same minimum supported node version as Ember CLI
   # so that your addon works for all apps
-  - "8"
+  - "10"
 
 sudo: false
 dist: trusty

addon/instance-initializers/route-styles.js

@@ -3,32 +3,37 @@ import initRouteStyles from '../utils/init-route-styles';
 // This file is removed from the build in Ember < 3.6
 export function initialize(appInstance) {
   let router = appInstance.lookup('service:router');
-  router.on('routeDidChange', function(transition) {
-    initRouteStyles(appInstance, nestedRouteNames(transition.to));
+  router.on('routeDidChange', function({ to }) {
+    if (likeRouteInfo(to)) {
+      initRouteStyles(appInstance, nestedRouteNames(to));
+    }
   });
 
-  router.on('routeWillChange', function(transition) {
-    if (transition.to && /_loading$/.test(transition.to.name) && transition.isActive) {
-      const routeNames = nestedRouteNames(transition.to)
-        // loading route names are set with an _loading even though
-        // their path is -loading
-        .map(name => name.replace(/_loading$/, '-loading'));
-      initRouteStyles(appInstance, routeNames);
+  router.on('routeWillChange', function({ to, isActive }) {
+    if (likeRouteInfo(to)) {
+      if (/_loading$/.test(to.name) && isActive) {
+        const routeNames = nestedRouteNames(to)
+          // loading route names are set with an _loading even though
+          // their path is -loading
+          .map(name => name.replace(/_loading$/, '-loading'));
+        initRouteStyles(appInstance, routeNames);
+      }
     }
   });
 }
 
-function nestedRouteNames(route = {}, routeNames = []) {
-  if (route.name) {
-    routeNames.push(route.name);
-  }
-
-  if (route.parent) {
-    return nestedRouteNames(route.parent, routeNames);
+function nestedRouteNames({ name, parent }, routeNames = []) {
+  routeNames.push(name);
+  if (parent) {
+    return nestedRouteNames(parent, routeNames);
   }
   return routeNames;
 }
 
+function likeRouteInfo(info) {
+  return info && typeof info === 'object' && info.hasOwnProperty('name');
+}
+
 export default {
   initialize
 };

package.json

@@ -54,7 +54,7 @@
     "ember-cli-htmlbars-inline-precompile": "^2.0.0",
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-styles-preprocessor": "^0.5.3",
+    "ember-cli-styles-preprocessor": "^0.5.5",
     "ember-cli-template-lint": "^1.0.0-beta.1",
     "ember-cli-uglify": "^2.1.0",
     "ember-disable-prototype-extensions": "^1.1.3",

tests/acceptance/aborted-state-test.js

@@ -0,0 +1,13 @@
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+
+moduleForAcceptance('Acceptance | aborted state');
+
+test('when aborting it should finish the transition and not error', function(assert) {
+  visit('/aborted-state');
+
+
+  andThen(function() {
+    assert.equal(currentURL(), '/template-style-only');
+  });
+});

tests/dummy/app/aborted-state/route.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  beforeModel(transition) {
+    transition.abort();
+    this.transitionTo('template-style-only')
+    return this._super(...arguments);
+  },
+});

tests/dummy/app/aborted-state/template.hbs

@@ -0,0 +1 @@
+<h1> you will never see me </h1>

tests/dummy/app/router.js

@@ -47,6 +47,8 @@ Router.map(function() {
   this.route('error-state', function() {
     this.route('handled');
   });
+
+  this.route('aborted-state');
 });
 
 export default Router;