test: restore and fix unit tests

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    ['@vue/app']
+    [ "@vue/app", { useBuiltIns: "entry" } ]
   ]
 }

jest.config.js

@@ -8,8 +8,9 @@ module.exports = {
   transform: {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
+    '^.+\\.jsx?$': '<rootDir>/node_modules/babel-jest'
   },
+  transformIgnorePatterns: ["/node_modules/(?!@coreui/icons)"],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1'
   },

package.json

@@ -17,7 +17,7 @@
     "@coreui/coreui": "next",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/coreui-vue-chartjs": "../coreui-vue-chartjs",
-    "@coreui/icons": "coreui/coreui-icons#v1-alpha",
+    "@coreui/icons": "github:coreui/coreui-icons#v1-alpha",
     "@coreui/vue": "../coreui-vue",
     "vue": "^2.6.10",
     "vue-router": "^3.0.7"
@@ -28,12 +28,12 @@
     "@vue/cli-plugin-eslint": "^3.9.2",
     "@vue/cli-plugin-unit-jest": "^3.9.0",
     "@vue/cli-service": "^3.9.2",
-    "@vue/test-utils": "^1.0.0-beta.25",
+    "@vue/test-utils": "^1.0.0-beta.29",
-    "babel-core": "^6.26.3",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "23.6.0",
     "babel-plugin-dynamic-import-node": "^2.3.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-preset-vue-app": "^2.0.0",
-    "babel-jest": "23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.2",
     "node-sass": "^4.12.0",

tests/unit/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  env: {
+    jest: true
+  },
+  rules: {
+    'import/no-extraneous-dependencies': 'off'
+  }
+}

tests/unit/App.spec.js

@@ -0,0 +1,31 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+import CoreuiVue from '@coreui/vue'
+import App from '@/App'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+
+localVue.use(CoreuiVue)
+
+describe('App.vue', () => {
+  it('has a name', () => {
+    expect(App.name).toMatch('app')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(App, {
+      localVue,
+      router
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is App', () => {
+    const wrapper = shallowMount(App, {
+      localVue,
+      router
+    })
+    expect(wrapper.is(App)).toBe(true)
+  })
+})

tests/unit/containers/DefaultContainer.spec.js

@@ -0,0 +1,30 @@
+import CoreuiVue from '@coreui/vue'
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router'
+import DefaultContainer from '@/containers/DefaultContainer'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+localVue.use(CoreuiVue)
+
+describe('DefaultContainer.vue', () => {
+  it('has a name', () => {
+    expect(DefaultContainer.name).toMatch('full')
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(DefaultContainer, {
+      localVue,
+        router
+    })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(DefaultContainer, {
+      localVue,
+      router
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+})

tests/unit/containers/DefaultHeaderDropdownAccnt.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import CoreuiVue from '@coreui/vue'
+import DefaultHeaderDropdownAccnt from '@/containers/DefaultHeaderDropdownAccnt'
+import { shallowMount } from '@vue/test-utils';
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(DefaultHeaderDropdownAccnt)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/containers/TheFooter.spec.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import CoreuiVue from '@coreui/vue'
+import TheFooter from '@/containers/TheFooter'
+import { shallowMount } from '@vue/test-utils';
+
+Vue.use(CoreuiVue)
+
+describe('TheFooter.vue', () => {
+
+  test('renders correctly', () => {
+    const wrapper = shallowMount(TheFooter)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/containers/TheHeader.spec.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import CoreuiVue from '@coreui/vue'
+import TheHeader from '@/containers/TheHeader'
+import { shallowMount } from '@vue/test-utils';
+
+Vue.use(CoreuiVue)
+
+describe('TheHeader.vue', () => {
+  test('renders correctly', () => {
+    const wrapper = shallowMount(TheHeader)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/containers/TheSidebar.spec.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils';
+import CoreuiVue from '@coreui/vue'
+import TheSidebar from '@/containers/TheSidebar'
+
+Vue.use(CoreuiVue)
+
+describe('TheSidebar.vue', () => {
+  it('has a name', () => {
+    expect(TheSidebar.name).toMatch('TheSidebar')
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(TheSidebar)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/containers/__snapshots__/DefaultContainer.spec.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultContainer.vue renders correctly 1`] = `
+<div
+  class="c-app c-default-layout"
+>
+  <theheader-stub />
+   
+  <thesidebar-stub />
+   
+  <div
+    class="c-body"
+  >
+    <main
+      class="c-main"
+    >
+      <cbreadcrumbrouter-stub />
+       
+      <ccontainer-stub
+        fluid="true"
+      >
+        <router-view-stub
+          name="fade"
+        />
+      </ccontainer-stub>
+    </main>
+  </div>
+   
+  <thefooter-stub />
+</div>
+`;

tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap

@@ -0,0 +1,242 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
+<cdropdown-stub
+  addmenuclasses="c-dropdown-menu-right"
+  buttonhtml="Dropdown"
+  nav="true"
+  nocaret="true"
+  nopopper="true"
+  variant="primary"
+>
+   
+  <cdropdownheader-stub
+    class="c-text-center"
+    tag="div"
+  >
+    <strong>
+      Account
+    </strong>
+  </cdropdownheader-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-bell"
+    />
+     Updates
+    
+    <cbadge-stub
+      activeclass="c-active"
+      additional-classes="hehe"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="info"
+    >
+      42
+    </cbadge-stub>
+  </cdropdownitem-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-envelope-open"
+    />
+     Messages
+    
+    <cbadge-stub
+      activeclass="c-active"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="success"
+    >
+      42
+    </cbadge-stub>
+  </cdropdownitem-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-task"
+    />
+     Tasks
+    
+    <cbadge-stub
+      activeclass="c-active"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="danger"
+    >
+      42
+    </cbadge-stub>
+  </cdropdownitem-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-comment-square"
+    />
+     Comments
+    
+    <cbadge-stub
+      activeclass="c-active"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="warning"
+    >
+      42
+    </cbadge-stub>
+  </cdropdownitem-stub>
+   
+  <cdropdownheader-stub
+    class="c-text-center"
+    tag="div"
+  >
+    <strong>
+      Settings
+    </strong>
+  </cdropdownheader-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-user"
+    />
+     Profile
+  
+  </cdropdownitem-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-wrench"
+    />
+     Settings
+  
+  </cdropdownitem-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-dollar"
+    />
+     Payments
+    
+    <cbadge-stub
+      activeclass="c-active"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="secondary"
+    >
+      42
+    </cbadge-stub>
+  </cdropdownitem-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-file"
+    />
+     Projects
+    
+    <cbadge-stub
+      activeclass="c-active"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="primary"
+    >
+      42
+    </cbadge-stub>
+  </cdropdownitem-stub>
+   
+  <cdropdowndivider-stub
+    tag="div"
+  />
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-shield"
+    />
+     Lock Account
+  
+  </cdropdownitem-stub>
+   
+  <cdropdownitem-stub
+    activeclass="c-active"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    target="_self"
+  >
+    <i
+      class="cui-lock-locked"
+    />
+     Logout
+  
+  </cdropdownitem-stub>
+</cdropdown-stub>
+`;

tests/unit/containers/__snapshots__/TheFooter.spec.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TheFooter.vue renders correctly 1`] = `
+<cfooter-stub>
+  <div>
+    <a
+      href="https://coreui.io"
+    >
+      CoreUI
+    </a>
+     
+    <span
+      class="c-ml-1"
+    >
+      © 2018 creativeLabs.
+    </span>
+  </div>
+   
+  <div
+    class="c-ml-auto"
+  >
+    <span
+      class="c-mr-1"
+    >
+      Powered by
+    </span>
+     
+    <a
+      href="https://coreui.io"
+    >
+      CoreUI for Vue
+    </a>
+  </div>
+</cfooter-stub>
+`;

tests/unit/containers/__snapshots__/TheHeader.spec.js.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TheHeader.vue renders correctly 1`] = `
+<cheader-stub
+  fixed="true"
+>
+  <csidebartoggler-stub
+    class="c-header-toggler c-d-lg-none"
+  />
+   
+  <clink-stub
+    activeclass="c-active"
+    class="c-header-brand"
+    event="click"
+    exactactiveclass="c-active"
+    routertag="a"
+    tag="span"
+    target="_self"
+    to="/"
+    variant="primary"
+  >
+    <img
+      alt="CoreUI Logo"
+      class="c-navbar-brand-full"
+      height="25"
+      src="img/brand/logo.svg"
+      width="89"
+    />
+  </clink-stub>
+   
+  <csidebartoggler-stub
+    class="c-header-toggler c-d-md-down-none"
+  />
+   
+  <ul
+    class="c-header-nav c-d-md-down-none"
+  >
+    <cnavitem-stub
+      activeclass="c-active"
+      class="c-px-3"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      to="/dashboard"
+      variant="primary"
+    >
+      Dashboard
+    </cnavitem-stub>
+     
+    <cnavitem-stub
+      activeclass="c-active"
+      class="c-px-3"
+      event="click"
+      exact="true"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      to="/users"
+      variant="primary"
+    >
+      Users
+    </cnavitem-stub>
+     
+    <cnavitem-stub
+      activeclass="c-active"
+      class="c-px-3"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="primary"
+    >
+      Settings
+    </cnavitem-stub>
+  </ul>
+   
+  <cnav-stub
+    class="c-header-nav c-ml-auto"
+  >
+    <cnavitem-stub
+      activeclass="c-active"
+      class="c-d-md-down-none"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="primary"
+    >
+      <i
+        class="cui-bell"
+      />
+       
+      <cbadge-stub
+        activeclass="c-active"
+        event="click"
+        exactactiveclass="c-active"
+        pill="true"
+        routertag="a"
+        tag="span"
+        target="_self"
+        variant="danger"
+      >
+        5
+      </cbadge-stub>
+    </cnavitem-stub>
+     
+    <cnavitem-stub
+      activeclass="c-active"
+      class="c-d-md-down-none"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="primary"
+    >
+      <i
+        class="cui-list"
+      />
+    </cnavitem-stub>
+     
+    <cnavitem-stub
+      activeclass="c-active"
+      class="d-md-down-none"
+      event="click"
+      exactactiveclass="c-active"
+      routertag="a"
+      tag="span"
+      target="_self"
+      variant="primary"
+    >
+      <i
+        class="cui-location-pin"
+      />
+    </cnavitem-stub>
+     
+    <defaultheaderdropdownaccnt-stub />
+  </cnav-stub>
+</cheader-stub>
+`;

tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TheSidebar.vue renders correctly 1`] = `
+<csidebar-stub
+  breakpoint="lg"
+  dropdownbehaviors="closeOnInactiveRoute"
+  fixed="true"
+  show="true"
+>
+  <csidebarheader-stub />
+   
+  <csidebarform-stub />
+   
+  <csidebarnav-stub
+    navitems="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+  />
+   
+  <csidebarfooter-stub />
+   
+  <csidebarminimizer-stub />
+</csidebar-stub>
+`;

tests/unit/views/Charts.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils';
+import CoreuiVue from '@coreui/vue'
+import Charts from '@/views/Charts'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Charts)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/Dashboard.spec.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import { CIconPlugin } from '@coreui/icons/vue'
+import Dashboard from '@/views/Dashboard'
+import { iconsSet } from '@/assets/icons/icons.js'
+
+
+Vue.use(CoreuiVue)
+Vue.use(CIconPlugin, iconsSet)
+
+describe('Dashboard.vue', () => {
+  it('has a name', () => {
+    expect(Dashboard.name).toMatch('Dashboard')
+  })
+  it('has a created hook', () => {
+    expect(typeof Dashboard.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof Dashboard.data).toMatch('function')
+    const defaultData = Dashboard.data()
+    expect(defaultData.selected).toMatch('Month')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Dashboard)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Dashboard', () => {
+    const wrapper = shallowMount(Dashboard)
+    expect(wrapper.is(Dashboard)).toBe(true)
+  })
+  it('should render correct content', () => {
+    const wrapper = shallowMount(Dashboard)
+    expect(wrapper.find('#traffic').text()).toMatch('Traffic')
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Dashboard)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/__snapshots__/Charts.spec.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Charts.vue renders correctly 1`] = `
+<div>
+  <ccardgroup-stub
+    class="c-card-columns c-cols-2"
+    columns="true"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        
+        Line Chart
+        
+        <div
+          class="c-card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Charts"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cchartlineexample-stub />
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="Bar Chart"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cchartbarexample-stub />
+    </ccard-stub>
+     
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="Doughnut Chart"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cchartdoughnutexample-stub />
+    </ccard-stub>
+     
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="Radar Chart"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cchartradarexample-stub />
+    </ccard-stub>
+     
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="Pie Chart"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cchartpieexample-stub />
+    </ccard-stub>
+     
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="Polar Area Chart"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cchartpolarareaexample-stub />
+    </ccard-stub>
+     
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="Simple line chart"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cchartlinesimple-stub
+        backgroundcolor="transparent"
+        bordercolor="success"
+        datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+        label="Sales"
+        labels="months"
+      />
+    </ccard-stub>
+     
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="Simple pointed chart"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cchartlinesimple-stub
+        backgroundcolor="transparent"
+        bordercolor="warning"
+        datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+        label="Sales"
+        pointed="true"
+      />
+    </ccard-stub>
+     
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="Simple bar chart"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <cchartbarsimple-stub
+        backgroundcolor="danger"
+        datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+        label="Sales"
+      />
+    </ccard-stub>
+  </ccardgroup-stub>
+</div>
+`;

tests/unit/views/__snapshots__/Dashboard.spec.js.snap

@@ -0,0 +1,951 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard.vue renders correctly 1`] = `
+<div>
+  <widgetsdropdown-stub />
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <crow-stub>
+        <ccol-stub
+          sm="5"
+          tag="div"
+        >
+          <h4
+            class="c-card-title c-mb-0"
+            id="traffic"
+          >
+            Traffic
+          </h4>
+           
+          <div
+            class="c-small c-text-muted"
+          >
+            November 2017
+          </div>
+        </ccol-stub>
+         
+        <ccol-stub
+          class="c-d-none c-d-md-block"
+          sm="7"
+          tag="div"
+        >
+          <cbutton-stub
+            activeclass="c-active"
+            class="c-float-right"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            <i
+              class="cui-cloud-download"
+            />
+          </cbutton-stub>
+           
+          <cbuttongroup-stub
+            class="c-float-right c-mr-3"
+          >
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mx-0"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="outline-secondary"
+            >
+              
+              Day
+            
+            </cbutton-stub>
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mx-0"
+              event="click"
+              exactactiveclass="c-active"
+              pressed="true"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="outline-secondary"
+            >
+              
+              Month
+            
+            </cbutton-stub>
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mx-0"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="outline-secondary"
+            >
+              
+              Year
+            
+            </cbutton-stub>
+          </cbuttongroup-stub>
+        </ccol-stub>
+      </crow-stub>
+       
+      <mainchartexample-stub
+        style="height: 300px; margin-top: 40px;"
+      />
+    </ccardbody-stub>
+     
+    <ccardfooter-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <crow-stub
+        class="c-text-center"
+      >
+        <ccol-stub
+          class="c-mb-sm-2 c-mb-0"
+          md="true"
+          sm="12"
+          tag="div"
+        >
+          <div
+            class="c-text-muted"
+          >
+            Visits
+          </div>
+           
+          <strong>
+            29.703 Users (40%)
+          </strong>
+           
+          <cprogress-stub
+            class="c-progress-xs c-mt-2"
+            max="100"
+            precision="1"
+            value="40"
+            variant="success"
+          />
+        </ccol-stub>
+         
+        <ccol-stub
+          class="c-mb-sm-2 c-mb-0 c-d-md-down-none"
+          md="true"
+          sm="12"
+          tag="div"
+        >
+          <div
+            class="c-text-muted"
+          >
+            Unique
+          </div>
+           
+          <strong>
+            24.093 Users (20%)
+          </strong>
+           
+          <cprogress-stub
+            class="c-progress-xs c-mt-2"
+            max="100"
+            precision="1"
+            value="20"
+            variant="info"
+          />
+        </ccol-stub>
+         
+        <ccol-stub
+          class="c-mb-sm-2 c-mb-0"
+          md="true"
+          sm="12"
+          tag="div"
+        >
+          <div
+            class="c-text-muted"
+          >
+            Pageviews
+          </div>
+           
+          <strong>
+            78.706 Views (60%)
+          </strong>
+           
+          <cprogress-stub
+            class="c-progress-xs c-mt-2"
+            max="100"
+            precision="1"
+            value="60"
+            variant="warning"
+          />
+        </ccol-stub>
+         
+        <ccol-stub
+          class="c-mb-sm-2 c-mb-0"
+          md="true"
+          sm="12"
+          tag="div"
+        >
+          <div
+            class="c-text-muted"
+          >
+            New Users
+          </div>
+           
+          <strong>
+            22.123 Users (80%)
+          </strong>
+           
+          <cprogress-stub
+            class="c-progress-xs c-mt-2"
+            max="100"
+            precision="1"
+            value="80"
+            variant="danger"
+          />
+        </ccol-stub>
+         
+        <ccol-stub
+          class="c-mb-sm-2 c-mb-0 c-d-md-down-none"
+          md="true"
+          sm="12"
+          tag="div"
+        >
+          <div
+            class="c-text-muted"
+          >
+            Bounce Rate
+          </div>
+           
+          <strong>
+            Average Rate (40.15%)
+          </strong>
+           
+          <cprogress-stub
+            class="c-progress-xs c-mt-2"
+            max="100"
+            precision="1"
+            value="40"
+            variant="primary"
+          />
+        </ccol-stub>
+      </crow-stub>
+    </ccardfooter-stub>
+  </ccard-stub>
+   
+  <widgetsbrand-stub />
+   
+  <crow-stub>
+    <ccol-stub
+      md="12"
+      tag="div"
+    >
+      <ccard-stub
+        bodywrapper="true"
+        headerhtml="Traffic & Sales"
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <crow-stub>
+          <ccol-stub
+            lg="6"
+            sm="12"
+            tag="div"
+          >
+            <crow-stub>
+              <ccol-stub
+                sm="6"
+                tag="div"
+              >
+                <ccallout-stub
+                  variant="info"
+                >
+                  <small
+                    class="c-text-muted"
+                  >
+                    New Clients
+                  </small>
+                  <br />
+                   
+                  <strong
+                    class="c-h4"
+                  >
+                    9,123
+                  </strong>
+                </ccallout-stub>
+              </ccol-stub>
+               
+              <ccol-stub
+                sm="6"
+                tag="div"
+              >
+                <ccallout-stub
+                  variant="danger"
+                >
+                  <small
+                    class="c-text-muted"
+                  >
+                    Recurring Clients
+                  </small>
+                  <br />
+                   
+                  <strong
+                    class="c-h4"
+                  >
+                    22,643
+                  </strong>
+                </ccallout-stub>
+              </ccol-stub>
+            </crow-stub>
+             
+            <hr
+              class="c-mt-0"
+            />
+             
+            <div
+              class="c-progress-group c-mb-4"
+            >
+              <div
+                class="c-progress-group-prepend"
+              >
+                <span
+                  class="c-progress-group-text"
+                >
+                  
+                  Monday
+                
+                </span>
+              </div>
+               
+              <div
+                class="c-progress-group-bars"
+              >
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="34"
+                  variant="info"
+                />
+                 
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="78"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="c-progress-group c-mb-4"
+            >
+              <div
+                class="c-progress-group-prepend"
+              >
+                <span
+                  class="c-progress-group-text"
+                >
+                  
+                  Tuesday
+                
+                </span>
+              </div>
+               
+              <div
+                class="c-progress-group-bars"
+              >
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="56"
+                  variant="info"
+                />
+                 
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="94"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="c-progress-group c-mb-4"
+            >
+              <div
+                class="c-progress-group-prepend"
+              >
+                <span
+                  class="c-progress-group-text"
+                >
+                  
+                  Wednesday
+                
+                </span>
+              </div>
+               
+              <div
+                class="c-progress-group-bars"
+              >
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="12"
+                  variant="info"
+                />
+                 
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="67"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="c-progress-group c-mb-4"
+            >
+              <div
+                class="c-progress-group-prepend"
+              >
+                <span
+                  class="c-progress-group-text"
+                >
+                  
+                  Thursday
+                
+                </span>
+              </div>
+               
+              <div
+                class="c-progress-group-bars"
+              >
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="43"
+                  variant="info"
+                />
+                 
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="91"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="c-progress-group mb-4"
+            >
+              <div
+                class="c-progress-group-prepend"
+              >
+                <span
+                  class="c-progress-group-text"
+                >
+                  
+                  Friday
+                
+                </span>
+              </div>
+               
+              <div
+                class="c-progress-group-bars"
+              >
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="22"
+                  variant="info"
+                />
+                 
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="73"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="c-progress-group c-mb-4"
+            >
+              <div
+                class="c-progress-group-prepend"
+              >
+                <span
+                  class="c-progress-group-text"
+                >
+                  
+                  Saturday
+                
+                </span>
+              </div>
+               
+              <div
+                class="c-progress-group-bars"
+              >
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="53"
+                  variant="info"
+                />
+                 
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="82"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="c-progress-group c-mb-4"
+            >
+              <div
+                class="c-progress-group-prepend"
+              >
+                <span
+                  class="c-progress-group-text"
+                >
+                  
+                  Sunday
+                
+                </span>
+              </div>
+               
+              <div
+                class="c-progress-group-bars"
+              >
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="9"
+                  variant="info"
+                />
+                 
+                <cprogress-stub
+                  class="c-progress-xs"
+                  max="100"
+                  precision="0"
+                  value="69"
+                  variant="danger"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="c-legend c-text-center"
+            >
+              <small>
+                <sup>
+                  <cbadge-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    pill="true"
+                    routertag="a"
+                    tag="span"
+                    target="_self"
+                    variant="info"
+                  >
+                     
+                  </cbadge-stub>
+                </sup>
+                
+                New clients
+                  
+                
+                <sup>
+                  <cbadge-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    pill="true"
+                    routertag="a"
+                    tag="span"
+                    target="_self"
+                    variant="danger"
+                  >
+                     
+                  </cbadge-stub>
+                </sup>
+                
+                Recurring clients
+              
+              </small>
+            </div>
+          </ccol-stub>
+           
+          <ccol-stub
+            lg="6"
+            sm="12"
+            tag="div"
+          >
+            <crow-stub>
+              <ccol-stub
+                sm="6"
+                tag="div"
+              >
+                <ccallout-stub
+                  variant="warning"
+                >
+                  <small
+                    class="c-text-muted"
+                  >
+                    Pageviews
+                  </small>
+                  <br />
+                   
+                  <strong
+                    class="c-h4"
+                  >
+                    78,623
+                  </strong>
+                </ccallout-stub>
+              </ccol-stub>
+               
+              <ccol-stub
+                sm="6"
+                tag="div"
+              >
+                <ccallout-stub
+                  variant="success"
+                >
+                  <small
+                    class="c-text-muted"
+                  >
+                    Organic
+                  </small>
+                  <br />
+                   
+                  <strong
+                    class="c-h4"
+                  >
+                    49,123
+                  </strong>
+                </ccallout-stub>
+              </ccol-stub>
+            </crow-stub>
+             
+            <hr
+              class="c-mt-0"
+            />
+             
+            <ul
+              class="c-horizontal-bars c-type-2"
+            >
+              <div
+                class="c-progress-group"
+              >
+                <div
+                  class="c-progress-group-header"
+                >
+                  <i
+                    class="cui-user c-progress-group-icon"
+                  />
+                   
+                  <span
+                    class="c-title"
+                  >
+                    Male
+                  </span>
+                   
+                  <span
+                    class="c-ml-auto c-font-weight-bold"
+                  >
+                    43%
+                  </span>
+                </div>
+                 
+                <div
+                  class="c-progress-group-bars"
+                >
+                  <cprogress-stub
+                    class="c-progress-xs"
+                    max="100"
+                    precision="0"
+                    value="43"
+                    variant="warning"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="c-progress-group c-mb-5"
+              >
+                <div
+                  class="c-progress-group-header"
+                >
+                  <i
+                    class="cui-user-female c-progress-group-icon"
+                  />
+                   
+                  <span
+                    class="c-title"
+                  >
+                    Female
+                  </span>
+                   
+                  <span
+                    class="c-ml-auto c-font-weight-bold"
+                  >
+                    37%
+                  </span>
+                </div>
+                 
+                <div
+                  class="c-progress-group-bars"
+                >
+                  <cprogress-stub
+                    class="c-progress-xs"
+                    max="100"
+                    precision="0"
+                    value="37"
+                    variant="warning"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="c-progress-group"
+              >
+                <div
+                  class="c-progress-group-header"
+                >
+                  <i
+                    class="cui-globe c-progress-group-icon"
+                  />
+                   
+                  <span
+                    class="c-title"
+                  >
+                    Organic Search
+                  </span>
+                   
+                  <span
+                    class="c-ml-auto c-font-weight-bold"
+                  >
+                    
+                    191,235
+                    <span
+                      class="text-muted small"
+                    >
+                      (56%)
+                    </span>
+                  </span>
+                </div>
+                 
+                <div
+                  class="c-progress-group-bars"
+                >
+                  <cprogress-stub
+                    class="c-progress-xs"
+                    max="100"
+                    precision="0"
+                    value="56"
+                    variant="success"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="c-progress-group"
+              >
+                <div
+                  class="c-progress-group-header"
+                >
+                  <cicon-stub
+                    class="c-progress-group-icon"
+                    height="17"
+                    name="socialFacebook"
+                  />
+                   
+                  <span
+                    class="c-title"
+                  >
+                    Facebook
+                  </span>
+                   
+                  <span
+                    class="c-ml-auto c-font-weight-bold"
+                  >
+                    
+                    51,223 
+                    <span
+                      class="c-text-muted small"
+                    >
+                      (15%)
+                    </span>
+                  </span>
+                </div>
+                 
+                <div
+                  class="c-progress-group-bars"
+                >
+                  <cprogress-stub
+                    class="c-progress-xs"
+                    max="100"
+                    precision="0"
+                    value="15"
+                    variant="success"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="c-progress-group"
+              >
+                <div
+                  class="c-progress-group-header"
+                >
+                  <cicon-stub
+                    class="c-progress-group-icon"
+                    height="17"
+                    name="socialTwitter"
+                  />
+                   
+                  <span
+                    class="c-title"
+                  >
+                    Twitter
+                  </span>
+                   
+                  <span
+                    class="c-ml-auto c-font-weight-bold"
+                  >
+                    
+                    37,564 
+                    <span
+                      class="c-text-muted c-small"
+                    >
+                      (11%)
+                    </span>
+                  </span>
+                </div>
+                 
+                <div
+                  class="c-progress-group-bars"
+                >
+                  <cprogress-stub
+                    class="c-progress-xs"
+                    max="100"
+                    precision="0"
+                    value="11"
+                    variant="success"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="c-progress-group"
+              >
+                <div
+                  class="c-progress-group-header"
+                >
+                  <cicon-stub
+                    class="c-progress-group-icon"
+                    height="17"
+                    name="socialLinkedin"
+                  />
+                   
+                  <span
+                    class="c-title"
+                  >
+                    LinkedIn
+                  </span>
+                   
+                  <span
+                    class="c-ml-auto c-font-weight-bold"
+                  >
+                    
+                    27,319 
+                    <span
+                      class="c-text-muted small"
+                    >
+                       (8%)
+                    </span>
+                  </span>
+                </div>
+                 
+                <div
+                  class="c-progress-group-bars"
+                >
+                  <cprogress-stub
+                    class="c-progress-xs"
+                    max="100"
+                    precision="0"
+                    value="8"
+                    variant="success"
+                  />
+                </div>
+              </div>
+               
+              <div
+                class="c-divider c-text-center"
+              >
+                <cbutton-stub
+                  activeclass="c-active"
+                  class="c-text-muted"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  size="sm"
+                  target="_self"
+                  type="button"
+                  variant="link"
+                >
+                  <i
+                    class="cui-options"
+                  />
+                </cbutton-stub>
+              </div>
+            </ul>
+          </ccol-stub>
+        </crow-stub>
+         
+        <br />
+         
+        <ctable-stub
+          class="c-mb-0 c-table-outline"
+          defaultsorter="[object Object]"
+          fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+          head-variant="light"
+          hover="true"
+          items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+          nosorting="true"
+          perpage="10"
+        />
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+</div>
+`;

tests/unit/views/base/Breadcrumbs.spec.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Breadcrumbs from '@/views/base/Breadcrumbs'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = mount(Breadcrumbs)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Cards.spec.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Cards from '@/views/base/Cards'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = mount(Cards)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Carousels.spec.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Carousels from '@/views/base/Carousels'
+
+Vue.use(CoreuiVue)
+
+describe('Carousels.vue', () => {
+  it('has a name', () => {
+    expect(Carousels.name).toMatch('carousels')
+  })
+  it('is Carousels', () => {
+    const wrapper = shallowMount(Carousels)
+    expect(wrapper.is(Carousels)).toBe(true)
+  })
+  test('renders correctly', () => {
+    const wrapper = mount(Carousels)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Collapses.spec.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Collapses from '@/views/base/Collapses'
+
+Vue.use(CoreuiVue)
+
+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')
+  // })
+  test('renders correctly', () => {
+    const wrapper = mount(Collapses)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Forms.spec.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Forms from '@/views/base/Forms'
+
+Vue.use(CoreuiVue)
+
+describe('Forms.vue', () => {
+  it('has a name', () => {
+    expect(Forms.name).toMatch('forms')
+  })
+  it('is Forms', () => {
+    const wrapper = shallowMount(Forms)
+    expect(wrapper.is(Forms)).toBe(true)
+  })
+  // render random chackboxes
+  // test('renders correctly', () => {
+  //   const wrapper = shallowMount(Forms)
+  //   expect(wrapper.element).toMatchSnapshot()
+  // })
+})

tests/unit/views/base/Jumbotrons.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Jumbotrons from '@/views/base/Jumbotrons'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Jumbotrons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/ListGroups.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import ListGroups from '@/views/base/ListGroups'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(ListGroups)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Navbars.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Navbars from '@/views/base/Navbars'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Navbars)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Navs.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Navs from '@/views/base/Navs'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Navs)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Paginations.spec.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Paginations from '@/views/base/Paginations'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Paginations)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Popovers.spec.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import { mount, shallowMount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Popovers from '@/views/base/Popovers'
+
+Vue.use(CoreuiVue)
+
+describe('Popovers.vue', () => {
+  it('has a name', () => {
+    expect(Popovers.name).toMatch('popovers')
+  })
+  it('has a created hook', () => {
+    expect(typeof Popovers.data).toMatch('function')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Popovers)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Popovers', () => {
+    const wrapper = shallowMount(Popovers)
+    expect(wrapper.is(Popovers)).toBe(true)
+  })
+})

tests/unit/views/base/ProgressBars.spec.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import { mount, shallowMount } from '@vue/test-utils';
+import CoreuiVue from '@coreui/vue'
+import ProgressBars from '@/views/base/ProgressBars'
+
+Vue.use(CoreuiVue)
+
+jest.useFakeTimers()
+
+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')
+  })
+  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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(ProgressBars)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should be destroyed', () => {
+    const wrapper = mount(ProgressBars)
+    wrapper.destroy()
+  })
+  it('should have methods', () => {
+    expect(typeof ProgressBars.methods.clicked  ).toEqual('function')
+    expect(ProgressBars.methods.clicked()).toBeUndefined()
+  })
+})

tests/unit/views/base/Switches.spec.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { mount, shallowMount } from '@vue/test-utils';
+import CoreuiVue from '@coreui/vue'
+import Switches from '@/views/base/Switches'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Switches)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Table.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { mount, shallowMount } from '@vue/test-utils';
+import CoreuiVue from '@coreui/vue'
+import Table from '@/views/base/Table'
+
+Vue.use(CoreuiVue)
+
+describe('Table.vue', () => {
+  it('has a name', () => {
+    expect(Table.name).toMatch('TableWrapper')
+  })
+  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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Table)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Tables.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { mount, shallowMount } from '@vue/test-utils';
+import CoreuiVue from '@coreui/vue'
+import Tables from '@/views/base/Tables'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Tables)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Tabs.spec.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import { mount, shallowMount } from '@vue/test-utils';
+import CoreuiVue from '@coreui/vue'
+import Tabs from '@/views/base/Tabs'
+
+Vue.use(CoreuiVue)
+
+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')
+  })
+  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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Tabs)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/Tooltips.spec.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils';
+import CoreuiVue from '@coreui/vue'
+import Tooltips from '@/views/base/Tooltips'
+
+Vue.use(CoreuiVue)
+
+describe('Tooltips.vue', () => {
+  it('has a name', () => {
+    expect(Tooltips.name).toMatch('tooltips')
+  })
+  it('has a created hook', () => {
+    expect(typeof Tooltips.data).toMatch('function')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Tooltips)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Tooltips', () => {
+    const wrapper = shallowMount(Tooltips)
+    expect(wrapper.is(Tooltips)).toBe(true)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Tooltips)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap

@@ -0,0 +1,188 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumbs.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <div
+      class="c-row"
+    >
+      <div
+        class="c-col"
+      >
+        <div
+          class="c-card"
+        >
+          <!---->
+          <header
+            class="c-card-header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               Bootstrap Breadcrumb
+            </strong>
+             
+            <div
+              class="c-card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </header>
+           
+          <div
+            class="c-card-body"
+          >
+            <!---->
+            <!---->
+            <ol
+              class="c-breadcrumb"
+            >
+              <li
+                class="c-breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class=""
+                  href="#"
+                  target="_self"
+                >
+                  <b>
+                    Admin
+                  </b>
+                </a>
+              </li>
+              <li
+                class="c-breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class=""
+                  href="#"
+                  target="_self"
+                >
+                  Manage
+                </a>
+              </li>
+              <li
+                class="c-breadcrumb-item c-active"
+                role="presentation"
+              >
+                <span
+                  class=""
+                >
+                  Library
+                </span>
+              </li>
+            </ol>
+             
+            <ol
+              class="c-breadcrumb"
+            >
+              <li
+                class="c-breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class=""
+                  href="#"
+                  target="_self"
+                >
+                  Go to dashboard
+                </a>
+              </li>
+              <li
+                class="c-breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class=""
+                  href="#"
+                  target="_self"
+                >
+                  Go to widgets
+                </a>
+              </li>
+              <li
+                class="c-breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class=""
+                  href="http://google.com"
+                  target="_self"
+                >
+                  Go to Google
+                </a>
+              </li>
+              <li
+                class="c-breadcrumb-item c-active"
+                role="presentation"
+              >
+                <span
+                  class=""
+                >
+                  Current page
+                </span>
+              </li>
+            </ol>
+             
+            <ol
+              class="c-breadcrumb"
+            >
+              <li
+                class="c-breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class="c-font-xl"
+                  href="#"
+                  target="_self"
+                >
+                  Added
+                </a>
+              </li>
+              <li
+                class="c-breadcrumb-item"
+                role="presentation"
+              >
+                <a
+                  class="c-font-xl"
+                  href="#"
+                  target="_self"
+                >
+                  Custom
+                </a>
+              </li>
+              <li
+                class="c-breadcrumb-item c-active"
+                role="presentation"
+              >
+                <span
+                  class="c-font-xl c-text-danger"
+                >
+                  Classes
+                </span>
+              </li>
+            </ol>
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/Cards.spec.js.snap

@@ -0,0 +1,865 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cards.vue renders correctly 1`] = `
+<div>
+  <div
+    class="c-row"
+  >
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card"
+      >
+        <!---->
+        <header
+          class="c-card-header"
+        >
+          
+          Card title
+          
+          <div
+            class="c-card-header-actions"
+          >
+            <a
+              class="card-header-action"
+              href="https://coreui.io/vue/docs/3.0/components/CardComponents"
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              <small
+                class="text-muted"
+              >
+                docs
+              </small>
+            </a>
+          </div>
+        </header>
+         
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        </div>
+        <footer
+          class="c-card-footer"
+        >
+          Card Footer
+        </footer>
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card"
+      >
+        <header
+          class="c-card-header"
+        >
+          <i
+            class="cui-check"
+          />
+           Card with icon
+        </header>
+        <div
+          class="c-card-body"
+        >
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card"
+      >
+        <!---->
+        <header
+          class="c-card-header"
+        >
+          
+          Card with switch
+          
+          <label
+            class="c-float-right c-switch c-form-check-label c-switch-info c-switch-sm c-switch-pill"
+          >
+            <input
+              class="c-switch-input c-form-check-input"
+              data-off="Off"
+              data-on="On"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="c-switch-slider"
+            />
+          </label>
+        </header>
+         
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card"
+      >
+        <!---->
+        <header
+          class="c-card-header"
+        >
+          
+          Card with label
+          
+          <span
+            class="c-badge c-float-right c-badge-success"
+          >
+            Success
+          </span>
+        </header>
+         
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card"
+      >
+        <!---->
+        <header
+          class="c-card-header"
+        >
+          
+          Card with label
+          
+          <span
+            class="c-badge c-float-right c-badge-danger c-badge-pill"
+          >
+            42
+          </span>
+        </header>
+         
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          <div>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="c-row"
+  >
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-border-primary"
+        header="Card outline primary"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-border-secondary"
+        header="Card outline secondary"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-border-success"
+        header="Card outline success"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-border-info"
+      >
+        <header
+          class="c-card-header"
+        >
+          Card outline info
+        </header>
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-border-warning"
+      >
+        <header
+          class="c-card-header"
+        >
+          Card outline warning
+        </header>
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-border-danger"
+      >
+        <header
+          class="c-card-header"
+        >
+          Card outline danger
+        </header>
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="c-row"
+  >
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-card-accent-primary"
+        header="Card with primary accent"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-card-accent-secondary"
+        header="Card with secondary accent"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-card-accent-success"
+        header="Card with success accent"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-card-accent-info"
+        header="Card with info accent"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-card-accent-warning"
+        header="Card with warning accent"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-card-accent-danger"
+        header="Card with danger accent"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="c-row"
+  >
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-primary c-text-center"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          <blockquote
+            class="c-card-blockquote"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+            </p>
+             
+            <footer>
+              Someone famous in
+            
+              <cite
+                title="Source Title"
+              >
+                Source Title
+              </cite>
+            </footer>
+          </blockquote>
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-success c-text-center"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          <blockquote
+            class="c-card-blockquote"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+            </p>
+             
+            <footer>
+              Someone famous in
+            
+              <cite
+                title="Source Title"
+              >
+                Source Title
+              </cite>
+            </footer>
+          </blockquote>
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-info c-text-center"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          <blockquote
+            class="c-card-blockquote"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+            </p>
+             
+            <footer>
+              Someone famous in
+            
+              <cite
+                title="Source Title"
+              >
+                Source Title
+              </cite>
+            </footer>
+          </blockquote>
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-warning c-text-center"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          <blockquote
+            class="c-card-blockquote"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+            </p>
+             
+            <footer>
+              Someone famous in
+            
+              <cite
+                title="Source Title"
+              >
+                Source Title
+              </cite>
+            </footer>
+          </blockquote>
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-danger c-text-center"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          <blockquote
+            class="c-card-blockquote"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+            </p>
+             
+            <footer>
+              Someone famous in
+            
+              <cite
+                title="Source Title"
+              >
+                Source Title
+              </cite>
+            </footer>
+          </blockquote>
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-secondary c-text-center"
+      >
+        <!---->
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          <blockquote
+            class="c-card-blockquote"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+            </p>
+             
+            <footer>
+              Someone famous in
+            
+              <cite
+                title="Source Title"
+              >
+                Source Title
+              </cite>
+            </footer>
+          </blockquote>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="c-row"
+  >
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-primary"
+      >
+        <header
+          class="c-card-header"
+        >
+          Card title
+        </header>
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-success"
+      >
+        <header
+          class="c-card-header"
+        >
+          Card title
+        </header>
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-info"
+      >
+        <header
+          class="c-card-header"
+        >
+          Card title
+        </header>
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-warning"
+      >
+        <header
+          class="c-card-header"
+        >
+          Card title
+        </header>
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-danger"
+      >
+        <header
+          class="c-card-header"
+        >
+          Card title
+        </header>
+        <div
+          class="c-card-body"
+        >
+          <!---->
+          <!---->
+          
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+      
+        </div>
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="c-col-sm-6 c-col-md-4"
+    >
+      <div
+        class="c-card c-bg-secondary"
+        name="fade"
+      >
+        <!---->
+        <header
+          class="c-card-header"
+        >
+          
+            Card with header actions
+            
+          <div
+            class="c-card-header-actions"
+          >
+            <a
+              class="c-card-header-action btn-setting"
+              href="#"
+              target="_self"
+            >
+              <i
+                class="cui-settings"
+              />
+            </a>
+             
+            <a
+              class="c-card-header-action btn-minimize"
+              href="#"
+              target="_self"
+            >
+              <i
+                class="cui-chevron-bottom"
+              />
+            </a>
+             
+            <a
+              class="c-card-header-action c-btn-close"
+              href="#"
+              target="_self"
+            >
+              <i
+                class="cui-circle-x"
+              />
+            </a>
+          </div>
+        </header>
+         
+        <div
+          class=""
+          data-v-98918eb0=""
+        >
+          <div
+            class="c-card-body"
+            data-v-98918eb0=""
+          >
+            <!---->
+            <!---->
+            
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/Carousels.spec.js.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Carousels.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <div
+      class="c-row"
+    >
+      <div
+        class="c-col-md-12 c-col-lg-9"
+      >
+        <div
+          class="c-card"
+        >
+          <!---->
+          <header
+            class="c-card-header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Bootstrap Carousel
+            </strong>
+             
+            <div
+              class="c-card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://coreui.io/vue/docs/3.0/components/Carousel"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </header>
+           
+          <div
+            class="c-card-body"
+          >
+            <!---->
+            <!---->
+            <div
+              class="c-carousel c-slide"
+              style="height: 400px;"
+            >
+              <ol
+                class="c-carousel-indicators"
+              >
+                <li
+                  class="c-active"
+                />
+                <li
+                  class=""
+                />
+                <li
+                  class=""
+                />
+              </ol>
+              <div
+                class="c-carousel-inner"
+              >
+                <div
+                  class="c-carousel-item c-active"
+                >
+                  <img
+                    class="c-d-block c-w-100 c-h-100 c-img-fluid c-mx-auto"
+                    src="https://lorempixel.com/1024/480/technics/2/"
+                  />
+                  <div
+                    class="c-carousel-caption"
+                  >
+                    <h3>
+                      First Slide
+                    </h3>
+                    <p>
+                      Nulla vitae elit libero, a pharetra augue mollis interdum.
+                    </p>
+                  </div>
+                </div>
+                 
+                <div
+                  class="c-carousel-item"
+                >
+                  <svg
+                    class="c-d-block c-w-100 c-h-100 c-img-fluid c-mx-auto"
+                    style="background-color: grey;"
+                  />
+                  <div
+                    class="c-carousel-caption"
+                  >
+                    <h3>
+                      Blank page
+                    </h3>
+                    <p>
+                      Nulla vitae elit libero, a pharetra augue mollis interdum.
+                    </p>
+                  </div>
+                </div>
+                 
+                <div
+                  class="c-carousel-item"
+                >
+                  <img
+                    class="c-d-block c-w-100 c-h-100 c-img-fluid c-mx-auto"
+                    src="https://lorempixel.com/1024/480/technics/8/"
+                  />
+                  <div
+                    class="c-carousel-caption"
+                  >
+                    <h3>
+                      
+                    </h3>
+                    <p>
+                      
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <a
+                class="c-carousel-control-prev"
+              >
+                <span
+                  class="c-carousel-control-prev-icon"
+                />
+                <span
+                  class="sr-only"
+                >
+                  Previous
+                </span>
+              </a>
+              <a
+                class="c-carousel-control-next"
+              >
+                <span
+                  class="c-carousel-control-next-icon"
+                />
+                <span
+                  class="sr-only"
+                >
+                  Next
+                </span>
+              </a>
+            </div>
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/Collapses.spec.js.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapses.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <div
+      class="c-row"
+    >
+      <div
+        class="c-col-12 c-col-md-6"
+      >
+        <div
+          class="c-card"
+        >
+          <!---->
+          <header
+            class="c-card-header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Bootstrap Collapse 
+            </strong>
+             
+            <div
+              class="c-card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://coreui.io/vue/docs/3.0/components/Collapse"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </header>
+           
+          <div
+            class="c-card-body"
+          >
+            <!---->
+            <!---->
+            <button
+              class="c-btn c-btn-primary"
+              id="collapse1"
+              type="button"
+            >
+              
+              Toggle Collapse
+            
+            </button>
+             
+            <div
+              class="c-mt-2"
+              data-v-98918eb0=""
+              style="display: none;"
+            >
+              <div
+                class="c-card"
+                data-v-98918eb0=""
+              >
+                <!---->
+                <div
+                  class="c-card-body"
+                  data-v-98918eb0=""
+                >
+                  <!---->
+                  <!---->
+                  <p
+                    class="c-card-text"
+                    data-v-98918eb0=""
+                  >
+                    Collapse contents Here
+                  </p>
+                   
+                  <button
+                    class="c-btn c-btn-secondary c-btn-sm"
+                    data-v-98918eb0=""
+                    id="collapse2"
+                    type="button"
+                  >
+                    
+                  Toggle Inner Collapse
+                
+                  </button>
+                   
+                  <div
+                    class="c-mt-2"
+                    data-v-98918eb0=""
+                    style="display: none;"
+                  >
+                    <div
+                      class="c-card"
+                      data-v-98918eb0=""
+                    >
+                      <!---->
+                      <div
+                        class="c-card-body"
+                        data-v-98918eb0=""
+                      >
+                        <!---->
+                        <!---->
+                        Hello!
+                      </div>
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div>
+            </div>
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap

@@ -0,0 +1,224 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Jumbotrons.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <crow-stub>
+      <ccol-stub
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Bootstrap Jumbotron 
+            </strong>
+             
+            <div
+              class="c-card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <cjumbotron-stub
+              header="Bootstrap 4"
+              lead="Bootstrap 4 Components for Vue.js 2"
+              tag="div"
+            >
+              <p>
+                For more information visit website
+              </p>
+               
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                href="#"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                More Info
+              </cbutton-stub>
+            </cjumbotron-stub>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+       
+      <ccol-stub
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Jumbotron 
+            </strong>
+             
+            <small>
+              with slots
+            </small>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <cjumbotron-stub
+              header="Bootstrap 4"
+              lead=""
+              tag="div"
+            >
+              <p
+                class="c-lead"
+                slot="lead"
+              >
+                
+                This is a simple hero unit, a simple jumbotron-style component for
+                calling extra attention to featured content or information.
+              
+              </p>
+               
+              <hr
+                class="c-my-4"
+              />
+               
+              <p>
+                
+                It uses utility classes for typography and spacing to space content
+                out within the larger container.
+              
+              </p>
+               
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                href="#"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                Do Something
+              </cbutton-stub>
+               
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                href="#"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="success"
+              >
+                Do Something Else
+              </cbutton-stub>
+            </cjumbotron-stub>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+    </crow-stub>
+     
+    <crow-stub>
+      <ccol-stub
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Jumbotron 
+            </strong>
+             
+            <small>
+              variants
+            </small>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <cjumbotron-stub
+              bordervariant="dark"
+              header="Bootstrap 4"
+              tag="div"
+              textvariant="white"
+              variant="info"
+            >
+              <p
+                class="c-lead"
+                slot="lead"
+              >
+                
+                This is a simple hero unit, a simple jumbotron-style component for
+                calling extra attention to featured content or information.
+              
+              </p>
+               
+              <hr
+                class="c-my-4"
+              />
+               
+              <p>
+                
+                It uses utility classes for typography and spacing to space content
+                out within the larger container.
+              
+              </p>
+            </cjumbotron-stub>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+    </crow-stub>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/Navbars.spec.js.snap

@@ -0,0 +1,572 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navbars.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Navbar 
+        </strong>
+         
+        <div
+          class="c-card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Navbar"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnavbar-stub
+          tag="nav"
+          toggleable="md"
+          variant="info"
+        >
+          <cnavbartoggle-stub />
+           
+          <cnavbarbrand-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            href="#"
+            routertag="a"
+            target="_self"
+          >
+            NavBar
+          </cnavbarbrand-stub>
+           
+          <ccollapse-stub
+            duration="400"
+            navbar="true"
+            transition="ease-in-out"
+          >
+            <cnavbarnav-stub
+              tag="ul"
+            >
+              <cnavitem-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                href="#"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                Link
+              </cnavitem-stub>
+               
+              <cnavitem-stub
+                activeclass="c-active"
+                disabled="true"
+                event="click"
+                exactactiveclass="c-active"
+                href="#"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                Disabled
+              </cnavitem-stub>
+            </cnavbarnav-stub>
+             
+            <cnavbarnav-stub
+              class="c-ml-auto"
+              tag="ul"
+            >
+              <cform-stub
+                inline="true"
+              >
+                <cforminput-stub
+                  class="c-mr-sm-2"
+                  lazy="400"
+                  placeholder="Search"
+                  size="sm"
+                  type="text"
+                />
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  class="c-my-2 c-my-sm-0"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  size="sm"
+                  target="_self"
+                  type="button"
+                  variant="light"
+                >
+                  
+                  Search
+                
+                </cbutton-stub>
+              </cform-stub>
+               
+              <cdropdown-stub
+                buttonhtml="Lang"
+                nav="true"
+                placement="bottom-end"
+                variant="primary"
+              >
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  EN
+                </cdropdownitem-stub>
+                 
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  ES
+                </cdropdownitem-stub>
+                 
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  RU
+                </cdropdownitem-stub>
+                 
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  FA
+                </cdropdownitem-stub>
+              </cdropdown-stub>
+               
+              <cdropdown-stub
+                buttonhtml=<em>User</em>
+                nav="true"
+                placement="bottom-end"
+                variant="primary"
+              >
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Profile
+                </cdropdownitem-stub>
+                 
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Signout
+                </cdropdownitem-stub>
+              </cdropdown-stub>
+            </cnavbarnav-stub>
+          </ccollapse-stub>
+        </cnavbar-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          brand
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnavbar-stub
+          light="true"
+          tag="nav"
+          variant="faded"
+        >
+          <cnavbarbrand-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            href="#"
+            routertag="a"
+            target="_self"
+          >
+            <img
+              alt="CoreuiVue"
+              class="c-d-inline-block c-align-top"
+              src="https://placekitten.com/g/30/30"
+            />
+            
+            CoreuiVue
+          
+          </cnavbarbrand-stub>
+        </cnavbar-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          text
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnavbar-stub
+          light="true"
+          tag="nav"
+          toggleable="sm"
+          variant="light"
+        >
+          <cnavbartoggle-stub />
+           
+          <cnavbarbrand-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            target="_self"
+          >
+            CoreuiVue
+          </cnavbarbrand-stub>
+           
+          <ccollapse-stub
+            duration="400"
+            navbar="true"
+            transition="ease-in-out"
+          >
+            <cnavbarnav-stub
+              tag="ul"
+            >
+              <span
+                class="c-navbar-text"
+              >
+                Navbar text
+              </span>
+            </cnavbarnav-stub>
+          </ccollapse-stub>
+        </cnavbar-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          dropdown
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnavbar-stub
+          tag="nav"
+          toggleable="sm"
+          variant="primary"
+        >
+          <cnavbartoggle-stub />
+           
+          <ccollapse-stub
+            duration="400"
+            navbar="true"
+            transition="ease-in-out"
+          >
+            <cnavbarnav-stub
+              tag="ul"
+            >
+              <cnavitem-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                href="#"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                Home
+              </cnavitem-stub>
+               
+              <cnavitem-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                href="#"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                Link
+              </cnavitem-stub>
+               
+              <cdropdown-stub
+                buttonhtml="Lang"
+                nav="true"
+                right=""
+                variant="primary"
+              >
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  EN
+                </cdropdownitem-stub>
+                 
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  ES
+                </cdropdownitem-stub>
+                 
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  RU
+                </cdropdownitem-stub>
+                 
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  FA
+                </cdropdownitem-stub>
+              </cdropdown-stub>
+               
+              <cdropdown-stub
+                buttonhtml="User"
+                nav="true"
+                right=""
+                variant="primary"
+              >
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Account
+                </cdropdownitem-stub>
+                 
+                <cdropdownitem-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                >
+                  Settings
+                </cdropdownitem-stub>
+              </cdropdown-stub>
+            </cnavbarnav-stub>
+          </ccollapse-stub>
+        </cnavbar-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          form
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnavbar-stub
+          light="true"
+          tag="nav"
+          variant="light"
+        >
+          <cform-stub
+            inline="true"
+          >
+            <cforminput-stub
+              class="c-mr-sm-2"
+              lazy="400"
+              placeholder="Search"
+              size="sm"
+              type="text"
+            />
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-my-2 c-my-sm-0"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="submit"
+              variant="outline-success"
+            >
+              Search
+            </cbutton-stub>
+          </cform-stub>
+        </cnavbar-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Navbar 
+        </strong>
+         
+        <small>
+          input group
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnavbar-stub
+          light="true"
+          tag="nav"
+          variant="light"
+        >
+          <cform-stub
+            inline="true"
+          >
+            <cforminput-stub
+              class="c-mr-sm-2"
+              lazy="400"
+              placeholder="Username"
+              type="text"
+            />
+          </cform-stub>
+        </cnavbar-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/Navs.spec.js.snap

@@ -0,0 +1,705 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navs.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+        <strong>
+           Bootstrap Navs
+        </strong>
+         
+        <div
+          class="c-card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Nav"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnav-stub>
+          <cnavitem-stub
+            active="true"
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Active
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            title="Link"
+            variant="primary"
+          />
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Another Link
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            disabled="true"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Disabled
+          </cnavitem-stub>
+        </cnav-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Navs 
+        </strong>
+         
+        <small>
+          icons
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnav-stub>
+          <cnavitem-stub
+            active="true"
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            <i
+              class="cui-basket-loaded"
+            />
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            
+            Link
+          
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            
+            Another Link
+          
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            disabled="true"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Disabled
+          </cnavitem-stub>
+        </cnav-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Navs 
+        </strong>
+         
+        <small>
+          tab style
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnav-stub
+          tabs="true"
+        >
+          <cnavitem-stub
+            active="true"
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            
+            Active
+          
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            
+            Link
+          
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            
+            Another Link
+          
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            disabled="true"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Disabled
+          </cnavitem-stub>
+        </cnav-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Navs 
+        </strong>
+         
+        <small>
+          pill style
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnav-stub
+          pills="true"
+        >
+          <cnavitem-stub
+            active="true"
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Active
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Link
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Another Link
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            disabled="true"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Disabled
+          </cnavitem-stub>
+        </cnav-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Navs 
+        </strong>
+         
+        <small>
+          fill tabs
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnav-stub
+          fill="true"
+          tabs="true"
+        >
+          <cnavitem-stub
+            active="true"
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Active
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Link
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Link with a long name 
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            disabled="true"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Disabled
+          </cnavitem-stub>
+        </cnav-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Navs 
+        </strong>
+         
+        <small>
+          justified tabs
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnav-stub
+          justified="true"
+          tabs="true"
+        >
+          <cnavitem-stub
+            active="true"
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Active
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Link
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Link with a long name 
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            disabled="true"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Disabled
+          </cnavitem-stub>
+        </cnav-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Navs 
+        </strong>
+         
+        <small>
+          dropdown support
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cnav-stub
+          pills="true"
+        >
+          <cnavitem-stub
+            active="true"
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Active
+          </cnavitem-stub>
+           
+          <cnavitem-stub
+            activeclass="c-active"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            tag="span"
+            target="_self"
+            variant="primary"
+          >
+            Link
+          </cnavitem-stub>
+           
+          <cdropdown-stub
+            button-content="Dropdown"
+            buttonhtml="Dropdown"
+            id="nav7_ddown"
+            nav="true"
+            placement="bottom-end"
+            variant="primary"
+          >
+            <cdropdownitem-stub
+              activeclass="c-active"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+            >
+              one
+            </cdropdownitem-stub>
+             
+            <cdropdownitem-stub
+              activeclass="c-active"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+            >
+              two
+            </cdropdownitem-stub>
+             
+            <cdropdowndivider-stub
+              tag="div"
+            />
+             
+            <cdropdownitem-stub
+              activeclass="c-active"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+            >
+              three
+            </cdropdownitem-stub>
+          </cdropdown-stub>
+        </cnav-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Navs 
+        </strong>
+         
+        <small>
+          vertical variation
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <crow-stub>
+          <ccol-stub
+            class="c-m-0"
+            col="3"
+            tag="div"
+          >
+            <cnav-stub
+              pills="true"
+              vertical="true"
+            >
+              <cnavitem-stub
+                active="true"
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                Active
+              </cnavitem-stub>
+               
+              <cnavitem-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                Link
+              </cnavitem-stub>
+               
+              <cnavitem-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                Another Link
+              </cnavitem-stub>
+               
+              <cnavitem-stub
+                activeclass="c-active"
+                disabled="true"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                tag="span"
+                target="_self"
+                variant="primary"
+              >
+                Disabled
+              </cnavitem-stub>
+            </cnav-stub>
+          </ccol-stub>
+        </crow-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/Paginations.spec.js.snap

@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paginations.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Responsive bootstrap Pagination
+        </strong>
+         
+        <div
+          class="c-card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Pagination"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <h6>
+          Default
+        </h6>
+         
+        <cpagination-stub
+          activepage="3"
+          align="start"
+          firstbuttonhtml="&laquo;"
+          lastbuttonhtml="&raquo;"
+          limit="5"
+          nextbuttonhtml="&rsaquo;"
+          pages="10"
+          previousbuttonhtml="&lsaquo;"
+          responsive="true"
+          size="md"
+        />
+         
+        <br />
+         
+        <h6>
+          Small
+        </h6>
+         
+        <cpagination-stub
+          activepage="3"
+          align="start"
+          firstbuttonhtml="&laquo;"
+          lastbuttonhtml="&raquo;"
+          limit="5"
+          nextbuttonhtml="&rsaquo;"
+          pages="10"
+          previousbuttonhtml="&lsaquo;"
+          size="sm"
+        />
+         
+        <br />
+         
+        <div>
+          <h6>
+            Large
+          </h6>
+           
+          <cpagination-stub
+            activepage="3"
+            align="start"
+            firstbuttonhtml="&laquo;"
+            lastbuttonhtml="&raquo;"
+            limit="5"
+            nextbuttonhtml="&rsaquo;"
+            pages="10"
+            previousbuttonhtml="&lsaquo;"
+            responsive="true"
+            size="lg"
+          />
+           
+          <br />
+        </div>
+         
+        <div>
+          currentPage: 3
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Pagination 
+        </strong>
+         
+        <small>
+          alignment
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <h6>
+          Left alignment (default)
+        </h6>
+         
+        <cpagination-stub
+          activepage="3"
+          align="start"
+          firstbuttonhtml="&laquo;"
+          lastbuttonhtml="&raquo;"
+          limit="5"
+          nextbuttonhtml="&rsaquo;"
+          pages="10"
+          previousbuttonhtml="&lsaquo;"
+          size="md"
+        />
+         
+        <br />
+         
+        <h6>
+          Center alignment
+        </h6>
+         
+        <cpagination-stub
+          activepage="3"
+          align="center"
+          firstbuttonhtml="&laquo;"
+          lastbuttonhtml="&raquo;"
+          limit="5"
+          nextbuttonhtml="&rsaquo;"
+          pages="10"
+          previousbuttonhtml="&lsaquo;"
+          size="md"
+        />
+         
+        <br />
+         
+        <h6>
+          Right (end) alignment
+        </h6>
+         
+        <cpagination-stub
+          activepage="3"
+          align="end"
+          firstbuttonhtml="&laquo;"
+          lastbuttonhtml="&raquo;"
+          limit="5"
+          nextbuttonhtml="&rsaquo;"
+          pages="10"
+          previousbuttonhtml="&lsaquo;"
+          size="md"
+        />
+         
+        <br />
+         
+        <div>
+          currentPage: 3
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap

@@ -0,0 +1,803 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBars.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Progress
+        </strong>
+         
+        <div
+          class="c-card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Progress"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cprogress-stub
+          animated="true"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="73"
+          variant="primary"
+        />
+         
+        <cprogress-stub
+          class="c-mt-1"
+          max="100"
+          precision="0"
+          showvalue="true"
+          variant="primary"
+        >
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="43.8"
+            variant="success"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="18.25"
+            variant="warning"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="10.95"
+            variant="danger"
+          />
+        </cprogress-stub>
+         
+        <cbutton-stub
+          activeclass="c-active"
+          class="c-mt-4"
+          event="click"
+          exactactiveclass="c-active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="secondary"
+        >
+          
+          Click me to animate progress bars
+        
+        </cbutton-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Progress 
+        </strong>
+        <small>
+          labels
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <h6>
+          No label
+        </h6>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="50"
+          precision="0"
+          value="33.333333333"
+          variant="primary"
+        />
+         
+        <h6>
+          Value label
+        </h6>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="50"
+          precision="0"
+          showvalue="true"
+          value="33.333333333"
+          variant="primary"
+        />
+         
+        <h6>
+          Progress label
+        </h6>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="50"
+          precision="0"
+          showprogress="true"
+          value="33.333333333"
+          variant="primary"
+        />
+         
+        <h6>
+          Value label with precision
+        </h6>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="50"
+          precision="2"
+          showvalue="true"
+          value="33.333333333"
+          variant="primary"
+        />
+         
+        <h6>
+          Progress label with precision
+        </h6>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="50"
+          precision="2"
+          showprogress="true"
+          value="33.333333333"
+          variant="primary"
+        />
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Progress 
+        </strong>
+         
+        <small>
+          width
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <h6>
+          Default width
+        </h6>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="100"
+          precision="0"
+          value="75"
+          variant="primary"
+        />
+         
+        <h6>
+          Custom widths
+        </h6>
+         
+        <cprogress-stub
+          class="c-w-75 c-mb-2"
+          max="100"
+          precision="0"
+          value="75"
+          variant="primary"
+        />
+         
+        <cprogress-stub
+          class="c-w-50 c-mb-2"
+          max="100"
+          precision="0"
+          value="75"
+          variant="primary"
+        />
+         
+        <cprogress-stub
+          class="c-w-25"
+          max="100"
+          precision="0"
+          value="75"
+          variant="primary"
+        />
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Progress 
+        </strong>
+         
+        <small>
+          height
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <h6>
+          Default height
+        </h6>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="75"
+          variant="primary"
+        />
+         
+        <h6>
+          Custom heights
+        </h6>
+         
+        <cprogress-stub
+          class="c-mb-2"
+          height="2rem"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="75"
+          variant="primary"
+        />
+         
+        <cprogress-stub
+          class="c-mb-2"
+          height="20px"
+          max="100"
+          precision="0"
+          showprogress="true"
+          value="75"
+          variant="primary"
+        />
+         
+        <cprogress-stub
+          height="2px"
+          max="100"
+          precision="0"
+          value="75"
+          variant="primary"
+        />
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Progress 
+        </strong>
+         
+        <small>
+          variants
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div
+          class="c-row c-mb-1"
+        >
+          <div
+            class="c-col-sm-2"
+          >
+            success:
+          </div>
+           
+          <div
+            class="c-col-sm-10 c-pt-1"
+          >
+            <cprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="success"
+            />
+          </div>
+        </div>
+        <div
+          class="c-row c-mb-1"
+        >
+          <div
+            class="c-col-sm-2"
+          >
+            info:
+          </div>
+           
+          <div
+            class="c-col-sm-10 c-pt-1"
+          >
+            <cprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="info"
+            />
+          </div>
+        </div>
+        <div
+          class="c-row c-mb-1"
+        >
+          <div
+            class="c-col-sm-2"
+          >
+            warning:
+          </div>
+           
+          <div
+            class="c-col-sm-10 c-pt-1"
+          >
+            <cprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="warning"
+            />
+          </div>
+        </div>
+        <div
+          class="c-row c-mb-1"
+        >
+          <div
+            class="c-col-sm-2"
+          >
+            danger:
+          </div>
+           
+          <div
+            class="c-col-sm-10 c-pt-1"
+          >
+            <cprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="danger"
+            />
+          </div>
+        </div>
+        <div
+          class="c-row c-mb-1"
+        >
+          <div
+            class="c-col-sm-2"
+          >
+            primary:
+          </div>
+           
+          <div
+            class="c-col-sm-10 c-pt-1"
+          >
+            <cprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="primary"
+            />
+          </div>
+        </div>
+        <div
+          class="c-row c-mb-1"
+        >
+          <div
+            class="c-col-sm-2"
+          >
+            secondary:
+          </div>
+           
+          <div
+            class="c-col-sm-10 c-pt-1"
+          >
+            <cprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="secondary"
+            />
+          </div>
+        </div>
+        <div
+          class="c-row c-mb-1"
+        >
+          <div
+            class="c-col-sm-2"
+          >
+            dark:
+          </div>
+           
+          <div
+            class="c-col-sm-10 c-pt-1"
+          >
+            <cprogress-stub
+              max="100"
+              precision="0"
+              value="75"
+              variant="dark"
+            />
+          </div>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Progress 
+        </strong>
+         
+        <small>
+          striped
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cprogress-stub
+          class="c-mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="25"
+          variant="success"
+        />
+         
+        <cprogress-stub
+          class="c-mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="50"
+          variant="info"
+        />
+         
+        <cprogress-stub
+          class="c-mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="75"
+          variant="warning"
+        />
+         
+        <cprogress-stub
+          class="c-mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="100"
+          variant="danger"
+        />
+         
+        <cbutton-stub
+          activeclass="c-active"
+          event="click"
+          exactactiveclass="c-active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="secondary"
+        >
+          
+          Remove Striped
+        
+        </cbutton-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Progress 
+        </strong>
+         
+        <small>
+          animated
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cprogress-stub
+          animated="true"
+          class="c-mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="25"
+          variant="success"
+        />
+         
+        <cprogress-stub
+          animated="true"
+          class="c-mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="50"
+          variant="info"
+        />
+         
+        <cprogress-stub
+          animated="true"
+          class="c-mb-2"
+          max="100"
+          precision="0"
+          striped="true"
+          value="75"
+          variant="warning"
+        />
+         
+        <cprogress-stub
+          animated="true"
+          class="c-mb-3"
+          max="100"
+          precision="0"
+          value="100"
+          variant="danger"
+        />
+         
+        <cbutton-stub
+          activeclass="c-active"
+          event="click"
+          exactactiveclass="c-active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="secondary"
+        >
+          
+          Stop Animation
+        
+        </cbutton-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Progress 
+        </strong>
+         
+        <small>
+          multiple bars
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cprogress-stub
+          class="c-mb-3"
+          max="100"
+          precision="0"
+          variant="primary"
+        >
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="15"
+            variant="primary"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="30"
+            variant="success"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="20"
+            variant="info"
+          />
+        </cprogress-stub>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="100"
+          precision="0"
+          showprogress="true"
+          variant="primary"
+        >
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="15"
+            variant="primary"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="30"
+            variant="success"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="20"
+            variant="info"
+          />
+        </cprogress-stub>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="100"
+          precision="0"
+          showvalue="true"
+          striped="true"
+          variant="primary"
+        >
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="15"
+            variant="primary"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="30"
+            variant="success"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            value="20"
+            variant="info"
+          />
+        </cprogress-stub>
+         
+        <cprogress-stub
+          class="c-mb-3"
+          max="100"
+          precision="0"
+          variant="primary"
+        >
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            showprogress="true"
+            value="15"
+            variant="primary"
+          />
+           
+          <cprogressbar-stub
+            animated="true"
+            max="100"
+            precision="0"
+            showprogress="true"
+            value="30"
+            variant="success"
+          />
+           
+          <cprogressbar-stub
+            max="100"
+            precision="0"
+            showprogress="true"
+            striped="true"
+            value="20"
+            variant="info"
+          />
+        </cprogress-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+  </div>
+</div>
+`;

tests/unit/views/base/__snapshots__/Table.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table.vue renders correctly 1`] = `
+<ccard-stub
+  bodywrapper="true"
+  header="Table"
+  subtitletag="h6"
+  titletag="h4"
+>
+  <ctable-stub
+    defaultsorter="[object Object]"
+    fields="username,registered,role,status"
+    pagination="true"
+    perpage="5"
+  />
+</ccard-stub>
+`;

tests/unit/views/base/__snapshots__/Tables.spec.js.snap

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tables.vue renders correctly 1`] = `
+<div>
+  <crow-stub>
+    <ccol-stub
+      sm="12"
+      tag="div"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          
+          CTable component functionality presentation
+          
+          <div
+            class="c-card-header-actions"
+          >
+            <a
+              class="card-header-action"
+              href="https://coreui.io/vue/docs/3.0/components/Table"
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              <small
+                class="text-muted"
+              >
+                docs
+              </small>
+            </a>
+          </div>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ctable-stub
+            dark-header=""
+            default-filter="2012"
+            default-sorters="username,asc"
+            defaultcolumnfilter="[object Object]"
+            defaultsorter="[object Object]"
+            fields="[object Object],registered,[object Object],[object Object],[object Object]"
+            filterrow="true"
+            footer="true"
+            hover="true"
+            indexcolumn="true"
+            items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+            optionsrow="true"
+            pagination="true"
+            perpage="6"
+          />
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      lg="6"
+      tag="div"
+    >
+      <ctablewrapper-stub
+        caption=<i class='fa fa-align-justify'></i> Simple Table
+        fields="username,registered,role,status"
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+      />
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="6"
+      tag="div"
+    >
+      <ctablewrapper-stub
+        caption=<i class='fa fa-align-justify'></i> Striped Table
+        fields="username,registered,role,status"
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        striped="true"
+      />
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      lg="6"
+      tag="div"
+    >
+      <ctablewrapper-stub
+        caption=<i class='fa fa-align-justify'></i> Condensed Table
+        fields="username,registered,role,status"
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        small="true"
+      />
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="6"
+      tag="div"
+    >
+      <ctablewrapper-stub
+        bordered="true"
+        caption=<i class='fa fa-align-justify'></i> Bordered Table
+        fields="username,registered,role,status"
+        fixed="true"
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+      />
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      sm="12"
+      tag="div"
+    >
+      <ctablewrapper-stub
+        bordered="true"
+        caption=<i class='fa fa-align-justify'></i> Combined All Table
+        fields="username,registered,role,status"
+        fixed="true"
+        hover="true"
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        small="true"
+        striped="true"
+      />
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      sm="12"
+      tag="div"
+    >
+      <ctablewrapper-stub
+        bordered="true"
+        caption=<i class='fa fa-align-justify'></i> Combined All Table
+        dark="true"
+        fields="username,registered,role,status"
+        fixed="true"
+        hover="true"
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        small="true"
+        striped="true"
+      />
+    </ccol-stub>
+  </crow-stub>
+</div>
+`;

tests/unit/views/base/__snapshots__/Tabs.spec.js.snap

@@ -0,0 +1,318 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs.vue renders correctly 1`] = `
+<div>
+  <crow-stub>
+    <ccol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          
+          Tabs
+          
+          <div
+            class="c-card-header-actions"
+          >
+            <a
+              class="card-header-action"
+              href="https://coreui.io/vue/docs/3.0/components/Tabs"
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              <small
+                class="text-muted"
+              >
+                docs
+              </small>
+            </a>
+          </div>
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ctabs-stub
+            tabs="true"
+          >
+            <ctab-stub
+              active="true"
+              titlehtml="Home"
+            >
+              
+              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub
+              titlehtml="Profile"
+            >
+              
+              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub
+              disabled="true"
+              titlehtml="Disabled"
+            >
+              
+              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+          </ctabs-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          
+          Tabs
+        
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ctabs-stub
+            pills="true"
+            tabs="true"
+          >
+            <ctab-stub
+              active="true"
+              titlehtml="Home"
+            >
+              
+              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub
+              titlehtml="Profile"
+            >
+              
+              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub
+              disabled="true"
+              titlehtml="Disabled"
+            >
+              
+              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+          </ctabs-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          
+          Tabs with icons
+        
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ctabs-stub
+            tabs="true"
+          >
+            <ctab-stub
+              active="true"
+            >
+              <template>
+                <i
+                  class="cui-calculator"
+                />
+              </template>
+              
+              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub>
+              <template>
+                <i
+                  class="cui-basket-loaded"
+                />
+              </template>
+              
+              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub>
+              <template>
+                <i
+                  class="cui-pie-chart"
+                />
+              </template>
+              
+              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+          </ctabs-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          
+          Tabs vertical
+        
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ctabs-stub
+            pills="true"
+            tabs="true"
+            vertical="true"
+          >
+            <ctab-stub
+              active="true"
+            >
+              <template>
+                <i
+                  class="cui-calculator"
+                />
+                 Calculator
+              
+              </template>
+              
+              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub>
+              <template>
+                <i
+                  class="cui-basket-loaded"
+                />
+                 Shopping cart
+              
+              </template>
+              
+              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+             
+            <ctab-stub>
+              <template>
+                <i
+                  class="cui-pie-chart"
+                />
+                 Charts
+              
+              </template>
+              
+              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            
+            </ctab-stub>
+          </ctabs-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+</div>
+`;

tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap

@@ -0,0 +1,389 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltips.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Tooltips 
+        </strong>
+         
+        <small>
+          <code>
+            v-c-tooltip
+          </code>
+           directive
+        </small>
+         
+        <div
+          class="c-card-header-actions"
+        >
+          <a
+            class="card-header-action"
+            href="https://coreui.io/vue/docs/3.0/components/Tooltip"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <small
+              class="text-muted"
+            >
+              docs
+            </small>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <crow-stub>
+          <ccol-stub
+            col="4"
+            tag="div"
+          >
+            <div
+              class="c-text-center c-my-3"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                
+                Hover Me
+              
+              </cbutton-stub>
+            </div>
+          </ccol-stub>
+           
+          <ccol-stub
+            col="4"
+            tag="div"
+          >
+            <div
+              class="c-text-center c-my-3"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                
+                Hover me
+              
+              </cbutton-stub>
+            </div>
+          </ccol-stub>
+           
+          <ccol-stub
+            col="4"
+            tag="div"
+          >
+            <div
+              class="c-text-center c-my-3"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="secondary"
+              >
+                
+                Click me
+              
+              </cbutton-stub>
+            </div>
+          </ccol-stub>
+        </crow-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Tooltips 
+        </strong>
+         
+        <small>
+          placement
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div
+          class="c-my-3"
+        >
+          <crow-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                top-start
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                top
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                top-end
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                bottom-start
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                bottom
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                bottom-end
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                right-start
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                right
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                right-end
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                left-start
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                left
+              
+              </cbutton-stub>
+            </ccol-stub>
+            <ccol-stub
+              class="c-py-4 c-text-center"
+              md="4"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="primary"
+              >
+                
+                left-end
+              
+              </cbutton-stub>
+            </ccol-stub>
+          </crow-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </div>
+</div>
+`;

tests/unit/views/buttons/BrandButtons.spec.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import BrandButtons from '@/views/buttons/BrandButtons'
+import { CIconPlugin } from '@coreui/icons/vue'
+import { iconsSet } from '@/assets/icons/icons.js'
+
+
+Vue.use(CIconPlugin, iconsSet)
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = mount(BrandButtons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/buttons/ButtonDropdowns.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Dropdowns from '@/views/buttons/Dropdowns'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = mount(Dropdowns)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/buttons/ButtonGroups.spec.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import ButtonGroups from '@/views/buttons/ButtonGroups'
+
+Vue.use(CoreuiVue)
+
+describe('ButtonGroups.vue', () => {
+  const wrapper = shallowMount(ButtonGroups)
+  it('has a name', () => {
+    expect(ButtonGroups.name).toMatch('button-groups')
+  })
+  it('is Vue instance', () => {
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is ButtonGroups', () => {
+    expect(wrapper.is(ButtonGroups)).toBe(true)
+  })
+  test('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/buttons/StandardButtons.spec.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import StandardButtons from '@/views/buttons/StandardButtons'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(StandardButtons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap

@@ -0,0 +1,922 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroups.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <crow-stub>
+      <ccol-stub
+        col="12"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Bootstrap button group
+            </strong>
+             
+            <div
+              class="c-card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <div>
+              <cbuttongroup-stub>
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  One
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Two
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Three
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Four
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  class="c-d-sm-down-none"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Five
+                </cbutton-stub>
+              </cbuttongroup-stub>
+               
+              <br />
+              <br />
+               
+              <cbuttongroup-stub>
+                <cbutton-stub
+                  activeclass="c-active"
+                  class="c-d-sm-down-none"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="success"
+                >
+                  Success
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="info"
+                >
+                  Info
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="warning"
+                >
+                  Warn
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  class="c-d-sm-down-none"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="primary"
+                >
+                  Primary
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="danger"
+                >
+                  Danger
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="link"
+                >
+                  Link
+                </cbutton-stub>
+              </cbuttongroup-stub>
+            </div>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+       
+      <ccol-stub
+        col="12"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Button group 
+            </strong>
+            sizing
+          
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <div>
+              <cbuttongroup-stub>
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Left
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Middle
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Right
+                </cbutton-stub>
+              </cbuttongroup-stub>
+               
+              <br />
+              <br />
+               
+              <cbuttongroup-stub
+                size="sm"
+              >
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Left
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Middle
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Right
+                </cbutton-stub>
+              </cbuttongroup-stub>
+               
+              <br />
+              <br />
+               
+              <cbuttongroup-stub
+                size="lg"
+              >
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Left
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Middle
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Right
+                </cbutton-stub>
+              </cbuttongroup-stub>
+            </div>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+       
+      <ccol-stub
+        col="12"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+            <strong>
+               Button group 
+            </strong>
+            dropdown support
+          
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <div>
+              <cbuttongroup-stub>
+                <cbutton-stub
+                  activeclass="c-active"
+                  class="c-d-sm-down-none"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Button 1
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  class="c-d-sm-down-none"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Button 2
+                </cbutton-stub>
+                 
+                <cdropdown-stub
+                  buttonhtml="Dropdown"
+                  right=""
+                  text="Menu"
+                  variant="success"
+                >
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 1
+                  </cdropdownitem-stub>
+                   
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 2
+                  </cdropdownitem-stub>
+                   
+                  <cdropdowndivider-stub
+                    tag="div"
+                  />
+                   
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 3
+                  </cdropdownitem-stub>
+                </cdropdown-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  class="c-d-sm-down-none"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Button 3
+                </cbutton-stub>
+                 
+                <cdropdown-stub
+                  buttonhtml="Dropdown"
+                  right=""
+                  split="true"
+                  text="Split Menu"
+                  variant="info"
+                >
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 1
+                  </cdropdownitem-stub>
+                   
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 2
+                  </cdropdownitem-stub>
+                   
+                  <cdropdowndivider-stub
+                    tag="div"
+                  />
+                   
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 3
+                  </cdropdownitem-stub>
+                </cdropdown-stub>
+              </cbuttongroup-stub>
+            </div>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+       
+      <ccol-stub
+        col="12"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Button group 
+            </strong>
+            vertical variation
+          
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <div>
+              <cbuttongroup-stub
+                vertical="true"
+              >
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Top
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Middle
+                </cbutton-stub>
+                 
+                <cbutton-stub
+                  activeclass="c-active"
+                  event="click"
+                  exactactiveclass="c-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                  variant="secondary"
+                >
+                  Bottom
+                </cbutton-stub>
+              </cbuttongroup-stub>
+            </div>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+       
+      <ccol-stub
+        col="12"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Button toolbar 
+            </strong>
+             
+            <small>
+              with button groups
+            </small>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <div>
+              <cbuttontoolbar-stub
+                aria-label="Toolbar with button groups"
+              >
+                <cbuttongroup-stub
+                  class="c-mx-1"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    class="c-d-sm-down-none"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    «
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    ‹
+                  </cbutton-stub>
+                </cbuttongroup-stub>
+                 
+                <cbuttongroup-stub
+                  class="c-mx-1"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    class="c-d-sm-down-none"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Edit
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Undo
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Redo
+                  </cbutton-stub>
+                </cbuttongroup-stub>
+                 
+                <cbuttongroup-stub
+                  class="c-mx-1"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    ›
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    class="c-d-sm-down-none"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    »
+                  </cbutton-stub>
+                </cbuttongroup-stub>
+              </cbuttontoolbar-stub>
+            </div>
+             
+            <hr
+              class="c-d-sm-down-none"
+            />
+             
+            <div>
+              <cbuttontoolbar-stub
+                aria-label="Toolbar with button groups and input groups"
+                class="c-d-sm-down-none"
+              >
+                <cbuttongroup-stub
+                  class="c-mx-1"
+                  size="sm"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    New
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Edit
+                  </cbutton-stub>
+                </cbuttongroup-stub>
+                 
+                <cforminput-stub
+                  appendhtml=".00"
+                  class="c-mb-0 c-w-25 c-mx-1"
+                  lazy="400"
+                  prependhtml="$"
+                  size="sm"
+                  type="text"
+                  value="100"
+                />
+                 
+                <cformselect-stub
+                  class="c-mb-0 c-w-25 c-mx-1"
+                  custom="true"
+                  options="Large,Medium,Small"
+                  prependhtml="Size"
+                  size="sm"
+                  value="Medium"
+                />
+                 
+                <cbuttongroup-stub
+                  class="c-mx-1"
+                  size="sm"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Save
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Cancel
+                  </cbutton-stub>
+                </cbuttongroup-stub>
+              </cbuttontoolbar-stub>
+            </div>
+             
+            <hr />
+             
+            <div>
+              <cbuttontoolbar-stub
+                aria-label="Toolbar with button groups and dropdown menu"
+              >
+                <cbuttongroup-stub
+                  class="c-mx-1 c-d-sm-down-none"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    New
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Edit
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Undo
+                  </cbutton-stub>
+                </cbuttongroup-stub>
+                 
+                <cdropdown-stub
+                  button-content="Menu"
+                  buttonhtml="Dropdown"
+                  class="c-mx-1"
+                  placement="bottom-end"
+                  variant="secondary"
+                >
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 1
+                  </cdropdownitem-stub>
+                   
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 2
+                  </cdropdownitem-stub>
+                   
+                  <cdropdownitem-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                  >
+                    Item 3
+                  </cdropdownitem-stub>
+                </cdropdown-stub>
+                 
+                <cbuttongroup-stub
+                  class="c-mx-1"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Save
+                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="c-active"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Cancel
+                  </cbutton-stub>
+                </cbuttongroup-stub>
+              </cbuttontoolbar-stub>
+            </div>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+    </crow-stub>
+  </div>
+</div>
+`;

tests/unit/views/icons/Brands.spec.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Brands from '@/views/icons/Brands'
+import { CIconPlugin } from '@coreui/icons/vue'
+
+Vue.use(CIconPlugin)
+Vue.use(CoreuiVue)
+
+describe('Brands.vue', () => {
+  it('has a name', () => {
+    expect(Brands.name).toMatch('Brands')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(Brands)
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Brands', () => {
+    const wrapper = shallowMount(Brands)
+    expect(wrapper.is(Brands)).toBe(true)
+  })
+  test('renders correctly', () => {
+    const wrapper = mount(Brands)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/icons/CoreUIIcons.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import CoreUIIcons from '@/views/icons/CoreUIIcons'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(CoreUIIcons)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/icons/Flags.spec.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import { CIconPlugin } from '@coreui/icons/vue'
+import Flags from '@/views/icons/Flags'
+
+Vue.use(CoreuiVue)
+Vue.use(CIconPlugin)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Flags)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/notifications/Alerts.spec.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Alerts from '@/views/notifications/Alerts'
+
+Vue.use(CoreuiVue)
+
+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')
+  })
+  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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Alerts)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should have methods', () => {
+    expect(typeof Alerts.methods.showAlert ).toEqual('function')
+    expect(Alerts.methods.showAlert()).toBeUndefined()
+    expect(typeof Alerts.methods.countDownChanged ).toEqual('function')
+    expect(Alerts.methods.countDownChanged(10)).toBeUndefined()
+  })
+})

tests/unit/views/notifications/Badges.spec.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Badges from '@/views/notifications/Badges'
+
+Vue.use(CoreuiVue)
+
+describe('Badges.vue', () => {
+  it('has a name', () => {
+    expect(Badges.name).toMatch('badges')
+  })
+  it('is Badges', () => {
+    const wrapper = shallowMount(Badges)
+    expect(wrapper.is(Badges)).toBe(true)
+  })
+  test('renders correctly', () => {
+    const wrapper = mount(Badges)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/notifications/Modals.spec.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Modals from '@/views/notifications/Modals'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Modals)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap

@@ -0,0 +1,494 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alerts.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <crow-stub>
+      <ccol-stub
+        col="12"
+        md="6"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Bootstrap Alert
+            </strong>
+             
+            <div
+              class="c-card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://coreui.io/vue/docs/3.0/components/Alert"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <div>
+              <p />
+               
+              <calert-stub
+                show="true"
+                variant="primary"
+              >
+                Primary Alert
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="secondary"
+              >
+                Secondary Alert
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="success"
+              >
+                Success Alert
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="danger"
+              >
+                Danger Alert
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="warning"
+              >
+                Warning Alert
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="info"
+              >
+                Info Alert
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="light"
+              >
+                Light Alert
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="dark"
+              >
+                Dark Alert
+              </calert-stub>
+            </div>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+       
+      <ccol-stub
+        col="12"
+        md="6"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             Alert
+            
+            <small>
+               use 
+              <code>
+                .c-alert-link
+              </code>
+               to provide links
+            </small>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <div>
+              <calert-stub
+                show="true"
+                variant="primary"
+              >
+                
+                Primary Alert with 
+                <a
+                  class="c-alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+              
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="secondary"
+              >
+                
+                Secondary Alert with 
+                <a
+                  class="c-alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+              
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="success"
+              >
+                
+                Success Alert with 
+                <a
+                  class="c-alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+              
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="danger"
+              >
+                
+                Danger Alert with 
+                <a
+                  class="c-alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+              
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="warning"
+              >
+                
+                Warning Alert with 
+                <a
+                  class="c-alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+              
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="info"
+              >
+                
+                Info Alert with 
+                <a
+                  class="c-alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+              
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="light"
+              >
+                
+                Light Alert with 
+                <a
+                  class="c-alert-link"
+                  href="#"
+                >
+                  an example link
+                </a>
+                .
+              
+              </calert-stub>
+               
+              <calert-stub
+                show="true"
+                variant="dark"
+              >
+                
+                Dark Alert with
+                
+                <clink-stub
+                  activeclass="c-active"
+                  class="c-alert-link"
+                  event="click"
+                  exactactiveclass="c-active"
+                  href="#"
+                  routertag="a"
+                  tag="span"
+                  target="_self"
+                  variant="primary"
+                >
+                  an example link
+                </clink-stub>
+                
+                .
+              
+              </calert-stub>
+            </div>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+       
+      <ccol-stub
+        col="12"
+        md="6"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             Alerts 
+            <small>
+              with additional content
+            </small>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <calert-stub
+              show="true"
+              variant="success"
+            >
+              <h4
+                class="c-alert-heading"
+              >
+                Well done!
+              </h4>
+               
+              <p>
+                
+                Aww yeah, you successfully read this important alert message.
+                This example text is going to run a bit longer so that you can see
+                how spacing within an alert works with this kind of content.
+              
+              </p>
+               
+              <hr />
+               
+              <p
+                class="c-mb-0"
+              >
+                
+                Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+              
+              </p>
+            </calert-stub>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+       
+      <ccol-stub
+        col="12"
+        md="6"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             Alerts
+            
+            <small>
+              dismissible
+            </small>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <calert-stub
+              closebutton=""
+              show="true"
+              variant="secondary"
+            >
+              
+              Dismissible Alert!
+            
+            </calert-stub>
+             
+            <calert-stub
+              closebutton=""
+              fade="true"
+              show="true"
+              variant="secondary"
+            >
+              
+              Dismissible Alert with fade effect!
+            
+            </calert-stub>
+             
+            <calert-stub
+              class="c-alert-dismissible"
+              show="true"
+              variant="secondary"
+            />
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-m-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="info"
+            >
+              
+              Show dismissible alerts
+            
+            </cbutton-stub>
+          </ccardbody-stub>
+        </ccard-stub>
+         
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             Alerts
+            
+            <small>
+              auto dismissible
+            </small>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <div>
+              <calert-stub
+                closebutton=""
+                fade="true"
+                show="10"
+                variant="warning"
+              >
+                
+                Alert will dismiss after
+                
+                <strong>
+                  10
+                </strong>
+                 seconds...
+              
+              </calert-stub>
+               
+              <calert-stub
+                closebutton=""
+                show="10"
+                variant="info"
+              >
+                
+                Alert will dismiss after 10 seconds...
+                
+                <cprogress-stub
+                  height="4px"
+                  max="10"
+                  precision="0"
+                  value="10"
+                  variant="info"
+                />
+              </calert-stub>
+               
+              <cbutton-stub
+                activeclass="c-active"
+                class="c-m-1"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                type="button"
+                variant="info"
+              >
+                
+                Show alert with timer
+              
+              </cbutton-stub>
+            </div>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+    </crow-stub>
+  </div>
+</div>
+`;

tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap

@@ -0,0 +1,361 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badges.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <div
+      class="c-row"
+    >
+      <div
+        class="c-col-12 c-col-md-6"
+      >
+        <div
+          class="c-card"
+        >
+          <!---->
+          <header
+            class="c-card-header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             
+            <strong>
+               Bootstrap Badge
+            </strong>
+             
+            <div
+              class="c-card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://coreui.io/vue/docs/3.0/components/Badge"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </header>
+           
+          <div
+            class="c-card-body"
+          >
+            <!---->
+            <!---->
+            <h2>
+              Example heading 
+              <span
+                class="c-badge c-badge-primary"
+              >
+                New
+              </span>
+            </h2>
+             
+            <h3>
+              Example heading 
+              <span
+                class="c-badge c-badge-primary"
+              >
+                New
+              </span>
+            </h3>
+             
+            <h4>
+              Example heading 
+              <span
+                class="c-badge c-badge-primary"
+              >
+                New
+              </span>
+            </h4>
+             
+            <h5>
+              Example heading 
+              <span
+                class="c-badge c-badge-primary"
+              >
+                New
+              </span>
+            </h5>
+             
+            <h6>
+              Example heading 
+              <span
+                class="c-badge c-badge-primary"
+              >
+                New
+              </span>
+            </h6>
+          </div>
+           
+          <footer
+            class="c-card-footer"
+          >
+            <button
+              class="c-btn c-btn-primary"
+              type="button"
+            >
+              
+              Notifications
+              
+              <span
+                class="c-badge c-badge-light"
+                style="position: static;"
+              >
+                4
+              </span>
+            </button>
+          </footer>
+          <!---->
+        </div>
+      </div>
+       
+      <div
+        class="c-col-12 c-col-md-6"
+      >
+        <div
+          class="c-card"
+        >
+          <!---->
+          <header
+            class="c-card-header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             Badge
+            
+            <small>
+              contextual variations
+            </small>
+          </header>
+           
+          <div
+            class="c-card-body"
+          >
+            <!---->
+            <!---->
+            <span
+              class="c-badge c-badge-primary"
+            >
+              Primary
+            </span>
+             
+            <span
+              class="c-badge c-badge-secondary"
+            >
+              Secondary
+            </span>
+             
+            <span
+              class="c-badge c-badge-success"
+            >
+              Success
+            </span>
+             
+            <span
+              class="c-badge c-badge-danger"
+            >
+              Danger
+            </span>
+             
+            <span
+              class="c-badge c-badge-warning"
+            >
+              Warning
+            </span>
+             
+            <span
+              class="c-badge c-badge-info"
+            >
+              Info
+            </span>
+             
+            <span
+              class="c-badge c-badge-light"
+            >
+              Light
+            </span>
+             
+            <span
+              class="c-badge c-badge-dark"
+            >
+              Dark
+            </span>
+          </div>
+          <!---->
+        </div>
+         
+        <div
+          class="c-card"
+        >
+          <!---->
+          <header
+            class="c-card-header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             Badge
+            
+            <small>
+              pills
+            </small>
+          </header>
+           
+          <div
+            class="c-card-body"
+          >
+            <!---->
+            <!---->
+            <span
+              class="c-badge c-badge-primary c-badge-pill"
+            >
+              Primary
+            </span>
+             
+            <span
+              class="c-badge c-badge-secondary c-badge-pill"
+            >
+              Secondary
+            </span>
+             
+            <span
+              class="c-badge c-badge-success c-badge-pill"
+            >
+              Success
+            </span>
+             
+            <span
+              class="c-badge c-badge-danger c-badge-pill"
+            >
+              Danger
+            </span>
+             
+            <span
+              class="c-badge c-badge-warning c-badge-pill"
+            >
+              Warning
+            </span>
+             
+            <span
+              class="c-badge c-badge-info c-badge-pill"
+            >
+              Info
+            </span>
+             
+            <span
+              class="c-badge c-badge-light c-badge-pill"
+            >
+              Light
+            </span>
+             
+            <span
+              class="c-badge c-badge-dark c-badge-pill"
+            >
+              Dark
+            </span>
+          </div>
+          <!---->
+        </div>
+         
+        <div
+          class="c-card"
+        >
+          <!---->
+          <header
+            class="c-card-header"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             Badge
+            
+            <small>
+              actionable
+            </small>
+          </header>
+           
+          <div
+            class="c-card-body"
+          >
+            <!---->
+            <!---->
+            <a
+              class="c-badge c-badge-primary"
+              href="#"
+              target="_self"
+            >
+              Primary
+            </a>
+             
+            <a
+              class="c-badge c-badge-secondary"
+              href="#"
+              target="_self"
+            >
+              Secondary
+            </a>
+             
+            <a
+              class="c-badge c-badge-success"
+              href="#"
+              target="_self"
+            >
+              Success
+            </a>
+             
+            <a
+              class="c-badge c-badge-danger"
+              href="#"
+              target="_self"
+            >
+              Danger
+            </a>
+             
+            <a
+              class="c-badge c-badge-warning"
+              href="#"
+              target="_self"
+            >
+              Warning
+            </a>
+             
+            <a
+              class="c-badge c-badge-info"
+              href="#"
+              target="_self"
+            >
+              Info
+            </a>
+             
+            <a
+              class="c-badge c-badge-light"
+              href="#"
+              target="_self"
+            >
+              Light
+            </a>
+             
+            <a
+              class="c-badge c-badge-dark"
+              href="#"
+              target="_self"
+            >
+              Dark
+            </a>
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap

@@ -0,0 +1,317 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modals.vue renders correctly 1`] = `
+<div
+  class="c-wrapper"
+>
+  <div>
+    <crow-stub>
+      <ccol-stub
+        col="12"
+        tag="div"
+      >
+        <ccard-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardheader-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <i
+              class="fa fa-align-justify"
+            />
+             Bootstrap Modals
+            
+            <div
+              class="c-card-header-actions"
+            >
+              <a
+                class="card-header-action"
+                href="https://coreui.io/vue/docs/3.0/components/Modal"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                <small
+                  class="text-muted"
+                >
+                  docs
+                </small>
+              </a>
+            </div>
+          </ccardheader-stub>
+           
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Launch demo modal
+            
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Launch large modal
+            
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Launch small modal
+            
+            </cbutton-stub>
+             
+            <hr />
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              Launch primary modal
+            
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="success"
+            >
+              
+              Launch success modal
+            
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="warning"
+            >
+              
+              Launch warning modal
+            
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="danger"
+            >
+              
+              Launch danger modal
+            
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="info"
+            >
+              
+              Launch info modal
+            
+            </cbutton-stub>
+             
+            <cbutton-stub
+              activeclass="c-active"
+              class="c-mr-1"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="dark"
+            >
+              
+              Launch dark modal
+            
+            </cbutton-stub>
+          </ccardbody-stub>
+        </ccard-stub>
+      </ccol-stub>
+    </crow-stub>
+  </div>
+   
+  <cmodal-stub
+    title="Modal title"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  
+  </cmodal-stub>
+   
+  <cmodal-stub
+    size="lg"
+    title="Modal title"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  
+  </cmodal-stub>
+   
+  <cmodal-stub
+    size="sm"
+    title="Modal title"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  
+  </cmodal-stub>
+   
+  <cmodal-stub
+    title="Modal title"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  
+  </cmodal-stub>
+   
+  <cmodal-stub
+    title="Modal title"
+    variant="success"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  
+  </cmodal-stub>
+   
+  <cmodal-stub
+    title="Modal title"
+    variant="warning"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  
+  </cmodal-stub>
+   
+  <cmodal-stub
+    title="Modal title"
+    variant="danger"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  
+  </cmodal-stub>
+   
+  <cmodal-stub
+    title="Modal title"
+    variant="info"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  
+  </cmodal-stub>
+   
+  <cmodal-stub
+    centered="true"
+    nocloseonbackdrop="true"
+    size="lg"
+    title="Modal title 2"
+    variant="dark"
+  >
+    
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    
+  </cmodal-stub>
+</div>
+`;

tests/unit/views/pages/Login.spec.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Login from '@/views/pages/Login'
+
+Vue.use(CoreuiVue)
+
+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')
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Login)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/pages/Page404.spec.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Page404 from '@/views/pages/Page404'
+
+Vue.use(CoreuiVue)
+
+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')
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Page404)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/pages/Page500.spec.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Page500 from '@/views/pages/Page500'
+
+Vue.use(CoreuiVue)
+
+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')
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Page500)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/pages/Register.spec.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Register from '@/views/pages/Register'
+
+Vue.use(CoreuiVue)
+
+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')
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Register)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/pages/__snapshots__/Login.spec.js.snap

@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Login.vue renders correctly 1`] = `
+<ccontainer-stub
+  class="c-d-flex c-align-items-center c-min-vh-100"
+>
+  <crow-stub
+    class="c-justify-content-center"
+  >
+    <ccol-stub
+      md="8"
+      tag="div"
+    >
+      <ccardgroup-stub>
+        <ccard-stub
+          class="c-p-4"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ccardbody-stub
+            subtitletag="h6"
+            titletag="h4"
+          >
+            <cform-stub>
+              <h1>
+                Login
+              </h1>
+               
+              <p
+                class="c-text-muted"
+              >
+                Sign In to your account
+              </p>
+               
+              <cforminput-stub
+                autocomplete="username email"
+                lazy="400"
+                placeholder="Username"
+                prependhtml=<i class='cui-user'></i>
+                type="text"
+              />
+               
+              <cforminput-stub
+                autocomplete="curent-password"
+                lazy="400"
+                placeholder="Password"
+                prependhtml=<i class='cui-lock-locked'></i>
+                type="password"
+              />
+               
+              <crow-stub>
+                <ccol-stub
+                  col="6"
+                  tag="div"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    class="c-px-4"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="primary"
+                  >
+                    Login
+                  </cbutton-stub>
+                </ccol-stub>
+                 
+                <ccol-stub
+                  class="c-text-right"
+                  col="6"
+                  tag="div"
+                >
+                  <cbutton-stub
+                    activeclass="c-active"
+                    class="c-px-0"
+                    event="click"
+                    exactactiveclass="c-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                    variant="link"
+                  >
+                    Forgot password?
+                  </cbutton-stub>
+                </ccol-stub>
+              </crow-stub>
+            </cform-stub>
+          </ccardbody-stub>
+        </ccard-stub>
+         
+        <ccard-stub
+          bodywrapper="true"
+          class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <h2>
+            Sign up
+          </h2>
+           
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+           
+          <cbutton-stub
+            activeclass="c-active"
+            class="c-active c-mt-3"
+            event="click"
+            exactactiveclass="c-active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="primary"
+          >
+            
+            Register Now!
+          
+          </cbutton-stub>
+        </ccard-stub>
+      </ccardgroup-stub>
+    </ccol-stub>
+  </crow-stub>
+</ccontainer-stub>
+`;

tests/unit/views/pages/__snapshots__/Page404.spec.js.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page404.vue renders correctly 1`] = `
+<ccontainer-stub
+  class="c-d-flex c-align-items-center c-min-vh-100"
+>
+  <crow-stub
+    class="c-w-100 c-justify-content-center"
+  >
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <div
+        class="c-w-100"
+      >
+        <div
+          class="c-clearfix"
+        >
+          <h1
+            class="c-float-left c-display-3 c-mr-4"
+          >
+            404
+          </h1>
+           
+          <h4
+            class="c-pt-3"
+          >
+            Oops! You're lost.
+          </h4>
+           
+          <p
+            class="c-text-muted"
+          >
+            The page you are looking for was not found.
+          </p>
+        </div>
+         
+        <cforminput-stub
+          class="c-mb-0"
+          lazy="400"
+          placeholder="What are you looking for?"
+          prependhtml=<i class='cui-magnifying-glass'></i>
+          type="text"
+        />
+      </div>
+    </ccol-stub>
+  </crow-stub>
+</ccontainer-stub>
+`;

tests/unit/views/pages/__snapshots__/Page500.spec.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page500.vue renders correctly 1`] = `
+<ccontainer-stub
+  class="c-d-flex c-align-items-center c-min-vh-100"
+>
+  <crow-stub
+    class="c-w-100 c-justify-content-center"
+  >
+    <ccol-stub
+      md="6"
+      tag="div"
+    >
+      <div
+        class="c-clearfix"
+      >
+        <h1
+          class="c-float-left c-display-3 c-mr-4"
+        >
+          500
+        </h1>
+         
+        <h4
+          class="c-pt-3"
+        >
+          Houston, we have a problem!
+        </h4>
+         
+        <p
+          class="c-text-muted"
+        >
+          The page you are looking for is temporarily unavailable.
+        </p>
+      </div>
+       
+      <cforminput-stub
+        class="c-mb-0"
+        lazy="400"
+        placeholder="What are you looking for?"
+        prependhtml=<i class='cui-magnifying-glass'></i>
+        type="text"
+      />
+    </ccol-stub>
+  </crow-stub>
+</ccontainer-stub>
+`;

tests/unit/views/pages/__snapshots__/Register.spec.js.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Register.vue renders correctly 1`] = `
+<ccontainer-stub
+  class="c-min-vh-100 c-d-flex c-align-items-center"
+>
+  <crow-stub
+    class="c-w-100 c-justify-content-center"
+  >
+    <ccol-stub
+      md="6"
+      sm="8"
+      tag="div"
+    >
+      <ccard-stub
+        class="c-mx-4"
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardbody-stub
+          class="c-p-4"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <cform-stub>
+            <h1>
+              Register
+            </h1>
+             
+            <p
+              class="c-text-muted"
+            >
+              Create your account
+            </p>
+             
+            <cforminput-stub
+              autocomplete="username"
+              lazy="400"
+              placeholder="Username"
+              prependhtml=<i class='cui-user'></i>
+              type="text"
+            />
+             
+            <cforminput-stub
+              autocomplete="email"
+              lazy="400"
+              placeholder="Email"
+              prependhtml="@"
+              type="text"
+            />
+             
+            <cforminput-stub
+              autocomplete="new-password"
+              lazy="400"
+              placeholder="Password"
+              prependhtml=<i class='cui-lock-locked'></i>
+              type="password"
+            />
+             
+            <cforminput-stub
+              autocomplete="new-password"
+              class="c-mb-4"
+              lazy="400"
+              placeholder="Repeat password"
+              prependhtml=<i class='cui-lock-locked'></i>
+              type="password"
+            />
+             
+            <cbutton-stub
+              activeclass="c-active"
+              block="true"
+              event="click"
+              exactactiveclass="c-active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="success"
+            >
+              Create Account
+            </cbutton-stub>
+          </cform-stub>
+        </ccardbody-stub>
+         
+        <ccardfooter-stub
+          class="c-p-4"
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <crow-stub>
+            <ccol-stub
+              col="6"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                block="true"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                texthtml="Facebook"
+                type="button"
+                variant="facebook"
+              />
+            </ccol-stub>
+             
+            <ccol-stub
+              col="6"
+              tag="div"
+            >
+              <cbutton-stub
+                activeclass="c-active"
+                block="true"
+                event="click"
+                exactactiveclass="c-active"
+                routertag="a"
+                target="_self"
+                texthtml="Twitter"
+                type="button"
+                variant="twitter"
+              />
+            </ccol-stub>
+          </crow-stub>
+        </ccardfooter-stub>
+      </ccard-stub>
+    </ccol-stub>
+  </crow-stub>
+</ccontainer-stub>
+`;

tests/unit/views/theme/Colors.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Colors from '@/views/theme/Colors'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = mount(Colors)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/theme/Typography.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Typography from '@/views/theme/Typography'
+
+Vue.use(CoreuiVue)
+
+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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Typography)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/theme/__snapshots__/Typography.spec.js.snap

@@ -0,0 +1,549 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Typography.vue renders correctly 1`] = `
+<div>
+  <div
+    class="c-card"
+  >
+    <div
+      class="c-card-header"
+    >
+      
+      Headings
+    
+    </div>
+     
+    <div
+      class="c-card-body"
+    >
+      <p>
+        Documentation and examples for Bootstrap typography,
+        including global settings, headings, body text, lists, and more.
+      </p>
+       
+      <table
+        class="c-table"
+      >
+        <thead>
+          <tr>
+            <th>
+              Heading
+            </th>
+             
+            <th>
+              Example
+            </th>
+          </tr>
+        </thead>
+         
+        <tbody>
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="c-highlighter-rouge"
+                >
+                  
+                  &lt;h1&gt;&lt;/h1&gt;
+                
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="c-h1"
+              >
+                h1. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="c-highlighter-rouge"
+                >
+                  
+                  &lt;h2&gt;&lt;/h2&gt;
+                
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="c-h2"
+              >
+                h2. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="c-highlighter-rouge"
+                >
+                  
+                  &lt;h3&gt;&lt;/h3&gt;
+                
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="c-h3"
+              >
+                h3. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="c-highlighter-rouge"
+                >
+                  
+                  &lt;h4&gt;&lt;/h4&gt;
+                
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="c-h4"
+              >
+                h4. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="c-highlighter-rouge"
+                >
+                  
+                  &lt;h5&gt;&lt;/h5&gt;
+                
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="c-h5"
+              >
+                h5. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+           
+          <tr>
+            <td>
+              <p>
+                <code
+                  class="c-highlighter-rouge"
+                >
+                  
+                  &lt;h6&gt;&lt;/h6&gt;
+                
+                </code>
+              </p>
+            </td>
+             
+            <td>
+              <span
+                class="c-h6"
+              >
+                h6. Bootstrap heading
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+   
+  <div
+    class="c-card"
+  >
+    <div
+      class="c-card-header"
+    >
+      
+      Headings
+    
+    </div>
+     
+    <div
+      class="c-card-body"
+    >
+      <p>
+        <code
+          class="c-highlighter-rouge"
+        >
+          .h1
+        </code>
+         through
+        
+        <code
+          class="c-highlighter-rouge"
+        >
+          .h6
+        </code>
+        
+        classes are also available, for when you want to match the font
+        styling of a heading but cannot use the associated HTML element.
+      
+      </p>
+       
+      <div
+        class="c-bd-example"
+      >
+        <p
+          class="c-h1"
+        >
+          h1. Bootstrap heading
+        </p>
+         
+        <p
+          class="c-h2"
+        >
+          h2. Bootstrap heading
+        </p>
+         
+        <p
+          class="c-h3"
+        >
+          h3. Bootstrap heading
+        </p>
+         
+        <p
+          class="c-h4"
+        >
+          h4. Bootstrap heading
+        </p>
+         
+        <p
+          class="c-h5"
+        >
+          h5. Bootstrap heading
+        </p>
+         
+        <p
+          class="c-h6"
+        >
+          h6. Bootstrap heading
+        </p>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="c-card"
+  >
+    <div
+      class="c-card-header"
+    >
+      
+      Display headings
+    
+    </div>
+     
+    <div
+      class="c-card-body"
+    >
+      <p>
+        
+        Traditional heading elements are designed to work best in the meat
+        of your page content. When you need a heading to stand out,
+        consider using a 
+        <strong>
+          display heading
+        </strong>
+        —a larger,
+         slightly more opinionated heading style.
+      
+      </p>
+       
+      <div
+        class="c-bd-example c-bd-example-type"
+      >
+        <table
+          class="c-table"
+        >
+          <tbody>
+            <tr>
+              <td>
+                <span
+                  class="c-display-1"
+                >
+                  Display 1
+                </span>
+              </td>
+            </tr>
+             
+            <tr>
+              <td>
+                <span
+                  class="c-display-2"
+                >
+                  Display 2
+                </span>
+              </td>
+            </tr>
+             
+            <tr>
+              <td>
+                <span
+                  class="c-display-3"
+                >
+                  Display 3
+                </span>
+              </td>
+            </tr>
+             
+            <tr>
+              <td>
+                <span
+                  class="c-display-4"
+                >
+                  Display 4
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="c-card"
+  >
+    <div
+      class="c-card-header"
+    >
+      
+      Inline text elements
+    
+    </div>
+     
+    <div
+      class="c-card-body"
+    >
+      <p>
+        
+        Traditional heading elements are designed to work best in the meat
+        of your page content. When you need a heading to stand out,
+        consider using a 
+        <strong>
+          display heading
+        </strong>
+        —a larger,
+        slightly more opinionated heading style.
+      
+      </p>
+       
+      <div
+        class="c-bd-example"
+      >
+        <p>
+          You can use the mark tag to 
+          <mark>
+            highlight
+          </mark>
+           text.
+        </p>
+         
+        <p>
+          <del>
+            
+          This line of text is meant to be treated as deleted text.
+        
+          </del>
+        </p>
+         
+        <p>
+          <s>
+            
+          This line of text is meant to be treated as no longer accurate.
+        
+          </s>
+        </p>
+         
+        <p>
+          <ins>
+            
+          This line of text is meant to be treated as an addition to the document.
+        
+          </ins>
+        </p>
+         
+        <p>
+          <u>
+            This line of text will render as underlined
+          </u>
+        </p>
+         
+        <p>
+          <small>
+            
+          This line of text is meant to be treated as fine print.
+        
+          </small>
+        </p>
+         
+        <p>
+          <strong>
+            This line rendered as bold text.
+          </strong>
+        </p>
+         
+        <p>
+          <em>
+            This line rendered as italicized text.
+          </em>
+        </p>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="c-card"
+  >
+    <div
+      class="c-card-header"
+    >
+      
+      Description list alignment
+    
+    </div>
+     
+    <div
+      class="c-card-body"
+    >
+      <p>
+        
+        Align terms and descriptions horizontally by using our grid system’s
+        predefined classes (or semantic mixins). For longer terms, you can
+        optionally add a 
+        <code
+          class="highlighter-rouge"
+        >
+          .text-truncate
+        </code>
+        
+        class to truncate the text with an ellipsis.
+      
+      </p>
+       
+      <div
+        class="c-bd-example"
+      >
+        <dl
+          class="c-row"
+        >
+          <dt
+            class="c-col-sm-3"
+          >
+            Description lists
+          </dt>
+           
+          <dd
+            class="c-col-sm-9"
+          >
+            
+            A description list is perfect for defining terms.
+          
+          </dd>
+           
+          <dt
+            class="c-col-sm-3"
+          >
+            Euismod
+          </dt>
+           
+          <dd
+            class="c-col-sm-9"
+          >
+            <p>
+              Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+            </p>
+             
+            <p>
+              Donec id elit non mi porta gravida at eget metus.
+            </p>
+          </dd>
+           
+          <dt
+            class="c-col-sm-3"
+          >
+            Malesuada porta
+          </dt>
+           
+          <dd
+            class="c-col-sm-9"
+          >
+            
+            Etiam porta sem malesuada magna mollis euismod.
+          
+          </dd>
+           
+          <dt
+            class="c-col-sm-3 text-truncate"
+          >
+            Truncated term is truncated
+          </dt>
+           
+          <dd
+            class="c-col-sm-9"
+          >
+            
+            Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh, ut fermentum massa justo sit amet risus.
+          
+          </dd>
+           
+          <dt
+            class="c-col-sm-3"
+          >
+            Nesting
+          </dt>
+           
+          <dd
+            class="c-col-sm-9"
+          >
+            <dl
+              class="c-row"
+            >
+              <dt
+                class="c-col-sm-4"
+              >
+                Nested definition list
+              </dt>
+               
+              <dd
+                class="c-col-sm-8"
+              >
+                
+                Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
+              
+              </dd>
+            </dl>
+          </dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</div>
+`;

tests/unit/views/users/User.spec.js

@@ -0,0 +1,46 @@
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+import CoreuiVue from '@coreui/vue'
+import User from '@/views/users/User'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+localVue.use(CoreuiVue)
+
+describe('User.vue', () => {
+  it('has a name', () => {
+    expect(User.name).toMatch('User')
+  })
+  it('is Vue instance', () => {
+    const wrapper = shallowMount(User, {
+      localVue,
+      router
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is User', () => {
+    const wrapper = shallowMount(User, {
+      localVue,
+      router
+    })
+    expect(wrapper.is(User)).toBe(true)
+  })
+  it('should have methods', () => {
+    const wrapper = shallowMount(User,{
+      localVue,
+      router
+    })
+
+    expect(typeof User.methods.goBack ).toEqual('function')
+    expect(wrapper.vm.goBack()).toBeUndefined()
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(User, {
+      localVue,
+        router
+    })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/users/Users.spec.js

@@ -0,0 +1,56 @@
+import { createLocalVue, shallowMount, mount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Users from '@/views/users/Users'
+import VueRouter from 'vue-router';
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+localVue.use(CoreuiVue)
+
+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,{
+      localVue,
+      router
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('is Users', () => {
+    const wrapper = shallowMount(Users,{
+      localVue,
+      router
+    })
+    expect(wrapper.is(Users)).toBe(true)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Users, {
+      localVue,
+      router
+    })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should have methods', () => {
+    const wrapper = shallowMount(Users,{
+      localVue,
+      router
+    })
+
+    expect(typeof Users.methods.userLink  ).toEqual('function')
+    expect(Users.methods.userLink(42)).toBe('users/42')
+    expect(typeof Users.methods.rowClicked ).toEqual('function')
+    expect(wrapper.vm.rowClicked({id:42})).toBeUndefined()
+  })
+})

tests/unit/views/users/__snapshots__/User.spec.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`User.vue renders correctly 1`] = `
+<crow-stub>
+  <ccol-stub
+    col="12"
+    lg="6"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        
+        User id:  
+      
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ctable-stub
+          defaultsorter="[object Object]"
+          fields="[object Object],[object Object]"
+          fixed="true"
+          items="[object Object]"
+          perpage="10"
+          small="true"
+          striped="true"
+        />
+      </ccardbody-stub>
+       
+      <ccardfooter-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <cbutton-stub
+          activeclass="c-active"
+          event="click"
+          exactactiveclass="c-active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="primary"
+        >
+          Back
+        </cbutton-stub>
+      </ccardfooter-stub>
+    </ccard-stub>
+  </ccol-stub>
+</crow-stub>
+`;

tests/unit/views/users/__snapshots__/Users.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Users.vue renders correctly 1`] = `
+<crow-stub>
+  <ccol-stub
+    col="12"
+    tag="div"
+    xl="8"
+  >
+    <ccard-stub
+      bodywrapper="true"
+      headerhtml="users"
+      name="slide"
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ctable-stub
+        current-page="1"
+        defaultsorter="[object Object]"
+        fields="[object Object],[object Object],[object Object],[object Object],[object Object]"
+        hover="true"
+        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        pagination="[object Object]"
+        perpage="5"
+        striped="true"
+      />
+    </ccard-stub>
+  </ccol-stub>
+</crow-stub>
+`;

tests/unit/views/widgets/Widgets.spec.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import CoreuiVue from '@coreui/vue'
+import Widgets from '@/views/widgets/Widgets'
+import { CIconPlugin } from '@coreui/icons/vue'
+
+Vue.use(CIconPlugin)
+Vue.use(CoreuiVue)
+
+describe('Widgets.vue', () => {
+  it('has a name', () => {
+    expect(Widgets.name).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)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(Widgets)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap

@@ -0,0 +1,945 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Widgets.vue renders correctly 1`] = `
+<div>
+  <crow-stub>
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogress-stub
+        footer="Lorem ipsum dolor sit amet enim."
+        header="89.9%"
+        text="Lorem ipsum..."
+        value="25"
+        variant="primary"
+      >
+        <cprogress-stub
+          class="c-progress-xs c-my-3 c-mb-0"
+          max="100"
+          precision="0"
+          value="25"
+          variant="success"
+        />
+      </cwidgetprogress-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogress-stub
+        footer="Lorem ipsum dolor sit amet enim."
+        header="12.124"
+        text="Lorem ipsum..."
+        value="25"
+        variant="info"
+      />
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogress-stub
+        footer="Lorem ipsum dolor sit amet enim."
+        header="$98.111,00"
+        text="Lorem ipsum..."
+        value="25"
+        variant="warning"
+      />
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogress-stub
+        footer="Lorem ipsum dolor sit amet enim."
+        header="2 TB"
+        text="Lorem ipsum..."
+        value="25"
+        variant="danger"
+      />
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogress-stub
+        footer="Lorem ipsum dolor sit amet enim."
+        header="89.9%"
+        inverse="true"
+        text="Lorem ipsum..."
+        value="25"
+        variant="success"
+      />
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogress-stub
+        footer="Lorem ipsum dolor sit amet enim."
+        header="12.124"
+        inverse="true"
+        text="Lorem ipsum..."
+        value="25"
+        variant="info"
+      />
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogress-stub
+        footer="Lorem ipsum dolor sit amet enim."
+        header="$98.111,00"
+        inverse="true"
+        text="Lorem ipsum..."
+        value="25"
+        variant="warning"
+      />
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogress-stub
+        footer="Lorem ipsum dolor sit amet enim."
+        header="2 TB"
+        inverse="true"
+        text="Lorem ipsum..."
+        value="25"
+        variant="danger"
+      />
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        text="Income"
+        variant="primary"
+      >
+        <cicon-stub
+          name="settings"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        text="Income"
+        variant="info"
+      >
+        <cicon-stub
+          name="laptop"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        text="Income"
+        variant="warning"
+      >
+        <cicon-stub
+          name="moon"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        text="Income"
+        variant="danger"
+      >
+        <cicon-stub
+          name="bell"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        no-icon-padding=""
+        text="Income"
+        variant="primary"
+      >
+        <cicon-stub
+          name="settings"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        no-icon-padding=""
+        text="Income"
+        variant="info"
+      >
+        <cicon-stub
+          name="laptop"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        no-icon-padding=""
+        text="Income"
+        variant="warning"
+      >
+        <cicon-stub
+          name="moon"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        no-icon-padding=""
+        text="Income"
+        variant="danger"
+      >
+        <cicon-stub
+          name="bell"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      col="12"
+      lg="4"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        no-icon-padding=""
+        text="Income"
+        variant="primary"
+      >
+        <cicon-stub
+          class="c-mx-5 "
+          name="settings"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="4"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        no-icon-padding=""
+        text="Income"
+        variant="info"
+      >
+        <cicon-stub
+          class="c-mx-5 "
+          name="laptop"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="4"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        header="$1.999,50"
+        no-icon-padding=""
+        text="Income"
+        variant="warning"
+      >
+        <cicon-stub
+          class="c-mx-5 "
+          name="moon"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <widgetsbrand-stub
+    nocharts="true"
+  />
+   
+  <widgetsbrand-stub />
+   
+  <ccardgroup-stub
+    class="c-mb-4"
+  >
+    <cwidgetprogressicon-stub
+      header="87.500"
+      text="Visitors"
+      value="25"
+      variant="info"
+    >
+      <cicon-stub
+        height="36"
+        name="people"
+      />
+    </cwidgetprogressicon-stub>
+     
+    <cwidgetprogressicon-stub
+      header="385"
+      text="New Clients"
+      value="25"
+      variant="success"
+    >
+      <cicon-stub
+        height="36"
+        name="userFollow"
+      />
+    </cwidgetprogressicon-stub>
+     
+    <cwidgetprogressicon-stub
+      header="1238"
+      text="Products sold"
+      value="25"
+      variant="warning"
+    >
+      <cicon-stub
+        height="36"
+        name="basketLoaded"
+      />
+    </cwidgetprogressicon-stub>
+     
+    <cwidgetprogressicon-stub
+      header="28%"
+      text="Returning Visitors"
+      value="25"
+      variant="primary"
+    >
+      <cicon-stub
+        height="36"
+        name="chartPie"
+      />
+    </cwidgetprogressicon-stub>
+     
+    <cwidgetprogressicon-stub
+      header="5:34:11"
+      text="Avg. Time"
+      value="25"
+      variant="danger"
+    >
+      <cicon-stub
+        height="36"
+        name="speedometer"
+      />
+    </cwidgetprogressicon-stub>
+  </ccardgroup-stub>
+   
+  <ccardgroup-stub
+    class="c-mb-4"
+  >
+    <cwidgetprogressicon-stub
+      header="87.500"
+      inverse="true"
+      text="Visitors"
+      value="25"
+      variant="info"
+    >
+      <cicon-stub
+        height="36"
+        name="people"
+      />
+    </cwidgetprogressicon-stub>
+     
+    <cwidgetprogressicon-stub
+      header="385"
+      inverse="true"
+      text="New Clients"
+      value="25"
+      variant="success"
+    >
+      <cicon-stub
+        height="36"
+        name="userFollow"
+      />
+    </cwidgetprogressicon-stub>
+     
+    <cwidgetprogressicon-stub
+      header="1238"
+      inverse="true"
+      text="Products sold"
+      value="25"
+      variant="warning"
+    >
+      <cicon-stub
+        height="36"
+        name="basketLoaded"
+      />
+    </cwidgetprogressicon-stub>
+     
+    <cwidgetprogressicon-stub
+      header="28%"
+      inverse="true"
+      text="Returning Visitors"
+      value="25"
+      variant="primary"
+    >
+      <cicon-stub
+        height="36"
+        name="chartPie"
+      />
+    </cwidgetprogressicon-stub>
+     
+    <cwidgetprogressicon-stub
+      header="5:34:11"
+      inverse="true"
+      text="Avg. Time"
+      value="25"
+      variant="danger"
+    >
+      <cicon-stub
+        height="36"
+        name="speedometer"
+      />
+    </cwidgetprogressicon-stub>
+  </ccardgroup-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="87.500"
+        text="Visitors"
+        value="25"
+        variant="info"
+      >
+        <cicon-stub
+          height="36"
+          name="people"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="385"
+        text="New Clients"
+        value="25"
+        variant="success"
+      >
+        <cicon-stub
+          height="36"
+          name="userFollow"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="1238"
+        text="Products sold"
+        value="25"
+        variant="warning"
+      >
+        <cicon-stub
+          height="36"
+          name="basketLoaded"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="28%"
+        text="Returning Visitors"
+        value="25"
+        variant="primary"
+      >
+        <cicon-stub
+          height="36"
+          name="chartPie"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="5:34:11"
+        text="Avg. Time"
+        value="25"
+        variant="danger"
+      >
+        <cicon-stub
+          height="36"
+          name="speedometer"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="972"
+        text="comments"
+        value="25"
+        variant="info"
+      >
+        <cicon-stub
+          height="36"
+          name="speech"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="87.500"
+        inverse="true"
+        text="Visitors"
+        value="25"
+        variant="info"
+      >
+        <cicon-stub
+          height="36"
+          name="people"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="385"
+        inverse="true"
+        text="New Clients"
+        value="25"
+        variant="success"
+      >
+        <cicon-stub
+          height="36"
+          name="userFollow"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="1238"
+        inverse="true"
+        text="Products sold"
+        value="25"
+        variant="warning"
+      >
+        <cicon-stub
+          height="36"
+          name="basketLoaded"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="28%"
+        inverse="true"
+        text="Returning Visitors"
+        value="25"
+        variant="primary"
+      >
+        <cicon-stub
+          height="36"
+          name="chartPie"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="5:34:11"
+        inverse="true"
+        text="Avg. Time"
+        value="25"
+        variant="danger"
+      >
+        <cicon-stub
+          height="36"
+          name="speedometer"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      md="2"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetprogressicon-stub
+        header="972"
+        inverse="true"
+        text="comments"
+        value="25"
+        variant="info"
+      >
+        <cicon-stub
+          height="36"
+          name="speech"
+        />
+      </cwidgetprogressicon-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <widgetsdropdown-stub />
+   
+  <crow-stub>
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetheaderdetails-stub
+        leftfooter="+432,50 (15,78%)"
+        leftheader="$1.890,65"
+        rightfooter="Today 6:43 AM"
+        rightheader="SALE"
+        variant="primary"
+      >
+        <cchartlinesimple-stub
+          backgroundcolor="transparent"
+          bordercolor="rgba(255,255,255,.55)"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+         
+        <cchartbarsimple-stub
+          backgroundcolor="rgba(0,0,0,.2)"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetheaderdetails-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetheaderdetails-stub
+        leftfooter="+432,50 (15,78%)"
+        leftheader="$1.890,65"
+        rightfooter="Today 6:43 AM"
+        rightheader="SALE"
+        variant="success"
+      >
+        <cchartlinesimple-stub
+          backgroundcolor="transparent"
+          bordercolor="rgba(255,255,255,.55)"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+         
+        <cchartbarsimple-stub
+          backgroundcolor="rgba(0,0,0,.2)"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetheaderdetails-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetheaderdetails-stub
+        leftfooter="+432,50 (15,78%)"
+        leftheader="$1.890,65"
+        rightfooter="Today 6:43 AM"
+        rightheader="SALE"
+        variant="danger"
+      >
+        <cchartlinesimple-stub
+          backgroundcolor="transparent"
+          bordercolor="rgba(255,255,255,.55)"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+         
+        <cchartbarsimple-stub
+          backgroundcolor="rgba(0,0,0,.2)"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetheaderdetails-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgetheaderdetails-stub
+        leftfooter="+432,50 (15,78%)"
+        leftheader="$1.890,65"
+        rightfooter="Today 6:43 AM"
+        rightheader="SALE"
+        variant="warning"
+      >
+        <cchartlinesimple-stub
+          backgroundcolor="transparent"
+          bordercolor="rgba(255,255,255,.55)"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+         
+        <cchartbarsimple-stub
+          backgroundcolor="rgba(0,0,0,.2)"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetheaderdetails-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub>
+    <ccol-stub
+      lg="2"
+      sm="4"
+      tag="div"
+    >
+      <cwidgetsimple-stub
+        header="title"
+        text="1,123"
+      >
+        <cchartlinesimple-stub
+          backgroundcolor="transparent"
+          bordercolor="danger"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetsimple-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="2"
+      sm="4"
+      tag="div"
+    >
+      <cwidgetsimple-stub
+        header="title"
+        text="1,123"
+      >
+        <cchartlinesimple-stub
+          backgroundcolor="transparent"
+          bordercolor="primary"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetsimple-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="2"
+      sm="4"
+      tag="div"
+    >
+      <cwidgetsimple-stub
+        header="title"
+        text="1,123"
+      >
+        <cchartlinesimple-stub
+          backgroundcolor="transparent"
+          bordercolor="success"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetsimple-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="2"
+      sm="4"
+      tag="div"
+    >
+      <cwidgetsimple-stub
+        header="title"
+        text="1,123"
+      >
+        <cchartbarsimple-stub
+          backgroundcolor="danger"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetsimple-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="2"
+      sm="4"
+      tag="div"
+    >
+      <cwidgetsimple-stub
+        header="title"
+        text="1,123"
+      >
+        <cchartbarsimple-stub
+          backgroundcolor="primary"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetsimple-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      lg="2"
+      sm="4"
+      tag="div"
+    >
+      <cwidgetsimple-stub
+        header="title"
+        text="1,123"
+      >
+        <cchartbarsimple-stub
+          backgroundcolor="success"
+          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
+          label="Sales"
+          style="height: 40px;"
+        />
+      </cwidgetsimple-stub>
+    </ccol-stub>
+  </crow-stub>
+</div>
+`;