Skip to content

Commit ac37ebf

Browse files
nighcanighca
committed
Details for dirty & DebouncedState (#74)
* dirty -> touched * debug DebouncedState
1 parent 850445a commit ac37ebf

File tree

13 files changed

+179
-144
lines changed

13 files changed

+179
-144
lines changed

‎src/adapter/v2.spec.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe('fromV2', () => {
1313
const state = fromV2(stateV2)
1414

1515
expect(state.value).toBe('')
16-
expect(state.dirty).toBe(false)
16+
expect(state.touched).toBe(false)
1717
expect(state.activated).toBe(false)
1818
expect<typeof stateV2>(state.$).toBe(stateV2)
1919
})
@@ -25,7 +25,7 @@ describe('fromV2', () => {
2525
stateV2.onChange('foo')
2626

2727
await delay()
28-
expect(state.dirty).toBe(true)
28+
expect(state.touched).toBe(true)
2929
expect(state.value).toBe('foo')
3030
expect(state.activated).toBe(true)
3131

@@ -35,7 +35,7 @@ describe('fromV2', () => {
3535
expect(stateV2._value).toBe('bar')
3636
expect(stateV2.value).toBe('bar')
3737
expect(stateV2.$).toBe('bar')
38-
expect(state.dirty).toBe(true)
38+
expect(state.touched).toBe(true)
3939
expect(state.value).toBe('bar')
4040
})
4141

@@ -44,15 +44,15 @@ describe('fromV2', () => {
4444
const state = fromV2(stateV2)
4545

4646
stateV2.set('foo')
47-
expect(state.dirty).toBe(true)
47+
expect(state.touched).toBe(true)
4848
expect(state.value).toBe('foo')
4949
expect(state.activated).toBe(false)
5050

5151
state.set('bar')
5252
expect(stateV2.dirty).toBe(true)
5353
expect(stateV2._value).toBe('bar')
5454
expect(stateV2.value).toBe('bar')
55-
expect(state.dirty).toBe(true)
55+
expect(state.touched).toBe(true)
5656
expect(state.value).toBe('bar')
5757
expect(state.activated).toBe(false)
5858
})
@@ -69,7 +69,7 @@ describe('fromV2', () => {
6969
expect(stateV2.value).toBe(initialValue)
7070
expect(stateV2.dirty).toBe(false)
7171
expect(state.value).toBe(initialValue)
72-
expect(state.dirty).toBe(false)
72+
expect(state.touched).toBe(false)
7373
expect(state.activated).toBe(false)
7474

7575
state.onChange('456')
@@ -78,7 +78,7 @@ describe('fromV2', () => {
7878
expect(stateV2.value).toBe(initialValue)
7979
expect(stateV2.dirty).toBe(false)
8080
expect(state.value).toBe(initialValue)
81-
expect(state.dirty).toBe(false)
81+
expect(state.touched).toBe(false)
8282
expect(state.activated).toBe(false)
8383

8484
state.dispose()
@@ -182,7 +182,7 @@ describe('fromV2', () => {
182182
expect(stateV2._validateStatus).toBe(v2.ValidateStatus.NotValidated)
183183
expect(stateV2.error).toBe(undefined)
184184
expect(state.value).toBe(initialValue)
185-
expect(state.dirty).toBe(false)
185+
expect(state.touched).toBe(false)
186186
expect(state.validateStatus).toBe(v3.ValidateStatus.NotValidated)
187187
expect(state.error).toBe(undefined)
188188
expect(state.ownError).toBe(undefined)
@@ -241,7 +241,7 @@ describe('fromV2', () => {
241241
const state = fromV2(stateV2)
242242

243243
expect(state.value).toEqual({ foo: '' })
244-
expect(state.dirty).toBe(false)
244+
expect(state.touched).toBe(false)
245245
expect(state.activated).toBe(false)
246246
expect<typeof stateV2>(state.$).toBe(stateV2)
247247
})
@@ -253,7 +253,7 @@ describe('fromV2', () => {
253253
state.onChange({ foo: 'foo' })
254254

255255
await delay()
256-
expect(state.dirty).toBe(true)
256+
expect(state.touched).toBe(true)
257257
expect(state.value).toEqual({ foo: 'foo' })
258258
expect(state.activated).toBe(true)
259259

@@ -264,7 +264,7 @@ describe('fromV2', () => {
264264
expect(stateV2.$.foo.value).toBe('bar')
265265
expect(stateV2.dirty).toBe(true)
266266
expect(stateV2.value).toEqual({ foo: 'bar' })
267-
expect(state.dirty).toBe(true)
267+
expect(state.touched).toBe(true)
268268
expect(state.value).toEqual({ foo: 'bar' })
269269
expect(state.activated).toBe(true)
270270
})
@@ -274,7 +274,7 @@ describe('fromV2', () => {
274274
const state = fromV2(stateV2)
275275

276276
state.set({ foo: 'foo' })
277-
expect(state.dirty).toBe(true)
277+
expect(state.touched).toBe(true)
278278
expect(state.value).toEqual({ foo: 'foo' })
279279
expect(state.activated).toBe(false)
280280

@@ -283,7 +283,7 @@ describe('fromV2', () => {
283283
expect(stateV2.$.foo.value).toBe('bar')
284284
expect(stateV2.dirty).toBe(true)
285285
expect(stateV2.value).toEqual({ foo: 'bar' })
286-
expect(state.dirty).toBe(true)
286+
expect(state.touched).toBe(true)
287287
expect(state.value).toEqual({ foo: 'bar' })
288288
expect(state.activated).toBe(false)
289289
})
@@ -299,7 +299,7 @@ describe('fromV2', () => {
299299
expect(stateV2.value).toEqual({ foo: '' })
300300
expect(stateV2.dirty).toBe(false)
301301
expect(state.value).toEqual({ foo: '' })
302-
expect(state.dirty).toBe(false)
302+
expect(state.touched).toBe(false)
303303
expect(state.activated).toBe(false)
304304

305305
state.onChange({ foo: 'bar' })
@@ -308,7 +308,7 @@ describe('fromV2', () => {
308308
expect(stateV2.value).toEqual({ foo: '' })
309309
expect(stateV2.dirty).toBe(false)
310310
expect(state.value).toEqual({ foo: '' })
311-
expect(state.dirty).toBe(false)
311+
expect(state.touched).toBe(false)
312312
expect(state.activated).toBe(false)
313313

314314
state.dispose()
@@ -414,7 +414,7 @@ describe('fromV2', () => {
414414
expect(stateV2._validateStatus).toBe(v2.ValidateStatus.NotValidated)
415415
expect(stateV2.error).toBe(undefined)
416416
expect(state.value).toEqual(initialValue)
417-
expect(state.dirty).toBe(false)
417+
expect(state.touched).toBe(false)
418418
expect(state.validateStatus).toBe(v3.ValidateStatus.NotValidated)
419419
expect(state.error).toBe(undefined)
420420
expect(state.ownError).toBe(undefined)
@@ -547,7 +547,7 @@ describe('toV2', () => {
547547
state.reset()
548548

549549
expect<string>(stateV3.value).toBe('')
550-
expect(stateV3.dirty).toBe(false)
550+
expect(stateV3.touched).toBe(false)
551551
expect(state.value).toBe('')
552552
expect(state.dirty).toBe(false)
553553
expect(state._activated).toBe(false)
@@ -556,7 +556,7 @@ describe('toV2', () => {
556556
state.reset()
557557

558558
expect(stateV3.value).toBe('')
559-
expect(stateV3.dirty).toBe(false)
559+
expect(stateV3.touched).toBe(false)
560560
expect(state.value).toBe('')
561561
expect(state.dirty).toBe(false)
562562
expect(state._activated).toBe(false)
@@ -702,7 +702,7 @@ describe('toV2', () => {
702702
this.value = initialValue
703703
}
704704
value: V
705-
dirty = false
705+
touched = false
706706
ownError = undefined
707707
error = undefined
708708
activated = false

‎src/adapter/v2.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class Upgrader<T extends v2.ComposibleValidatable<unknown, V>, V> extends BaseSt
2323
@computed get $() { return this.stateV2 }
2424

2525
@computed get value() { return this.stateV2.value }
26-
@computed get dirty() { return this.stateV2.dirty }
26+
@computed get touched() { return this.stateV2.dirty }
2727
@computed get ownError() {
2828
return getV3OwnError(this.stateV2)
2929
}
@@ -100,7 +100,7 @@ class Downgrader<T extends v3.IState<V>, V> extends Disposable implements IV2Sta
100100
validate() { return this.stateV3.validate() }
101101
reset() { this.stateV3.reset() }
102102

103-
@computed get dirty() { return this.stateV3.dirty }
103+
@computed get dirty() { return this.stateV3.touched }
104104
@computed get _activated() { return this.stateV3.activated }
105105
@computed get _validateStatus() {
106106
return getV2ValidateStatus(this.stateV3)

‎src/debouncedState.spec.ts‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,21 @@ describe('DebouncedState', () => {
1717

1818
expect(state.$.value).toBe(initialValue)
1919
expect(state.value).toBe(initialValue)
20+
expect(state.touched).toBe(false)
21+
expect(state.activated).toBe(false)
2022

2123
const newValue = ''
2224
state.onChange(newValue)
23-
expect(state.value).toBe(initialValue)
2425
expect(state.$.value).toBe(newValue)
26+
expect(state.value).toBe(initialValue)
27+
expect(state.touched).toBe(false)
28+
expect(state.activated).toBe(false)
2529

2630
await delay()
2731
expect(state.value).toBe(newValue)
2832
expect(state.$.value).toBe(newValue)
33+
expect(state.touched).toBe(true)
34+
expect(state.activated).toBe(true)
2935
})
3036

3137
it('should initialize well with FormState', async () => {
@@ -151,6 +157,24 @@ describe('DebouncedState validation', () => {
151157
expect(state.ownError).toBe('form error')
152158
expect(state.error).toBe('form error')
153159
})
160+
it('should sync original validation result with delay', async () => {
161+
const originalState = new FieldState('foo').withValidator(v => !v && 'empty')
162+
const state = new DebouncedState(originalState, defaultDelay)
163+
164+
await originalState.validate()
165+
expect(state.error).toBe(undefined)
166+
expect(state.ownError).toBe(undefined)
167+
168+
await state.onChange('')
169+
expect(state.value).toBe('foo')
170+
expect(state.error).toBe(undefined)
171+
expect(state.ownError).toBe(undefined)
172+
173+
await delay()
174+
expect(state.value).toBe('')
175+
expect(state.error).toBe('empty')
176+
expect(state.ownError).toBe('empty')
177+
})
154178
})
155179

156180
function createFieldState<T>(initialValue: T, delay = defaultDelay) {
@@ -164,7 +188,7 @@ describe('DebouncedFieldState', () => {
164188

165189
expect(state.$.value).toBe(initialValue)
166190
expect(state.value).toBe(initialValue)
167-
expect(state.dirty).toBe(false)
191+
expect(state.touched).toBe(false)
168192
})
169193

170194
it('should initialize well with default delay as 200ms', async () => {
@@ -173,21 +197,21 @@ describe('DebouncedFieldState', () => {
173197

174198
expect(state.$.value).toBe(initialValue)
175199
expect(state.value).toBe(initialValue)
176-
expect(state.dirty).toBe(false)
200+
expect(state.touched).toBe(false)
177201

178202
const newValue = 'abc'
179203
state.onChange(newValue)
180204
await delay(100)
181205

182206
expect(state.$.value).toBe(newValue)
183207
expect(state.value).toBe(initialValue)
184-
expect(state.dirty).toBe(false)
208+
expect(state.touched).toBe(false)
185209

186210
await delay(100)
187211

188212
expect(state.$.value).toBe(newValue)
189213
expect(state.value).toBe(newValue)
190-
expect(state.dirty).toBe(true)
214+
expect(state.touched).toBe(true)
191215
})
192216

193217
it('should onChange well', async () => {
@@ -202,14 +226,14 @@ describe('DebouncedFieldState', () => {
202226
expect(state.value).toBe(initialValue)
203227
expect(state.activated).toBe(false)
204228
expect(state.validateStatus).toBe(ValidateStatus.NotValidated)
205-
expect(state.dirty).toBe(false)
229+
expect(state.touched).toBe(false)
206230

207231
await delay()
208232
expect(state.$.value).toBe(value)
209233
expect(state.value).toBe(value)
210234
expect(state.activated).toBe(true)
211235
expect(state.validateStatus).toBe(ValidateStatus.Validated)
212-
expect(state.dirty).toBe(true)
236+
expect(state.touched).toBe(true)
213237

214238
const newValue = '789'
215239
state.$.onChange('456')
@@ -220,7 +244,7 @@ describe('DebouncedFieldState', () => {
220244
await delay()
221245
expect(state.$.value).toBe(newValue)
222246
expect(state.value).toBe(newValue)
223-
expect(state.dirty).toBe(true)
247+
expect(state.touched).toBe(true)
224248

225249
const invalidValue = '123456'
226250
state.$.onChange(invalidValue)
@@ -240,7 +264,7 @@ describe('DebouncedFieldState', () => {
240264
state.set(value)
241265
expect(state.$.value).toBe(value)
242266
expect(state.value).toBe(value)
243-
expect(state.dirty).toBe(true)
267+
expect(state.touched).toBe(true)
244268

245269
// set 不应该使 field 激活
246270
expect(state.validating).toBe(false)
@@ -255,7 +279,7 @@ describe('DebouncedFieldState', () => {
255279
await delay()
256280
expect(state.$.value).toBe(value)
257281
expect(state.value).toBe(value)
258-
expect(state.dirty).toBe(true)
282+
expect(state.touched).toBe(true)
259283
})
260284

261285
it('should reset well', async () => {
@@ -268,14 +292,14 @@ describe('DebouncedFieldState', () => {
268292

269293
expect(state.$.value).toBe(initialValue)
270294
expect(state.value).toBe(initialValue)
271-
expect(state.dirty).toBe(false)
295+
expect(state.touched).toBe(false)
272296

273297
state.$.onChange('456')
274298
state.reset()
275299

276300
expect(state.$.value).toBe(initialValue)
277301
expect(state.value).toBe(initialValue)
278-
expect(state.dirty).toBe(false)
302+
expect(state.touched).toBe(false)
279303
})
280304

281305
it('should work well with delay', async () => {
@@ -397,7 +421,7 @@ describe('DebouncedFieldState validation', () => {
397421
state.reset()
398422
expect(state.$.value).toBe(initialValue)
399423
expect(state.value).toBe(initialValue)
400-
expect(state.dirty).toBe(false)
424+
expect(state.touched).toBe(false)
401425
expect(state.validating).toBe(false)
402426
expect(state.hasError).toBe(false)
403427
expect(state.error).toBeUndefined()
@@ -523,11 +547,13 @@ describe('DebouncedFieldState validation', () => {
523547

524548
it('should work well with race condition caused by validate()', async () => {
525549
const validator = jest.fn()
526-
validator.mockReturnValueOnce(delayValue('foo', 200))
527-
validator.mockReturnValueOnce(delayValue('bar', 100))
528550
const field = createFieldState(1).withValidator(validator)
551+
552+
validator.mockReturnValue(delayValue('foo', 200))
529553
field.validate()
554+
530555
await delay(50)
556+
validator.mockReturnValue(delayValue('bar', 100))
531557
await field.validate()
532558

533559
expect(field.error).toBe('bar')

0 commit comments

Comments
 (0)