Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Single date picker tests added #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
edisdev merged 2 commits into edisdev:develop from 5evki:master
Jun 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions tests/unit/__snapshots__/calendar.spec.js.snap
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Calender View Single datepicker is correct render 1`] = `
<div class="calendar">
<div class="selected-field">
<div class="selected-date"><button type="button" class="prevDateButton"></button> <button type="button" class="viewButton">
Haz 2021
</button> <button type="button" class="nextDateButton"></button></div>
<div class="days">
<div class="day name">
Pzt
</div>
<div class="day name">
Sal
</div>
<div class="day name">
Çar
</div>
<div class="day name">
Per
</div>
<div class="day name">
Cum
</div>
<div class="day name">
Cmt
</div>
<div class="day name">
Paz
</div>
</div>
</div>
<div class="days-selection">
<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>
<div class="viewmode">
<div class="years" style="display: none;"><button type="button" class="year">
2021
</button><button type="button" class="year">
2022
</button><button type="button" class="year">
2023
</button><button type="button" class="year">
2024
</button><button type="button" class="year">
2025
</button><button type="button" class="year">
2026
</button><button type="button" class="year">
2027
</button><button type="button" class="year">
2028
</button><button type="button" class="year">
2029
</button><button type="button" class="year">
2030
</button><button type="button" class="year">
2031
</button></div>
<div class="months" style="display: none;"><button type="button" class="month">
Oca
</button><button type="button" class="month">
Şub
</button><button type="button" class="month">
Mar
</button><button type="button" class="month">
Nis
</button><button type="button" class="month">
May
</button><button type="button" class="month">
Haz
</button><button type="button" class="month">
Tem
</button><button type="button" class="month">
Ağu
</button><button type="button" class="month">
Eyl
</button><button type="button" class="month">
Eki
</button><button type="button" class="month">
Kas
</button><button type="button" class="month">
Ara
</button></div>
</div>
</div>
</div>
`;

exports[`Calender View is correct render 1`] = `
<div class="calendar">
<div class="selected-field">
Expand Down
77 changes: 61 additions & 16 deletions tests/unit/calendar.spec.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,68 @@ import { mount } from '@vue/test-utils'
import { BasicData } from './mockData'
import Calendar from '@/components/calendar.vue'

let wrapper

describe('Calender View', () => {
wrapper = mount(Calendar, {
propsData: {
calendar: BasicData.calendar,
currentDate: BasicData.currentDate,
selectedDate: BasicData.currentDate,
range: BasicData.range,
textFormat: BasicData.textFormat,
disableDate: BasicData.disableDate,
formatDate: BasicData.formatDate,
viewMode: BasicData.viewMode
}
})
describe('Single datepicker', () => {
let wrapper

beforeEach(() => {
wrapper = mount(Calendar, {
propsData: {
calendar: BasicData.calendar,
currentDate: BasicData.currentDate,
selectedDate: BasicData.currentDate,
range: BasicData.range,
textFormat: BasicData.textFormat,
disableDate: BasicData.disableDate,
formatDate: BasicData.formatDate,
viewMode: BasicData.viewMode
}
})
})

afterEach(() => {
wrapper.destroy()
})

test('is correct render', () => {
expect(wrapper.html()).toMatchSnapshot()
})

test('should be day count equal to 7', () => {
const days = wrapper.findAll('.days > .name')
expect(days.length).toBe(7)
})

test('should be day count of a month is between 28-31 ', () => {
const allDaysInSelection = wrapper.findAll('.days-selection > .days > .day')
const disabledDate = wrapper.findAll('.days-selection > .days > .disabledDate')

const dayCountOfThisMonth = allDaysInSelection.length - disabledDate.length

expect(dayCountOfThisMonth).toBeGreaterThanOrEqual(28)
expect(dayCountOfThisMonth).toBeLessThanOrEqual(31)
})

test('should be able change view mode as years', async () => {
const viewButton = wrapper.find('.viewButton')
await viewButton.trigger('click')

const years = wrapper.findAll('.year')
expect(years.length).toBe(11)
})

test('there should be a calendar', () => {
const calendar = wrapper.findAll('.calendar')
expect(calendar.length).toBe(1)
})

test('should be called handlerDate when selected a date', async () => {
const mockHandlerDate = jest.spyOn(wrapper.vm, 'handlerDate')

const fifthDay = wrapper.findAll('.days-selection > .days > .day').at(6)
await fifthDay.trigger('click')

test('is correct render', () => {
expect(wrapper.html()).toMatchSnapshot()
expect(mockHandlerDate).toHaveBeenCalled()
})
})
})

AltStyle によって変換されたページ (->オリジナル) /