Skip to content

Commit 8c14ca9

Browse files
woothuwoothu
committed
refactor: view fixes and changes, update packages, add e2e sidebar tests
1 parent 5a23cd1 commit 8c14ca9

File tree

11 files changed

+2729
-1115
lines changed

11 files changed

+2729
-1115
lines changed

‎package-lock.json

+2,393-1,056
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -31,32 +31,32 @@
3131
"release": "npm-run-all clearCache lint build test:unit test:e2e"
3232
},
3333
"dependencies": {
34-
"@coreui/coreui": "^3.2.0",
34+
"@coreui/coreui": "^3.2.2",
3535
"@coreui/icons": "^2.0.0-beta.3",
3636
"@coreui/utils": "^1.3.1",
37-
"@coreui/vue": "^3.0.12",
37+
"@coreui/vue": "^3.1.1",
3838
"@coreui/vue-chartjs": "^1.0.5",
3939
"vue": "~2.6.11",
40-
"vue-router": "~3.3.2",
41-
"vuex": "~3.4.0"
40+
"vue-router": "~3.3.4",
41+
"vuex": "~3.5.1"
4242
},
4343
"devDependencies": {
44-
"@babel/core": "~7.10.2",
45-
"@vue/cli-plugin-babel": "~4.4.1",
46-
"@vue/cli-plugin-e2e-nightwatch": "~4.3.1",
47-
"@vue/cli-plugin-eslint": "~4.4.1",
48-
"@vue/cli-plugin-unit-jest": "~4.4.1",
49-
"@vue/cli-service": "~4.4.1",
50-
"@vue/test-utils": "1.0.0-beta.29",
44+
"@babel/core": "~7.10.5",
45+
"@vue/cli-plugin-babel": "~4.4.6",
46+
"@vue/cli-plugin-e2e-nightwatch": "~4.4.6",
47+
"@vue/cli-plugin-eslint": "~4.4.6",
48+
"@vue/cli-plugin-unit-jest": "~4.4.6",
49+
"@vue/cli-service": "~4.4.6",
50+
"@vue/test-utils": "1.0.3",
5151
"babel-eslint": "~10.1.0",
52-
"babel-jest": "~26.0.1",
53-
"chromedriver": "83.0.0",
52+
"babel-jest": "~26.1.0",
53+
"chromedriver": "83.0.1",
5454
"core-js": "~3.6.5",
55-
"eslint": "~6.8.0",
55+
"eslint": "~7.4.0",
5656
"eslint-plugin-vue": "~6.2.2",
5757
"node-sass": "~4.14.1",
5858
"npm-run-all": "~4.1.5",
59-
"sass-loader": "~8.0.2",
59+
"sass-loader": "~9.0.2",
6060
"vue-template-compiler": "~2.6.11"
6161
},
6262
"browserslist": [

‎src/containers/TheFooter.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<a href="https://coreui.io" target="_blank">CoreUI</a>
55
<span class="ml-1">&copy; {{new Date().getFullYear()}} creativeLabs.</span>
66
</div>
7-
<div class="ml-auto">
8-
<span class="mr-1">Powered by</span>
9-
<a href="https://coreui.io/vue" target="_blank">CoreUI for Vue</a>
7+
<div class="mfs-auto">
8+
<span class="mr-1" target="_blank">Powered by</span>
9+
<a href="https://coreui.io/vue">CoreUI for Vue</a>
1010
</div>
1111
</CFooter>
1212
</template>

‎src/containers/TheHeaderDropdownAccnt.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,19 @@
2020
</CDropdownHeader>
2121
<CDropdownItem>
2222
<CIcon name="cil-bell"/> Updates
23-
<CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
23+
<CBadge color="info" class="mfs-auto">{{ itemsCount }}</CBadge>
2424
</CDropdownItem>
2525
<CDropdownItem>
2626
<CIcon name="cil-envelope-open" /> Messages
27-
<CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
27+
<CBadge color="success" class="mfs-auto">{{ itemsCount }}</CBadge>
2828
</CDropdownItem>
2929
<CDropdownItem>
3030
<CIcon name="cil-task" /> Tasks
31-
<CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
31+
<CBadge color="danger" class="mfs-auto">{{ itemsCount }}</CBadge>
3232
</CDropdownItem>
3333
<CDropdownItem>
3434
<CIcon name="cil-comment-square" /> Comments
35-
<CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
35+
<CBadge color="warning" class="mfs-auto">{{ itemsCount }}</CBadge>
3636
</CDropdownItem>
3737
<CDropdownHeader
3838
tag="div"
@@ -49,11 +49,11 @@
4949
</CDropdownItem>
5050
<CDropdownItem>
5151
<CIcon name="cil-dollar" /> Payments
52-
<CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
52+
<CBadge color="secondary" class="mfs-auto">{{ itemsCount }}</CBadge>
5353
</CDropdownItem>
5454
<CDropdownItem>
5555
<CIcon name="cil-file" /> Projects
56-
<CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
56+
<CBadge color="primary" class="mfs-auto">{{ itemsCount }}</CBadge>
5757
</CDropdownItem>
5858
<CDropdownDivider/>
5959
<CDropdownItem>

‎src/views/base/Collapses.vue

+79-6
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,89 @@
4040
</CCol>
4141
<CCol col="12" md="6">
4242
<CCard>
43-
<CCardHeader
44-
@click="cardCollapse = !cardCollapse"
45-
class="btn text-left"
43+
<CButton
44+
@click="cardCollapse = !cardCollapse"
45+
tag="button"
46+
color="link"
47+
block
48+
class="text-left shadow-none card-header"
4649
>
47-
<strong>Collapsible card</strong>
48-
</CCardHeader>
50+
<h5 class="m-0">Collapsible card</h5>
51+
</CButton>
4952
<CCollapse :show="cardCollapse">
5053
<CCardBody class="m-1">
5154
{{text}}
5255
</CCardBody>
53-
</CCollapse>
56+
</CCollapse>
57+
</CCard>
58+
</CCol>
59+
<CCol xl="6">
60+
<CCard>
61+
<CCardHeader>
62+
Collapse
63+
<small> accordion</small>
64+
</CCardHeader>
65+
<CCardBody>
66+
<div>
67+
<CCard class="mb-0">
68+
<CButton
69+
block
70+
color="link"
71+
class="text-left shadow-none card-header"
72+
@click="accordion = accordion === 0 ? false : 0"
73+
>
74+
<h5 class="m-0">Collapsible Group Item #1</h5>
75+
</CButton>
76+
<CCollapse :show="accordion === 0">
77+
<CCardBody>
78+
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
79+
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
80+
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
81+
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
82+
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
83+
</CCardBody>
84+
</CCollapse>
85+
</CCard>
86+
<CCard class="mb-0">
87+
<CButton
88+
block
89+
color="link"
90+
class="text-left shadow-none card-header"
91+
@click="accordion = accordion === 1 ? false : 1"
92+
>
93+
<h5 class="m-0">Collapsible Group Item #2</h5>
94+
</CButton>
95+
<CCollapse :show="accordion === 1">
96+
<CCardBody>
97+
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
98+
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
99+
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
100+
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
101+
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
102+
</CCardBody>
103+
</CCollapse>
104+
</CCard>
105+
<CCard class="mb-0">
106+
<CButton
107+
block
108+
color="link"
109+
class="text-left shadow-none card-header"
110+
@click="accordion = accordion === 2 ? false : 2"
111+
>
112+
<h5 class="m-0">Collapsible Group Item #3</h5>
113+
</CButton>
114+
<CCollapse :show="accordion === 2">
115+
<CCardBody>
116+
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
117+
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
118+
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
119+
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
120+
beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS.
121+
</CCardBody>
122+
</CCollapse>
123+
</CCard>
124+
</div>
125+
</CCardBody>
54126
</CCard>
55127
</CCol>
56128
</CRow>
@@ -64,6 +136,7 @@ export default {
64136
collapse: false,
65137
cardCollapse: true,
66138
innerCollapse: false,
139+
accordion: 0,
67140
text: `
68141
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
69142
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor

‎src/views/base/Forms.vue

+47-2
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@
175175
horizontal
176176
:options="options"
177177
placeholder="Please select"
178+
custom
178179
/>
179180
<CSelect
180181
label="Select"
@@ -202,6 +203,50 @@
202203
</CCol>
203204
</CRow>
204205
</template>
206+
<CRow form class="form-group">
207+
<CCol tag="label" sm="3" class="col-form-label">
208+
Switch checkboxes
209+
</CCol>
210+
<CCol sm="9">
211+
<CSwitch
212+
class="mr-1"
213+
color="primary"
214+
:checked="true"
215+
/>
216+
<CSwitch
217+
class="mr-1"
218+
color="success"
219+
:checked="true"
220+
variant="outline"
221+
/>
222+
<CSwitch
223+
class="mr-1"
224+
color="warning"
225+
:checked="true"
226+
variant="opposite"
227+
/>
228+
<CSwitch
229+
class="mr-1"
230+
color="danger"
231+
:checked="true"
232+
shape="pill"
233+
/>
234+
<CSwitch
235+
class="mr-1"
236+
color="info"
237+
:checked="true"
238+
shape="pill"
239+
variant="outline"
240+
/>
241+
<CSwitch
242+
class="mr-1"
243+
color="dark"
244+
:checked="true"
245+
shape="pill"
246+
variant="opposite"
247+
/>
248+
</CCol>
249+
</CRow>
205250
<template v-for="(name, key) in radioNames">
206251
<CRow form class="form-group" :key="name">
207252
<CCol sm="3">
@@ -533,10 +578,10 @@
533578
autocomplete="email"
534579
>
535580
<template #prepend>
536-
<CButton color="primary"><CIcon name="cib-facebook" height="14"/></CButton>
581+
<CButton color="primary"><CIcon name="cib-facebook"/></CButton>
537582
</template>
538583
<template #append>
539-
<CButton color="primary"><CIcon name="cib-twitter" height="14"/></CButton>
584+
<CButton color="primary"><CIcon name="cib-twitter"/></CButton>
540585
</template>
541586
</CInput>
542587
</CCardBody>

‎tests/e2e/globals.js

Whitespace-only changes.

‎tests/e2e/specs/test.js

+49-14
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,64 @@ module.exports = {
1818

1919
// const devServer = browser.globals.devServerURL
2020
const devServer = process.env.VUE_DEV_SERVER_URL
21+
const toggle = (mobile = false) => {
22+
if (mobile) {
23+
browser.click('.c-header-toggler.d-lg-none')
24+
} else {
25+
browser.click('.c-header-toggler.d-md-down-none')
26+
}
27+
}
28+
const sidebarIsVisible = () => {
29+
browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('0px')
30+
}
31+
32+
const sidebarIsHidden = () => {
33+
browser.expect.element('.c-sidebar').to.have.css('margin-left').which.not.equals('0px')
34+
}
2135

2236

2337
browser.url(devServer).pause(500).expect.element('body').to.be.present
2438

25-
browser.waitForElementVisible('.c-app', 2000)
39+
browser.waitForElementVisible('.c-app', 1000)
2640
.assert.elementPresent('.c-header')
2741
.assert.elementPresent('.c-sidebar')
2842
.assert.elementPresent('.c-footer')
2943
.assert.elementPresent('.c-sidebar')
3044
.assert.elementPresent('.c-body')
31-
32-
// browser.resizeWindow(700, 800)
33-
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
34-
// browser.resizeWindow(1900, 800)
35-
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('0px')
36-
// browser.pause(1500)
37-
// browser.click('.c-sidebar-minimizer')
38-
// browser.pause(1000)
39-
// browser.expect.element('.c-sidebar').to.have.css('width').which.equals('56px')
40-
// browser.click('button.c-header-toggler')
41-
// browser.pause(1000)
42-
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
43-
// browser.pause(1000)
45+
46+
browser.resizeWindow(700, 800)
47+
sidebarIsHidden()
48+
toggle('mobile')
49+
browser.pause(500)
50+
sidebarIsVisible()
51+
browser.click('.c-sidebar-backdrop')
52+
browser.pause(500)
53+
sidebarIsHidden()
54+
toggle('mobile')
55+
browser.pause(500)
56+
browser.click('.c-sidebar-nav-dropdown-toggle')
57+
browser.pause(500)
58+
sidebarIsVisible()
59+
browser.click('.c-sidebar-nav-item')
60+
browser.pause(500)
61+
sidebarIsHidden()
62+
63+
browser.resizeWindow(1900, 800)
64+
sidebarIsVisible()
65+
browser.pause(500)
66+
browser.click('.c-sidebar-minimizer')
67+
browser.click('.c-body')
68+
browser.pause(500)
69+
browser.expect.element('.c-sidebar').to.have.css('width').which.equals('56px')
70+
browser.click('.c-sidebar-minimizer')
71+
browser.click('.c-body')
72+
browser.pause(500)
73+
browser.expect.element('.c-sidebar').to.have.css('width').which.equals('256px')
74+
browser.click('.c-header-toggler.d-md-down-none')
75+
browser.pause(1000)
76+
sidebarIsHidden()
77+
browser.pause(1000)
78+
4479

4580
browser.end()
4681
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ exports[`TheFooter.vue renders correctly 1`] = `
2020
</div>
2121
2222
<div
23-
class="ml-auto"
23+
class="mfs-auto"
2424
>
2525
<span
2626
class="mr-1"
27+
target="_blank"
2728
>
2829
Powered by
2930
</span>
3031
3132
<a
3233
href="https://coreui.io/vue"
33-
target="_blank"
3434
>
3535
CoreUI for Vue
3636
</a>

0 commit comments

Comments
 (0)