Skip to content

Commit 4e25bf5

Browse files
authored
Merge pull request #35 from sevkioruc/master
Single date picker tests added
2 parents c6ec620 + 42d44e6 commit 4e25bf5

File tree

2 files changed

+147
-16
lines changed

2 files changed

+147
-16
lines changed

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,91 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Calender View Single datepicker 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+
`;
88+
389
exports[`Calender View is correct render 1`] = `
490
<div class="calendar">
591
<div class="selected-field">

tests/unit/calendar.spec.js

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,68 @@ import { mount } from '@vue/test-utils'
33
import { BasicData } from './mockData'
44
import Calendar from '@/components/calendar.vue'
55

6-
let wrapper
7-
86
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-
})
7+
describe('Single datepicker', () => {
8+
let wrapper
9+
10+
beforeEach(() => {
11+
wrapper = mount(Calendar, {
12+
propsData: {
13+
calendar: BasicData.calendar,
14+
currentDate: BasicData.currentDate,
15+
selectedDate: BasicData.currentDate,
16+
range: BasicData.range,
17+
textFormat: BasicData.textFormat,
18+
disableDate: BasicData.disableDate,
19+
formatDate: BasicData.formatDate,
20+
viewMode: BasicData.viewMode
21+
}
22+
})
23+
})
24+
25+
afterEach(() => {
26+
wrapper.destroy()
27+
})
28+
29+
test('is correct render', () => {
30+
expect(wrapper.html()).toMatchSnapshot()
31+
})
32+
33+
test('should be day count equal to 7', () => {
34+
const days = wrapper.findAll('.days > .name')
35+
expect(days.length).toBe(7)
36+
})
37+
38+
test('should be day count of a month is between 28-31 ', () => {
39+
const allDaysInSelection = wrapper.findAll('.days-selection > .days > .day')
40+
const disabledDate = wrapper.findAll('.days-selection > .days > .disabledDate')
41+
42+
const dayCountOfThisMonth = allDaysInSelection.length - disabledDate.length
43+
44+
expect(dayCountOfThisMonth).toBeGreaterThanOrEqual(28)
45+
expect(dayCountOfThisMonth).toBeLessThanOrEqual(31)
46+
})
47+
48+
test('should be able change view mode as years', async () => {
49+
const viewButton = wrapper.find('.viewButton')
50+
await viewButton.trigger('click')
51+
52+
const years = wrapper.findAll('.year')
53+
expect(years.length).toBe(11)
54+
})
55+
56+
test('there should be a calendar', () => {
57+
const calendar = wrapper.findAll('.calendar')
58+
expect(calendar.length).toBe(1)
59+
})
60+
61+
test('should be called handlerDate when selected a date', async () => {
62+
const mockHandlerDate = jest.spyOn(wrapper.vm, 'handlerDate')
63+
64+
const fifthDay = wrapper.findAll('.days-selection > .days > .day').at(6)
65+
await fifthDay.trigger('click')
2166

22-
test('is correct render', () => {
23-
expect(wrapper.html()).toMatchSnapshot()
67+
expect(mockHandlerDate).toHaveBeenCalled()
68+
})
2469
})
2570
})

0 commit comments

Comments
 (0)