Unit tests

.gitignore

@@ -2,6 +2,7 @@
 .eslintcache
 node_modules/
 dist/
+/test/unit/coverage/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.travis.yml

@@ -8,8 +8,6 @@ env:
 install:
   # Use npm 5.7.x since it has introduced `npm ci`
   - if [[ `npm -v` != 5.7* ]]; then npm install -g npm@'>=5.7.1'; fi
-  # Take care of styleguidist from a fork for now (will be replaced soonish)
-  - npm install git+https://git@github.com/viljamis/vue-styleguidist.git
   - npm ci
 before_script:
   # Install Webpack version
@@ -19,14 +17,19 @@ branches:
     - /^v\d+\.\d+\.\d+$/
 stages:
   - lint
-  - integration
+  - test
+  - build
 jobs:
   include:
     - stage: lint
       script:
         # Run linter
         - npm run lint
-    - stage: integration
+    - stage: test
+      script:
+        # Run tests
+        - npm run test
+    - stage: build
       script:
         # Build all
         - npm run build:docs

docs/components/status/Components.vue

@@ -31,7 +31,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="component in components" :key="component.name" class="component">
+        <tr v-for="(component, index) in components" :key="index" class="component">
           <td v-if="component.name">
             <code class="name">
               {{component.name}}

docs/components/tokens/All.vue

@@ -9,7 +9,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="token in tokens" :key="token" class="token">
+        <tr v-for="(token, index) in tokens" :key="index" class="token">
           <td v-if="token.name">
             <code class="name">
               ${{token.name.replace(/_/g, "-")}}

docs/components/tokens/Color.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="colors">
     <div
-      v-for="prop in tokens"
-      :key="prop"
+      v-for="(prop, index) in tokens"
+      :key="index"
       class="color"
       :class="prop.category"
       v-if="prop.type === 'color'">

docs/components/tokens/FontSize.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="font-sizes">
     <div
-      v-for="prop in tokens"
-      :key="prop"
+      v-for="(prop, index) in tokens"
+      :key="index"
       class="font"
       v-if="prop.category === 'font-size'"
       :style="{ fontSize: prop.value }">

docs/components/tokens/Spacing.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="spacing">
     <div
-      v-for="prop in tokens"
-      :key="prop"
+      v-for="(prop, index) in tokens"
+      :key="index"
       class="space"
       v-if="prop.category === 'space'"
       :style="{ lineHeight: prop.value, height: prop.value }">

docs/utils/activeNav.js

@@ -13,38 +13,47 @@ export default {
     },
   },
   mounted() {
-    const currentURL = window.location.pathname + window.location.hash.split("?")[0].replace("%20", " ")
+    let currentURL = ""
     const sidebar = document.querySelector("div[class^='rsg--sidebar']")
-    const navLinks = sidebar.querySelectorAll("div[class^='rsg--root'] > ul > li > a")
-    const subNavLinks = sidebar.querySelectorAll("div[class^='rsg--root'] > ul > li ul a")
-    const currentPage = sidebar.querySelector("a[href='" + currentURL + "']")
-    const search = sidebar.querySelector("div[class^='rsg--search'] input")
-    const self = this
 
-    if (currentURL && currentPage) {
-      currentPage.parentNode.classList.add("vueds-active")
+    if (process && process.env && process.env.NODE_ENV === "test") {
+      currentURL = "/example/"
+    } else {
+      currentURL = window.location.pathname + window.location.hash.split("?")[0].replace("%20", " ")
     }
 
-    if (search && !search.classList.contains("set")) {
-      search.setAttribute("placeholder", "Type to filter")
-    }
+    if (sidebar) {
+      const navLinks = sidebar.querySelectorAll("div[class^='rsg--root'] > ul > li > a")
+      const subNavLinks = sidebar.querySelectorAll("div[class^='rsg--root'] > ul > li ul a")
+      const currentPage = sidebar.querySelector("a[href='" + currentURL + "']")
+      const search = sidebar.querySelector("div[class^='rsg--search'] input")
+      const self = this
+
+      if (currentURL && currentPage) {
+        currentPage.parentNode.classList.add("vueds-active")
+      }
+
+      if (search && !search.classList.contains("set")) {
+        search.setAttribute("placeholder", "Type to filter")
+      }
 
-    if (navLinks) {
-      navLinks.forEach(function(element) {
-        element.addEventListener("click", function() {
-          self.clearActiveLinks()
-          this.parentNode.classList.add("vueds-active")
+      if (navLinks) {
+        navLinks.forEach(function(element) {
+          element.addEventListener("click", function() {
+            self.clearActiveLinks()
+            this.parentNode.classList.add("vueds-active")
+          })
         })
-      })
-    }
+      }
 
-    if (subNavLinks) {
-      subNavLinks.forEach(function(element) {
-        element.addEventListener("click", function() {
-          self.clearActiveLinks()
-          this.parentNode.parentNode.parentNode.classList.add("vueds-active")
+      if (subNavLinks) {
+        subNavLinks.forEach(function(element) {
+          element.addEventListener("click", function() {
+            self.clearActiveLinks()
+            this.parentNode.parentNode.parentNode.classList.add("vueds-active")
+          })
         })
-      })
+      }
     }
   },
 }