Allow child routes under docs pages

This makes the docs-route service more tolerant of pages with their own internal URL structure. For example, we're using this in ember-animated to have a page that includes an outlet in order to demonstrate cross-route animations.

Author: Savannah Mastrangelo

addon/components/docs-viewer/x-main/template.hbs

@@ -26,7 +26,7 @@
       {{/if}}
     </div>
 
-    <div class="w-1/2 text-right">
+    <div class="w-1/2 text-right" data-test-next-link>
       {{#if docsRoutes.next}}
         <div class='text-sm text-grey-dark'>
           Next

addon/services/docs-routes.js

@@ -39,14 +39,16 @@ export default Service.extend({
     if (this.get('routeUrls.length')) {
       let router = this.get('router.router');
       let currentURL = router.get('rootURL') + router.get('url');
-      currentURL = currentURL
-        .replace('//', '/')   // dedup slashes
-        .replace(/\?.+$/, '') // remove query-params
-        .replace(/\/$/, '')   // remove trailing slash
-        .replace(/#.+$/, ''); // remove # anchor links
-      let index = this.get('routeUrls').indexOf(currentURL);
-      assert(`DocsRoutes wasn't able to correctly detect the current route. The current url is ${currentURL}`, index > -1);
-      return index;
+      currentURL = currentURL.replace('//', '/')   // dedup slashes
+      let longestIndex, longestPrefix;
+      this.get('routeUrls').forEach((url, index) => {
+        if (currentURL.indexOf(url) === 0 && (!longestPrefix || url.length > longestPrefix.length)) {
+          longestIndex = index;
+          longestPrefix = url;
+        }
+      });
+      assert(`DocsRoutes wasn't able to correctly detect the current route. The current url is ${currentURL}`, longestIndex != null);
+      return longestIndex;
     }
   }),
 

tests/acceptance/docs-route-test.js

@@ -19,4 +19,9 @@ module('Acceptance | Docs route test', function(hooks) {
 
     assert.dom('h1').hasText('DocsHero');
   });
+
+  test('I can visit a nested child route within the docs pages and still have the correct links', async function(assert) {
+    await visit('/docs/deploying/test-nested-route');
+    assert.dom('[data-test-next-link] > a').hasText('Hero');
+  });
 });

tests/dummy/app/router.js

@@ -12,7 +12,11 @@ Router.map(function() {
     this.route('usage');
     this.route('quickstart');
     this.route('patterns');
-    this.route('deploying');
+    this.route('deploying', function() {
+      // This exists so we can acceptance test whether the docs pages tolerate
+      // embedded child routes. It's not used in the public documentation site.
+      this.route('test-nested-route');
+    });
 
     this.route('components', function() {
       this.route('docs-hero');