diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67902b95..78e9c299 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,22 @@
 ## [vue](./README.md) version `changelog`
 
+##### `v2.0.0-rc.0`
+- test(unit): add some views testing 
+- test(e2e): add testing for mobile `sidebar-show` 
+- refactor: card headers margins
+- chore: update `vue` to `2.5.17`
+- chore: update `vue-template-compiler` to `2.5.17`
+- chore: update `@vue/cli-plugin-babel` to `3.0.1`
+- chore: update `@vue/cli-plugin-e2e-nightwatch` to `3.0.1`
+- chore: update `@vue/cli-plugin-eslint` to `3.0.1`
+- chore: update `@vue/cli-plugin-unit-jest` to `3.0.1`
+- chore: update `@vue/cli-service` to `3.0.1`
+- chore: update `@vue/test-utils` to `1.0.0-beta.24`
+- chore: update `babel-jest` to `23.4.2`
+- chore: update `node-sass` to `4.9.3`
+- chore: update `sass-loader` to `7.1.0`
+- chore: update `vue-chartjs` to `3.4.0`
+
 ##### `v2.0.0-beta.13`
 - fix(jest.config.js): solves - _SecurityError: localStorage is not available for opaque origins_
 - chore: update `bootstrap` to `4.1.3`
diff --git a/package.json b/package.json
index 1663f6c2..2326742b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-rc.0",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -22,28 +22,28 @@
     "bootstrap-vue": "^2.0.0-rc.11",
     "chart.js": "^2.7.2",
     "core-js": "^2.5.7",
-    "css-vars-ponyfill": "^1.8.0",
+    "css-vars-ponyfill": "^1.9.0",
     "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
     "perfect-scrollbar": "^1.4.0",
     "simple-line-icons": "^2.4.1",
-    "vue": "^2.5.16",
-    "vue-chartjs": "^3.3.2",
+    "vue": "^2.5.17",
+    "vue-chartjs": "^3.4.0",
     "vue-perfect-scrollbar": "^0.1.0",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-rc.7",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.0.0-rc.7",
-    "@vue/cli-plugin-eslint": "^3.0.0-rc.7",
-    "@vue/cli-plugin-unit-jest": "^3.0.0-rc.7",
-    "@vue/cli-service": "^3.0.0-rc.7",
-    "@vue/test-utils": "^1.0.0-beta.21",
+    "@vue/cli-plugin-babel": "^3.0.1",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.0.1",
+    "@vue/cli-plugin-eslint": "^3.0.1",
+    "@vue/cli-plugin-unit-jest": "^3.0.1",
+    "@vue/cli-service": "^3.0.1",
+    "@vue/test-utils": "^1.0.0-beta.24",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.4.0",
-    "node-sass": "^4.9.2",
-    "sass-loader": "^7.0.3",
-    "vue-template-compiler": "^2.5.16"
+    "babel-jest": "^23.4.2",
+    "node-sass": "^4.9.3",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.5.17"
   },
   "browserslist": [
     "> 1%",
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index da654df3..1747e542 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Breadcrumb</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index e7907bb9..202c0dff 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Carousel</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 7f716f34..277d2959 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Collapse</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -33,7 +33,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-b-toggle</code> directive</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
             </div>
             <div>
               <!-- Using modifiers -->
@@ -58,7 +58,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>visibility</code></small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
             </div>
             <div>
               <b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
@@ -75,7 +75,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-model</code></small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
             </div>
             <div>
               <b-btn @click="showCollapse = !showCollapse"
@@ -99,7 +99,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>multiple elements</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
             </div>
             <div>
               <!-- Single button triggers two b-collapse components -->
@@ -124,7 +124,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small><code>accordion</code> support</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
             </div>
             <div role="tablist">
               <b-card no-body class="mb-1">
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index 1fcc8dbf..8fe005b4 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -4,7 +4,7 @@
       <b-col sm="6">
         <b-card>
           <div slot="header">
-            <strong>Credit Card</strong> <small>Form</small>
+            <strong>Credit Card </strong> <small>Form</small>
           </div>
           <b-row>
             <b-col sm="12">
@@ -53,7 +53,7 @@
       <b-col sm="6">
         <b-card>
           <div slot="header">
-            <strong>Company</strong> <small>Form</small>
+            <strong>Company </strong><small>Form</small>
           </div>
           <b-form-group>
             <label for="company">Company</label>
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index 4b87d0c8..b7e041f3 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -27,7 +27,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>with slots</small>
             </div>
             <div>
@@ -57,7 +57,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>variants</small>
             </div>
             <div>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 3e6a96a1..e8a037f5 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap list group</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -28,7 +28,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>active items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
             </div>
             <b-list-group>
               <b-list-group-item>Cras justo odio</b-list-group-item>
@@ -46,7 +46,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>disabled items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
             </div>
             <b-list-group>
               <b-list-group-item disabled>Cras justo odio</b-list-group-item>
@@ -62,7 +62,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>actionable items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#some-link">Awesome link</b-list-group-item>
@@ -79,7 +79,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>buttons</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
             </div>
             <b-list-group>
               <b-list-group-item button>Button item</b-list-group-item>
@@ -94,7 +94,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>with badges</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
             </div>
             <b-list-group>
               <b-list-group-item class="d-flex justify-content-between align-items-center">
@@ -119,7 +119,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
             </div>
             <b-list-group>
               <b-list-group-item>This is a default list group item</b-list-group-item>
@@ -139,7 +139,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants active</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#">This is a default list group item</b-list-group-item>
@@ -161,7 +161,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>inside cards</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
             </div>
             <b-card-group deck>
               <b-card header="<b>Card with list group</b>">
@@ -200,7 +200,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>custom content</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#" active class="flex-column align-items-start">
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 71d06712..83e629c2 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navbar</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -57,7 +57,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>brand</small>
         </div>
         <div>
@@ -74,7 +74,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>text</small>
         </div>
         <div>
@@ -93,7 +93,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>dropdown</small>
         </div>
         <div>
@@ -123,7 +123,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>form</small>
         </div>
         <div>
@@ -139,7 +139,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>input group</small>
         </div>
         <div>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 256f10d5..3d902c9f 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -25,7 +25,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>tab style</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
         </div>
         <div>
           <b-nav tabs>
@@ -40,7 +40,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>pill style</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
         </div>
         <div>
           <b-nav pills>
@@ -55,7 +55,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>fill tabs</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
         </div>
         <div>
           <b-nav fill tabs>
@@ -70,7 +70,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>justified tabs</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
         </div>
         <div>
           <b-nav justified tabs>
@@ -85,7 +85,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>dropdown support</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
         </div>
         <div>
           <b-nav pills>
@@ -104,7 +104,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>vertical variation</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
         </div>
         <div>
           <b-nav vertical class="w-25">
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 11bebdcf..fadafd93 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -37,7 +37,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
           <small>alignment</small>
         </div>
         <div>
@@ -63,7 +63,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
           <small>navigation</small>
         </div>
         <div>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 1706eba0..17db010e 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Popovers</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -35,7 +35,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popovers</strong>
+          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>placement</small>
         </div>
         <div class="my-3">
@@ -59,7 +59,7 @@
               header-tag="header"
               footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popovers</strong>
+          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>via properties or slots</small>
         </div>
         <b-row>
@@ -86,7 +86,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popovers</strong>
+          <i class="fa fa-align-justify"></i><strong> Popovers </strong>
           <small>show</small>
         </div>
         <div class="d-flex flex-column text-md-center">
@@ -106,7 +106,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popover</strong>
+          <i class="fa fa-align-justify"></i><strong> Popover </strong>
           <small>open/close events</small>
         </div>
         <div class="d-flex flex-column text-md-center">
@@ -127,7 +127,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popover</strong>
+          <i class="fa fa-align-justify"></i><strong> Popover </strong>
           <small>enable/disable events</small>
         </div>
         <div class="d-flex flex-column text-md-center">
@@ -148,7 +148,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Popover</strong><small><code>v-b-popover</code>directive</small>
+          <i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
         </div>
         <b-row>
           <b-col md="3" class="py-3 text-center">
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index d95d3cad..a3858341 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Progress</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -26,18 +26,18 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>labels</small>
+          <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
         </div>
         <div>
-          <h5>No label</h5>
+          <h6>No label</h6>
           <b-progress :value="value" :max="max2" class="mb-3"></b-progress>
-          <h5>Value label</h5>
+          <h6>Value label</h6>
           <b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
-          <h5>Progress label</h5>
+          <h6>Progress label</h6>
           <b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
-          <h5>Value label with precision</h5>
+          <h6>Value label with precision</h6>
           <b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
-          <h5>Progress label with precision</h5>
+          <h6>Progress label with precision</h6>
           <b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
         </div>
       </b-card>
@@ -45,12 +45,12 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>width</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
         </div>
         <div>
-          <h5>Default width</h5>
+          <h6>Default width</h6>
           <b-progress :value="value3" class="mb-3"></b-progress>
-          <h5>Custom widths</h5>
+          <h6>Custom widths</h6>
           <b-progress :value="value3" class="w-75 mb-2"></b-progress>
           <b-progress :value="value3" class="w-50 mb-2"></b-progress>
           <b-progress :value="value3" class="w-25"></b-progress>
@@ -60,12 +60,12 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>height</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
         </div>
         <div>
-          <h5>Default height</h5>
+          <h6>Default height</h6>
           <b-progress :value="value3" show-progress class="mb-3"></b-progress>
-          <h5>Custom heights</h5>
+          <h6>Custom heights</h6>
           <b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
           <b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
           <b-progress height="2px" :value="value3"></b-progress>
@@ -75,7 +75,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>variants</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
         </div>
         <div>
           <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
@@ -93,7 +93,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>striped</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
         </div>
         <div>
           <b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
@@ -109,7 +109,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>animated</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
         </div>
         <div>
           <b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
@@ -125,7 +125,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>multiple bars</small>
+          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
         </div>
         <div>
           <b-progress :max="max3" class="mb-3">
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 7eed3345..cf3ff84d 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Tooltips</strong><small><code>v-b-tooltip</code>directive</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Tooltips </strong><small><code>v-b-tooltip</code> directive</small>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -32,7 +32,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>b-tooltip</code>component</small>
+          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>b-tooltip</code> component</small>
         </div>
         <b-row>
           <b-col md="6" class="py-4 text-center">
@@ -55,7 +55,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>show</code>prop</small>
+          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
         </div>
         <div class="text-center">
           <b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
@@ -71,14 +71,14 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>open close</code>events</small>
+          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
         </div>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
             <b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
           </div>
           <div class="p-2">
-            <b-btn class="px-1" @click="onOpen">Open</b-btn>
+            <b-btn class="px-1 mr-1" @click="onOpen">Open</b-btn>
             <b-btn class="px-1" @click="onClose">Close</b-btn>
           </div>
 
@@ -91,14 +91,14 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>enable disable</code>events</small>
+          <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
         </div>
         <div class="d-flex flex-column text-md-center">
           <div class="p-2">
             <b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
           </div>
           <div class="p-2">
-            <b-btn @click="disabled = !disabled">
+            <b-btn @click="disabled = !disabled" class="mr-1">
               {{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
             </b-btn>
 
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index 84320ad1..65fc114b 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -4,9 +4,11 @@
       <b-col cols="12">
         <b-card>
           <div slot="header">
-            <strong>Brand Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+            <strong>Brand Button</strong>
           </div>
-          <h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
+          <small>Usage </small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+          <hr/>
+          <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
           <p>
             <b-button size="sm" class="btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
             <b-button size="sm" class="btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
@@ -62,7 +64,7 @@
             <b-button variant="foursquare" class="btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
             <b-button variant="vimeo" class="btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
           </p>
-          <h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
             <b-button size="lg" variant="facebook" class="btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
             <b-button size="lg" variant="twitter" class="btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
@@ -95,9 +97,11 @@
       <b-col cols="12">
         <b-card>
           <div slot="header">
-            <strong>Brand Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+            <strong>Brand Button </strong> <small>Icons only</small>
           </div>
-          <h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
+          <small>Usage </small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+          <hr/>
+          <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
           <p>
             <b-button size="sm" variant="facebook icon" class="btn-brand"><i class="fa fa-facebook"></i></b-button>
             <b-button size="sm" variant="twitter icon" class="btn-brand"><i class="fa fa-twitter"></i></b-button>
@@ -153,7 +157,7 @@
             <b-button variant="foursquare icon" class="btn-brand"><i class="fa fa-foursquare"></i></b-button>
             <b-button variant="vimeo icon" class="btn-brand"><i class="fa fa-vimeo"></i></b-button>
           </p>
-          <h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
             <b-button size="lg" variant="facebook icon" class="btn-brand"><i class="fa fa-facebook"></i></b-button>
             <b-button size="lg" variant="twitter icon" class="btn-brand"><i class="fa fa-twitter"></i></b-button>
@@ -187,9 +191,11 @@
       <b-col cols="12">
         <b-card>
           <div slot="header">
-            <strong>Brand Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+            <strong>Brand Button </strong> <small>Text only</small>
           </div>
-          <h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
+          <small>Usage </small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
+          <hr/>
+          <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
           <p>
             <b-button size="sm" variant="facebook text" class="btn-brand"><span>Facebook</span></b-button>
             <b-button size="sm" variant="twitter text" class="btn-brand"><span>Twitter</span></b-button>
@@ -245,7 +251,7 @@
             <b-button variant="foursquare text" class="btn-brand"><span>Forsquare</span></b-button>
             <b-button variant="vimeo text" class="btn-brand"><span>Vimeo</span></b-button>
           </p>
-          <h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
+          <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
           <p>
             <b-button size="lg" variant="facebook text" class="btn-brand"><span>Facebook</span></b-button>
             <b-button size="lg" variant="twitter text" class="btn-brand"><span>Twitter</span></b-button>
@@ -281,7 +287,7 @@
 
 <script>
 export default {
-  name: 'social-buttons'
+  name: 'brand-buttons'
 }
 </script>
 
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 493a764b..ffff12cb 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap button group</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -39,7 +39,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Button group</strong> sizing
+              <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
             </div>
             <div>
               <b-button-group>
@@ -67,7 +67,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Button group</strong> dropdown support
+              <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
             </div>
             <div>
               <b-button-group>
@@ -95,7 +95,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Button group</strong> vertical variation
+              <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
             </div>
             <div>
               <b-button-group vertical>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index dfdf1122..b00ee89b 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Dropdown</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -54,7 +54,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>positioning</small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
             </div>
             <div>
               <b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
@@ -98,7 +98,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>hidden caret</small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
             </div>
             <div>
               <b-dropdown variant="link" size="lg" no-caret>
@@ -118,7 +118,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>sizing</small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
             </div>
             <div>
               <b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2">
@@ -152,7 +152,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>headers and accessibility</small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
             </div>
             <div>
               <b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
@@ -177,7 +177,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small><code>variant</code></small>
+              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
             </div>
             <b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0">
               <b-dropdown-item>First Action</b-dropdown-item>
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index a630809e..b2b34c2f 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -686,3 +686,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .btn.disabled {
+    cursor: auto;
+  }
+</style>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index c33bc278..c12872b1 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Alert</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 9ccb4d96..2f42b188 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Badge</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index 9882cbad..4bab3dce 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -80,6 +80,24 @@ module.exports = {
         this.assert.cssClassNotPresent('/html/body', 'brand-minimized')
       })
 
+    browser
+    .resizeWindow(800, 600)
+    .pause(500)
+
+    browser
+    .pause(500)
+    .click('/html/body/div/header/button[1]', function (response) {
+      console.log('response', typeof response)
+      this.assert.cssClassPresent('/html/body', 'sidebar-show')
+    })
+
+    browser
+    .pause(500)
+    .click('/html/body/div/div/div/nav/section/ul/li[1]/div/a', function (response) {
+      console.log('response', typeof response)
+      this.assert.cssClassNotPresent('/html/body', 'sidebar-show')
+    })
+
     browser
       .pause(5000)
       .end()
diff --git a/tests/unit/Alerts.spec.js b/tests/unit/Alerts.spec.js
new file mode 100644
index 00000000..ad09ce0b
--- /dev/null
+++ b/tests/unit/Alerts.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Alerts from '@/views/notifications/Alerts'
+
+Vue.use(BootstrapVue)
+
+describe('Alerts.vue', () => {
+  it('has a name', () => {
+    expect(Alerts.name).toMatch('alerts')
+  })
+  it('has a created hook', () => {
+    expect(typeof Alerts.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Alerts.data).toMatch('function')
+    const defaultData = Alerts.data()
+    expect(defaultData.showDismissibleAlert).toBe(false)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Alerts)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Alerts', () => {
+    const wrapper = shallowMount(Alerts)
+    expect(wrapper.is(Alerts)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Alerts)
+    expect(wrapper.find('header.card-header > div').text()).toMatch('Bootstrap Alert docs')
+  })
+})
diff --git a/tests/unit/App.spec.js b/tests/unit/App.spec.js
new file mode 100644
index 00000000..ecb8691f
--- /dev/null
+++ b/tests/unit/App.spec.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+import App from '@/App'
+
+Vue.use(BootstrapVue)
+
+describe('App.vue', () => {
+  it('has a name', () => {
+    expect(App.name).toMatch('app')
+  })
+})
diff --git a/tests/unit/Badges.spec.js b/tests/unit/Badges.spec.js
new file mode 100644
index 00000000..b0efb25e
--- /dev/null
+++ b/tests/unit/Badges.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Badges from '@/views/notifications/Badges'
+
+Vue.use(BootstrapVue)
+
+describe('Badges.vue', () => {
+  it('has a name', () => {
+    expect(Badges.name).toMatch('badges')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Badges)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Badges', () => {
+    const wrapper = shallowMount(Badges)
+    expect(wrapper.is(Badges)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Badges)
+    expect(wrapper.find('header.card-header > div').text()).toMatch('Bootstrap Badge docs')
+  })
+})
diff --git a/tests/unit/BrandButtons.spec.js b/tests/unit/BrandButtons.spec.js
new file mode 100644
index 00000000..b4b8b002
--- /dev/null
+++ b/tests/unit/BrandButtons.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import BrandButtons from '@/views/buttons/BrandButtons'
+
+Vue.use(BootstrapVue)
+
+describe('BrandButtons.vue', () => {
+  it('has a name', () => {
+    expect(BrandButtons.name).toMatch('brand-buttons')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(BrandButtons)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is BrandButtons', () => {
+    const wrapper = shallowMount(BrandButtons)
+    expect(wrapper.is(BrandButtons)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(BrandButtons)
+    expect(wrapper.find('div.card-header > div > strong').text()).toMatch('Brand Button')
+  })
+})
diff --git a/tests/unit/Breadcrumbs.spec.js b/tests/unit/Breadcrumbs.spec.js
new file mode 100644
index 00000000..9530498b
--- /dev/null
+++ b/tests/unit/Breadcrumbs.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Breadcrumbs from '@/views/base/Breadcrumbs'
+
+Vue.use(BootstrapVue)
+
+describe('Breadcrumbs.vue', () => {
+  it('has a name', () => {
+    expect(Breadcrumbs.name).toMatch('breadcrumbs')
+  })
+  it('has a created hook', () => {
+    expect(typeof Breadcrumbs.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Breadcrumbs.data).toMatch('function')
+    const defaultData = Breadcrumbs.data()
+    expect(typeof defaultData.items).toMatch('object')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Breadcrumbs)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Breadcrumbs', () => {
+    const wrapper = shallowMount(Breadcrumbs)
+    expect(wrapper.is(Breadcrumbs)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Breadcrumbs)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Breadcrumb')
+  })
+})
diff --git a/tests/unit/ButtonDropdowns.spec.js b/tests/unit/ButtonDropdowns.spec.js
new file mode 100644
index 00000000..53b802ce
--- /dev/null
+++ b/tests/unit/ButtonDropdowns.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Dropdowns from '@/views/buttons/Dropdowns'
+
+Vue.use(BootstrapVue)
+
+describe('Dropdowns.vue', () => {
+  it('has a name', () => {
+    expect(Dropdowns.name).toMatch('dropdowns')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Dropdowns)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Dropdowns', () => {
+    const wrapper = shallowMount(Dropdowns)
+    expect(wrapper.is(Dropdowns)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Dropdowns)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Dropdown')
+  })
+})
diff --git a/tests/unit/ButtonGroups.spec.js b/tests/unit/ButtonGroups.spec.js
new file mode 100644
index 00000000..6f6ad3b1
--- /dev/null
+++ b/tests/unit/ButtonGroups.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import ButtonGroups from '@/views/buttons/ButtonGroups'
+
+Vue.use(BootstrapVue)
+
+describe('ButtonGroups.vue', () => {
+  it('has a name', () => {
+    expect(ButtonGroups.name).toMatch('button-groups')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(ButtonGroups)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is ButtonGroups', () => {
+    const wrapper = shallowMount(ButtonGroups)
+    expect(wrapper.is(ButtonGroups)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(ButtonGroups)
+    expect(wrapper.find('header.card-header').text()).toMatch('Bootstrap button group')
+  })
+})
diff --git a/tests/unit/Cards.spec.js b/tests/unit/Cards.spec.js
new file mode 100644
index 00000000..d8513f10
--- /dev/null
+++ b/tests/unit/Cards.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Cards from '@/views/base/Cards'
+
+Vue.use(BootstrapVue)
+
+describe('Cards.vue', () => {
+  it('has a name', () => {
+    expect(Cards.name).toMatch('cards')
+  })
+  it('has a created hook', () => {
+    expect(typeof Cards.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Cards.data).toMatch('function')
+    const defaultData = Cards.data()
+    expect(defaultData.show).toBe(true)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Cards)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Cards', () => {
+    const wrapper = shallowMount(Cards)
+    expect(wrapper.is(Cards)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Cards)
+    expect(wrapper.find('div.card-header > div').text()).toMatch('Card title')
+  })
+})
diff --git a/tests/unit/Carousels.spec.js b/tests/unit/Carousels.spec.js
new file mode 100644
index 00000000..1c717084
--- /dev/null
+++ b/tests/unit/Carousels.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Carousels from '@/views/base/Carousels'
+
+Vue.use(BootstrapVue)
+
+describe('Carousels.vue', () => {
+  it('has a name', () => {
+    expect(Carousels.name).toMatch('carousels')
+  })
+  it('has a created hook', () => {
+    expect(typeof Carousels.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Carousels.data).toMatch('function')
+    const defaultData = Carousels.data()
+    expect(defaultData.slide).toBe(0)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Carousels)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Carousels', () => {
+    const wrapper = shallowMount(Carousels)
+    expect(wrapper.is(Carousels)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Carousels)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Carousel')
+  })
+})
diff --git a/tests/unit/Charts.spec.js b/tests/unit/Charts.spec.js
new file mode 100644
index 00000000..33d63cf9
--- /dev/null
+++ b/tests/unit/Charts.spec.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Charts from '@/views/Charts'
+
+Vue.use(BootstrapVue)
+
+describe('Charts.vue', () => {
+  it('has a name', () => {
+    expect(Charts.name).toMatch('charts')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Charts)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Charts', () => {
+    const wrapper = shallowMount(Charts)
+    expect(wrapper.is(Charts)).toBe(true)
+  })
+})
diff --git a/tests/unit/Collapses.spec.js b/tests/unit/Collapses.spec.js
new file mode 100644
index 00000000..628898eb
--- /dev/null
+++ b/tests/unit/Collapses.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Collapses from '@/views/base/Collapses'
+
+Vue.use(BootstrapVue)
+
+describe('Collapses.vue', () => {
+  it('has a name', () => {
+    expect(Collapses.name).toMatch('collapses')
+  })
+  it('has a created hook', () => {
+    expect(typeof Collapses.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Collapses.data).toMatch('function')
+    const defaultData = Collapses.data()
+    expect(defaultData.showCollapse).toBe(true)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Collapses)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Collapses', () => {
+    const wrapper = shallowMount(Collapses)
+    expect(wrapper.is(Collapses)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Collapses)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Collapse')
+  })
+})
diff --git a/tests/unit/Colors.spec.js b/tests/unit/Colors.spec.js
new file mode 100644
index 00000000..92abb666
--- /dev/null
+++ b/tests/unit/Colors.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Colors from '@/views/theme/Colors'
+
+Vue.use(BootstrapVue)
+
+describe('Colors.vue', () => {
+  it('has a name', () => {
+    expect(Colors.name).toMatch('colors')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Colors)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Colors', () => {
+    const wrapper = shallowMount(Colors)
+    expect(wrapper.is(Colors)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Colors)
+    expect(wrapper.find('header.card-header > div').text()).toMatch('Theme colors')
+  })
+})
diff --git a/tests/unit/CoreUIIcons.spec.js b/tests/unit/CoreUIIcons.spec.js
new file mode 100644
index 00000000..42a8f747
--- /dev/null
+++ b/tests/unit/CoreUIIcons.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import CoreUIIcons from '@/views/icons/CoreUIIcons'
+
+Vue.use(BootstrapVue)
+
+describe('CoreUIIcons.vue', () => {
+  it('has a name', () => {
+    expect(CoreUIIcons.name).toMatch('CoreUIIcons')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(CoreUIIcons)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is CoreUIIcons', () => {
+    const wrapper = shallowMount(CoreUIIcons)
+    expect(wrapper.is(CoreUIIcons)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(CoreUIIcons)
+    expect(wrapper.find('div.card-header').text()).toMatch('CoreUI Icons New')
+  })
+})
diff --git a/tests/unit/Dashboard.spec.js b/tests/unit/Dashboard.spec.js
index 78fc09ed..a89b7e3f 100644
--- a/tests/unit/Dashboard.spec.js
+++ b/tests/unit/Dashboard.spec.js
@@ -6,6 +6,9 @@ import Dashboard from '@/views/Dashboard'
 Vue.use(BootstrapVue)
 
 describe('Dashboard.vue', () => {
+  it('has a name', () => {
+    expect(Dashboard.name).toMatch('dashboard')
+  })
   it('has a created hook', () => {
     expect(typeof Dashboard.data).toMatch('function')
   })
@@ -22,8 +25,8 @@ describe('Dashboard.vue', () => {
     const wrapper = shallowMount(Dashboard)
     expect(wrapper.is(Dashboard)).toBe(true)
   })
-  // it('should render correct content', () => {
-  //   const wrapper = shallowMount(Dashboard)
-  //   expect(wrapper.find('h4 > #traffic').text()).toMatch('Traffic')
-  // })
+  it('should render correct content', () => {
+    const wrapper = shallowMount(Dashboard)
+    expect(wrapper.find('#traffic').text()).toMatch('Traffic')
+  })
 })
diff --git a/tests/unit/DefaultAside.spec.js b/tests/unit/DefaultAside.spec.js
new file mode 100644
index 00000000..52f58b11
--- /dev/null
+++ b/tests/unit/DefaultAside.spec.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+import DefaultAside from '@/containers/DefaultAside'
+
+Vue.use(BootstrapVue)
+
+describe('DefaultAside.vue', () => {
+  it('has a name', () => {
+    expect(DefaultAside.name).toMatch('DefaultAside')
+  })
+})
diff --git a/tests/unit/DefaultContainer.spec.js b/tests/unit/DefaultContainer.spec.js
new file mode 100644
index 00000000..4b0382cf
--- /dev/null
+++ b/tests/unit/DefaultContainer.spec.js
@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+import DefaultContainer from '@/containers/DefaultContainer'
+
+Vue.use(BootstrapVue)
+
+describe('DefaultContainer.vue', () => {
+  it('has a name', () => {
+    expect(DefaultContainer.name).toMatch('full')
+  })
+  it('has a created hook', () => {
+    expect(typeof DefaultContainer.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof DefaultContainer.data).toMatch('function')
+    const defaultData = DefaultContainer.data()
+    expect(typeof defaultData.nav).toMatch('object')
+  })
+})
diff --git a/tests/unit/DefaultHeaderDropdownAccnt.spec.js b/tests/unit/DefaultHeaderDropdownAccnt.spec.js
new file mode 100644
index 00000000..647713fd
--- /dev/null
+++ b/tests/unit/DefaultHeaderDropdownAccnt.spec.js
@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+import DefaultHeaderDropdownAccnt from '@/containers/DefaultHeaderDropdownAccnt'
+
+Vue.use(BootstrapVue)
+
+describe('DefaultHeaderDropdownAccnt.vue', () => {
+  it('has a name', () => {
+    expect(DefaultHeaderDropdownAccnt.name).toMatch('DefaultHeaderDropdownAccnt')
+  })
+  it('has a created hook', () => {
+    expect(typeof DefaultHeaderDropdownAccnt.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof DefaultHeaderDropdownAccnt.data).toMatch('function')
+    const defaultData = DefaultHeaderDropdownAccnt.data()
+    expect(defaultData.itemsCount).toBe(42)
+  })
+})
diff --git a/tests/unit/Flags.spec.js b/tests/unit/Flags.spec.js
new file mode 100644
index 00000000..c50042dd
--- /dev/null
+++ b/tests/unit/Flags.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Flags from '@/views/icons/Flags'
+
+Vue.use(BootstrapVue)
+
+describe('Flags.vue', () => {
+  it('has a name', () => {
+    expect(Flags.name).toMatch('flags')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Flags)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Flags', () => {
+    const wrapper = shallowMount(Flags)
+    expect(wrapper.is(Flags)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Flags)
+    expect(wrapper.find('div.card-header').text()).toMatch('Flags')
+  })
+})
diff --git a/tests/unit/FontAwesome.spec.js b/tests/unit/FontAwesome.spec.js
new file mode 100644
index 00000000..35db6839
--- /dev/null
+++ b/tests/unit/FontAwesome.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import FontAwesome from '@/views/icons/FontAwesome'
+
+Vue.use(BootstrapVue)
+
+describe('FontAwesome.vue', () => {
+  it('has a name', () => {
+    expect(FontAwesome.name).toMatch('font-awesome')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(FontAwesome)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is FontAwesome', () => {
+    const wrapper = shallowMount(FontAwesome)
+    expect(wrapper.is(FontAwesome)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(FontAwesome)
+    expect(wrapper.find('div.card-header').text()).toMatch('50 New Icons in 4.7')
+  })
+})
diff --git a/tests/unit/Forms.spec.js b/tests/unit/Forms.spec.js
new file mode 100644
index 00000000..6aa71fe3
--- /dev/null
+++ b/tests/unit/Forms.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Forms from '@/views/base/Forms'
+
+Vue.use(BootstrapVue)
+
+describe('Forms.vue', () => {
+  it('has a name', () => {
+    expect(Forms.name).toMatch('forms')
+  })
+  it('has a created hook', () => {
+    expect(typeof Forms.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Forms.data).toMatch('function')
+    const defaultData = Forms.data()
+    expect(defaultData.show).toBe(true)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Forms)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Forms', () => {
+    const wrapper = shallowMount(Forms)
+    expect(wrapper.is(Forms)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Forms)
+    expect(wrapper.find('div.card-header > div > strong').text()).toMatch('Credit Card')
+  })
+})
diff --git a/tests/unit/Jumbotrons.spec.js b/tests/unit/Jumbotrons.spec.js
new file mode 100644
index 00000000..9fe2613e
--- /dev/null
+++ b/tests/unit/Jumbotrons.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Jumbotrons from '@/views/base/Jumbotrons'
+
+Vue.use(BootstrapVue)
+
+describe('Jumbotrons.vue', () => {
+  it('has a name', () => {
+    expect(Jumbotrons.name).toMatch('jumbotrons')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Jumbotrons)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Jumbotrons', () => {
+    const wrapper = shallowMount(Jumbotrons)
+    expect(wrapper.is(Jumbotrons)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Jumbotrons)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Jumbotron')
+  })
+})
diff --git a/tests/unit/ListGroups.spec.js b/tests/unit/ListGroups.spec.js
new file mode 100644
index 00000000..6363ca57
--- /dev/null
+++ b/tests/unit/ListGroups.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import ListGroups from '@/views/base/ListGroups'
+
+Vue.use(BootstrapVue)
+
+describe('ListGroups.vue', () => {
+  it('has a name', () => {
+    expect(ListGroups.name).toMatch('list-groups')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(ListGroups)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is ListGroups', () => {
+    const wrapper = shallowMount(ListGroups)
+    expect(wrapper.is(ListGroups)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(ListGroups)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap list group')
+  })
+})
diff --git a/tests/unit/Login.spec.js b/tests/unit/Login.spec.js
new file mode 100644
index 00000000..8540fdaa
--- /dev/null
+++ b/tests/unit/Login.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Login from '@/views/Pages/Login'
+
+Vue.use(BootstrapVue)
+
+describe('Login.vue', () => {
+  it('has a name', () => {
+    expect(Login.name).toMatch('Login')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Login)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Login', () => {
+    const wrapper = shallowMount(Login)
+    expect(wrapper.is(Login)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = shallowMount(Login)
+    expect(wrapper.find('h1').text()).toMatch('Login')
+  })
+})
diff --git a/tests/unit/Modals.spec.js b/tests/unit/Modals.spec.js
new file mode 100644
index 00000000..af364c11
--- /dev/null
+++ b/tests/unit/Modals.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Modals from '@/views/notifications/Modals'
+
+Vue.use(BootstrapVue)
+
+describe('Modals.vue', () => {
+  it('has a name', () => {
+    expect(Modals.name).toMatch('modals')
+  })
+  it('has a created hook', () => {
+    expect(typeof Modals.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Modals.data).toMatch('function')
+    const defaultData = Modals.data()
+    expect(defaultData.largeModal).toBe(false)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Modals)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Modals', () => {
+    const wrapper = shallowMount(Modals)
+    expect(wrapper.is(Modals)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Modals)
+    expect(wrapper.find('div.card-header > div').text()).toMatch('Bootstrap Modals')
+  })
+})
diff --git a/tests/unit/Navbars.spec.js b/tests/unit/Navbars.spec.js
new file mode 100644
index 00000000..f9f98b67
--- /dev/null
+++ b/tests/unit/Navbars.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Navbars from '@/views/base/Navbars'
+
+Vue.use(BootstrapVue)
+
+describe('Navbars.vue', () => {
+  it('has a name', () => {
+    expect(Navbars.name).toMatch('navbars')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Navbars)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Navbars', () => {
+    const wrapper = shallowMount(Navbars)
+    expect(wrapper.is(Navbars)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Navbars)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Navbar')
+  })
+})
diff --git a/tests/unit/Navs.spec.js b/tests/unit/Navs.spec.js
new file mode 100644
index 00000000..e04de89b
--- /dev/null
+++ b/tests/unit/Navs.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Navs from '@/views/base/Navs'
+
+Vue.use(BootstrapVue)
+
+describe('Navs.vue', () => {
+  it('has a name', () => {
+    expect(Navs.name).toMatch('navs')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Navs)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Navbars', () => {
+    const wrapper = shallowMount(Navs)
+    expect(wrapper.is(Navs)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Navs)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Navs')
+  })
+})
diff --git a/tests/unit/Page404.spec.js b/tests/unit/Page404.spec.js
new file mode 100644
index 00000000..d135d397
--- /dev/null
+++ b/tests/unit/Page404.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Page404 from '@/views/Pages/Page404'
+
+Vue.use(BootstrapVue)
+
+describe('Page404.vue', () => {
+  it('has a name', () => {
+    expect(Page404.name).toMatch('Page404')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Page404)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Page500', () => {
+    const wrapper = shallowMount(Page404)
+    expect(wrapper.is(Page404)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = shallowMount(Page404)
+    expect(wrapper.find('h1').text()).toMatch('404')
+  })
+})
diff --git a/tests/unit/Page500.spec.js b/tests/unit/Page500.spec.js
new file mode 100644
index 00000000..f4a0717d
--- /dev/null
+++ b/tests/unit/Page500.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Page500 from '@/views/Pages/Page500'
+
+Vue.use(BootstrapVue)
+
+describe('Page500.vue', () => {
+  it('has a name', () => {
+    expect(Page500.name).toMatch('Page500')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Page500)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Page500', () => {
+    const wrapper = shallowMount(Page500)
+    expect(wrapper.is(Page500)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = shallowMount(Page500)
+    expect(wrapper.find('h1').text()).toMatch('500')
+  })
+})
diff --git a/tests/unit/Paginations.spec.js b/tests/unit/Paginations.spec.js
new file mode 100644
index 00000000..bf888d42
--- /dev/null
+++ b/tests/unit/Paginations.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Paginations from '@/views/base/Paginations'
+
+Vue.use(BootstrapVue)
+
+describe('Paginations.vue', () => {
+  it('has a name', () => {
+    expect(Paginations.name).toMatch('paginations')
+  })
+  it('has a created hook', () => {
+    expect(typeof Paginations.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Paginations.data).toMatch('function')
+    const defaultData = Paginations.data()
+    expect(defaultData.currentPage).toBe(3)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Paginations)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Paginations', () => {
+    const wrapper = shallowMount(Paginations)
+    expect(wrapper.is(Paginations)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Paginations)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Pagination')
+  })
+})
diff --git a/tests/unit/Popovers.spec.js b/tests/unit/Popovers.spec.js
new file mode 100644
index 00000000..a7d78edc
--- /dev/null
+++ b/tests/unit/Popovers.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Popovers from '@/views/base/Popovers'
+
+Vue.use(BootstrapVue)
+
+describe('Popovers.vue', () => {
+  it('has a name', () => {
+    expect(Popovers.name).toMatch('popovers')
+  })
+  it('has a created hook', () => {
+    expect(typeof Popovers.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Popovers.data).toMatch('function')
+    const defaultData = Popovers.data()
+    expect(defaultData.show).toBe(false)
+  })
+  it('is Vue instance', () => {
+    const wrapper = mount(Popovers)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Popovers', () => {
+    const wrapper = mount(Popovers)
+    expect(wrapper.is(Popovers)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Popovers)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Popovers')
+  })
+})
diff --git a/tests/unit/ProgressBars.spec.js b/tests/unit/ProgressBars.spec.js
new file mode 100644
index 00000000..f172ecb3
--- /dev/null
+++ b/tests/unit/ProgressBars.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import ProgressBars from '@/views/base/ProgressBars'
+
+Vue.use(BootstrapVue)
+
+describe('ProgressBars.vue', () => {
+  it('has a name', () => {
+    expect(ProgressBars.name).toMatch('progress-bars')
+  })
+  it('has a created hook', () => {
+    expect(typeof ProgressBars.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof ProgressBars.data).toMatch('function')
+    const defaultData = ProgressBars.data()
+    expect(defaultData.counter).toBe(45)
+  })
+  it('is Vue instance', () => {
+    const wrapper = mount(ProgressBars)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is ProgressBars', () => {
+    const wrapper = mount(ProgressBars)
+    expect(wrapper.is(ProgressBars)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(ProgressBars)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Progress')
+  })
+})
diff --git a/tests/unit/Register.spec.js b/tests/unit/Register.spec.js
new file mode 100644
index 00000000..85f3c737
--- /dev/null
+++ b/tests/unit/Register.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Register from '@/views/Pages/Register'
+
+Vue.use(BootstrapVue)
+
+describe('Register.vue', () => {
+  it('has a name', () => {
+    expect(Register.name).toMatch('Register')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Register)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Register', () => {
+    const wrapper = shallowMount(Register)
+    expect(wrapper.is(Register)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = shallowMount(Register)
+    expect(wrapper.find('h1').text()).toMatch('Register')
+  })
+})
diff --git a/tests/unit/SimpleLineIcons.spec.js b/tests/unit/SimpleLineIcons.spec.js
new file mode 100644
index 00000000..5f6b7ad9
--- /dev/null
+++ b/tests/unit/SimpleLineIcons.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import SimpleLineIcons from '@/views/icons/SimpleLineIcons'
+
+Vue.use(BootstrapVue)
+
+describe('SimpleLineIcons.vue', () => {
+  it('has a name', () => {
+    expect(SimpleLineIcons.name).toMatch('simple-line-icons')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(SimpleLineIcons)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is SimpleLineIcons', () => {
+    const wrapper = shallowMount(SimpleLineIcons)
+    expect(wrapper.is(SimpleLineIcons)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(SimpleLineIcons)
+    expect(wrapper.find('div.card-header').text()).toMatch('Simple Line Icons')
+  })
+})
diff --git a/tests/unit/StandardButtons.spec.js b/tests/unit/StandardButtons.spec.js
new file mode 100644
index 00000000..28fbb612
--- /dev/null
+++ b/tests/unit/StandardButtons.spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import StandardButtons from '@/views/buttons/StandardButtons'
+
+Vue.use(BootstrapVue)
+
+describe('StandardButtons.vue', () => {
+  it('has a name', () => {
+    expect(StandardButtons.name).toMatch('standard-buttons')
+  })
+  it('has a created hook', () => {
+    expect(typeof StandardButtons.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof StandardButtons.data).toMatch('function')
+    const defaultData = StandardButtons.data()
+    expect(defaultData.togglePress).toBe(false)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(StandardButtons)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is StandardButtons', () => {
+    const wrapper = shallowMount(StandardButtons)
+    expect(wrapper.is(StandardButtons)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(StandardButtons)
+    expect(wrapper.find('div.card-header > strong').text()).toMatch('Standard buttons')
+    expect(wrapper.find('div.card-header > div > strong').text()).toMatch('Toggle pressed state')
+  })
+})
diff --git a/tests/unit/Switches.spec.js b/tests/unit/Switches.spec.js
new file mode 100644
index 00000000..281ce213
--- /dev/null
+++ b/tests/unit/Switches.spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Switches from '@/views/base/Switches'
+
+Vue.use(BootstrapVue)
+
+describe('Switches.vue', () => {
+  it('has a name', () => {
+    expect(Switches.name).toMatch('switches')
+  })
+  it('has a created hook', () => {
+    expect(typeof Switches.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Switches.data).toMatch('function')
+    const defaultData = Switches.data()
+    expect(typeof defaultData.fields).toMatch('object')
+    expect(defaultData.checker).toMatch('yes')
+  })
+  it('is Vue instance', () => {
+    const wrapper = mount(Switches)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Switches', () => {
+    const wrapper = mount(Switches)
+    expect(wrapper.is(Switches)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Switches)
+    expect(wrapper.find('div.card-header > div').text()).toMatch('Switch default')
+  })
+})
diff --git a/tests/unit/Table.spec.js b/tests/unit/Table.spec.js
new file mode 100644
index 00000000..4b3efc4a
--- /dev/null
+++ b/tests/unit/Table.spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Table from '@/views/base/Table'
+
+Vue.use(BootstrapVue)
+
+describe('Table.vue', () => {
+  it('has a name', () => {
+    expect(Table.name).toMatch('c-table')
+  })
+  it('has a created hook', () => {
+    expect(typeof Table.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Table.data).toMatch('function')
+    const defaultData = Table.data()
+    expect(defaultData.currentPage).toBe(1)
+  })
+  it('is Vue instance', () => {
+    const wrapper = mount(Table)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Table', () => {
+    const wrapper = mount(Table)
+    expect(wrapper.is(Table)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Table)
+    expect(wrapper.find('div.card-header > div').text()).toMatch('Table')
+  })
+})
diff --git a/tests/unit/Tables.spec.js b/tests/unit/Tables.spec.js
new file mode 100644
index 00000000..25a22240
--- /dev/null
+++ b/tests/unit/Tables.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Tables from '@/views/base/Tables'
+
+Vue.use(BootstrapVue)
+
+describe('Tables.vue', () => {
+  it('has a name', () => {
+    expect(Tables.name).toMatch('tables')
+  })
+  it('is Vue instance', () => {
+    const wrapper = mount(Tables)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Tables', () => {
+    const wrapper = mount(Tables)
+    expect(wrapper.is(Tables)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Tables)
+    expect(wrapper.find('div.card-header > div').text()).toMatch('Simple Table')
+  })
+})
diff --git a/tests/unit/Tabs.spec.js b/tests/unit/Tabs.spec.js
new file mode 100644
index 00000000..c75358ef
--- /dev/null
+++ b/tests/unit/Tabs.spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Tabs from '@/views/base/Tabs'
+
+Vue.use(BootstrapVue)
+
+describe('Tabs.vue', () => {
+  it('has a name', () => {
+    expect(Tabs.name).toMatch('tabs')
+  })
+  it('has a created hook', () => {
+    expect(typeof Tabs.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Tabs.data).toMatch('function')
+    const defaultData = Tabs.data()
+    expect(defaultData.tabs).toEqual(["Calculator", "Shopping cart", "Charts"])
+    expect(defaultData.tabIndex).toEqual([0, 0])
+  })
+  it('is Vue instance', () => {
+    const wrapper = mount(Tabs)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Tabs', () => {
+    const wrapper = mount(Tabs)
+    expect(wrapper.is(Tabs)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Tabs)
+    expect(wrapper.find('div.card-header > div').text()).toMatch('Tabs')
+  })
+})
diff --git a/tests/unit/Tooltips.spec.js b/tests/unit/Tooltips.spec.js
new file mode 100644
index 00000000..ab1d20db
--- /dev/null
+++ b/tests/unit/Tooltips.spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Tooltips from '@/views/base/Tooltips'
+
+Vue.use(BootstrapVue)
+
+describe('Tooltips.vue', () => {
+  it('has a name', () => {
+    expect(Tooltips.name).toMatch('tooltips')
+  })
+  it('has a created hook', () => {
+    expect(typeof Tooltips.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Tooltips.data).toMatch('function')
+    const defaultData = Tooltips.data()
+    expect(defaultData.show).toBe(true)
+    expect(defaultData.disabled).toBe(false)
+  })
+  it('is Vue instance', () => {
+    const wrapper = mount(Tooltips)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Tooltips', () => {
+    const wrapper = mount(Tooltips)
+    expect(wrapper.is(Tooltips)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = mount(Tooltips)
+    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Tooltips')
+  })
+})
diff --git a/tests/unit/Typography.spec.js b/tests/unit/Typography.spec.js
new file mode 100644
index 00000000..4462420a
--- /dev/null
+++ b/tests/unit/Typography.spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Typography from '@/views/theme/Typography'
+
+Vue.use(BootstrapVue)
+
+describe('Typography.vue', () => {
+  it('has a name', () => {
+    expect(Typography.name).toMatch('typography')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Typography)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Typography', () => {
+    const wrapper = shallowMount(Typography)
+    expect(wrapper.is(Typography)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = shallowMount(Typography)
+    expect(wrapper.find('.card-header').text()).toMatch('Headings')
+  })
+})
diff --git a/tests/unit/Users.spec.js b/tests/unit/Users.spec.js
new file mode 100644
index 00000000..9f7421be
--- /dev/null
+++ b/tests/unit/Users.spec.js
@@ -0,0 +1,35 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Users from '@/views/users/Users'
+
+Vue.use(BootstrapVue)
+
+describe('Users.vue', () => {
+  it('has a name', () => {
+    expect(Users.name).toMatch('Users')
+  })
+  it('has a created hook', () => {
+    expect(typeof Users.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Users.data).toMatch('function')
+    const defaultData = Users.data()
+    expect(defaultData.currentPage).toBe(1)
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Users)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Users', () => {
+    const wrapper = shallowMount(Users)
+    expect(wrapper.is(Users)).toBe(true)
+  })
+  it('renders props.caption when passed', () => {
+    const caption = 'Users List'
+    const wrapper = mount(Users, {
+      propsData: { caption }
+    })
+    expect(wrapper.find('div.card-header > div').text()).toMatch(caption)
+  })
+})
diff --git a/tests/unit/Widgets.spec.js b/tests/unit/Widgets.spec.js
new file mode 100644
index 00000000..27fe9e32
--- /dev/null
+++ b/tests/unit/Widgets.spec.js
@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Widgets from '@/views/Widgets'
+
+Vue.use(BootstrapVue)
+
+describe('Widgets.vue', () => {
+  it('has a name', () => {
+    expect(Widgets.name).toMatch('widgets')
+  })
+  it('has a created hook', () => {
+    expect(typeof Widgets.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Widgets.data).toMatch('function')
+    const defaultData = Widgets.data()
+    expect(defaultData.msg).toMatch('Widgets')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Widgets)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Widgets', () => {
+    const wrapper = shallowMount(Widgets)
+    expect(wrapper.is(Widgets)).toBe(true)
+  })
+})