Added further tests for navigation

README.md

@@ -4,7 +4,7 @@
 [![Docker][docker-image]][docker-link]
 [![PyPI][pypi-image]][pypi-link]
 
-  [travis-image]: https://travis-ci.org/squidfunk/mkdocs-material.svg
+  [travis-image]: https://travis-ci.org/squidfunk/mkdocs-material.svg?branch=master
   [travis-link]: https://travis-ci.org/squidfunk/mkdocs-material
   [deps-image]: https://david-dm.org/squidfunk/mkdocs-material/dev-status.svg
   [deps-link]: https://david-dm.org/squidfunk/mkdocs-material?type=dev

lib/tasks/tests/visual/generate.js

@@ -51,10 +51,10 @@ export default (gulp, config) => {
             cwd: path.dirname(file.path)
           })
 
-            /* Emit error, if any */
+          /* Emit error, if any */
           if (proc.status)
             this.emit("error", new util.PluginError("mkdocs",
-                `Terminated with errors: ${proc.stderr.toString()}`))
+              `Terminated with errors: ${proc.stderr.toString()}`))
 
           /* Terminate */
           done()

lib/tasks/tests/visual/session.js

@@ -38,27 +38,35 @@ export default (gulp, config) => {
     /* Open SauceConnect tunnel */
     }).then(() => {
       return new Promise((resolve, reject) => {
-        if (!process.env.SAUCE_USERNAME ||
-            !process.env.SAUCE_ACCESS_KEY)
-          throw new Error(
-            "SauceConnect: please provide SAUCE_USERNAME " +
-            "and SAUCE_ACCESS_KEY")
 
-        /* Open tunnel */
+        /* Start SauceConnect tunnel */
-        sauce.start(
+        if (process.env.CI || process.env.SAUCE) {
-          `Local #${moniker.choose()}`,
+          if (!process.env.SAUCE_USERNAME ||
-          process.env.SAUCE_USERNAME,
+              !process.env.SAUCE_ACCESS_KEY)
-          process.env.SAUCE_ACCESS_KEY,
+            throw new Error(
-          err => {
+              "SauceConnect: please provide SAUCE_USERNAME " +
-            return err ? reject(err) : resolve(sauce)
+              "and SAUCE_ACCESS_KEY")
-          })
+
+            /* Open tunnel */
+          sauce.start(
+            `Local #${moniker.choose()}`,
+            process.env.SAUCE_USERNAME,
+            process.env.SAUCE_ACCESS_KEY,
+            err => {
+              return err ? reject(err) : resolve(sauce)
+            })
+        } else {
+          resolve()
+        }
       })
 
         /* Close tunnel on CTRL-C */
-        .then(() => {
+        .then(runner => {
           return new Promise(resolve => {
             process.on("SIGINT", () => {
-              sauce.stop(resolve)
+              return runner
+                ? runner.stop(resolve)
+                : resolve()
             })
           })
         })

material/base.html

@@ -34,7 +34,7 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr-5b0c41c2b5.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-ee6a3f36b0.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-166740f5bb.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
       {% endif %}

src/assets/stylesheets/layout/_nav.scss

@@ -154,6 +154,7 @@
 
   // [tablet -]: Layered navigation
   @include break-to-device(tablet) {
+    background-color: $md-color-white;
 
     // Stretch primary navigation to drawer
     &--primary,
@@ -170,14 +171,6 @@
 
     // Adjust styles for primary navigation
     &--primary {
-      background-color: $md-color-white;
-
-      // Move subsequent navigations off
-      .md-nav__toggle ~ .md-nav {
-        @include z-depth(4);
-
-        background-color: $md-color-white;
-      }
 
       // List title and item
       .md-nav__title,
@@ -302,7 +295,8 @@
           font-size: 2.4rem;
         }
 
-        // Color of icon should inherit link color on hover
+        // Color of icon should inherit link color on focus or hover
+        &:focus::after,
         &:hover::after {
           color: inherit;
         }

tests/visual/helpers/spec.js

@@ -76,7 +76,7 @@ const resolve = (breakpoints, expr) => {
  * @return {boolean} Whether at least one suite was kept
  */
 const filter = (components, parent = []) => {
-  const regexp = new RegExp(args.grep.replace(" ", ".*?"), "i")
+  const pattern = new RegExp(args.grep.replace(/\s+/, ".*?"), "gi")
   return Object.keys(components).reduce((match, name) => {
     const component = components[name]
 
@@ -90,18 +90,18 @@ const filter = (components, parent = []) => {
         const fullname = temp.slice(0)
           .concat(state.name.length ? [state.name] : [])
           .join(" ")
-        if (regexp.test(fullname))
+        if (fullname.match(pattern))
           states.push(state)
         return states
       }, [])
 
-    /* Keep komponent, if there is at least one state or the component has
+    /* Keep component, if there is at least one state or the component has
        matching subsuites, so it needs to be kept */
-    if (component.states.length || keep) {
+    if (component.states.length) {
-      if (keep) {
+      return true
-        delete component.capture
+    } else if (keep) {
-        delete component.break
+      delete component.capture
-      }
+      delete component.break
       return true
     }
 

tests/visual/suites/extensions/admonition/docs/index.md

@@ -1,11 +1,11 @@
-# Suite
-
 <style>
   .md-header {
     display: none;
   }
 </style>
 
+# Suite
+
 ## Default
 
 !!! note

tests/visual/suites/extensions/admonition/mkdocs.yml

@@ -19,7 +19,7 @@
 # IN THE SOFTWARE.
 
 # Test suite
-site_name: Admonition Test
+site_name: Test/Admonition
 markdown_extensions:
   - markdown.extensions.admonition
 

tests/visual/suites/layout/nav/_overflow/docs/index.md

@@ -1,5 +1,3 @@
-# Suite
-
 <style>
   *,
   *::before,
@@ -7,3 +5,5 @@
     transition: none !important;
   }
 </style>
+
+# Suite

tests/visual/suites/layout/nav/_overflow/docs/nested.md

@@ -1,5 +1,3 @@
-# Suite
-
 <style>
   *,
   *::before,
@@ -7,3 +5,5 @@
     transition: none !important;
   }
 </style>
+
+# Suite

tests/visual/suites/layout/nav/_overflow/mkdocs.yml

@@ -23,9 +23,9 @@ site_name: Pneumonoultramicroscopicsilicovolcanoconiosis
 pages:
   - Pneumonoultramicroscopicsilicovolcanoconiosis: index.md
   - Supercalifragilisticexpialidocious:
-    - Pseudopseudohypoparathyroidism: default.md
+    - Pseudopseudohypoparathyroidism: nested.md
-    - Floccinaucinihilipilification: default.md
+    - Floccinaucinihilipilification: nested.md
-    - Antidisestablishmentarianism: default.md
+    - Antidisestablishmentarianism: nested.md
 
 # Reset webfonts because of flaky tests
 extra:

tests/visual/suites/layout/nav/docs/default.md

@@ -1,5 +1,3 @@
-# Suite
-
 <style>
   *,
   *::before,
@@ -7,3 +5,5 @@
     transition: none !important;
   }
 </style>
+
+# Suite

tests/visual/suites/layout/nav/docs/index.md

@@ -1,9 +1,17 @@
-# Suite
-
 <style>
   *,
   *::before,
   *::after {
     transition: none !important;
   }
+
+  /* Hack: ensure table of contents is hidden, as browser caching sometimes
+     makes it visible by accident, though it was never activated */
+  .md-nav--secondary {
+    display: none !important;
+  }
 </style>
+
+# Suite
+
+## Default

tests/visual/suites/layout/nav/docs/nested.md

@@ -0,0 +1,9 @@
+<style>
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+  }
+</style>
+
+# Suite

tests/visual/suites/layout/nav/mkdocs.yml

@@ -25,9 +25,9 @@ pages:
   - Consectetur adipiscing elit: default.md
   - Etiam condimentum lacinia urna id vestibulum: default.md
   - A dapibus turpis iaculis at:
-    - Donec tortor sem: default.md
+    - Donec tortor sem: nested.md
-    - Scelerisque ut congue id: default.md
+    - Scelerisque ut congue id: nested.md
-    - Pretium ac risus: default.md
+    - Pretium ac risus: nested.md
   - Maecenas tincidunt nulla dui: default.md
 
 # Reset webfonts because of flaky tests

tests/visual/suites/layout/nav/suite.js

@@ -47,16 +47,23 @@ spec.register(__dirname, {
     "capture": ".md-nav--primary",
     "break": "+@tablet-landscape",
     "states": [
-      { "name": "", "wait": 250, "exec": open }
+      { "name": "", "exec": open }
     ],
     "suite": {
 
+      /* Expanded nested navigation */
+      "~nested": {
+        "url": "/nested",
+        "capture": ".md-nav--primary",
+        "break": "@screen"
+      },
+
       /* List title */
       "md-nav__title": {
         "capture": ".md-nav--primary .md-nav__title",
         "break": "+@tablet-landscape",
         "states": [
-          { "name": "", "wait": 250, "exec": open }
+          { "name": "", "exec": open }
         ],
         "suite": {
 
@@ -66,7 +73,7 @@ spec.register(__dirname, {
             "capture": ".md-nav--primary .md-nav__title",
             "break": "+@tablet-landscape",
             "states": [
-              { "name": "", "wait": 250, "exec": open }
+              { "name": "", "exec": open }
             ]
           }
         }
@@ -77,21 +84,8 @@ spec.register(__dirname, {
         "capture": ".md-nav--primary .md-nav__item",
         "break": "+@tablet-landscape",
         "states": [
-          { "name": "", "wait": 250, "exec": open }
+          { "name": "", "exec": open }
-        ],
+        ]
-        "suite": {
-
-          /* Last list item */
-          ":last-child": {
-            "capture":
-              ".md-nav--primary > .md-nav__list > " +
-              ".md-nav__item:last-child",
-            "break": "+@tablet-landscape",
-            "states": [
-              { "name": "", "wait": 250, "exec": open }
-            ]
-          }
-        }
       },
 
       /* Item contains a nested list */
@@ -99,7 +93,7 @@ spec.register(__dirname, {
         "capture": ".md-nav--primary .md-nav__item--nested",
         "break": "+@tablet-landscape",
         "states": [
-          { "name": "", "wait": 250, "exec": open }
+          { "name": "", "exec": open }
         ],
         "suite": {
 
@@ -110,10 +104,44 @@ spec.register(__dirname, {
               ".md-nav__link",
             "break": "+@tablet-landscape",
             "states": [
-              { "name": "",       "wait": 250, "exec": open },
+              { "name": "",       "exec": open },
-              { "name": ":focus", "wait": 250, "exec": open },
+              { "name": ":focus", "exec": open },
-              { "name": ":hover", "wait": 250, "exec": open }
+              { "name": ":hover", "exec": open }
             ]
+          },
+
+          /* Second-level navigation */
+          "md-nav": {
+            "url": "/nested",
+            "capture": ".md-nav--primary .md-nav",
+            "break": "+@tablet-landscape",
+            "states": [
+              { "name": "", "exec": open }
+            ],
+            "suite": {
+
+              /* List title */
+              "md-nav__title": {
+                "capture": ".md-nav--primary .md-nav .md-nav__title",
+                "break": "@tablet-landscape",
+                "states": [
+                  { "name": "", "exec": open }
+                ],
+                "suite": {
+
+                  /* Long list title with ellipsis */
+                  "~overflow": {
+                    "dir": "_overflow",
+                    "url": "/nested",
+                    "capture": ".md-nav--primary .md-nav .md-nav__title",
+                    "break": "@tablet-landscape",
+                    "states": [
+                      { "name": "", "exec": open }
+                    ]
+                  }
+                }
+              }
+            }
           }
         }
       },
@@ -123,21 +151,36 @@ spec.register(__dirname, {
         "capture": ".md-nav--primary .md-nav__item:nth-child(2) .md-nav__link",
         "break": "+@tablet-landscape",
         "states": [
-          { "name": "",       "wait": 250, "exec": open },
+          { "name": "",       "exec": open },
-          { "name": ":focus", "wait": 250, "exec": open },
+          { "name": ":focus", "exec": open },
-          { "name": ":hover", "wait": 250, "exec": open }
+          { "name": ":hover", "exec": open }
         ]
       },
 
       /* Active link */
       "md-nav__link--active": {
-        "capture": ".md-nav--primary .md-nav__item .md-nav__link--active",
+        "capture": ".md-nav--primary .md-nav__item a.md-nav__link--active",
         "break": "+@tablet-landscape",
         "states": [
-          { "name": "",       "wait": 250, "exec": open },
+          { "name": "",       "exec": open },
-          { "name": ":focus", "wait": 250, "exec": open },
+          { "name": ":focus", "exec": open },
-          { "name": ":hover", "wait": 250, "exec": open }
+          { "name": ":hover", "exec": open }
-        ]
+        ],
+        "suite": {
+
+          /* Active link with link to table of contents */
+          "~toc": {
+            "capture":
+              ".md-nav--primary .md-nav__item " +
+              "label.md-nav__link--active",
+            "break": "@tablet-portrait",
+            "states": [
+              { "name": "",       "exec": open },
+              { "name": ":focus", "exec": open },
+              { "name": ":hover", "exec": open }
+            ]
+          }
+        }
       }
     }
   }