Skip to content

Commit 979fcd2

Browse files
edisdevedisdev
committed
Add test folder
1 parent 9a66ddc commit 979fcd2

File tree

9 files changed

+202
-7
lines changed

9 files changed

+202
-7
lines changed

‎.npmignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,8 @@ yarn-error.log
1515
.editorconfig
1616
vue.config.js
1717
babel.config.js
18-
jest.config.js
18+
jest.config.js
19+
jsconfig.json
20+
21+
##tests
22+
/tests

‎jest.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
module.exports = {
2-
preset: '@vue/cli-plugin-unit-jest'
2+
preset: '@vue/cli-plugin-unit-jest',
3+
transformIgnorePatterns: [
4+
'node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)'
5+
]
36
}

‎jsconfig.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@/*": [
6+
"./src/*"
7+
]
8+
}
9+
}
10+
}

‎src/components/datepicker.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474

7575
<script>
7676
import Calendar from 'calendar-data-generate'
77+
import formatDate from '@/utils/formatDate'
7778
7879
import CalendarUI from './calendar'
7980
@@ -238,11 +239,7 @@ export default {
238239
},
239240
methods: {
240241
formatDate (value) {
241-
if (!value) return null
242-
if (this.range && this.value.filter(Boolean).length === 0) return null
243-
return new Date(value).toLocaleDateString(this.lang, {
244-
...this.dateFormat
245-
})
242+
return formatDate(value, this)
246243
},
247244
prevMonth (picker) {
248245
const currentDate =

‎src/utils/formatDate.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* @description format date
3+
* @param {String} date the value to be formatted
4+
* @param {Object} options date datepicker props
5+
* @param {String} options.value current value
6+
* @param {String} options.range is multi picker
7+
* @param {String} options.lang picker lang
8+
* @param {Object} options.dateFormat picker date format
9+
* @param {string} options.dateFormat.day // day format
10+
* @param {string} options.dateFormat.month // month format
11+
* @param {string} options.dateFormat.year // year format
12+
* @return {String} // formated value
13+
*/
14+
export default function (date, options = {}) {
15+
const { value, range, lang, dateFormat } = options
16+
17+
if (!date) return null
18+
if (range && value.filter(Boolean).length === 0) return null
19+
const result = new Date(date).toLocaleDateString(lang, {
20+
...dateFormat
21+
})
22+
23+
return result
24+
}

‎tests/unit/.eslintrc.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
env: {
3+
jest: true
4+
},
5+
rules: {
6+
'import/no-extraneous-dependencies': 'off'
7+
}
8+
}

‎tests/unit/__snapshots__/calendar.spec.js.snap‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Calender View is correct render 1`] = `
4+
<div class="calendar">
5+
<div class="selected-field">
6+
<div class="selected-date"><button type="button" class="prevDateButton"></button> <button type="button" class="viewButton">
7+
Haz 2021
8+
</button> <button type="button" class="nextDateButton"></button></div>
9+
<div class="days">
10+
<div class="day name">
11+
Pzt
12+
</div>
13+
<div class="day name">
14+
Sal
15+
</div>
16+
<div class="day name">
17+
Çar
18+
</div>
19+
<div class="day name">
20+
Per
21+
</div>
22+
<div class="day name">
23+
Cum
24+
</div>
25+
<div class="day name">
26+
Cmt
27+
</div>
28+
<div class="day name">
29+
Paz
30+
</div>
31+
</div>
32+
</div>
33+
<div class="days-selection">
34+
<div class="days"><button type="button" class="day disabledDate"><span class="number">31</span></button><button type="button" class="day"><span class="number">1</span></button><button type="button" class="day"><span class="number">2</span></button><button type="button" class="day"><span class="number">3</span></button><button type="button" class="day"><span class="number">4</span></button><button type="button" class="day"><span class="number">5</span></button><button type="button" class="day"><span class="number">6</span></button><button type="button" class="day"><span class="number">7</span></button><button type="button" class="day"><span class="number">8</span></button><button type="button" class="day"><span class="number">9</span></button><button type="button" class="day"><span class="number">10</span></button><button type="button" class="day"><span class="number">11</span></button><button type="button" class="day"><span class="number">12</span></button><button type="button" class="day"><span class="number">13</span></button><button type="button" class="day"><span class="number">14</span></button><button type="button" class="day"><span class="number">15</span></button><button type="button" class="day"><span class="number">16</span></button><button type="button" class="day"><span class="number">17</span></button><button type="button" class="day"><span class="number">18</span></button><button type="button" class="day"><span class="number">19</span></button><button type="button" class="day"><span class="number">20</span></button><button type="button" class="day"><span class="number">21</span></button><button type="button" class="day"><span class="number">22</span></button><button type="button" class="day"><span class="number">23</span></button><button type="button" class="day"><span class="number">24</span></button><button type="button" class="day"><span class="number">25</span></button><button type="button" class="day"><span class="number">26</span></button><button type="button" class="day"><span class="number">27</span></button><button type="button" class="day"><span class="number">28</span></button><button type="button" class="day"><span class="number">29</span></button><button type="button" class="day"><span class="number">30</span></button><button type="button" class="day disabledDate"><span class="number">1</span></button><button type="button" class="day disabledDate"><span class="number">2</span></button><button type="button" class="day disabledDate"><span class="number">3</span></button><button type="button" class="day disabledDate"><span class="number">4</span></button></div>
35+
<div class="viewmode">
36+
<div class="years" style="display: none;"><button type="button" class="year">
37+
2021
38+
</button><button type="button" class="year">
39+
2022
40+
</button><button type="button" class="year">
41+
2023
42+
</button><button type="button" class="year">
43+
2024
44+
</button><button type="button" class="year">
45+
2025
46+
</button><button type="button" class="year">
47+
2026
48+
</button><button type="button" class="year">
49+
2027
50+
</button><button type="button" class="year">
51+
2028
52+
</button><button type="button" class="year">
53+
2029
54+
</button><button type="button" class="year">
55+
2030
56+
</button><button type="button" class="year">
57+
2031
58+
</button></div>
59+
<div class="months" style="display: none;"><button type="button" class="month">
60+
Oca
61+
</button><button type="button" class="month">
62+
Şub
63+
</button><button type="button" class="month">
64+
Mar
65+
</button><button type="button" class="month">
66+
Nis
67+
</button><button type="button" class="month">
68+
May
69+
</button><button type="button" class="month">
70+
Haz
71+
</button><button type="button" class="month">
72+
Tem
73+
</button><button type="button" class="month">
74+
Ağu
75+
</button><button type="button" class="month">
76+
Eyl
77+
</button><button type="button" class="month">
78+
Eki
79+
</button><button type="button" class="month">
80+
Kas
81+
</button><button type="button" class="month">
82+
Ara
83+
</button></div>
84+
</div>
85+
</div>
86+
</div>
87+
`;

‎tests/unit/calendar.spec.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { mount } from '@vue/test-utils'
2+
3+
import { BasicData } from './mockData'
4+
import Calendar from '@/components/calendar.vue'
5+
6+
let wrapper
7+
8+
describe('Calender View', () => {
9+
wrapper = mount(Calendar, {
10+
propsData: {
11+
calendar: BasicData.calendar,
12+
currentDate: BasicData.currentDate,
13+
selectedDate: BasicData.currentDate,
14+
range: BasicData.range,
15+
textFormat: BasicData.textFormat,
16+
disableDate: BasicData.disableDate,
17+
formatDate: BasicData.formatDate,
18+
viewMode: BasicData.viewMode
19+
}
20+
})
21+
22+
test('is correct render', () => {
23+
expect(wrapper.html()).toMatchSnapshot()
24+
})
25+
})

‎tests/unit/mockData.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import formatDate from '@/utils/formatDate'
2+
import Calendar from 'calendar-data-generate'
3+
4+
const Basic = {
5+
currentDate: {
6+
year: new Date().getFullYear(),
7+
month: new Date().getMonth(),
8+
date: new Date().getDate(),
9+
firstDayOfWeek: 'monday'
10+
},
11+
lang: 'tr',
12+
textFormat: 'short',
13+
dateFormat: {
14+
day: '2-digit',
15+
month: 'short',
16+
year: 'numeric'
17+
},
18+
disableDate: { to: null, from: null },
19+
range: false,
20+
viewMode: 'days'
21+
}
22+
23+
const BASIC_CALENDAR = new Calendar(
24+
Basic.currentDate,
25+
Basic.lang,
26+
Basic.textFormat,
27+
{ ...Basic.dateFormat },
28+
Basic.range
29+
)
30+
31+
export const BasicData = {
32+
calendar: BASIC_CALENDAR,
33+
formatDate: (value) => {
34+
return formatDate(value, BasicData)
35+
},
36+
...Basic
37+
}

0 commit comments

Comments
 (0)