ajoute des tests au composant currencyInput

Dans le but de documenter la prop storeValue, ajoutée pour transformer currencyInput en composant semi-controllé
Voir https://github.com/betagouv/syso/pull/551#discussion_r287703126
pull/555/head
Johan Girod 2019-05-27 12:29:05 +02:00
parent 85c776c8f7
commit 62a11b22be
No known key found for this signature in database
GPG Key ID: 9E27B57DA2E8AE12
1 changed files with 29 additions and 7 deletions

View File

@ -12,7 +12,7 @@ describe('CurrencyInput', () => {
it('should accept both . and , as decimal separator', () => {
let onChange = spy()
const input = getInput(<CurrencyInput value={0} onChange={onChange} />)
const input = getInput(<CurrencyInput onChange={onChange} />)
input.simulate('change', { target: { value: '12.1' } })
expect(onChange).to.have.been.calledWith(
match.hasNested('target.value', '12.1')
@ -25,7 +25,7 @@ describe('CurrencyInput', () => {
it('should not accept negative number', () => {
let onChange = spy()
const input = getInput(<CurrencyInput value={0} onChange={onChange} />)
const input = getInput(<CurrencyInput onChange={onChange} />)
input.simulate('change', { target: { value: '-12' } })
expect(onChange).to.have.been.calledWith(
match.hasNested('target.value', '12')
@ -34,7 +34,7 @@ describe('CurrencyInput', () => {
it('should not accept anything else than number', () => {
let onChange = spy()
const input = getInput(<CurrencyInput value={0} onChange={onChange} />)
const input = getInput(<CurrencyInput onChange={onChange} />)
input.simulate('change', { target: { value: '*1/2abc3' } })
expect(onChange).to.have.been.calledWith(
match.hasNested('target.value', '123')
@ -46,20 +46,20 @@ describe('CurrencyInput', () => {
})
it('should not call onChange while the decimal part is being written', () => {
let onChange = spy()
const input = getInput(<CurrencyInput value={0} onChange={onChange} />)
const input = getInput(<CurrencyInput onChange={onChange} />)
input.simulate('change', { target: { value: '111,' } })
expect(onChange).not.to.have.been.called
})
it('should change the position of the currency symbol depending on the language', () => {
const inputFr = shallow(<CurrencyInput value={0} language="fr" />)
const inputFr = shallow(<CurrencyInput language="fr" />)
expect(
inputFr
.children()
.last()
.text()
).to.includes('€')
const inputEn = shallow(<CurrencyInput value={0} language="en" />)
const inputEn = shallow(<CurrencyInput language="en" />)
expect(
inputEn
.children()
@ -72,7 +72,7 @@ describe('CurrencyInput', () => {
const clock = useFakeTimers()
let onChange = spy()
const input = getInput(
<CurrencyInput value={0} onChange={onChange} debounce={1000} />
<CurrencyInput onChange={onChange} debounce={1000} />
)
input.simulate('change', { target: { value: '1' } })
expect(onChange).not.to.have.been.called
@ -86,4 +86,26 @@ describe('CurrencyInput', () => {
)
clock.restore()
})
it('should initialize with value of the storeValue prop', () => {
const input = getInput(<CurrencyInput storeValue={1} />)
expect(input.prop('value')).to.eq(1)
})
it('should update its value if the storeValue prop changes', () => {
const wrapper = shallow(<CurrencyInput storeValue={1} />)
wrapper.setProps({ storeValue: 2 })
expect(wrapper.state('value')).to.equal(2)
})
it('should not update state if the storeValue is the same as the current input value', () => {
const wrapper = shallow(
<CurrencyInput storeValue={1000} onChange={() => {}} />
)
const input = wrapper.find('input')
input.simulate('change', { target: { value: '2000' } })
const state1 = wrapper.state()
wrapper.setProps({ storeValue: '2000' })
const state2 = wrapper.state()
expect(state1).to.equal(state2)
})
})