feat: copy features from pro template

2020-02-24 16:42:33 +01:00
parent c68263b85f
commit 7e9d384af2
21 changed files with 1511 additions and 1658 deletions
@@ -1,6 +1,6 @@
 {
  "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0",
  "description": "Open Source Bootstrap Admin Template",
  "author": {
    "name": "CoreUI",
@@ -15,7 +15,7 @@
    }
  ],
  "homepage": "http://coreui.io",
-  "copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
+  "copyright": "Copyright 2020 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
@@ -27,33 +27,33 @@
    "release": "npm-run-all clearCache lint build test:unit test:e2e"
  },
  "dependencies": {
-    "@coreui/coreui": "^3.0.0-beta.4",
-    "@coreui/icons": "^1.0.0",
-    "@coreui/utils": "^1.2.2",
-    "@coreui/vue": "coreui/coreui-vue#521325c669faccc8e3de43f0e01411ea06ecdea4",
-    "@coreui/vue-chartjs": "^1.0.3",
-    "vue": "^2.6.11",
-    "vue-router": "^3.1.5",
-    "vuex": "^3.1.2"
+    "@coreui/coreui": "~3.0.0",
+    "@coreui/icons": "~1.0.1",
+    "@coreui/utils": "~1.2.2",
+    "@coreui/vue": "~3.0.0",
+    "@coreui/vue-chartjs": "~1.0.3",
+    "vue": "~2.6.11",
+    "vue-router": "~3.1.5",
+    "vuex": "~3.1.2"
  },
  "devDependencies": {
-    "@babel/core": "^7.8.3",
-    "@vue/cli-plugin-babel": "^4.1.2",
-    "@vue/cli-plugin-e2e-nightwatch": "^4.1.2",
-    "@vue/cli-plugin-eslint": "^4.1.2",
-    "@vue/cli-plugin-unit-jest": "^4.1.2",
-    "@vue/cli-service": "^4.1.2",
+    "@babel/core": "~7.8.4",
+    "@vue/cli-plugin-babel": "~4.2.2",
+    "@vue/cli-plugin-e2e-nightwatch": "~4.2.2",
+    "@vue/cli-plugin-eslint": "~4.2.2",
+    "@vue/cli-plugin-unit-jest": "~4.2.2",
+    "@vue/cli-service": "~4.2.2",
    "@vue/test-utils": "1.0.0-beta.29",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.1.0",
-    "chromedriver": "^79.0.2",
-    "core-js": "^3.6.4",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^6.2.1",
-    "node-sass": "^4.13.1",
-    "npm-run-all": "^4.1.5",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "babel-eslint": "~10.0.3",
+    "babel-jest": "~25.1.0",
+    "chromedriver": "~80.0.1",
+    "core-js": "~3.6.4",
+    "eslint": "~6.8.0",
+    "eslint-plugin-vue": "~6.2.1",
+    "node-sass": "~4.13.1",
+    "npm-run-all": "~4.1.5",
+    "sass-loader": "~8.0.2",
+    "vue-template-compiler": "~2.6.11"
  },
  "browserslist": [
    "> 1%",
@@ -1,7 +1,7 @@
 <template>
  <div class="c-app">
    <TheSidebar/>
-    <div class="c-wrapper c-fixed-components">
+    <CWrapper>
      <TheHeader/>
      <div class="c-body">
        <main class="c-main">
@@ -13,7 +13,7 @@
        </main>
        <TheFooter/>
      </div>
-    </div>
+    </CWrapper>
  </div>
 </template>

@@ -2,7 +2,7 @@
  <CFooter :fixed="false">
    <div>
      <a href="https://coreui.io" target="_blank">CoreUI</a>
-      <span class="ml-1">&copy; 2020 creativeLabs.</span>
+      <span class="ml-1">&copy; {{new Date().getFullYear()}} creativeLabs.</span>
    </div>
    <div class="ml-auto">
      <span class="mr-1">Powered by</span>
@@ -40,83 +40,67 @@ export default [
        items: [
          {
            name: 'Breadcrumbs',
-            to: '/base/breadcrumbs',
-            icon: 'cil-puzzle'
+            to: '/base/breadcrumbs'
          },
          {
            name: 'Cards',
-            to: '/base/cards',
-            icon: 'cil-puzzle'
+            to: '/base/cards'
          },
          {
            name: 'Carousels',
-            to: '/base/carousels',
-            icon: 'cil-puzzle'
+            to: '/base/carousels'
          }, 
          {
            name: 'Collapses',
-            to: '/base/collapses',
-            icon: 'cil-puzzle'
+            to: '/base/collapses'
          },
          {
            name: 'Forms',
-            to: '/base/forms',
-            icon: 'cil-puzzle'
+            to: '/base/forms'
          },
          {
            name: 'Jumbotrons',
-            to: '/base/jumbotrons',
-            icon: 'cil-puzzle'
+            to: '/base/jumbotrons'
          },
          {
            name: 'List Groups',
-            to: '/base/list-groups',
-            icon: 'cil-puzzle'
+            to: '/base/list-groups'
          },
          {
            name: 'Navs',
-            to: '/base/navs',
-            icon: 'cil-puzzle'
+            to: '/base/navs'
          },
          {
            name: 'Navbars',
-            to: '/base/navbars',
-            icon: 'cil-puzzle'
+            to: '/base/navbars'
          },
          {
            name: 'Paginations',
-            to: '/base/paginations',
-            icon: 'cil-puzzle'
+            to: '/base/paginations'
          },
          {
            name: 'Popovers',
-            to: '/base/popovers',
-            icon: 'cil-puzzle'
+            to: '/base/popovers'
          },
          {
            name: 'Progress Bars',
-            to: '/base/progress-bars',
-            icon: 'cil-puzzle'
+            to: '/base/progress-bars'
          },
          {
            name: 'Switches',
-            to: '/base/switches',
-            icon: 'cil-puzzle'
+            to: '/base/switches'
          },
          {
            name: 'Tables',
-            to: '/base/tables',
-            icon: 'cil-puzzle'
+            to: '/base/tables'
          },
          {
            name: 'Tabs',
-            to: '/base/tabs',
-            icon: 'cil-puzzle'
+            to: '/base/tabs'
          },
          {
            name: 'Tooltips',
-            to: '/base/tooltips',
-            icon: 'cil-puzzle'
+            to: '/base/tooltips'
          }
        ]
      },
@@ -128,23 +112,19 @@ export default [
        items: [
          {
            name: 'Buttons',
-            to: '/buttons/standard-buttons',
-            icon: 'cil-cursor'
+            to: '/buttons/standard-buttons'
          },
          {
            name: 'Button Dropdowns',
-            to: '/buttons/dropdowns',
-            icon: 'cil-cursor'
+            to: '/buttons/dropdowns'
          },
          {
            name: 'Button Groups',
-            to: '/buttons/button-groups',
-            icon: 'cil-cursor'
+            to: '/buttons/button-groups'
          },
          {
            name: 'Brand Buttons',
-            to: '/buttons/brand-buttons',
-            icon: 'cil-cursor'
+            to: '/buttons/brand-buttons'
          }
        ]
      },
@@ -163,7 +143,6 @@ export default [
          {
            name: 'CoreUI Icons',
            to: '/icons/coreui-icons',
-            icon: 'cil-star',
            badge: {
              color: 'info',
              text: 'NEW'
@@ -171,13 +150,11 @@ export default [
          },
          {
            name: 'Brands',
-            to: '/icons/brands',
-            icon: 'cil-star'
+            to: '/icons/brands'
          },
          {
            name: 'Flags',
-            to: '/icons/flags',
-            icon: 'cil-star'
+            to: '/icons/flags'
          }
        ]
      },
@@ -189,18 +166,15 @@ export default [
        items: [
          {
            name: 'Alerts',
-            to: '/notifications/alerts',
-            icon: 'cil-bell'
+            to: '/notifications/alerts'
          },
          {
            name: 'Badges',
-            to: '/notifications/badges',
-            icon: 'cil-bell'
+            to: '/notifications/badges'
          },
          {
            name: 'Modals',
-            to: '/notifications/modals',
-            icon: 'cil-bell'
+            to: '/notifications/modals'
          }
        ]
      },
@@ -231,23 +205,19 @@ export default [
        items: [
          {
            name: 'Login',
-            to: '/pages/login',
-            icon: 'cil-star'
+            to: '/pages/login'
          },
          {
            name: 'Register',
-            to: '/pages/register',
-            icon: 'cil-star'
+            to: '/pages/register'
          },
          {
            name: 'Error 404',
-            to: '/pages/404',
-            icon: 'cil-star'
+            to: '/pages/404'
          },
          {
            name: 'Error 500',
-            to: '/pages/500',
-            icon: 'cil-star'
+            to: '/pages/500'
          }
        ]
      },
@@ -2,7 +2,7 @@ import 'core-js/stable'
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-import CoreuiVue from '@coreui/vue/src'
+import CoreuiVue from '@coreui/vue'
 import { iconsSet as icons } from './assets/icons/icons.js'
 import store from './store'

@@ -37,6 +37,16 @@
          </CCollapse>
        </CCardBody>
      </CCard>
+      <CCard>
+        <CCardHeader @click.native="cardCollapse = !cardCollapse"> 
+          <strong>Collapsible card</strong>
+        </CCardHeader>
+        <CCardBody>
+          <CCollapse :show="cardCollapse" class="mt-2">
+            <CCardText>Collapse contents Here</CCardText>
+          </CCollapse>
+        </CCardBody>
+      </CCard>
    </CCol>
  </CRow>
 </template>
@@ -47,6 +57,7 @@ export default {
  data () {
    return {
      collapse: false,
+      cardCollapse: true,
      innerCollapse: false,
      text: `
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
@@ -3,7 +3,8 @@
    <CCard>
      <CCardHeader>
        <CIcon name="cil-justify-center"/>
-        <strong> Responsive bootstrap Pagination</strong>
+        <strong> Pagination </strong>
+        <small>size</small>
        <div class="card-header-actions">
          <a 
            href="https://coreui.io/vue/docs/components/pagination" 
@@ -31,7 +32,7 @@
          :pages="10"/>
        <br>

-        <div>
+        <div class="d-md-down-none">
          <h6>Large</h6>
          <CPagination
            size="lg"
@@ -86,7 +87,7 @@ export default {
  name: 'Paginations',
  data () {
    return {
-      currentPage: 3,
+      currentPage: 3
    }
  }
 }
@@ -8,7 +8,7 @@

 <script>
 import { CChartLine } from '@coreui/vue-chartjs'
-import { getColor, hexToRgba } from '@coreui/utils/src'
+import { getStyle, hexToRgba } from '@coreui/utils/src'

 function random (min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
@@ -21,9 +21,9 @@ export default {
  },
  computed: {
    defaultDatasets () {
-      const brandSuccess = getColor('success') || '#4dbd74'
-      const brandInfo = getColor('info') || '#20a8d8'
-      const brandDanger = getColor('danger') || '#f86c6b'
+      const brandSuccess = getStyle('success2') || '#4dbd74'
+      const brandInfo = getStyle('info') || '#20a8d8'
+      const brandDanger = getStyle('danger') || '#f86c6b'

      let elements = 27
      const data1 = []
@@ -1,7 +1,7 @@
 <template>
-  <CContainer class="d-flex align-items-center min-vh-100">
-    <CRow class="justify-content-center">
-      <CCol md="8">
+  <CContainer class="d-flex content-center min-vh-100">
+    <CRow>
+      <CCol>
        <CCardGroup>
          <CCard class="p-4">
            <CCardBody>
@@ -22,11 +22,12 @@
                  <template #prepend-content><CIcon name="cil-lock-locked"/></template>
                </CInput>
                <CRow>
-                  <CCol col="6">
+                  <CCol col="6" class="text-left">
                    <CButton color="primary" class="px-4">Login</CButton>
                  </CCol>
                  <CCol col="6" class="text-right">
                    <CButton color="link" class="px-0">Forgot password?</CButton>
+                    <CButton color="link" class="d-md-none">Register now!</CButton>
                  </CCol>
                </CRow>
              </CForm>
@@ -35,8 +36,7 @@
          <CCard
            color="primary"
            text-color="white"
-            class="text-center py-5 d-md-down-none"
-            style="width:44%"
+            class="text-center py-5 d-sm-down-none"
            body-wrapper
          >
            <h2>Sign up</h2>
@@ -1,59 +1,61 @@
 <template>
-  <CContainer class="min-vh-100 d-flex align-items-center">
-    <CRow class="w-100 justify-content-center">
-      <CCol md="6" sm="8">
-        <CCard class="mx-4 mb-0">
-          <CCardBody class="p-4">
-            <CForm>
-              <h1>Register</h1>
-              <p class="text-muted">Create your account</p>
-              <CInput
-                placeholder="Username"
-                autocomplete="username"
-              >
-                <template #prepend-content><CIcon name="cil-user"/></template>
-              </CInput>
-              <CInput
-                placeholder="Email"
-                autocomplete="email"
-                prepend="@"
-              />
-              <CInput
-                placeholder="Password"
-                type="password"
-                autocomplete="new-password"
-              >
-                <template #prepend-content><CIcon name="cil-lock-locked"/></template>
-              </CInput>
-              <CInput
-                placeholder="Repeat password"
-                type="password"
-                autocomplete="new-password"
-                class="mb-4"
-              >
-                <template #prepend-content><CIcon name="cil-lock-locked"/></template>
-              </CInput>
-              <CButton color="success" block>Create Account</CButton>
-            </CForm>
-          </CCardBody>
-          <CCardFooter class="p-4">
-            <CRow>
-              <CCol col="6">
-                <CButton block color="facebook">
-                  Facebook
-                </CButton>
-              </CCol>
-              <CCol col="6">
-                <CButton block color="twitter">
-                  Twitter
-                </CButton>
-              </CCol>
-            </CRow>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-    </CRow>
-  </CContainer>
+  <div class="d-flex align-items-center min-vh-100">
+    <CContainer fluid>
+      <CRow class="justify-content-center">
+        <CCol md="6">
+          <CCard class="mx-4 mb-0">
+            <CCardBody class="p-4">
+              <CForm>
+                <h1>Register</h1>
+                <p class="text-muted">Create your account</p>
+                <CInput
+                  placeholder="Username"
+                  autocomplete="username"
+                >
+                  <template #prepend-content><CIcon name="cil-user"/></template>
+                </CInput>
+                <CInput
+                  placeholder="Email"
+                  autocomplete="email"
+                  prepend="@"
+                />
+                <CInput
+                  placeholder="Password"
+                  type="password"
+                  autocomplete="new-password"
+                >
+                  <template #prepend-content><CIcon name="cil-lock-locked"/></template>
+                </CInput>
+                <CInput
+                  placeholder="Repeat password"
+                  type="password"
+                  autocomplete="new-password"
+                  class="mb-4"
+                >
+                  <template #prepend-content><CIcon name="cil-lock-locked"/></template>
+                </CInput>
+                <CButton color="success" block>Create Account</CButton>
+              </CForm>
+            </CCardBody>
+            <CCardFooter class="p-4">
+              <CRow>
+                <CCol col="6">
+                  <CButton block color="facebook">
+                    Facebook
+                  </CButton>
+                </CCol>
+                <CCol col="6">
+                  <CButton block color="twitter">
+                    Twitter
+                  </CButton>
+                </CCol>
+              </CRow>
+            </CCardFooter>
+          </CCard>
+        </CCol>
+      </CRow>
+    </CContainer>
+  </div>
 </template>

 <script>
@@ -29,11 +29,7 @@ export default {
  computed: {
    fields () {
      return [
-        { 
-          key: 'key', 
-          label: this.userData.filter(param => param.key === 'username')[0].value,
-          _style: 'width:150px'
-        },
+        { key: 'key', label: this.username, _style: 'width:150px'},
        { key: 'value', label: '', _style: 'width:150px;' }
      ]
    },
@@ -45,6 +41,9 @@ export default {
    },
    visibleData () {
      return this.userData.filter(param => param.key !== 'username')
+    },
+    username () {
+      return this.userData.filter(param => param.key === 'username')[0].value
    }
  },
  methods: {
@@ -6,8 +6,8 @@ exports[`TheContainer.vue renders correctly 1`] = `
 >
  <thesidebar-stub />
   
-  <div
-    class="c-wrapper c-fixed-components"
+  <cwrapper-stub
+    tag="div"
  >
    <theheader-stub />
     
@@ -29,6 +29,6 @@ exports[`TheContainer.vue renders correctly 1`] = `
       
      <thefooter-stub />
    </div>
-  </div>
+  </cwrapper-stub>
 </div>
 `;
@@ -100,6 +100,32 @@ exports[`Collapses.vue renders correctly 1`] = `
        </div>
      </div>
    </div>
+     
+    <div
+      class="card"
+    >
+      <header
+        class="card-header"
+      >
+        <strong>
+          Collapsible card
+        </strong>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <div
+          class="mt-2"
+        >
+          <p
+            class="card-text"
+          >
+            Collapse contents Here
+          </p>
+        </div>
+      </div>
+    </div>
  </div>
 </div>
 `;
@@ -9,9 +9,13 @@ exports[`Paginations.vue renders correctly 1`] = `
      />
       
      <strong>
-         Responsive bootstrap Pagination
+         Pagination 
      </strong>
       
+      <small>
+        size
+      </small>
+       
      <div
        class="card-header-actions"
      >
@@ -65,7 +69,9 @@ exports[`Paginations.vue renders correctly 1`] = `
       
      <br />
       
-      <div>
+      <div
+        class="d-md-down-none"
+      >
        <h6>
          Large
        </h6>
@@ -2,16 +2,14 @@

 exports[`Login.vue renders correctly 1`] = `
 <ccontainer-stub
-  class="d-flex align-items-center min-vh-100"
+  class="d-flex content-center min-vh-100"
  tag="div"
 >
  <crow-stub
-    class="justify-content-center"
    gutters="true"
    tag="div"
  >
    <ccol-stub
-      md="8"
      tag="div"
    >
      <ccardgroup-stub
@@ -51,6 +49,7 @@ exports[`Login.vue renders correctly 1`] = `
                tag="div"
              >
                <ccol-stub
+                  class="text-left"
                  col="6"
                  tag="div"
                >
@@ -85,6 +84,19 @@ exports[`Login.vue renders correctly 1`] = `
                  >
                    Forgot password?
                  </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="router-link-active"
+                    class="d-md-none"
+                    color="link"
+                    event="click"
+                    exactactiveclass="router-link-exact-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                  >
+                    Register now!
+                  </cbutton-stub>
                </ccol-stub>
              </crow-stub>
            </cform-stub>
@@ -93,7 +105,7 @@ exports[`Login.vue renders correctly 1`] = `
         
        <ccard-stub
          bodywrapper="true"
-          class="text-center py-5 d-md-down-none"
+          class="text-center py-5 d-sm-down-none"
          color="primary"
          textcolor="white"
        >
@@ -1,132 +1,135 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Register.vue renders correctly 1`] = `
-<ccontainer-stub
-  class="min-vh-100 d-flex align-items-center"
-  tag="div"
+<div
+  class="d-flex align-items-center min-vh-100"
 >
-  <crow-stub
-    class="w-100 justify-content-center"
-    gutters="true"
+  <ccontainer-stub
+    fluid="true"
    tag="div"
  >
-    <ccol-stub
-      md="6"
-      sm="8"
+    <crow-stub
+      class="justify-content-center"
+      gutters="true"
      tag="div"
    >
-      <ccard-stub
-        class="mx-4 mb-0"
+      <ccol-stub
+        md="6"
+        tag="div"
      >
-        <ccardbody-stub
-          class="p-4"
+        <ccard-stub
+          class="mx-4 mb-0"
        >
-          <cform-stub>
-            <h1>
-              Register
-            </h1>
-             
-            <p
-              class="text-muted"
-            >
-              Create your account
-            </p>
-             
-            <cinput-stub
-              autocomplete="username"
-              lazy="400"
-              placeholder="Username"
-              type="text"
-            />
-             
-            <cinput-stub
-              autocomplete="email"
-              lazy="400"
-              placeholder="Email"
-              prepend="@"
-              type="text"
-            />
-             
-            <cinput-stub
-              autocomplete="new-password"
-              lazy="400"
-              placeholder="Password"
-              type="password"
-            />
-             
-            <cinput-stub
-              autocomplete="new-password"
-              class="mb-4"
-              lazy="400"
-              placeholder="Repeat password"
-              type="password"
-            />
-             
-            <cbutton-stub
-              activeclass="router-link-active"
-              block="true"
-              color="success"
-              event="click"
-              exactactiveclass="router-link-exact-active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Create Account
-            </cbutton-stub>
-          </cform-stub>
-        </ccardbody-stub>
-         
-        <ccardfooter-stub
-          class="p-4"
-        >
-          <crow-stub
-            gutters="true"
-            tag="div"
+          <ccardbody-stub
+            class="p-4"
          >
-            <ccol-stub
-              col="6"
-              tag="div"
-            >
+            <cform-stub>
+              <h1>
+                Register
+              </h1>
+               
+              <p
+                class="text-muted"
+              >
+                Create your account
+              </p>
+               
+              <cinput-stub
+                autocomplete="username"
+                lazy="400"
+                placeholder="Username"
+                type="text"
+              />
+               
+              <cinput-stub
+                autocomplete="email"
+                lazy="400"
+                placeholder="Email"
+                prepend="@"
+                type="text"
+              />
+               
+              <cinput-stub
+                autocomplete="new-password"
+                lazy="400"
+                placeholder="Password"
+                type="password"
+              />
+               
+              <cinput-stub
+                autocomplete="new-password"
+                class="mb-4"
+                lazy="400"
+                placeholder="Repeat password"
+                type="password"
+              />
+               
              <cbutton-stub
                activeclass="router-link-active"
                block="true"
-                color="facebook"
+                color="success"
                event="click"
                exactactiveclass="router-link-exact-active"
                routertag="a"
                target="_self"
                type="button"
              >
-                
-                Facebook
-              
+                Create Account
              </cbutton-stub>
-            </ccol-stub>
+            </cform-stub>
+          </ccardbody-stub>
           
-            <ccol-stub
-              col="6"
+          <ccardfooter-stub
+            class="p-4"
+          >
+            <crow-stub
+              gutters="true"
              tag="div"
            >
-              <cbutton-stub
-                activeclass="router-link-active"
-                block="true"
-                color="twitter"
-                event="click"
-                exactactiveclass="router-link-exact-active"
-                routertag="a"
-                target="_self"
-                type="button"
+              <ccol-stub
+                col="6"
+                tag="div"
              >
+                <cbutton-stub
+                  activeclass="router-link-active"
+                  block="true"
+                  color="facebook"
+                  event="click"
+                  exactactiveclass="router-link-exact-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                >
                  
-                Twitter
+                  Facebook
                
-              </cbutton-stub>
-            </ccol-stub>
-          </crow-stub>
-        </ccardfooter-stub>
-      </ccard-stub>
-    </ccol-stub>
-  </crow-stub>
-</ccontainer-stub>
+                </cbutton-stub>
+              </ccol-stub>
+               
+              <ccol-stub
+                col="6"
+                tag="div"
+              >
+                <cbutton-stub
+                  activeclass="router-link-active"
+                  block="true"
+                  color="twitter"
+                  event="click"
+                  exactactiveclass="router-link-exact-active"
+                  routertag="a"
+                  target="_self"
+                  type="button"
+                >
+                  
+                  Twitter
+                
+                </cbutton-stub>
+              </ccol-stub>
+            </crow-stub>
+          </ccardfooter-stub>
+        </ccard-stub>
+      </ccol-stub>
+    </crow-stub>
+  </ccontainer-stub>
+</div>
 `;
@@ -1,46 +1,37 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import VueRouter from 'vue-router'
 import CoreuiVue from '@coreui/vue'
 import User from '@/views/users/User'
+import appRouter from '@/router'

 const localVue = createLocalVue()
 localVue.use(VueRouter)
-const router = new VueRouter()
+const router = appRouter
+router.push({path: '/users/1'})

 localVue.use(CoreuiVue)

 describe('User.vue', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(User, {
+      localVue,
+      router
+    })
+  })
  it('has a name', () => {
    expect(User.name).toBe('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()
+    expect(typeof User.methods.goBack).toEqual('function')
  })
  test('renders correctly', () => {
-    const wrapper = shallowMount(User, {
-      localVue,
-        router
-    })
    expect(wrapper.element).toMatchSnapshot()
  })
 })
@@ -37,15 +37,4 @@ describe('Users.vue', () => {
    })
    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()
-  })
 })
@@ -1,50 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`User.vue renders correctly 1`] = `
-<crow-stub
-  gutters="true"
-  tag="div"
+<div
+  class="row"
 >
-  <ccol-stub
-    col="12"
-    lg="6"
-    tag="div"
+  <div
+    class="col-12 col-lg-6"
  >
-    <ccard-stub>
-      <ccardheader-stub>
+    <div
+      class="card"
+    >
+      <header
+        class="card-header"
+      >
        
-        User id:  
+        User id:  1
      
-      </ccardheader-stub>
+      </header>
       
-      <ccardbody-stub>
-        <cdatatable-stub
-          fields="[object Object],[object Object]"
-          fixed="true"
-          header="true"
-          items="[object Object]"
-          itemsperpage="10"
-          responsive="true"
+      <div
+        class="card-body"
+      >
+        <div
+          data-v-31168812=""
          small=""
-          sortervalue="[object Object]"
-          striped="true"
-        />
-      </ccardbody-stub>
+        >
+          <!---->
+          <div
+            class="position-relative table-responsive"
+            data-v-31168812=""
+          >
+            <table
+              class="table table-striped b-table-fixed"
+              data-v-31168812=""
+            >
+              <thead
+                data-v-31168812=""
+              >
+                <tr
+                  data-v-31168812=""
+                >
+                  <th
+                    class=""
+                    data-v-31168812=""
+                    style="width: 150px;"
+                  >
+                    <div
+                      class="d-inline"
+                      data-v-31168812=""
+                    >
+                      Samppa Nori
+                    </div>
+                    <!---->
+                  </th>
+                  <th
+                    class=""
+                    data-v-31168812=""
+                    style="width: 150px;"
+                  >
+                    <div
+                      class="d-inline"
+                      data-v-31168812=""
+                    >
                      
-      <ccardfooter-stub>
-        <cbutton-stub
-          activeclass="router-link-active"
-          color="primary"
-          event="click"
-          exactactiveclass="router-link-exact-active"
-          routertag="a"
-          target="_self"
+                    </div>
+                    <!---->
+                  </th>
+                </tr>
+                <!---->
+              </thead>
+              <tbody
+                class="position-relative"
+                data-v-31168812=""
+              >
+                <tr
+                  data-v-31168812=""
+                >
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     registered 
+                  </td>
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     2012/01/01 
+                  </td>
+                </tr>
+                <!---->
+                <tr
+                  data-v-31168812=""
+                >
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     role 
+                  </td>
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     Member 
+                  </td>
+                </tr>
+                <!---->
+                <tr
+                  data-v-31168812=""
+                >
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     status 
+                  </td>
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     Active 
+                  </td>
+                </tr>
+                <!---->
+                <!---->
+              </tbody>
+              <!---->
+            </table>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+       
+      <footer
+        class="card-footer"
+      >
+        <button
+          class="btn btn-primary"
          type="button"
        >
          Back
-        </cbutton-stub>
-      </ccardfooter-stub>
-    </ccard-stub>
-  </ccol-stub>
-</crow-stub>
+        </button>
+      </footer>
+    </div>
+  </div>
+</div>
 `;
@@ -21,18 +21,26 @@ exports[`Users.vue renders correctly 1`] = `
       
      <ccardbody-stub>
        <cdatatable-stub
+          activepage="1"
          clickablerows="true"
          fields="[object Object],[object Object],[object Object],[object Object]"
          header="true"
          hover="true"
-          index-column=""
          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]"
          itemsperpage="5"
-          pagination="[object Object]"
          responsive="true"
          sortervalue="[object Object]"
          striped="true"
        />
+         
+        <cpagination-stub
+          activepage="1"
+          align="center"
+          arrows="true"
+          dots="true"
+          limit="5"
+          pages="5"
+        />
      </ccardbody-stub>
    </ccard-stub>
  </ccol-stub>