6 |
8 |
9 |
6 |
7 |
8 |
9 |
6 |
7 |
8 |
9 |
6 |
13 |
14 |
15 |
16 |
6 |
7 |
8 |
9 |
10 |
3 |
6 |
18 |
19 |
20 |
55 |
76 |
--------------------------------------------------------------------------------
/src/components/examples/StringView.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 | {{ $props.templatecontent }}
9 |
10 |
11 | {{ $props.scriptcontent }}
12 |
13 |
14 |
15 |
17 |
6 |
7 |
8 |
9 |
6 |
13 |
14 |
15 |
16 |
6 |
7 |
11 |
12 |
8 |
9 |
10 |
6 |
14 |
15 |
16 |
17 |
6 |
7 |
8 |
12 |
13 |
9 |
10 |
11 |
6 |
13 |
14 |
19 |
20 |
15 |
16 |
18 | Value : {{ accessValue }}
17 |
6 |
17 |
18 |
13 |
14 |
16 | UpdateValue : {{ dateinput }}
15 |
6 |
18 |
19 |
20 |
21 |
6 |
7 |
8 |
17 |
18 |
19 | Below Date Input
9 | 10 | 11 |Custom Calendar Header
12 | 13 | 14 |{{ formattedDate }}
15 | 16 |
21 |
60 |
82 |
83 |
84 |
85 |
90 |
91 |
92 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/src/assets/styles/css/app.css:
--------------------------------------------------------------------------------
1 | @import './_settings.css';
2 |
3 | *{
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Open Sans', sans-serif;
9 | color: $black;
10 | margin: 0px;
11 | padding: 0px;
12 | input {
13 | outline: none;
14 | &:focus{
15 | outline: none;
16 | }
17 | }
18 | }
19 |
20 | .flex-block{
21 | display: flex;
22 | align-items: center;
23 | margin-top: 20px;
24 | .change-btn{
25 | margin-left: 20px;
26 | display: flex;
27 | align-items: center;
28 | button{
29 | margin-right: 20px;
30 | }
31 | }
32 | @media screen and (max-width: 768px) {
33 | flex-flow: row wrap;
34 | .change-btn{
35 | margin-top: 20px;
36 | margin-left: 0px;
37 | flex-flow: row wrap;
38 | button{
39 | margin-right: 0px;
40 | }
41 | }
42 | }
43 | }
44 |
45 | .page-head {
46 | background-color: $darkGreen;
47 | text-align: center;
48 | padding: 20px;
49 | display: flex;
50 | justify-content: center;
51 | align-items: center;
52 | a {
53 | display: inline-block;
54 | margin-right: 10px;
55 | }
56 | }
57 |
58 | .ind {
59 | width: 100%;
60 | padding: 30px;
61 | }
62 | .app-wrapper {
63 | width: calc(100% - 280px);
64 | position: relative;
65 | left: 280px;
66 | flex: 1;
67 | .wrapper {
68 | display: flex;
69 | flex: 1;
70 | justify-content: center;
71 | flex-wrap: wrap;
72 | }
73 | @media screen and (max-width: 768px) {
74 | width: 100%;
75 | left: auto;
76 | }
77 | .code-block{
78 | display: flex;
79 | justify-content: space-around;
80 | @media screen and (max-width: 768px) {
81 | flex-direction: column;
82 | .codesnippet{
83 | width: 100%;
84 | }
85 | }
86 | }
87 | }
88 | .app-sidebar {
89 | position: fixed;
90 | left: 0px;
91 | top: 0px;
92 | width: 280px;
93 | height: 100%;
94 | background-color: $darkGreen;
95 | h1 {
96 | text-align: center;
97 | padding-top: 20px;
98 | color: $white;
99 | font-size: 25px;
100 | margin: 0px;
101 | @media screen and (max-width: 768px) {
102 | padding: 0px;
103 | font-size: 18px;
104 | margin-top: -10px;
105 | }
106 | }
107 | ul {
108 | margin: 0px;
109 | padding: 0px;
110 | position: relative;
111 | top: 20px;
112 | padding: 40px;
113 | list-style: none;
114 | overflow-y: scroll;
115 | height: 650px;
116 | @media screen and (max-width: 768px) {
117 | padding-top: 0px;
118 | }
119 | li {
120 | color: $white;
121 | font-size: 15px;
122 | margin-bottom: 10px;
123 | cursor: pointer;
124 | background-color: $darkestGreen;
125 | border-radius: 2px;
126 | transition: 0.45s;
127 | a {
128 | padding: 10px;
129 | display: block;
130 | color: $white;
131 | text-decoration: none;
132 | }
133 | &:hover {
134 | transform: translateX(5px);
135 | }
136 | }
137 | }
138 | @media screen and (max-width: 768px) {
139 | position: relative;
140 | width: 100%;
141 | }
142 | }
143 | .md-hidden{
144 | @media screen and (min-width: 768px) {
145 | display: none;
146 | }
147 | }
148 | .sm-hidden{
149 | @media screen and (max-width: 768px) {
150 | display: none;
151 | }
152 | }
153 | .hamburger-icon {
154 | position: absolute;
155 | height: 25px;
156 | width: 30px;
157 | display: block;
158 | z-index: 3;
159 | right: 40px;
160 | z-index: 10;
161 | hr {
162 | background-color: $white;
163 | position: absolute;
164 | height: 3px;
165 | border: none;
166 | width: 100%;
167 | border-radius: 10px;
168 | margin: 0px;
169 | top: 11px;
170 | transition: 0.45s;
171 | }
172 | &.active {
173 | hr {
174 | opacity: 0;
175 | }
176 | }
177 | &:after,
178 | &:before {
179 | content: '';
180 | transform-origin: center;
181 | left: 0px;
182 | height: 3px;
183 | border-radius: 10px;
184 | transition: 0.45s;
185 | width: 100%;
186 | background-color: $white;
187 | position: absolute;
188 | }
189 | &:after {
190 | top: 0px;
191 | }
192 | &:before {
193 | bottom: 0px;
194 | }
195 | &.active {
196 | &:before {
197 | transform: rotate(45deg);
198 | top: 11px;
199 | left: 1px;
200 | }
201 | &:after {
202 | transform: rotate(-45deg);
203 | top: 11px;
204 | left: 1px;
205 | }
206 | }
207 | }
208 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/wrapper/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files / src/shared utils.ts
23 |
24 |
25 |
54 |
26 | 0%
27 | Statements
28 | 0/2
29 |
30 |
31 |
32 |
33 | 0%
34 | Branches
35 | 0/2
36 |
37 |
38 |
39 |
40 | 0%
41 | Functions
42 | 0/1
43 |
44 |
45 |
46 |
47 | 0%
48 | Lines
49 | 0/2
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | | /** 75 | * Returns true if data is null or undefined 76 | * @param data 77 | */ 78 | export const isNullUndefined = (data: any): boolean => { 79 | return data === null || data === undefined; 80 | }; 81 | |
21 |
95 |
100 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/prismcomponent/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files wrapper
23 |
24 |
25 |
54 |
26 | 0%
27 | Statements
28 | 0/6
29 |
30 |
31 |
32 |
33 | 100%
34 | Branches
35 | 0/0
36 |
37 |
38 |
39 |
40 | 0%
41 | Functions
42 | 0/1
43 |
44 |
45 |
46 |
47 | 0%
48 | Lines
49 | 0/6
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
92 |
93 |
94 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| Wrapper.vue | 77 |
78 |
79 | |
80 | 0% | 81 |0/6 | 82 |100% | 83 |0/0 | 84 |0% | 85 |0/1 | 86 |0% | 87 |0/6 | 88 |
21 |
95 |
100 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/iconview/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files prismcomponent
23 |
24 |
25 |
54 |
26 | 0%
27 | Statements
28 | 0/18
29 |
30 |
31 |
32 |
33 | 0%
34 | Branches
35 | 0/10
36 |
37 |
38 |
39 |
40 | 0%
41 | Functions
42 | 0/3
43 |
44 |
45 |
46 |
47 | 0%
48 | Lines
49 | 0/14
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
92 |
93 |
94 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | 77 |
78 |
79 | |
80 | 0% | 81 |0/18 | 82 |0% | 83 |0/10 | 84 |0% | 85 |0/3 | 86 |0% | 87 |0/14 | 88 |
21 |
95 |
100 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
22 |
58 |
59 | All files iconview
23 |
24 |
25 |
54 |
26 | 50%
27 | Statements
28 | 1/2
29 |
30 |
31 |
32 |
33 | 100%
34 | Branches
35 | 0/0
36 |
37 |
38 |
39 |
40 | 0%
41 | Functions
42 | 0/1
43 |
44 |
45 |
46 |
47 | 50%
48 | Lines
49 | 1/2
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
92 |
93 |
94 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| IconView.vue | 77 |
78 |
79 | |
80 | 50% | 81 |1/2 | 82 |100% | 83 |0/0 | 84 |0% | 85 |0/1 | 86 |50% | 87 |1/2 | 88 |
3 |
86 |
87 |
88 |
128 |
131 |
--------------------------------------------------------------------------------
/tests/unit/specs/Datepicker/restrictedViews.spec.js:
--------------------------------------------------------------------------------
1 | import Datepicker from '@/components/datepicker/DatePickerComponent.vue';
2 | import { mount } from '@vue/test-utils'
3 | import * as Langlist from '@/components/datepicker/locale';
4 |
5 | let en;
6 |
7 | describe('Datepicker with restricted views', () => {
8 | beforeEach(()=>{
9 | en = Langlist.data['en'];
10 | })
11 | let wrapper
12 | it('should default initialView to minimumView', async () => {
13 | wrapper = await mount(Datepicker, {
14 | props: {
15 | minimumView: 'month',
16 | maximumView: 'month'
17 | }
18 | })
19 | expect(wrapper.vm.computedInitialView).toEqual('month')
20 | })
21 |
22 | it('should save and close when selecting on minimum-view "month"', async () => {
23 | wrapper = await mount(Datepicker, {
24 | props: {
25 | minimumView: 'month',
26 | maximumView: 'year'
27 | }
28 | })
29 | const date = new Date(2016, 9, 12)
30 | wrapper.vm.selectYear({timestamp: date.getTime()})
31 | expect(wrapper.vm.isOpen).toEqual(true)
32 | wrapper.vm.selectMonth({timestamp: date.getTime()})
33 | expect(date.getFullYear()).toEqual(wrapper.vm.selectedDate.getFullYear())
34 | expect(date.getMonth()).toEqual(wrapper.vm.selectedDate.getMonth())
35 | expect(wrapper.vm.isOpen).toEqual(false)
36 | })
37 |
38 | it('should save and close when selecting on minimum-view "year"', async () => {
39 | wrapper = await mount(Datepicker, {
40 | props: {
41 | minimumView: 'year',
42 | maximumView: 'year'
43 | }
44 | })
45 | const date = new Date(2016, 9, 12)
46 | wrapper.vm.selectYear({timestamp: date.getTime()})
47 | expect(wrapper.vm.isOpen).toEqual(false)
48 | expect(date.getFullYear()).toEqual(wrapper.vm.selectedDate.getFullYear())
49 | })
50 |
51 | it('should only allow views in min-max range', async () => {
52 | wrapper = await mount(Datepicker, {
53 | props: {
54 | minimumView: 'day',
55 | maximumView: 'month'
56 | }
57 | })
58 | expect(wrapper.vm.allowedToShowView('year')).toEqual(false)
59 | expect(wrapper.vm.allowedToShowView('day')).toEqual(true)
60 | expect(wrapper.vm.allowedToShowView('month')).toEqual(true)
61 | expect(wrapper.vm.showYearCalendar()).toEqual(false)
62 |
63 | wrapper = await mount(Datepicker, {
64 | propsData: {
65 | minimumView: 'month',
66 | maximumView: 'month'
67 | }
68 | })
69 | expect(wrapper.vm.allowedToShowView('day')).toEqual(false)
70 | expect(wrapper.vm.allowedToShowView('year')).toEqual(false)
71 | expect(wrapper.vm.allowedToShowView('month')).toEqual(true)
72 | expect(wrapper.vm.showDayCalendar()).toEqual(false)
73 | expect(wrapper.vm.showYearCalendar()).toEqual(false)
74 |
75 | wrapper = await mount(Datepicker, {
76 | props: {
77 | minimumView: 'day',
78 | maximumView: 'year'
79 | }
80 | })
81 | expect(wrapper.vm.allowedToShowView('day')).toEqual(true)
82 | expect(wrapper.vm.allowedToShowView('year')).toEqual(true)
83 | expect(wrapper.vm.allowedToShowView('month')).toEqual(true)
84 | })
85 |
86 | it('should throw an error on disallowed initial views', async () => {
87 | wrapper = await mount(Datepicker, {
88 | props: {
89 | minimumView: 'day',
90 | maximumView: 'month',
91 | initialView: 'year'
92 | }
93 | })
94 |
95 | expect(function () {
96 | wrapper.vm.setInitialView()
97 | }).toThrow()
98 | })
99 |
100 | it('should not render unused views', async () => {
101 | wrapper = await mount(Datepicker, {
102 | props: {
103 | minimumView: 'day',
104 | maximumView: 'day'
105 | }
106 | })
107 | wrapper.vm.showCalendar()
108 | expect(wrapper.vm.$el.querySelectorAll('.vuejs3-datepicker__calendar').length).toEqual(1)
109 | expect(wrapper.vm.$el.querySelectorAll('.vuejs3-datepicker__calendar .cell.month').length).toEqual(0)
110 | expect(wrapper.vm.$el.querySelectorAll('.vuejs3-datepicker__calendar .cell.year').length).toEqual(0)
111 | expect(wrapper.vm.showMonthCalendar()).toEqual(false)
112 |
113 | wrapper = await mount(Datepicker, {
114 | props: {
115 | minimumView: 'month',
116 | maximumView: 'year'
117 | }
118 | })
119 | wrapper.vm.showCalendar()
120 | expect(wrapper.vm.$el.querySelectorAll('.vuejs3-datepicker__calendar').length).toEqual(2)
121 | expect(wrapper.vm.$el.querySelectorAll('.vuejs3-datepicker__calendar .cell.day').length).toEqual(0)
122 | expect(wrapper.vm.$el.querySelectorAll('.vuejs3-datepicker__calendar .cell.year').length).toBeGreaterThan(0)
123 | })
124 | })
125 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/src/main.ts.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
4 |
7 |
14 |
15 |
34 |
35 |
85 |
36 |
37 | 
38 |
39 |
40 |
38 |
39 |
41 |
84 |
42 |
44 |
45 |
47 |
48 |
50 |
51 |
53 |
54 |
56 |
57 |
59 |
60 |
62 |
63 |
65 |
66 |
68 |
69 |
71 |
72 |
74 |
75 |
77 |
78 |
80 |
81 |
83 |
21 |
60 |
88 |
89 |
90 |
91 |
96 |
97 |
98 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/src/directives/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files / src main.ts
23 |
24 |
25 |
54 |
26 | 0%
27 | Statements
28 | 0/6
29 |
30 |
31 |
32 |
33 | 100%
34 | Branches
35 | 0/0
36 |
37 |
38 |
39 |
40 | 100%
41 | Functions
42 | 0/0
43 |
44 |
45 |
46 |
47 | 0%
48 | Lines
49 | 0/6
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 68 | 9 69 | 10 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | | import { createApp } from 'vue'; 79 | import App from './App.vue'; 80 | import clickOutside from '@/directives/click-outside' 81 | 82 | const app = createApp(App) 83 | 84 | app.directive('clickoutside', clickOutside); 85 | 86 | app.mount('#app'); 87 | |
21 |
95 |
100 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/datepicker/locale/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files src/directives
23 |
24 |
25 |
54 |
26 | 0%
27 | Statements
28 | 0/46
29 |
30 |
31 |
32 |
33 | 0%
34 | Branches
35 | 0/22
36 |
37 |
38 |
39 |
40 | 0%
41 | Functions
42 | 0/11
43 |
44 |
45 |
46 |
47 | 0%
48 | Lines
49 | 0/32
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
92 |
93 |
94 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| click-outside.ts | 77 |
78 |
79 | |
80 | 0% | 81 |0/46 | 82 |0% | 83 |0/22 | 84 |0% | 85 |0/11 | 86 |0% | 87 |0/32 | 88 |
21 |
95 |
100 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/datepicker/utils/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files datepicker/locale
23 |
24 |
25 |
54 |
26 | 100%
27 | Statements
28 | 20/20
29 |
30 |
31 |
32 |
33 | 100%
34 | Branches
35 | 0/0
36 |
37 |
38 |
39 |
40 | 100%
41 | Functions
42 | 2/2
43 |
44 |
45 |
46 |
47 | 100%
48 | Lines
49 | 20/20
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
92 |
93 |
94 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | 77 |
78 |
79 | |
80 | 100% | 81 |20/20 | 82 |100% | 83 |0/0 | 84 |100% | 85 |2/2 | 86 |100% | 87 |20/20 | 88 |
21 |
95 |
100 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/src/components/datepicker/locale/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files datepicker/utils
23 |
24 |
25 |
54 |
26 | 96.77%
27 | Statements
28 | 90/93
29 |
30 |
31 |
32 |
33 | 93.94%
34 | Branches
35 | 93/99
36 |
37 |
38 |
39 |
40 | 100%
41 | Functions
42 | 20/20
43 |
44 |
45 |
46 |
47 | 96.43%
48 | Lines
49 | 81/84
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
92 |
93 |
94 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| DateUtils.ts | 77 |
78 |
79 | |
80 | 96.77% | 81 |90/93 | 82 |93.94% | 83 |93/99 | 84 |100% | 85 |20/20 | 86 |96.43% | 87 |81/84 | 88 |
21 |
95 |
100 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/src/components/datepicker/utils/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files src/components/datepicker/locale
23 |
24 |
25 |
54 |
26 | 100%
27 | Statements
28 | 20/20
29 |
30 |
31 |
32 |
33 | 100%
34 | Branches
35 | 0/0
36 |
37 |
38 |
39 |
40 | 100%
41 | Functions
42 | 2/2
43 |
44 |
45 |
46 |
47 | 100%
48 | Lines
49 | 20/20
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
92 |
93 |
94 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | 77 |
78 |
79 | |
80 | 100% | 81 |20/20 | 82 |100% | 83 |0/0 | 84 |100% | 85 |2/2 | 86 |100% | 87 |20/20 | 88 |
21 |
95 |
100 |
101 |
102 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/tests/unit/specs/PickerDay/highlightedDates.spec.js:
--------------------------------------------------------------------------------
1 | import PickerDay from '@/components/datepicker/PickerDay.vue';
2 | import { mount } from '@vue/test-utils'
3 | import * as Langlist from '@/components/datepicker/locale';
4 | let en;
5 | describe('PickerDay highlight date', () => {
6 | beforeEach(()=>{
7 | en = Langlist.data['en'];
8 | })
9 |
10 | let wrapper
11 | beforeEach(() => {
12 | wrapper = mount(PickerDay, {
13 | props: {
14 | allowedToShowView: () => true,
15 | translation: en,
16 | pageDate: new Date(2016, 9, 1),
17 | highlighted: {
18 | to: new Date(2016, 12, 8),
19 | from: new Date(2016, 12, 4)
20 | },
21 | disabledDates: {
22 | dates: [ new Date(2016, 12, 5) ]
23 | }
24 | }
25 | })
26 | })
27 |
28 | it('should detect a highlighted date', () => {
29 | expect(wrapper.vm.isHighlightedDate(new Date(2006, 9, 2))).toEqual(false)
30 | expect(wrapper.vm.isHighlightedDate(new Date(2026, 9, 2))).toEqual(false)
31 | })
32 |
33 | it('should not highlight a disabled date', () => {
34 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 5))).toEqual(false)
35 | })
36 |
37 | it('should highlight a disabled date when explicitly configured to', async () => {
38 | await wrapper.setProps({
39 | highlighted: {
40 | to: new Date(2016, 12, 8),
41 | from: new Date(2016, 12, 4),
42 | includeDisabled: true
43 | }
44 | })
45 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 5))).toEqual(true)
46 | })
47 |
48 | it('should highlight a date before the to property', () => {
49 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 7))).toEqual(true)
50 | })
51 |
52 | it('should not highlight a date after the to property', () => {
53 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 9))).toEqual(false)
54 | })
55 |
56 | it('should highlight a date after the from property', () => {
57 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 6))).toEqual(true)
58 | })
59 |
60 | it('should not highlight a date before the from property', () => {
61 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 3))).toEqual(false)
62 | })
63 |
64 | it('can accept an array of highlighted dates', async () => {
65 | await wrapper.setProps({
66 | highlighted: {
67 | dates: [
68 | new Date(2016, 9, 2),
69 | new Date(2016, 9, 9),
70 | new Date(2016, 9, 16)
71 | ]
72 | }
73 | })
74 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 2))).toEqual(true)
75 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 3))).toEqual(false)
76 | })
77 |
78 | it('can accept an array of highlighted days of the week', async () => {
79 | await wrapper.setProps({
80 | highlighted: {
81 | days: [6, 0]
82 | }
83 | })
84 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 2))).toEqual(true)
85 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 3))).toEqual(false)
86 | })
87 |
88 | it('can accept an array of highlighted days of the month', async () => {
89 | await wrapper.setProps({
90 | highlighted: {
91 | daysOfMonth: [1, 10, 31]
92 | }
93 | })
94 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 1))).toEqual(true)
95 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 10, 10))).toEqual(true)
96 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 11, 31))).toEqual(true)
97 | expect(wrapper.vm.isHighlightedDate(new Date(2017, 8, 10))).toEqual(true)
98 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 8, 7))).toEqual(false)
99 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 7, 20))).toEqual(false)
100 | })
101 |
102 | it('can accept a customPredictor to check if the date is highlighted', async () => {
103 | await wrapper.setProps({
104 | highlighted: {
105 | customPredictor (date) {
106 | if (date.getDate() % 5 === 0) {
107 | return true
108 | }
109 | }
110 | }
111 | })
112 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 8, 30))).toEqual(true)
113 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 28))).toEqual(false)
114 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 10, 20))).toEqual(true)
115 | expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 11))).toEqual(false)
116 | })
117 |
118 | it('should detect the first date of the highlighted dates', () => {
119 | expect(wrapper.vm.isHighlightStart(new Date(2016, 12, 4))).toEqual(true)
120 | expect(wrapper.vm.isHighlightStart(new Date(2016, 12, 3))).toEqual(false)
121 | expect(wrapper.vm.isHighlightStart(new Date(2016, 12, 5))).toEqual(false)
122 | })
123 |
124 | it('should detect the last date of the highlighted dates', () => {
125 | expect(wrapper.vm.isHighlightEnd(new Date(2016, 12, 8))).toEqual(true)
126 | expect(wrapper.vm.isHighlightEnd(new Date(2016, 12, 6))).toEqual(false)
127 | expect(wrapper.vm.isHighlightEnd(new Date(2016, 12, 7))).toEqual(false)
128 | })
129 | })
130 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files src/components/datepicker/utils
23 |
24 |
25 |
54 |
26 | 88.76%
27 | Statements
28 | 79/89
29 |
30 |
31 |
32 |
33 | 89.69%
34 | Branches
35 | 87/97
36 |
37 |
38 |
39 |
40 | 89.47%
41 | Functions
42 | 17/19
43 |
44 |
45 |
46 |
47 | 87.5%
48 | Lines
49 | 70/80
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
92 |
93 |
94 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| DateUtils.ts | 77 |
78 |
79 | |
80 | 88.76% | 81 |79/89 | 82 |89.69% | 83 |87/97 | 84 |89.47% | 85 |17/19 | 86 |87.5% | 87 |70/80 | 88 |
21 |
110 |
115 |
116 |
117 |
122 |
123 |
124 |
125 |
126 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/src/shared/enum.ts.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files src
23 |
24 |
25 |
54 |
26 | 0%
27 | Statements
28 | 0/19
29 |
30 |
31 |
32 |
33 | 100%
34 | Branches
35 | 0/0
36 |
37 |
38 |
39 |
40 | 0%
41 | Functions
42 | 0/10
43 |
44 |
45 |
46 |
47 | 0%
48 | Lines
49 | 0/19
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
107 |
108 |
109 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| App.vue | 77 |
78 |
79 | |
80 | 0% | 81 |0/13 | 82 |100% | 83 |0/0 | 84 |0% | 85 |0/10 | 86 |0% | 87 |0/13 | 88 |
| main.ts | 92 |
93 |
94 | |
95 | 0% | 96 |0/6 | 97 |100% | 98 |0/0 | 99 |100% | 100 |0/0 | 101 |0% | 102 |0/6 | 103 |
21 |
60 |
106 |
107 |
108 |
109 |
114 |
115 |
116 |
121 |
122 |
123 |
124 |
125 |
--------------------------------------------------------------------------------
/src/components/datepicker/datepicker.css:
--------------------------------------------------------------------------------
1 | @import "../../assets/styles/css/_settings.css";
2 |
3 | .rtl {
4 | direction: rtl;
5 | }
6 |
7 | .vuejs3-datepicker {
8 | color: $black;
9 | position: relative;
10 | display: inline-block;
11 | * {
12 | box-sizing: border-box;
13 | }
14 | input {
15 | border: 1px solid;
16 | }
17 | &__icon {
18 | display: flex;
19 | }
20 | &__value {
21 | min-width: 200px;
22 | display: inline-flex;
23 | border-radius: 5px;
24 | padding: 13px 15px;
25 | cursor: pointer;
26 | border: 1px solid ;
27 | }
28 | &__content{
29 | margin-left: 10px;
30 | font-size: 15px;
31 | }
32 | &__typeablecalendar{
33 | position: absolute;
34 | top: 10px;
35 | left: 10px;
36 | }
37 | &__inputvalue{
38 | min-width: 200px;
39 | display: inline-flex;
40 | border-radius: 5px;
41 | padding: 12px 10px 13px 35px;
42 | cursor: pointer;
43 | border: 1px solid ;
44 | }
45 | &__calendar {
46 | position: absolute;
47 | z-index: 100;
48 | background: $white;
49 | width: 300px;
50 | box-shadow: 0 0.2rem 1rem rgba(0,0,0,.12);
51 | border-radius: 4px;
52 | margin-top: 4px;
53 | &-topbar{
54 | background-color: $green;
55 | color: $white;
56 | border-radius: 4px 4px 0px 0px;
57 | padding: 25px;
58 | text-align: center;
59 | &-year{
60 | cursor: pointer;
61 | font-size: 30px;
62 | margin: 0px;
63 | padding-bottom: 10px;
64 | }
65 | &-day{
66 | font-size: 20px;
67 | margin: 0px;
68 | }
69 | }
70 | &-actionarea{
71 | padding: 10px;
72 | }
73 | header {
74 | display: block;
75 | line-height: 40px;
76 | span {
77 | text-align: center;
78 | width: 71.42857142857143%;
79 | float: left;
80 | }
81 | .next, .prev {
82 | width: 14.285714285714286%;
83 | float: left;
84 | text-indent: -10000px;
85 | position: relative;
86 | &:after {
87 | content: '';
88 | position: absolute;
89 | left: 50%;
90 | width: 8px;
91 | height: 8px;
92 | top: 50%;
93 | transform: translateX(-50%) translateY(-50%) rotate(45deg);
94 | }
95 | }
96 | .prev:after {
97 | border-left: 1px solid $black;
98 | border-bottom: 1px solid $black;
99 | }
100 | .prev.disabled:after, .next.disabled:after{
101 | opacity: 0.5;
102 | }
103 | .next:after {
104 | border-top: 1px solid $black;
105 | border-right: 1px solid $black;
106 | }
107 | .prev:not(.disabled), .next:not(.disabled), .up:not(.disabled){
108 | cursor: pointer;
109 | font-size: 15px;
110 | border-radius: 4px;
111 | &:hover{
112 | background: $hovered;
113 | }
114 | }
115 | }
116 | .disabled {
117 | color: #ddd;
118 | cursor: default;
119 | }
120 | .flex-rtl {
121 | display: flex;
122 | width: inherit;
123 | flex-wrap: wrap;
124 | }
125 | .cell {
126 | display: inline-block;
127 | padding: 0 5px;
128 | width: 14.285714285714286%;
129 | height: 40px;
130 | line-height: 40px;
131 | text-align: center;
132 | font-size: 14px;
133 | vertical-align: middle;
134 | border: 1px solid transparent;
135 | &.month, &.year{
136 | padding: 10px 5px;
137 | height: 50px;
138 | line-height: 28px;
139 | }
140 | &.day-header{
141 | text-transform: uppercase;
142 | }
143 | }
144 | .cell:not(.blank):not(.disabled).day, .cell:not(.blank):not(.disabled).month, .cell:not(.blank):not(.disabled).year{
145 | cursor: pointer;
146 | transition: 0.45s;
147 | &:hover{
148 | border: 1px solid $green;
149 | }
150 | }
151 | .cell.selected {
152 | background: $green;
153 | color: $white;
154 | &:hover{
155 | background: $green;
156 | }
157 | }
158 | .cell.highlighted {
159 | background: $green;
160 | color: $white;
161 | &.selected {
162 | background: $green;
163 | }
164 | &.disabled {
165 | color: #a3a3a3;
166 | }
167 | &.highlight-start, &:last-child {
168 | background: $darkGreen;
169 | }
170 | }
171 | .cell.grey {
172 | color: #888;
173 | &:hover{
174 | background: inherit;
175 | }
176 | }
177 | .cell.day-header {
178 | font-size: 75%;
179 | white-space: nowrap;
180 | cursor: inherit;
181 | &:hover{
182 | background: inherit;
183 | }
184 | }
185 | .month, .year{
186 | width: 33.333%;
187 | }
188 | }
189 | &__clear-button, &__calendar-button{
190 | cursor: pointer;
191 | font-style: normal;
192 | position: absolute;
193 | top: 12px;
194 | right:12px;
195 | &.disabled {
196 | color: #999;
197 | cursor: default;
198 | }
199 | }
200 | #calendar-div{
201 | background-color: white;
202 | border-radius:5px;
203 | }
204 | }
205 |
206 | .dp-error {
207 | color: red;
208 | font-size: 12px
209 | }
210 |
211 | .backdrop{
212 | position: fixed; /* Sit on top of the page content */
213 | display: none; /* Hidden by default */
214 | width: 100%; /* Full width (cover the whole page) */
215 | height: 100%; /* Full height (cover the whole page) */
216 | top: 0;
217 | left: 0;
218 | right: 0;
219 | bottom: 0;
220 | background-color: rgba(0,0,0,0.5); /* Black background with opacity */
221 | z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
222 | cursor: pointer; /* Add a pointer on hover */
223 | }
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/sorter.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | var addSorting = (function() {
3 | 'use strict';
4 | var cols,
5 | currentSort = {
6 | index: 0,
7 | desc: false
8 | };
9 |
10 | // returns the summary table element
11 | function getTable() {
12 | return document.querySelector('.coverage-summary');
13 | }
14 | // returns the thead element of the summary table
15 | function getTableHeader() {
16 | return getTable().querySelector('thead tr');
17 | }
18 | // returns the tbody element of the summary table
19 | function getTableBody() {
20 | return getTable().querySelector('tbody');
21 | }
22 | // returns the th element for nth column
23 | function getNthColumn(n) {
24 | return getTableHeader().querySelectorAll('th')[n];
25 | }
26 |
27 | // loads all columns
28 | function loadColumns() {
29 | var colNodes = getTableHeader().querySelectorAll('th'),
30 | colNode,
31 | cols = [],
32 | col,
33 | i;
34 |
35 | for (i = 0; i < colNodes.length; i += 1) {
36 | colNode = colNodes[i];
37 | col = {
38 | key: colNode.getAttribute('data-col'),
39 | sortable: !colNode.getAttribute('data-nosort'),
40 | type: colNode.getAttribute('data-type') || 'string'
41 | };
42 | cols.push(col);
43 | if (col.sortable) {
44 | col.defaultDescSort = col.type === 'number';
45 | colNode.innerHTML =
46 | colNode.innerHTML + '';
47 | }
48 | }
49 | return cols;
50 | }
51 | // attaches a data attribute to every tr element with an object
52 | // of data values keyed by column name
53 | function loadRowData(tableRow) {
54 | var tableCols = tableRow.querySelectorAll('td'),
55 | colNode,
56 | col,
57 | data = {},
58 | i,
59 | val;
60 | for (i = 0; i < tableCols.length; i += 1) {
61 | colNode = tableCols[i];
62 | col = cols[i];
63 | val = colNode.getAttribute('data-value');
64 | if (col.type === 'number') {
65 | val = Number(val);
66 | }
67 | data[col.key] = val;
68 | }
69 | return data;
70 | }
71 | // loads all row data
72 | function loadData() {
73 | var rows = getTableBody().querySelectorAll('tr'),
74 | i;
75 |
76 | for (i = 0; i < rows.length; i += 1) {
77 | rows[i].data = loadRowData(rows[i]);
78 | }
79 | }
80 | // sorts the table using the data for the ith column
81 | function sortByIndex(index, desc) {
82 | var key = cols[index].key,
83 | sorter = function(a, b) {
84 | a = a.data[key];
85 | b = b.data[key];
86 | return a < b ? -1 : a > b ? 1 : 0;
87 | },
88 | finalSorter = sorter,
89 | tableBody = document.querySelector('.coverage-summary tbody'),
90 | rowNodes = tableBody.querySelectorAll('tr'),
91 | rows = [],
92 | i;
93 |
94 | if (desc) {
95 | finalSorter = function(a, b) {
96 | return -1 * sorter(a, b);
97 | };
98 | }
99 |
100 | for (i = 0; i < rowNodes.length; i += 1) {
101 | rows.push(rowNodes[i]);
102 | tableBody.removeChild(rowNodes[i]);
103 | }
104 |
105 | rows.sort(finalSorter);
106 |
107 | for (i = 0; i < rows.length; i += 1) {
108 | tableBody.appendChild(rows[i]);
109 | }
110 | }
111 | // removes sort indicators for current column being sorted
112 | function removeSortIndicators() {
113 | var col = getNthColumn(currentSort.index),
114 | cls = col.className;
115 |
116 | cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
117 | col.className = cls;
118 | }
119 | // adds sort indicators for current column being sorted
120 | function addSortIndicators() {
121 | getNthColumn(currentSort.index).className += currentSort.desc
122 | ? ' sorted-desc'
123 | : ' sorted';
124 | }
125 | // adds event listeners for all sorter widgets
126 | function enableUI() {
127 | var i,
128 | el,
129 | ithSorter = function ithSorter(i) {
130 | var col = cols[i];
131 |
132 | return function() {
133 | var desc = col.defaultDescSort;
134 |
135 | if (currentSort.index === i) {
136 | desc = !currentSort.desc;
137 | }
138 | sortByIndex(i, desc);
139 | removeSortIndicators();
140 | currentSort.index = i;
141 | currentSort.desc = desc;
142 | addSortIndicators();
143 | };
144 | };
145 | for (i = 0; i < cols.length; i += 1) {
146 | if (cols[i].sortable) {
147 | // add the click event handler on the th so users
148 | // dont have to click on those tiny arrows
149 | el = getNthColumn(i).querySelector('.sorter').parentElement;
150 | if (el.addEventListener) {
151 | el.addEventListener('click', ithSorter(i));
152 | } else {
153 | el.attachEvent('onclick', ithSorter(i));
154 | }
155 | }
156 | }
157 | }
158 | // adds sorting functionality to the UI
159 | return function() {
160 | if (!getTable()) {
161 | return;
162 | }
163 | cols = loadColumns();
164 | loadData();
165 | addSortIndicators();
166 | enableUI();
167 | };
168 | })();
169 |
170 | window.addEventListener('load', addSorting);
171 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/src/shared/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files / src/shared enum.ts
23 |
24 |
25 |
54 |
26 | 0%
27 | Statements
28 | 0/10
29 |
30 |
31 |
32 |
33 | 0%
34 | Branches
35 | 0/6
36 |
37 |
38 |
39 |
40 | 0%
41 | Functions
42 | 0/3
43 |
44 |
45 |
46 |
47 | 0%
48 | Lines
49 | 0/10
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 68 | 9 69 | 10 70 | 11 71 | 12 72 | 13 73 | 14 74 | 15 75 | 16 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | | export enum ValidationMessages { 91 | required = 'Please enter this value', 92 | } 93 | 94 | export enum VALIDATORS { 95 | REQUIRED = 'required', 96 | } 97 | 98 | export enum KeyName { 99 | Enter = 'Enter', 100 | ArrowUp = 'ArrowUp', 101 | ArrowDown = 'ArrowDown', 102 | Escape = 'Escape', 103 | Tab = 'Tab', 104 | } 105 | |
21 |
125 |
130 |
131 |
132 |
137 |
138 |
139 |
140 |
141 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files src/shared
23 |
24 |
25 |
54 |
26 | 0%
27 | Statements
28 | 0/47
29 |
30 |
31 |
32 |
33 | 0%
34 | Branches
35 | 0/33
36 |
37 |
38 |
39 |
40 | 0%
41 | Functions
42 | 0/7
43 |
44 |
45 |
46 |
47 | 0%
48 | Lines
49 | 0/45
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
122 |
123 |
124 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| enum.ts | 77 |
78 |
79 | |
80 | 0% | 81 |0/10 | 82 |0% | 83 |0/6 | 84 |0% | 85 |0/3 | 86 |0% | 87 |0/10 | 88 |
| utils.ts | 92 |
93 |
94 | |
95 | 0% | 96 |0/2 | 97 |0% | 98 |0/2 | 99 |0% | 100 |0/1 | 101 |0% | 102 |0/2 | 103 |
| validations.ts | 107 |
108 |
109 | |
110 | 0% | 111 |0/35 | 112 |0% | 113 |0/25 | 114 |0% | 115 |0/3 | 116 |0% | 117 |0/33 | 118 |
21 |
125 |
130 |
131 |
132 |
137 |
138 |
139 |
140 |
141 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/base.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | margin:0; padding: 0;
3 | height: 100%;
4 | }
5 | body {
6 | font-family: Helvetica Neue, Helvetica, Arial;
7 | font-size: 14px;
8 | color:#333;
9 | }
10 | .small { font-size: 12px; }
11 | *, *:after, *:before {
12 | -webkit-box-sizing:border-box;
13 | -moz-box-sizing:border-box;
14 | box-sizing:border-box;
15 | }
16 | h1 { font-size: 20px; margin: 0;}
17 | h2 { font-size: 14px; }
18 | pre {
19 | font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
20 | margin: 0;
21 | padding: 0;
22 | -moz-tab-size: 2;
23 | -o-tab-size: 2;
24 | tab-size: 2;
25 | }
26 | a { color:#0074D9; text-decoration:none; }
27 | a:hover { text-decoration:underline; }
28 | .strong { font-weight: bold; }
29 | .space-top1 { padding: 10px 0 0 0; }
30 | .pad2y { padding: 20px 0; }
31 | .pad1y { padding: 10px 0; }
32 | .pad2x { padding: 0 20px; }
33 | .pad2 { padding: 20px; }
34 | .pad1 { padding: 10px; }
35 | .space-left2 { padding-left:55px; }
36 | .space-right2 { padding-right:20px; }
37 | .center { text-align:center; }
38 | .clearfix { display:block; }
39 | .clearfix:after {
40 | content:'';
41 | display:block;
42 | height:0;
43 | clear:both;
44 | visibility:hidden;
45 | }
46 | .fl { float: left; }
47 | @media only screen and (max-width:640px) {
48 | .col3 { width:100%; max-width:100%; }
49 | .hide-mobile { display:none!important; }
50 | }
51 |
52 | .quiet {
53 | color: #7f7f7f;
54 | color: rgba(0,0,0,0.5);
55 | }
56 | .quiet a { opacity: 0.7; }
57 |
58 | .fraction {
59 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
60 | font-size: 10px;
61 | color: #555;
62 | background: #E8E8E8;
63 | padding: 4px 5px;
64 | border-radius: 3px;
65 | vertical-align: middle;
66 | }
67 |
68 | div.path a:link, div.path a:visited { color: #333; }
69 | table.coverage {
70 | border-collapse: collapse;
71 | margin: 10px 0 0 0;
72 | padding: 0;
73 | }
74 |
75 | table.coverage td {
76 | margin: 0;
77 | padding: 0;
78 | vertical-align: top;
79 | }
80 | table.coverage td.line-count {
81 | text-align: right;
82 | padding: 0 5px 0 20px;
83 | }
84 | table.coverage td.line-coverage {
85 | text-align: right;
86 | padding-right: 10px;
87 | min-width:20px;
88 | }
89 |
90 | table.coverage td span.cline-any {
91 | display: inline-block;
92 | padding: 0 5px;
93 | width: 100%;
94 | }
95 | .missing-if-branch {
96 | display: inline-block;
97 | margin-right: 5px;
98 | border-radius: 3px;
99 | position: relative;
100 | padding: 0 4px;
101 | background: #333;
102 | color: yellow;
103 | }
104 |
105 | .skip-if-branch {
106 | display: none;
107 | margin-right: 10px;
108 | position: relative;
109 | padding: 0 4px;
110 | background: #ccc;
111 | color: white;
112 | }
113 | .missing-if-branch .typ, .skip-if-branch .typ {
114 | color: inherit !important;
115 | }
116 | .coverage-summary {
117 | border-collapse: collapse;
118 | width: 100%;
119 | }
120 | .coverage-summary tr { border-bottom: 1px solid #bbb; }
121 | .keyline-all { border: 1px solid #ddd; }
122 | .coverage-summary td, .coverage-summary th { padding: 10px; }
123 | .coverage-summary tbody { border: 1px solid #bbb; }
124 | .coverage-summary td { border-right: 1px solid #bbb; }
125 | .coverage-summary td:last-child { border-right: none; }
126 | .coverage-summary th {
127 | text-align: left;
128 | font-weight: normal;
129 | white-space: nowrap;
130 | }
131 | .coverage-summary th.file { border-right: none !important; }
132 | .coverage-summary th.pct { }
133 | .coverage-summary th.pic,
134 | .coverage-summary th.abs,
135 | .coverage-summary td.pct,
136 | .coverage-summary td.abs { text-align: right; }
137 | .coverage-summary td.file { white-space: nowrap; }
138 | .coverage-summary td.pic { min-width: 120px !important; }
139 | .coverage-summary tfoot td { }
140 |
141 | .coverage-summary .sorter {
142 | height: 10px;
143 | width: 7px;
144 | display: inline-block;
145 | margin-left: 0.5em;
146 | background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
147 | }
148 | .coverage-summary .sorted .sorter {
149 | background-position: 0 -20px;
150 | }
151 | .coverage-summary .sorted-desc .sorter {
152 | background-position: 0 -10px;
153 | }
154 | .status-line { height: 10px; }
155 | /* yellow */
156 | .cbranch-no { background: yellow !important; color: #111; }
157 | /* dark red */
158 | .red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
159 | .low .chart { border:1px solid #C21F39 }
160 | .highlighted,
161 | .highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
162 | background: #C21F39 !important;
163 | }
164 | /* medium red */
165 | .cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
166 | /* light red */
167 | .low, .cline-no { background:#FCE1E5 }
168 | /* light green */
169 | .high, .cline-yes { background:rgb(230,245,208) }
170 | /* medium green */
171 | .cstat-yes { background:rgb(161,215,106) }
172 | /* dark green */
173 | .status-line.high, .high .cover-fill { background:rgb(77,146,33) }
174 | .high .chart { border:1px solid rgb(77,146,33) }
175 | /* dark yellow (gold) */
176 | .status-line.medium, .medium .cover-fill { background: #f9cd0b; }
177 | .medium .chart { border:1px solid #f9cd0b; }
178 | /* light yellow */
179 | .medium { background: #fff4c2; }
180 |
181 | .cstat-skip { background: #ddd; color: #111; }
182 | .fstat-skip { background: #ddd; color: #111 !important; }
183 | .cbranch-skip { background: #ddd !important; color: #111; }
184 |
185 | span.cline-neutral { background: #eaeaea; }
186 |
187 | .coverage-summary td.empty {
188 | opacity: .5;
189 | padding-top: 4px;
190 | padding-bottom: 4px;
191 | line-height: 1;
192 | color: #888;
193 | }
194 |
195 | .cover-fill, .cover-empty {
196 | display:inline-block;
197 | height: 12px;
198 | }
199 | .chart {
200 | line-height: 0;
201 | }
202 | .cover-empty {
203 | background: white;
204 | }
205 | .cover-full {
206 | border-right: none !important;
207 | }
208 | pre.prettyprint {
209 | border: none !important;
210 | padding: 0 !important;
211 | margin: 0 !important;
212 | }
213 | .com { color: #999 !important; }
214 | .ignore-none { color: #999; font-weight: normal; }
215 |
216 | .wrapper {
217 | min-height: 100%;
218 | height: auto !important;
219 | height: 100%;
220 | margin: 0 auto -48px;
221 | }
222 | .footer, .push {
223 | height: 48px;
224 | }
225 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/src/components/datepicker/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files
23 |
24 |
25 |
54 |
26 | 96.03%
27 | Statements
28 | 556/579
29 |
30 |
31 |
32 |
33 | 91.74%
34 | Branches
35 | 422/460
36 |
37 |
38 |
39 |
40 | 93.48%
41 | Functions
42 | 129/138
43 |
44 |
45 |
46 |
47 | 95.94%
48 | Lines
49 | 544/567
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
122 |
123 |
124 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| datepicker | 77 |
78 |
79 | |
80 | 95.71% | 81 |446/466 | 82 |91.14% | 83 |329/361 | 84 |92.24% | 85 |107/116 | 86 |95.68% | 87 |443/463 | 88 |
| datepicker/locale | 92 |
93 |
94 | |
95 | 100% | 96 |20/20 | 97 |100% | 98 |0/0 | 99 |100% | 100 |2/2 | 101 |100% | 102 |20/20 | 103 |
| datepicker/utils | 107 |
108 |
109 | |
110 | 96.77% | 111 |90/93 | 112 |93.94% | 113 |93/99 | 114 |100% | 115 |20/20 | 116 |96.43% | 117 |81/84 | 118 |
21 |
155 |
160 |
161 |
162 |
167 |
168 |
169 |
170 |
171 |
--------------------------------------------------------------------------------
/tests/unit/coverage/lcov-report/datepicker/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
58 |
59 | All files src/components/datepicker
23 |
24 |
25 |
54 |
26 | 15.18%
27 | Statements
28 | 68/448
29 |
30 |
31 |
32 |
33 | 13.14%
34 | Branches
35 | 46/350
36 |
37 |
38 |
39 |
40 | 15.65%
41 | Functions
42 | 18/115
43 |
44 |
45 |
46 |
47 | 15.06%
48 | Lines
49 | 67/445
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
152 |
153 |
154 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| DateInput.vue | 77 |
78 |
79 | |
80 | 0% | 81 |0/42 | 82 |0% | 83 |0/26 | 84 |0% | 85 |0/9 | 86 |0% | 87 |0/42 | 88 |
| Datepicker.vue | 92 |
93 |
94 | |
95 | 0% | 96 |0/148 | 97 |0% | 98 |0/62 | 99 |0% | 100 |0/36 | 101 |0% | 102 |0/148 | 103 |
| PickerDay.vue | 107 |
108 |
109 | |
110 | 0% | 111 |0/120 | 112 |0% | 113 |0/141 | 114 |0% | 115 |0/31 | 116 |0% | 117 |0/119 | 118 |
| PickerMonth.vue | 122 |
123 |
124 | |
125 | 0% | 126 |0/68 | 127 |0% | 128 |0/66 | 129 |0% | 130 |0/20 | 131 |0% | 132 |0/67 | 133 |
| PickerYear.vue | 137 |
138 |
139 | |
140 | 97.14% | 141 |68/70 | 142 |83.64% | 143 |46/55 | 144 |94.74% | 145 |18/19 | 146 |97.1% | 147 |67/69 | 148 |
21 |
155 |
160 |
161 |
162 |
167 |
168 |
169 |
170 |
171 |
--------------------------------------------------------------------------------
/tests/unit/specs/DateUtils.spec.js:
--------------------------------------------------------------------------------
1 | import {
2 | isValidDate,
3 | getMonthName,
4 | getMonthNameAbbr,
5 | getDayNameAbbr,
6 | setFullYear,
7 | setMonth,
8 | setDate,
9 | getMinutes,
10 | getHours,
11 | getDay,
12 | daysInMonth,
13 | formatDate,
14 | createDateArray,
15 | getFullYear,
16 | getMonth,
17 | getDate,
18 | } from '@/components/datepicker/utils/DateUtils';
19 | import * as Langlist from '@/components/datepicker/locale';
20 |
21 | let en;
22 |
23 | describe('DateUtils', () => {
24 | beforeEach(()=>{
25 | en = Langlist.data['en'];
26 | })
27 | it('should detect invalid date object', () => {
28 | expect(isValidDate(null)).toEqual(false);
29 | expect(isValidDate(123)).toEqual(false);
30 | expect(isValidDate('abc')).toEqual(false);
31 | expect(isValidDate({})).toEqual(false);
32 | expect(isValidDate(new Date())).toEqual(true);
33 | });
34 |
35 | it('should give correct days in a month', () => {
36 | expect(daysInMonth(2020, 0)).toEqual(31);
37 | expect(daysInMonth(2020, 1)).toEqual(29);
38 | expect(daysInMonth(2015, 1)).toEqual(28);
39 | expect(daysInMonth(2020, 2)).toEqual(31);
40 | expect(daysInMonth(2020, 3)).toEqual(30);
41 | expect(daysInMonth(2020, 4)).toEqual(31);
42 | expect(daysInMonth(2020, 5)).toEqual(30);
43 | expect(daysInMonth(2020, 6)).toEqual(31);
44 | expect(daysInMonth(2020, 7)).toEqual(31);
45 | expect(daysInMonth(2020, 8)).toEqual(30);
46 | expect(daysInMonth(2020, 9)).toEqual(31);
47 | expect(daysInMonth(2020, 10)).toEqual(30);
48 | expect(daysInMonth(2020, 11)).toEqual(31);
49 | });
50 |
51 | it('should format date strings correctly in English', () => {
52 | expect(formatDate(new Date(2020, 0, 1), 'd MMMM yyyy', en)).toEqual('1 January 2020');
53 | expect(formatDate(new Date(2020, 0, 9), 'dd MMM yyyy', en)).toEqual('09 Jan 2020');
54 | expect(formatDate(new Date(2020, 0, 9), 'dd MMM yy', en)).toEqual('09 Jan 20');
55 | expect(formatDate(new Date(2020, 2, 9), 'yyyy-MM-dd', en)).toEqual('2020-03-09');
56 | expect(formatDate(new Date(2020, 2, 9), 'dsu MMMM yyyy', en)).toEqual('9th March 2020');
57 | expect(formatDate(new Date(2020, 2, 1), 'dsu MMMM yyyy', en)).toEqual('1st March 2020');
58 | expect(formatDate(new Date(2020, 2, 2), 'dsu MMMM yyyy', en)).toEqual('2nd March 2020');
59 | expect(formatDate(new Date(2020, 2, 3), 'dsu MMMM yyyy', en)).toEqual('3rd March 2020');
60 | expect(formatDate(new Date(2020, 7, 2), 'D dsu MMMM yyyy', en)).toEqual('Sun 2nd August 2020');
61 | expect(formatDate(new Date(2020, 8, 1), 'D dsu MMMM yyyy', en)).toEqual('Tue 1st September 2020');
62 | expect(formatDate(new Date(2020, 7, 7), 'D dsu MMMM yyyy', en)).toEqual('Fri 7th August 2020');
63 | expect(formatDate(new Date(2020, 11, 2), 'dd MMM yyyy', en)).toEqual('02 Dec 2020');
64 | });
65 |
66 | it('should give the correct day', () => {
67 | expect(formatDate(new Date(2020, 0, 1), 'D', en)).toEqual('Wed');
68 | });
69 |
70 | it('can create an array of dates', () => {
71 | const start = new Date(2020, 9, 12);
72 | const end = new Date(2020, 9, 16);
73 | const dates = createDateArray(start, end);
74 | expect(dates.length).toEqual(5);
75 | let day = 12;
76 | dates.forEach((date) => {
77 | expect(date.getDate()).toEqual(day);
78 | day++;
79 | });
80 | });
81 |
82 | it('gives days in a month', () => {
83 | expect(daysInMonth(2020, 0)).toEqual(31);
84 | expect(daysInMonth(2020, 1)).toEqual(29);
85 | expect(daysInMonth(2020, 2)).toEqual(31);
86 | });
87 |
88 | it('getDayNameAbbr moans if date is not a Date object', () => {
89 | expect(() => getDayNameAbbr(123, en.months)).toThrow(TypeError);
90 | });
91 |
92 | it('getMonthName moans if date is not a Date object', () => {
93 | expect(() => getMonthName('string', en.months)).toThrow(TypeError);
94 | });
95 |
96 | it('getMonthName complains if missing months array', () => {
97 | expect(() => getMonthName(new Date())).toThrow(Error);
98 | });
99 |
100 | it('getMonthName accepts a number', () => {
101 | expect(getMonthName(3, en.months)).toEqual('April');
102 | });
103 |
104 | it('getMonthName accepts a Date object', () => {
105 | expect(getMonthName(new Date(2016, 9, 10), en.months)).toEqual('October');
106 | });
107 |
108 | it('getMonthNameAbbr moans if date is not a Date object', () => {
109 | expect(() => getMonthNameAbbr('abc', en.months)).toThrow(TypeError);
110 | });
111 |
112 | it('getMonthNameAbbr complains if missing months array', () => {
113 | expect(() => getMonthNameAbbr(new Date())).toThrow(Error);
114 | });
115 |
116 | it('getMonthNameAbbr accepts a Date object', () => {
117 | expect(getMonthNameAbbr(new Date(2016, 9, 10), en.monthsAbbr)).toEqual('Oct');
118 | });
119 |
120 | it('getMonthName accepts a number', () => {
121 | expect(getMonthNameAbbr(3, en.monthsAbbr)).toEqual('Apr');
122 | });
123 | });
124 |
125 | describe('daysInMonth', () => {
126 | it('should give the correct days in a month', () => {
127 | expect(daysInMonth(2017, 0)).toEqual(31); // Jan
128 | expect(daysInMonth(2017, 1)).toEqual(28); // Feb
129 | expect(daysInMonth(2017, 2)).toEqual(31); // Mar
130 | expect(daysInMonth(2017, 3)).toEqual(30); // Apr
131 | expect(daysInMonth(2017, 4)).toEqual(31); // May
132 | expect(daysInMonth(2017, 5)).toEqual(30); // Jun
133 | expect(daysInMonth(2017, 6)).toEqual(31); // Jul
134 | expect(daysInMonth(2017, 7)).toEqual(31); // Aug
135 | expect(daysInMonth(2017, 8)).toEqual(30); // Sep
136 | expect(daysInMonth(2017, 9)).toEqual(31); // Oct
137 | expect(daysInMonth(2017, 10)).toEqual(30); // Nov
138 | expect(daysInMonth(2017, 11)).toEqual(31); // Dec
139 | });
140 | });
141 |
142 | const getAmbiguousDate = (_) => {
143 | const timezoneOffset = new Date().getTimezoneOffset() / 60;
144 | const ambiguousHour = 25 - timezoneOffset;
145 | const ambiguousDate = new Date(2018, 11, 31, ambiguousHour);
146 | return ambiguousDate;
147 | };
148 |
149 | describe('UTC functions', () => {
150 | // const utcUtils = makeDateUtils(true)
151 |
152 | it('getFullYear', () => {
153 | const date = getAmbiguousDate();
154 | expect(getFullYear(date)).toEqual(date.getFullYear());
155 | expect(getFullYear(date, true)).toEqual(date.getUTCFullYear());
156 | });
157 |
158 | it('getMonth', () => {
159 | const date = getAmbiguousDate();
160 | expect(getMonth(date)).toEqual(date.getMonth());
161 | expect(getMonth(date, true)).toEqual(date.getUTCMonth());
162 | });
163 |
164 | it('getDate', () => {
165 | const date = getAmbiguousDate();
166 | expect(getDate(date)).toEqual(date.getDate());
167 | expect(getDate(date, true)).toEqual(date.getUTCDate());
168 | });
169 |
170 | it('getDay', () => {
171 | const date = getAmbiguousDate();
172 | expect(getDay(date)).toEqual(date.getDay());
173 | expect(getDay(date, true)).toEqual(date.getUTCDay());
174 | });
175 |
176 | it('getHours', () => {
177 | const date = getAmbiguousDate();
178 | expect(getHours(date)).toEqual(date.getHours());
179 | expect(getHours(date, true)).toEqual(date.getUTCHours());
180 | });
181 |
182 | it('getMinutes', () => {
183 | const date = getAmbiguousDate();
184 | expect(getMinutes(date)).toEqual(date.getMinutes());
185 | expect(getMinutes(date, true)).toEqual(date.getUTCMinutes());
186 | });
187 |
188 | it('setFullYear', () => {
189 | const date = getAmbiguousDate();
190 | expect(setFullYear(date, 2018)).toEqual(date.setFullYear(2018));
191 | expect(setFullYear(date, 2018, true)).toEqual(date.setUTCFullYear(2018));
192 | });
193 |
194 | it('setMonth', () => {
195 | const date = getAmbiguousDate();
196 | expect(setMonth(date, 11)).toEqual(date.setMonth(11));
197 | expect(setMonth(date, 11, true)).toEqual(date.setUTCMonth(11));
198 | });
199 |
200 | it('setDate', () => {
201 | const date = getAmbiguousDate();
202 | expect(setDate(date, 31)).toEqual(date.setDate(31));
203 | expect(setDate(date, 31, true)).toEqual(date.setUTCDate(31));
204 | });
205 |
206 | });
207 |
--------------------------------------------------------------------------------
22 |
58 |
59 | All files datepicker
23 |
24 |
25 |
54 |
26 | 95.71%
27 | Statements
28 | 446/466
29 |
30 |
31 |
32 |
33 | 91.14%
34 | Branches
35 | 329/361
36 |
37 |
38 |
39 |
40 | 92.24%
41 | Functions
42 | 107/116
43 |
44 |
45 |
46 |
47 | 95.68%
48 | Lines
49 | 443/463
50 |
51 |
52 |
53 | 55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 |
60 |
61 |
62 |
152 |
153 |
154 | | File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| DateInput.vue | 77 |
78 |
79 | |
80 | 100% | 81 |47/47 | 82 |93.75% | 83 |30/32 | 84 |100% | 85 |9/9 | 86 |100% | 87 |47/47 | 88 |
| Datepicker.vue | 92 |
93 |
94 | |
95 | 91.89% | 96 |136/148 | 97 |91.94% | 98 |57/62 | 99 |83.33% | 100 |30/36 | 101 |91.89% | 102 |136/148 | 103 |
| PickerDay.vue | 107 |
108 |
109 | |
110 | 97.66% | 111 |125/128 | 112 |93.15% | 113 |136/146 | 114 |96.88% | 115 |31/32 | 116 |97.64% | 117 |124/127 | 118 |
| PickerMonth.vue | 122 |
123 |
124 | |
125 | 95.71% | 126 |67/70 | 127 |86.36% | 128 |57/66 | 129 |95% | 130 |19/20 | 131 |95.65% | 132 |66/69 | 133 |
| PickerYear.vue | 137 |
138 |
139 | |
140 | 97.26% | 141 |71/73 | 142 |89.09% | 143 |49/55 | 144 |94.74% | 145 |18/19 | 146 |97.22% | 147 |70/72 | 148 |