mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(time-picker): add test (#1143)

Browse Source
This commit is contained in:
XieZongChen 2021-09-08 22:25:13 -05:00 committed by GitHub
parent 2d1019488d
commit 1b910006db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 77 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/time-picker/tests/TimePicker.spec.ts
View File

@ -6,6 +6,55 @@ describe('n-time-picker', () => {
mount(NTimePicker)
})
it('should work with `actions` prop', async () => {
const wrapper = mount(NTimePicker, {
attachTo: document.body
})
await wrapper.find('.n-input').trigger('click')
expect(document.querySelectorAll('button').length).toBe(2)
expect(document.querySelectorAll('button')[0].textContent).toBe('Now')
expect(document.querySelectorAll('button')[1].textContent).toBe('OK')
await wrapper.setProps({
actions: ['now']
})
expect(document.querySelectorAll('button').length).toBe(1)
expect(document.querySelectorAll('button')[0].textContent).toBe('Now')
await wrapper.setProps({
actions: ['confirm']
})
expect(document.querySelectorAll('button').length).toBe(1)
expect(document.querySelectorAll('button')[0].textContent).toBe('OK')
await wrapper.setProps({
actions: []
})
expect(document.querySelectorAll('button').length).toBe(0)
wrapper.unmount()
})
it('should work with `clearable` prop', async () => {
const wrapper = mount(NTimePicker)
expect(wrapper.find('.n-base-clear').exists()).not.toBe(true)
await wrapper.setProps({
clearable: true
})
expect(wrapper.find('.n-base-clear').exists()).toBe(true)
wrapper.unmount()
})
it('should work with `disabled` prop', async () => {
const wrapper = mount(NTimePicker)
expect(wrapper.find('.n-input').attributes('class')).not.toContain(
'n-input--disabled'
)
await wrapper.setProps({
disabled: true
})
expect(wrapper.find('.n-input').attributes('class')).toContain(
'n-input--disabled'
)
wrapper.unmount()
})
it('should work with `inputReadonly` prop', async () => {
const wrapper = mount(NTimePicker)
expect(wrapper.find('input').attributes('readonly')).not.toBe('')
@ -13,5 +62,26 @@ describe('n-time-picker', () => {
inputReadonly: true
})
expect(wrapper.find('input').attributes('readonly')).toBe('')
wrapper.unmount()
})
it('should work with `placeholder` prop', async () => {
const wrapper = mount(NTimePicker)
expect(wrapper.find('input').attributes('placeholder')).toBe('Select Time')
await wrapper.setProps({
placeholder: 'test-placeholder'
})
expect(wrapper.find('input').attributes('placeholder')).toBe(
'test-placeholder'
)
wrapper.unmount()
})
it('should work with `size` prop', async () => {
;(['small', 'medium', 'large'] as const).forEach((item) => {
const wrapper = mount(NTimePicker, { props: { size: item } })
expect(wrapper.find('.n-input').attributes('style')).toMatchSnapshot()
wrapper.unmount()
})
})
})

7
src/time-picker/tests/__snapshots__/TimePicker.spec.ts.snap Normal file
View File

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-time-picker should work with \`size\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --count-text-color: rgb(158, 164, 170); --color: rgba(255, 255, 255, 1); --font-size: 14px; --border-radius: 3px; --height: 28px; --padding-left: 10px; --padding-right: 10px; --text-color: rgb(51, 54, 57); --caret-color: #18a058; --text-decoration-color: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-disabled: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-focus: 1px solid #36ad6a; --placeholder-color: rgba(194, 194, 194, 1); --placeholder-color-disabled: rgba(209, 209, 209, 1); --icon-size: 16px; --line-height-textarea: 1.6; --color-disabled: rgb(250, 250, 252); --color-focus: rgba(255, 255, 255, 1); --text-color-disabled: rgba(194, 194, 194, 1); --box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --loading-color: #18a058; --caret-color-warning: #f0a020; --color-focus-warning: rgba(255, 255, 255, 1); --box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --border-warning: 1px solid #f0a020; --border-focus-warning: 1px solid #fcb040; --border-hover-warning: 1px solid #fcb040; --loading-color-warning: #f0a020; --caret-color-error: #d03050; --color-focus-error: rgba(255, 255, 255, 1); --box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --border-error: 1px solid #d03050; --border-focus-error: 1px solid #de576d; --border-hover-error: 1px solid #de576d; --loading-color-error: #d03050; --clear-color: rgba(194, 194, 194, 1); --clear-size: 16px; --clear-color-hover: rgba(146, 146, 146, 1); --clear-color-pressed: rgba(175, 175, 175, 1); --icon-color: rgba(194, 194, 194, 1); --icon-color-hover: rgba(146, 146, 146, 1); --icon-color-pressed: rgba(175, 175, 175, 1); --icon-color-disabled: rgba(209, 209, 209, 1); --suffix-text-color: rgb(51, 54, 57);"`;
exports[`n-time-picker should work with \`size\` prop 2`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --count-text-color: rgb(158, 164, 170); --color: rgba(255, 255, 255, 1); --font-size: 14px; --border-radius: 3px; --height: 34px; --padding-left: 12px; --padding-right: 12px; --text-color: rgb(51, 54, 57); --caret-color: #18a058; --text-decoration-color: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-disabled: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-focus: 1px solid #36ad6a; --placeholder-color: rgba(194, 194, 194, 1); --placeholder-color-disabled: rgba(209, 209, 209, 1); --icon-size: 16px; --line-height-textarea: 1.6; --color-disabled: rgb(250, 250, 252); --color-focus: rgba(255, 255, 255, 1); --text-color-disabled: rgba(194, 194, 194, 1); --box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --loading-color: #18a058; --caret-color-warning: #f0a020; --color-focus-warning: rgba(255, 255, 255, 1); --box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --border-warning: 1px solid #f0a020; --border-focus-warning: 1px solid #fcb040; --border-hover-warning: 1px solid #fcb040; --loading-color-warning: #f0a020; --caret-color-error: #d03050; --color-focus-error: rgba(255, 255, 255, 1); --box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --border-error: 1px solid #d03050; --border-focus-error: 1px solid #de576d; --border-hover-error: 1px solid #de576d; --loading-color-error: #d03050; --clear-color: rgba(194, 194, 194, 1); --clear-size: 16px; --clear-color-hover: rgba(146, 146, 146, 1); --clear-color-pressed: rgba(175, 175, 175, 1); --icon-color: rgba(194, 194, 194, 1); --icon-color-hover: rgba(146, 146, 146, 1); --icon-color-pressed: rgba(175, 175, 175, 1); --icon-color-disabled: rgba(209, 209, 209, 1); --suffix-text-color: rgb(51, 54, 57);"`;
exports[`n-time-picker should work with \`size\` prop 3`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --count-text-color: rgb(158, 164, 170); --color: rgba(255, 255, 255, 1); --font-size: 15px; --border-radius: 3px; --height: 40px; --padding-left: 14px; --padding-right: 14px; --text-color: rgb(51, 54, 57); --caret-color: #18a058; --text-decoration-color: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-disabled: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-focus: 1px solid #36ad6a; --placeholder-color: rgba(194, 194, 194, 1); --placeholder-color-disabled: rgba(209, 209, 209, 1); --icon-size: 16px; --line-height-textarea: 1.6; --color-disabled: rgb(250, 250, 252); --color-focus: rgba(255, 255, 255, 1); --text-color-disabled: rgba(194, 194, 194, 1); --box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --loading-color: #18a058; --caret-color-warning: #f0a020; --color-focus-warning: rgba(255, 255, 255, 1); --box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --border-warning: 1px solid #f0a020; --border-focus-warning: 1px solid #fcb040; --border-hover-warning: 1px solid #fcb040; --loading-color-warning: #f0a020; --caret-color-error: #d03050; --color-focus-error: rgba(255, 255, 255, 1); --box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --border-error: 1px solid #d03050; --border-focus-error: 1px solid #de576d; --border-hover-error: 1px solid #de576d; --loading-color-error: #d03050; --clear-color: rgba(194, 194, 194, 1); --clear-size: 16px; --clear-color-hover: rgba(146, 146, 146, 1); --clear-color-pressed: rgba(175, 175, 175, 1); --icon-color: rgba(194, 194, 194, 1); --icon-color-hover: rgba(146, 146, 146, 1); --icon-color-pressed: rgba(175, 175, 175, 1); --icon-color-disabled: rgba(209, 209, 209, 1); --suffix-text-color: rgb(51, 54, 57);"`;