refactor(cdk:forms): add dirty status and marks valueRef to readonly (

#144)

re #115

packages/cdk/forms/__tests__/abstractControl.spec.ts

@@ -5,33 +5,37 @@ import { AsyncValidatorFn, ValidationErrors, ValidatorFn, ValidatorOptions } fro
 import { Validators } from '../src/validators'
 
 class Control<T = unknown> extends AbstractControl<T> {
-  readonly valueRef: Ref<T | null> = ref(null)
+  _valueRef: Ref<T | null> = ref(null)
   constructor(
     validatorOrOptions?: ValidatorFn | ValidatorFn[] | ValidatorOptions | null,
     asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null,
   ) {
     super(validatorOrOptions, asyncValidator)
+
+    this._initAllStatus()
+
     this._watchEffect()
   }
   reset(): void {}
   setValue(value: T | null): void {
-    this.valueRef.value = value
+    this._valueRef.value = value
   }
   getValue(): T {
-    return this.valueRef.value as T
+    return this._valueRef.value as T
   }
   markAsBlurred(): void {}
   markAsUnblurred(): void {}
+  markAsDirty(): void {}
+  markAsPristine(): void {}
   async validate(): Promise<ValidationErrors | null> {
     return this._validate()
   }
-
   private _watchEffect() {
-    watch([this.valueRef, this.blurred], () => {
+    watch([this._valueRef, this._blurred], () => {
       this._validate()
     })
 
-    watch(this.errors, errors => {
+    watch(this._errors, errors => {
       this._status.value = errors ? 'invalid' : 'valid'
     })
   }
@@ -45,20 +49,16 @@ describe('abstractControl.ts', () => {
       control = new Control()
     })
 
-    test('init status work', () => {
+    test('init all status work', () => {
       expect(control.status.value).toEqual('valid')
+      expect(control.errors.value).toBeNull()
       expect(control.valid.value).toEqual(true)
       expect(control.invalid.value).toEqual(false)
       expect(control.validating.value).toEqual(false)
-    })
-
-    test('init errors work', () => {
-      expect(control.errors.value).toBeNull()
-    })
-
-    test('init blurred work', () => {
       expect(control.blurred.value).toEqual(false)
       expect(control.unblurred.value).toEqual(true)
+      expect(control.dirty.value).toEqual(false)
+      expect(control.pristine.value).toEqual(true)
     })
 
     test('init props work', () => {
@@ -74,7 +74,7 @@ describe('abstractControl.ts', () => {
       expect(await control.validate()).toEqual({ required: { message: '' } })
 
       control.setValidator([email, minLength(5)])
-      control.valueRef.value = 'test'
+      control.setValue('test')
 
       expect(await control.validate()).toEqual({
         email: { message: '', actual: 'test' },
@@ -215,7 +215,7 @@ describe('abstractControl.ts', () => {
       control = new Control(Validators.required, _asyncValidator)
       expect(await control.validate()).toEqual({ required: { message: '' } })
 
-      control.valueRef.value = 'test'
+      control.setValue('test')
       control.validate()
 
       expect(control.status.value).toEqual('validating')

packages/cdk/forms/__tests__/formArray.spec.ts

@@ -143,18 +143,28 @@ describe('formArray.ts', () => {
 
     test('markAsBlurred and markAsUnblurred work', async () => {
       array.markAsBlurred()
-
       await flushPromises()
 
       expect(array.blurred.value).toEqual(true)
 
       array.markAsUnblurred()
-
       await flushPromises()
 
       expect(array.blurred.value).toEqual(false)
     })
 
+    test('markAsDirty and markAsPristine work', async () => {
+      array.markAsDirty()
+      await flushPromises()
+
+      expect(array.dirty.value).toEqual(true)
+
+      array.markAsPristine()
+      await flushPromises()
+
+      expect(array.dirty.value).toEqual(false)
+    })
+
     test('validate work', async () => {
       expect(await array.validate()).toBeNull()
 
@@ -187,9 +197,6 @@ describe('formArray.ts', () => {
     test('default change work', async () => {
       array = new FormArray([newFormGroup()], { validators: _validator })
 
-      array.setValue([{ control: '1234' }])
-      await flushPromises()
-
       expect(array.invalid.value).toEqual(true)
       expect(array.hasError('test')).toEqual(true)
 
@@ -198,28 +205,37 @@ describe('formArray.ts', () => {
 
       expect(array.invalid.value).toEqual(false)
       expect(array.hasError('test')).toEqual(false)
+
+      array.setValue([{ control: '1234' }])
+      await flushPromises()
+
+      expect(array.invalid.value).toEqual(true)
+      expect(array.hasError('test')).toEqual(true)
     })
 
     test('blur trigger validate work', async () => {
       array = new FormArray([newFormGroup()], { trigger: 'blur', validators: _validator })
 
-      array.setValue([{ control: '1234' }])
-      await flushPromises()
-
-      expect(array.invalid.value).toEqual(false)
-      expect(array.hasError('test')).toEqual(false)
+      expect(array.invalid.value).toEqual(true)
+      expect(array.hasError('test')).toEqual(true)
 
-      array.markAsBlurred()
+      array.setValue([{ control: 'test' }])
       await flushPromises()
 
       expect(array.invalid.value).toEqual(true)
       expect(array.hasError('test')).toEqual(true)
 
-      array.setValue([{ control: 'test' }])
+      array.markAsBlurred()
       await flushPromises()
 
       expect(array.invalid.value).toEqual(false)
       expect(array.hasError('test')).toEqual(false)
+
+      array.setValue([{ control: '1234' }])
+      await flushPromises()
+
+      expect(array.invalid.value).toEqual(true)
+      expect(array.hasError('test')).toEqual(true)
     })
 
     test('submit trigger validate work', async () => {
@@ -237,23 +253,17 @@ describe('formArray.ts', () => {
         { trigger: 'submit', validators: _validator },
       )
 
-      array.setValue([{ control: '' }])
-      array.markAsBlurred()
-      await flushPromises()
-
-      expect(array.invalid.value).toEqual(false)
-      expect(array.hasError('test')).toEqual(false)
-      expect(array.hasError('required', [0, 'control'])).toEqual(false)
-      expect(array.hasError('async', [0, 'group', 'control'])).toEqual(false)
-
-      await array.validate()
-
       expect(array.invalid.value).toEqual(true)
       expect(array.hasError('test')).toEqual(true)
       expect(array.hasError('required', [0, 'control'])).toEqual(true)
+      expect(array.hasError('async', [0, 'group', 'control'])).toEqual(false)
+
+      await flushPromises()
+
       expect(array.hasError('async', [0, 'group', 'control'])).toEqual(true)
 
       array.setValue([{ control: 'test' }])
+      array.markAsBlurred()
       await flushPromises()
 
       expect(array.invalid.value).toEqual(true)
@@ -267,6 +277,21 @@ describe('formArray.ts', () => {
       expect(array.hasError('test')).toEqual(false)
       expect(array.hasError('required', [0, 'control'])).toEqual(false)
       expect(array.hasError('async', [0, 'group', 'control'])).toEqual(true)
+
+      array.setValue([{ control: '1234' }])
+      await flushPromises()
+
+      expect(array.invalid.value).toEqual(true)
+      expect(array.hasError('test')).toEqual(false)
+      expect(array.hasError('required', [0, 'control'])).toEqual(false)
+      expect(array.hasError('async', [0, 'group', 'control'])).toEqual(true)
+
+      await array.validate()
+
+      expect(array.invalid.value).toEqual(true)
+      expect(array.hasError('test')).toEqual(true)
+      expect(array.hasError('required', [0, 'control'])).toEqual(false)
+      expect(array.hasError('async', [0, 'group', 'control'])).toEqual(true)
     })
   })
 })

packages/cdk/forms/__tests__/formControl.spec.ts

@@ -1,5 +1,6 @@
 import { flushPromises } from '@vue/test-utils'
 import { FormControl } from '../src/controls/formControl'
+import { ValidationErrors } from '../src/types'
 import { Validators } from '../src/validators'
 
 describe('formControl.ts', () => {
@@ -13,14 +14,17 @@ describe('formControl.ts', () => {
     test('reset work', async () => {
       control.setValue('test')
       control.markAsBlurred()
+      control.markAsDirty()
 
       expect(control.valueRef.value).toEqual('test')
       expect(control.blurred.value).toEqual(true)
+      expect(control.dirty.value).toEqual(true)
 
       control.reset()
 
       expect(control.valueRef.value).toBeNull()
       expect(control.blurred.value).toEqual(false)
+      expect(control.dirty.value).toEqual(false)
     })
 
     test('setValue and getValue work', () => {
@@ -45,6 +49,16 @@ describe('formControl.ts', () => {
       expect(control.blurred.value).toEqual(false)
     })
 
+    test('markAsDirty and markAsPristine work', () => {
+      control.markAsDirty()
+
+      expect(control.dirty.value).toEqual(true)
+
+      control.markAsPristine()
+
+      expect(control.dirty.value).toEqual(false)
+    })
+
     test('validate work', async () => {
       expect(await control.validate()).toBeNull()
 
@@ -58,45 +72,66 @@ describe('formControl.ts', () => {
     let control: FormControl
 
     test('default change work', async () => {
-      control = new FormControl(null, { validators: Validators.required })
+      const _asyncValidator = (value: unknown) =>
+        Promise.resolve(value === 'test' ? null : ({ async: { message: 'async' } } as ValidationErrors))
+
+      control = new FormControl('test', { validators: Validators.required, asyncValidators: _asyncValidator })
 
       expect(control.hasError('required')).toEqual(false)
+      expect(control.hasError('async')).toEqual(false)
 
       control.setValue('')
       await flushPromises()
 
       expect(control.hasError('required')).toEqual(true)
+      expect(control.hasError('async')).toEqual(false)
+
+      control.setValue('1234')
+      await flushPromises()
+
+      expect(control.hasError('required')).toEqual(false)
+      expect(control.hasError('async')).toEqual(true)
     })
 
     test('blur trigger validate work', async () => {
       control = new FormControl(null, { trigger: 'blur', validators: Validators.required })
 
-      expect(control.hasError('required')).toEqual(false)
+      expect(control.hasError('required')).toEqual(true)
 
-      control.markAsBlurred()
+      control.setValue('test')
       await flushPromises()
 
       expect(control.hasError('required')).toEqual(true)
 
-      control.setValue('test')
+      control.markAsBlurred()
       await flushPromises()
 
       expect(control.hasError('required')).toEqual(false)
+
+      control.setValue('')
+      await flushPromises()
+
+      expect(control.hasError('required')).toEqual(true)
     })
 
     test('submit trigger validate work', async () => {
       control = new FormControl(null, { trigger: 'submit', validators: Validators.required })
 
-      expect(control.hasError('required')).toEqual(false)
+      expect(control.hasError('required')).toEqual(true)
+
+      control.setValue('test')
+      await flushPromises()
+
+      expect(control.hasError('required')).toEqual(true)
 
       control.markAsBlurred()
       await flushPromises()
 
-      expect(control.hasError('required')).toEqual(false)
+      expect(control.hasError('required')).toEqual(true)
 
       await control.validate()
 
-      expect(control.hasError('required')).toEqual(true)
+      expect(control.hasError('required')).toEqual(false)
     })
   })
 })