sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: copy features from pro template

Browse Source
This commit is contained in:
woothu
2020-02-24 16:42:33 +01:00
parent c68263b85f
commit 7e9d384af2
21 changed files with 1511 additions and 1658 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1046 -1311
View File
File diff suppressed because it is too large Load Diff
package.json
+26 -26
View File
@@ -1,6 +1,6 @@
{ {
"name": "@coreui/coreui-free-vue-admin-template", "name": "@coreui/coreui-free-vue-admin-template",
"version": "3.0.0-beta.3", "version": "3.0.0",
"description": "Open Source Bootstrap Admin Template", "description": "Open Source Bootstrap Admin Template",
"author": { "author": {
"name": "CoreUI", "name": "CoreUI",
@@ -15,7 +15,7 @@
} }
], ],
"homepage": "http://coreui.io", "homepage": "http://coreui.io",
"copyright": "Copyright 2019 creativeLabs Łukasz Holeczek", "copyright": "Copyright 2020 creativeLabs Łukasz Holeczek",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
@@ -27,33 +27,33 @@
"release": "npm-run-all clearCache lint build test:unit test:e2e" "release": "npm-run-all clearCache lint build test:unit test:e2e"
}, },
"dependencies": { "dependencies": {
"@coreui/coreui": "^3.0.0-beta.4", "@coreui/coreui": "~3.0.0",
"@coreui/icons": "^1.0.0", "@coreui/icons": "~1.0.1",
"@coreui/utils": "^1.2.2", "@coreui/utils": "~1.2.2",
"@coreui/vue": "coreui/coreui-vue#521325c669faccc8e3de43f0e01411ea06ecdea4", "@coreui/vue": "~3.0.0",
"@coreui/vue-chartjs": "^1.0.3", "@coreui/vue-chartjs": "~1.0.3",
"vue": "^2.6.11", "vue": "~2.6.11",
"vue-router": "^3.1.5", "vue-router": "~3.1.5",
"vuex": "^3.1.2" "vuex": "~3.1.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.8.3", "@babel/core": "~7.8.4",
"@vue/cli-plugin-babel": "^4.1.2", "@vue/cli-plugin-babel": "~4.2.2",
"@vue/cli-plugin-e2e-nightwatch": "^4.1.2", "@vue/cli-plugin-e2e-nightwatch": "~4.2.2",
"@vue/cli-plugin-eslint": "^4.1.2", "@vue/cli-plugin-eslint": "~4.2.2",
"@vue/cli-plugin-unit-jest": "^4.1.2", "@vue/cli-plugin-unit-jest": "~4.2.2",
"@vue/cli-service": "^4.1.2", "@vue/cli-service": "~4.2.2",
"@vue/test-utils": "1.0.0-beta.29", "@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.3", "babel-eslint": "~10.0.3",
"babel-jest": "^25.1.0", "babel-jest": "~25.1.0",
"chromedriver": "^79.0.2", "chromedriver": "~80.0.1",
"core-js": "^3.6.4", "core-js": "~3.6.4",
"eslint": "^6.8.0", "eslint": "~6.8.0",
"eslint-plugin-vue": "^6.2.1", "eslint-plugin-vue": "~6.2.1",
"node-sass": "^4.13.1", "node-sass": "~4.13.1",
"npm-run-all": "^4.1.5", "npm-run-all": "~4.1.5",
"sass-loader": "^8.0.2", "sass-loader": "~8.0.2",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "~2.6.11"
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
src/containers/TheContainer.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="c-app"> <div class="c-app">
<TheSidebar/> <TheSidebar/>
<div class="c-wrapper c-fixed-components"> <CWrapper>
<TheHeader/> <TheHeader/>
<div class="c-body"> <div class="c-body">
<main class="c-main"> <main class="c-main">
@@ -13,7 +13,7 @@
</main> </main>
<TheFooter/> <TheFooter/>
</div> </div>
</div> </CWrapper>
</div> </div>
</template> </template>
src/containers/TheFooter.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<CFooter :fixed="false"> <CFooter :fixed="false">
<div> <div>
<a href="https://coreui.io" target="_blank">CoreUI</a> <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>
<div class="ml-auto"> <div class="ml-auto">
<span class="mr-1">Powered by</span> <span class="mr-1">Powered by</span>
src/containers/_nav.js
+29 -59
View File
@@ -40,83 +40,67 @@ export default [
items: [ items: [
{ {
name: 'Breadcrumbs', name: 'Breadcrumbs',
to: '/base/breadcrumbs', to: '/base/breadcrumbs'
icon: 'cil-puzzle'
}, },
{ {
name: 'Cards', name: 'Cards',
to: '/base/cards', to: '/base/cards'
icon: 'cil-puzzle'
}, },
{ {
name: 'Carousels', name: 'Carousels',
to: '/base/carousels', to: '/base/carousels'
icon: 'cil-puzzle'
}, },
{ {
name: 'Collapses', name: 'Collapses',
to: '/base/collapses', to: '/base/collapses'
icon: 'cil-puzzle'
}, },
{ {
name: 'Forms', name: 'Forms',
to: '/base/forms', to: '/base/forms'
icon: 'cil-puzzle'
}, },
{ {
name: 'Jumbotrons', name: 'Jumbotrons',
to: '/base/jumbotrons', to: '/base/jumbotrons'
icon: 'cil-puzzle'
}, },
{ {
name: 'List Groups', name: 'List Groups',
to: '/base/list-groups', to: '/base/list-groups'
icon: 'cil-puzzle'
}, },
{ {
name: 'Navs', name: 'Navs',
to: '/base/navs', to: '/base/navs'
icon: 'cil-puzzle'
}, },
{ {
name: 'Navbars', name: 'Navbars',
to: '/base/navbars', to: '/base/navbars'
icon: 'cil-puzzle'
}, },
{ {
name: 'Paginations', name: 'Paginations',
to: '/base/paginations', to: '/base/paginations'
icon: 'cil-puzzle'
}, },
{ {
name: 'Popovers', name: 'Popovers',
to: '/base/popovers', to: '/base/popovers'
icon: 'cil-puzzle'
}, },
{ {
name: 'Progress Bars', name: 'Progress Bars',
to: '/base/progress-bars', to: '/base/progress-bars'
icon: 'cil-puzzle'
}, },
{ {
name: 'Switches', name: 'Switches',
to: '/base/switches', to: '/base/switches'
icon: 'cil-puzzle'
}, },
{ {
name: 'Tables', name: 'Tables',
to: '/base/tables', to: '/base/tables'
icon: 'cil-puzzle'
}, },
{ {
name: 'Tabs', name: 'Tabs',
to: '/base/tabs', to: '/base/tabs'
icon: 'cil-puzzle'
}, },
{ {
name: 'Tooltips', name: 'Tooltips',
to: '/base/tooltips', to: '/base/tooltips'
icon: 'cil-puzzle'
} }
] ]
}, },
@@ -128,23 +112,19 @@ export default [
items: [ items: [
{ {
name: 'Buttons', name: 'Buttons',
to: '/buttons/standard-buttons', to: '/buttons/standard-buttons'
icon: 'cil-cursor'
}, },
{ {
name: 'Button Dropdowns', name: 'Button Dropdowns',
to: '/buttons/dropdowns', to: '/buttons/dropdowns'
icon: 'cil-cursor'
}, },
{ {
name: 'Button Groups', name: 'Button Groups',
to: '/buttons/button-groups', to: '/buttons/button-groups'
icon: 'cil-cursor'
}, },
{ {
name: 'Brand Buttons', name: 'Brand Buttons',
to: '/buttons/brand-buttons', to: '/buttons/brand-buttons'
icon: 'cil-cursor'
} }
] ]
}, },
@@ -163,7 +143,6 @@ export default [
{ {
name: 'CoreUI Icons', name: 'CoreUI Icons',
to: '/icons/coreui-icons', to: '/icons/coreui-icons',
icon: 'cil-star',
badge: { badge: {
color: 'info', color: 'info',
text: 'NEW' text: 'NEW'
@@ -171,13 +150,11 @@ export default [
}, },
{ {
name: 'Brands', name: 'Brands',
to: '/icons/brands', to: '/icons/brands'
icon: 'cil-star'
}, },
{ {
name: 'Flags', name: 'Flags',
to: '/icons/flags', to: '/icons/flags'
icon: 'cil-star'
} }
] ]
}, },
@@ -189,18 +166,15 @@ export default [
items: [ items: [
{ {
name: 'Alerts', name: 'Alerts',
to: '/notifications/alerts', to: '/notifications/alerts'
icon: 'cil-bell'
}, },
{ {
name: 'Badges', name: 'Badges',
to: '/notifications/badges', to: '/notifications/badges'
icon: 'cil-bell'
}, },
{ {
name: 'Modals', name: 'Modals',
to: '/notifications/modals', to: '/notifications/modals'
icon: 'cil-bell'
} }
] ]
}, },
@@ -231,23 +205,19 @@ export default [
items: [ items: [
{ {
name: 'Login', name: 'Login',
to: '/pages/login', to: '/pages/login'
icon: 'cil-star'
}, },
{ {
name: 'Register', name: 'Register',
to: '/pages/register', to: '/pages/register'
icon: 'cil-star'
}, },
{ {
name: 'Error 404', name: 'Error 404',
to: '/pages/404', to: '/pages/404'
icon: 'cil-star'
}, },
{ {
name: 'Error 500', name: 'Error 500',
to: '/pages/500', to: '/pages/500'
icon: 'cil-star'
} }
] ]
}, },
src/main.js
+1 -1
View File
@@ -2,7 +2,7 @@ import 'core-js/stable'
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' 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 { iconsSet as icons } from './assets/icons/icons.js'
import store from './store' import store from './store'
src/views/base/Collapses.vue
+11
View File
@@ -37,6 +37,16 @@
</CCollapse> </CCollapse>
</CCardBody> </CCardBody>
</CCard> </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> </CCol>
</CRow> </CRow>
</template> </template>
@@ -47,6 +57,7 @@ export default {
data () { data () {
return { return {
collapse: false, collapse: false,
cardCollapse: true,
innerCollapse: false, innerCollapse: false,
text: ` text: `
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
src/views/base/Paginations.vue
+4 -3
View File
@@ -3,7 +3,8 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<CIcon name="cil-justify-center"/> <CIcon name="cil-justify-center"/>
<strong> Responsive bootstrap Pagination</strong> <strong> Pagination </strong>
<small>size</small>
<div class="card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/components/pagination" href="https://coreui.io/vue/docs/components/pagination"
@@ -31,7 +32,7 @@
:pages="10"/> :pages="10"/>
<br> <br>
<div> <div class="d-md-down-none">
<h6>Large</h6> <h6>Large</h6>
<CPagination <CPagination
size="lg" size="lg"
@@ -86,7 +87,7 @@ export default {
name: 'Paginations', name: 'Paginations',
data () { data () {
return { return {
currentPage: 3, currentPage: 3
} }
} }
} }
src/views/charts/MainChartExample.vue
+4 -4
View File
@@ -8,7 +8,7 @@
<script> <script>
import { CChartLine } from '@coreui/vue-chartjs' import { CChartLine } from '@coreui/vue-chartjs'
import { getColor, hexToRgba } from '@coreui/utils/src' import { getStyle, hexToRgba } from '@coreui/utils/src'
function random (min, max) { function random (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min) return Math.floor(Math.random() * (max - min + 1) + min)
@@ -21,9 +21,9 @@ export default {
}, },
computed: { computed: {
defaultDatasets () { defaultDatasets () {
const brandSuccess = getColor('success') || '#4dbd74' const brandSuccess = getStyle('success2') || '#4dbd74'
const brandInfo = getColor('info') || '#20a8d8' const brandInfo = getStyle('info') || '#20a8d8'
const brandDanger = getColor('danger') || '#f86c6b' const brandDanger = getStyle('danger') || '#f86c6b'
let elements = 27 let elements = 27
const data1 = [] const data1 = []
src/views/pages/Login.vue
+6 -6
View File
@@ -1,7 +1,7 @@
<template> <template>
<CContainer class="d-flex align-items-center min-vh-100"> <CContainer class="d-flex content-center min-vh-100">
<CRow class="justify-content-center"> <CRow>
<CCol md="8"> <CCol>
<CCardGroup> <CCardGroup>
<CCard class="p-4"> <CCard class="p-4">
<CCardBody> <CCardBody>
@@ -22,11 +22,12 @@
<template #prepend-content><CIcon name="cil-lock-locked"/></template> <template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput> </CInput>
<CRow> <CRow>
<CCol col="6"> <CCol col="6" class="text-left">
<CButton color="primary" class="px-4">Login</CButton> <CButton color="primary" class="px-4">Login</CButton>
</CCol> </CCol>
<CCol col="6" class="text-right"> <CCol col="6" class="text-right">
<CButton color="link" class="px-0">Forgot password?</CButton> <CButton color="link" class="px-0">Forgot password?</CButton>
<CButton color="link" class="d-md-none">Register now!</CButton>
</CCol> </CCol>
</CRow> </CRow>
</CForm> </CForm>
@@ -35,8 +36,7 @@
<CCard <CCard
color="primary" color="primary"
text-color="white" text-color="white"
class="text-center py-5 d-md-down-none" class="text-center py-5 d-sm-down-none"
style="width:44%"
body-wrapper body-wrapper
> >
<h2>Sign up</h2> <h2>Sign up</h2>
src/views/pages/Register.vue
+57 -55
View File
@@ -1,59 +1,61 @@
<template> <template>
<CContainer class="min-vh-100 d-flex align-items-center"> <div class="d-flex align-items-center min-vh-100">
<CRow class="w-100 justify-content-center"> <CContainer fluid>
<CCol md="6" sm="8"> <CRow class="justify-content-center">
<CCard class="mx-4 mb-0"> <CCol md="6">
<CCardBody class="p-4"> <CCard class="mx-4 mb-0">
<CForm> <CCardBody class="p-4">
<h1>Register</h1> <CForm>
<p class="text-muted">Create your account</p> <h1>Register</h1>
<CInput <p class="text-muted">Create your account</p>
placeholder="Username" <CInput
autocomplete="username" placeholder="Username"
> autocomplete="username"
<template #prepend-content><CIcon name="cil-user"/></template> >
</CInput> <template #prepend-content><CIcon name="cil-user"/></template>
<CInput </CInput>
placeholder="Email" <CInput
autocomplete="email" placeholder="Email"
prepend="@" autocomplete="email"
/> prepend="@"
<CInput />
placeholder="Password" <CInput
type="password" placeholder="Password"
autocomplete="new-password" type="password"
> autocomplete="new-password"
<template #prepend-content><CIcon name="cil-lock-locked"/></template> >
</CInput> <template #prepend-content><CIcon name="cil-lock-locked"/></template>
<CInput </CInput>
placeholder="Repeat password" <CInput
type="password" placeholder="Repeat password"
autocomplete="new-password" type="password"
class="mb-4" autocomplete="new-password"
> class="mb-4"
<template #prepend-content><CIcon name="cil-lock-locked"/></template> >
</CInput> <template #prepend-content><CIcon name="cil-lock-locked"/></template>
<CButton color="success" block>Create Account</CButton> </CInput>
</CForm> <CButton color="success" block>Create Account</CButton>
</CCardBody> </CForm>
<CCardFooter class="p-4"> </CCardBody>
<CRow> <CCardFooter class="p-4">
<CCol col="6"> <CRow>
<CButton block color="facebook"> <CCol col="6">
Facebook <CButton block color="facebook">
</CButton> Facebook
</CCol> </CButton>
<CCol col="6"> </CCol>
<CButton block color="twitter"> <CCol col="6">
Twitter <CButton block color="twitter">
</CButton> Twitter
</CCol> </CButton>
</CRow> </CCol>
</CCardFooter> </CRow>
</CCard> </CCardFooter>
</CCol> </CCard>
</CRow> </CCol>
</CContainer> </CRow>
</CContainer>
</div>
</template> </template>
<script> <script>
src/views/users/User.vue
+4 -5
View File
@@ -29,11 +29,7 @@ export default {
computed: { computed: {
fields () { fields () {
return [ return [
{ { key: 'key', label: this.username, _style: 'width:150px'},
key: 'key',
label: this.userData.filter(param => param.key === 'username')[0].value,
_style: 'width:150px'
},
{ key: 'value', label: '', _style: 'width:150px;' } { key: 'value', label: '', _style: 'width:150px;' }
] ]
}, },
@@ -45,6 +41,9 @@ export default {
}, },
visibleData () { visibleData () {
return this.userData.filter(param => param.key !== 'username') return this.userData.filter(param => param.key !== 'username')
},
username () {
return this.userData.filter(param => param.key === 'username')[0].value
} }
}, },
methods: { methods: {
tests/unit/containers/__snapshots__/TheContainer.spec.js.snap
+3 -3
View File
@@ -6,8 +6,8 @@ exports[`TheContainer.vue renders correctly 1`] = `
> >
<thesidebar-stub /> <thesidebar-stub />
<div <cwrapper-stub
class="c-wrapper c-fixed-components" tag="div"
> >
<theheader-stub /> <theheader-stub />
@@ -29,6 +29,6 @@ exports[`TheContainer.vue renders correctly 1`] = `
<thefooter-stub /> <thefooter-stub />
</div> </div>
</div> </cwrapper-stub>
</div> </div>
`; `;
tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
+26
View File
@@ -100,6 +100,32 @@ exports[`Collapses.vue renders correctly 1`] = `
</div> </div>
</div> </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>
</div> </div>
`; `;
tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
+8 -2
View File
@@ -9,9 +9,13 @@ exports[`Paginations.vue renders correctly 1`] = `
/> />
<strong> <strong>
Responsive bootstrap Pagination Pagination
</strong> </strong>
<small>
size
</small>
<div <div
class="card-header-actions" class="card-header-actions"
> >
@@ -65,7 +69,9 @@ exports[`Paginations.vue renders correctly 1`] = `
<br /> <br />
<div> <div
class="d-md-down-none"
>
<h6> <h6>
Large Large
</h6> </h6>
tests/unit/views/pages/__snapshots__/Login.spec.js.snap
+16 -4
View File
@@ -2,16 +2,14 @@
exports[`Login.vue renders correctly 1`] = ` exports[`Login.vue renders correctly 1`] = `
<ccontainer-stub <ccontainer-stub
class="d-flex align-items-center min-vh-100" class="d-flex content-center min-vh-100"
tag="div" tag="div"
> >
<crow-stub <crow-stub
class="justify-content-center"
gutters="true" gutters="true"
tag="div" tag="div"
> >
<ccol-stub <ccol-stub
md="8"
tag="div" tag="div"
> >
<ccardgroup-stub <ccardgroup-stub
@@ -51,6 +49,7 @@ exports[`Login.vue renders correctly 1`] = `
tag="div" tag="div"
> >
<ccol-stub <ccol-stub
class="text-left"
col="6" col="6"
tag="div" tag="div"
> >
@@ -85,6 +84,19 @@ exports[`Login.vue renders correctly 1`] = `
> >
Forgot password? Forgot password?
</cbutton-stub> </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> </ccol-stub>
</crow-stub> </crow-stub>
</cform-stub> </cform-stub>
@@ -93,7 +105,7 @@ exports[`Login.vue renders correctly 1`] = `
<ccard-stub <ccard-stub
bodywrapper="true" bodywrapper="true"
class="text-center py-5 d-md-down-none" class="text-center py-5 d-sm-down-none"
color="primary" color="primary"
textcolor="white" textcolor="white"
> >
tests/unit/views/pages/__snapshots__/Register.spec.js.snap
+107 -104
View File
@@ -1,132 +1,135 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Register.vue renders correctly 1`] = ` exports[`Register.vue renders correctly 1`] = `
<ccontainer-stub <div
class="min-vh-100 d-flex align-items-center" class="d-flex align-items-center min-vh-100"
tag="div"
> >
<crow-stub <ccontainer-stub
class="w-100 justify-content-center" fluid="true"
gutters="true"
tag="div" tag="div"
> >
<ccol-stub <crow-stub
md="6" class="justify-content-center"
sm="8" gutters="true"
tag="div" tag="div"
> >
<ccard-stub <ccol-stub
class="mx-4 mb-0" md="6"
tag="div"
> >
<ccardbody-stub <ccard-stub
class="p-4" class="mx-4 mb-0"
> >
<cform-stub> <ccardbody-stub
<h1> class="p-4"
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"
> >
<ccol-stub <cform-stub>
col="6" <h1>
tag="div" 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 <cbutton-stub
activeclass="router-link-active" activeclass="router-link-active"
block="true" block="true"
color="facebook" color="success"
event="click" event="click"
exactactiveclass="router-link-exact-active" exactactiveclass="router-link-exact-active"
routertag="a" routertag="a"
target="_self" target="_self"
type="button" type="button"
> >
Create Account
Facebook
</cbutton-stub> </cbutton-stub>
</ccol-stub> </cform-stub>
</ccardbody-stub>
<ccol-stub <ccardfooter-stub
col="6" class="p-4"
>
<crow-stub
gutters="true"
tag="div" tag="div"
> >
<cbutton-stub <ccol-stub
activeclass="router-link-active" col="6"
block="true" tag="div"
color="twitter"
event="click"
exactactiveclass="router-link-exact-active"
routertag="a"
target="_self"
type="button"
> >
<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> </cbutton-stub>
</ccol-stub> </ccol-stub>
</crow-stub>
</ccardfooter-stub> <ccol-stub
</ccard-stub> col="6"
</ccol-stub> tag="div"
</crow-stub> >
</ccontainer-stub> <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>
`; `;
tests/unit/views/users/User.spec.js
+12 -21
View File
@@ -1,46 +1,37 @@
import { shallowMount, createLocalVue } from '@vue/test-utils' import { mount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import CoreuiVue from '@coreui/vue' import CoreuiVue from '@coreui/vue'
import User from '@/views/users/User' import User from '@/views/users/User'
import appRouter from '@/router'
const localVue = createLocalVue() const localVue = createLocalVue()
localVue.use(VueRouter) localVue.use(VueRouter)
const router = new VueRouter() const router = appRouter
router.push({path: '/users/1'})
localVue.use(CoreuiVue) localVue.use(CoreuiVue)
describe('User.vue', () => { describe('User.vue', () => {
let wrapper
beforeEach(() => {
wrapper = mount(User, {
localVue,
router
})
})
it('has a name', () => { it('has a name', () => {
expect(User.name).toBe('User') expect(User.name).toBe('User')
}) })
it('is Vue instance', () => { it('is Vue instance', () => {
const wrapper = shallowMount(User, {
localVue,
router
})
expect(wrapper.isVueInstance()).toBe(true) expect(wrapper.isVueInstance()).toBe(true)
}) })
it('is User', () => { it('is User', () => {
const wrapper = shallowMount(User, {
localVue,
router
})
expect(wrapper.is(User)).toBe(true) expect(wrapper.is(User)).toBe(true)
}) })
it('should have methods', () => { it('should have methods', () => {
const wrapper = shallowMount(User,{ expect(typeof User.methods.goBack).toEqual('function')
localVue,
router
})
expect(typeof User.methods.goBack ).toEqual('function')
expect(wrapper.vm.goBack()).toBeUndefined()
}) })
test('renders correctly', () => { test('renders correctly', () => {
const wrapper = shallowMount(User, {
localVue,
router
})
expect(wrapper.element).toMatchSnapshot() expect(wrapper.element).toMatchSnapshot()
}) })
}) })
tests/unit/views/users/Users.spec.js
-11
View File
@@ -37,15 +37,4 @@ describe('Users.vue', () => {
}) })
expect(wrapper.element).toMatchSnapshot() 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
+136 -36
View File
@@ -1,50 +1,150 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`User.vue renders correctly 1`] = ` exports[`User.vue renders correctly 1`] = `
<crow-stub <div
gutters="true" class="row"
tag="div"
> >
<ccol-stub <div
col="12" class="col-12 col-lg-6"
lg="6"
tag="div"
> >
<ccard-stub> <div
<ccardheader-stub> class="card"
>
<header
class="card-header"
>
User id: User id: 1
</ccardheader-stub> </header>
<ccardbody-stub> <div
<cdatatable-stub class="card-body"
fields="[object Object],[object Object]" >
fixed="true" <div
header="true" data-v-31168812=""
items="[object Object]"
itemsperpage="10"
responsive="true"
small="" small=""
sortervalue="[object Object]" >
striped="true" <!---->
/> <div
</ccardbody-stub> 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> </div>
<cbutton-stub <!---->
activeclass="router-link-active" </th>
color="primary" </tr>
event="click" <!---->
exactactiveclass="router-link-exact-active" </thead>
routertag="a" <tbody
target="_self" 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" type="button"
> >
Back Back
</cbutton-stub> </button>
</ccardfooter-stub> </footer>
</ccard-stub> </div>
</ccol-stub> </div>
</crow-stub> </div>
`; `;
tests/unit/views/users/__snapshots__/Users.spec.js.snap
+10 -2
View File
@@ -21,18 +21,26 @@ exports[`Users.vue renders correctly 1`] = `
<ccardbody-stub> <ccardbody-stub>
<cdatatable-stub <cdatatable-stub
activepage="1"
clickablerows="true" clickablerows="true"
fields="[object Object],[object Object],[object Object],[object Object]" fields="[object Object],[object Object],[object Object],[object Object]"
header="true" header="true"
hover="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]" 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" itemsperpage="5"
pagination="[object Object]"
responsive="true" responsive="true"
sortervalue="[object Object]" sortervalue="[object Object]"
striped="true" striped="true"
/> />
<cpagination-stub
activepage="1"
align="center"
arrows="true"
dots="true"
limit="5"
pages="5"
/>
</ccardbody-stub> </ccardbody-stub>
</ccard-stub> </ccard-stub>
</ccol-stub> </ccol-stub>