Skip to content

Commit

Permalink
refactor(*): migrate to typed form (#8018)
Browse files Browse the repository at this point in the history 
* feat(module:cron-expression): migrate to typed form

* test(module:autocomplete): migrate to typed form

* test(module:cron-expression): migrate to typed form

* test(module:cascader): migrate to typed form

* test(module:checkbox): migrate to typed form

* test(module:input): migrate to typed form

* test(module:input-number): migrate to typed form

* test(module:slider): migrate to typed form

* test(module:rate): migrate to typed form

* test(module:switch): migrate to typed form

* test(module:tree-select): migrate to typed form

* test(module:radio): migrate to typed form

* test(module:date-picker): migrate to typed form

* test(module:form): migrate to typed form
  • Loading branch information
@HyperLife1119
HyperLife1119 authored Nov 16, 2023
1 parent b2d971e commit 7d0ad34
Show file tree
Hide file tree
Showing 15 changed files with 298 additions and 381 deletions.
94 changes: 35 additions & 59 deletions components/auto-complete/autocomplete.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,7 @@ import {
tick,
waitForAsync
} from '@angular/core/testing';
import {
FormsModule,
ReactiveFormsModule,
UntypedFormBuilder,
UntypedFormControl,
UntypedFormGroup
} from '@angular/forms';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Subject } from 'rxjs';
Expand Down Expand Up @@ -502,25 +496,25 @@ describe('auto-complete', () => {
const options = componentInstance.trigger.nzAutocomplete.options.toArray();
expect(options[0].selected).toBe(true);
expect(input.value).toBe('Lucy');
expect(componentInstance.form.get('formControl')?.value.value).toBe('lucy');
expect(componentInstance.formControl.value).toEqual({ label: 'Lucy', value: 'lucy' });
}));

it('should set object option', fakeAsync(() => {
componentInstance.form.get('formControl')?.setValue({ label: 'Jack', value: 'jack' });
componentInstance.formControl.setValue({ label: 'Jack', value: 'jack' });
flush();
fixture.detectChanges();
componentInstance.trigger.openPanel();
const options = componentInstance.trigger.nzAutocomplete.options.toArray();
expect(options[0].selected).toBe(false);
expect(options[1].selected).toBe(true);
expect(input.value).toBe('Jack');
expect(componentInstance.form.get('formControl')?.value.value).toBe('jack');
expect(componentInstance.formControl.value).toEqual({ label: 'Jack', value: 'jack' });
}));

it('should be typing other string', fakeAsync(() => {
typeInElement('string', input);
fixture.detectChanges();
expect(componentInstance.form.get('formControl')?.value).toBe('string');
expect(componentInstance.formControl.value).toBe('string');
}));
});

Expand All @@ -538,34 +532,32 @@ describe('auto-complete', () => {
const componentInstance = fixture.componentInstance;
flush();
fixture.detectChanges();
expect(componentInstance.form.get('formControl')!.value).toContain('Burns');
expect(componentInstance.formControl.value).toContain('Burns');
expect(input.value).toContain('Burns');
}));

it('should set disabled work', () => {
const componentInstance = fixture.componentInstance;
const formControl = (componentInstance.form as UntypedFormGroup).get('formControl')!;
fixture.detectChanges();

expect(input.disabled).toBe(false);

formControl.disable();
componentInstance.formControl.disable();
fixture.detectChanges();

expect(input.disabled).toBe(true);
});

it('should close the panel when the input is disabled', () => {
const componentInstance = fixture.componentInstance;
const formControl = (componentInstance.form as UntypedFormGroup).get('formControl')!;
fixture.detectChanges();

componentInstance.trigger.openPanel();
fixture.detectChanges();

expect(componentInstance.trigger.panelOpen).toBe(true);

formControl.disable();
componentInstance.formControl.disable();
fixture.detectChanges();

expect(input.disabled).toBe(true);
Expand All @@ -583,7 +575,7 @@ describe('auto-complete', () => {
).nativeElement;

expect(differentValueWithFormInput.value).toBe('Lucy');
expect(differentValueWithFormFixture.componentInstance.form.get('formControl')?.value).toBe('lucy');
expect(differentValueWithFormFixture.componentInstance.formControl.value).toBe('lucy');
}));
});

Expand Down Expand Up @@ -886,14 +878,15 @@ describe('auto-complete', () => {
}));
});

describe('Fallback positions', () => {
let fixture: ComponentFixture<NzTestSimpleAutocompleteComponent>;
// TODO: Implement this test case
// describe('Fallback positions', () => {
// let fixture: ComponentFixture<NzTestSimpleAutocompleteComponent>;

beforeEach(() => {
fixture = TestBed.createComponent(NzTestSimpleAutocompleteComponent);
fixture.detectChanges();
});
});
// beforeEach(() => {
// fixture = TestBed.createComponent(NzTestSimpleAutocompleteComponent);
// fixture.detectChanges();
// });
// });

describe('misc', () => {
let fixture: ComponentFixture<NzTestAutocompleteWithoutPanelComponent>;
Expand Down Expand Up @@ -978,7 +971,7 @@ describe('auto-complete', () => {
class NzTestSimpleAutocompleteComponent {
inputValue!: string;
filteredOptions: Array<string | number>;
inputControl = new UntypedFormControl();
inputControl = new FormControl<string | number | null>('');
options: Array<string | number> = ['Burns Bay Road', 'Downing Street', 'Wall Street'];

@ViewChild(NzAutocompleteComponent, { static: false }) panel!: NzAutocompleteComponent;
Expand Down Expand Up @@ -1117,63 +1110,51 @@ class NzTestAutocompleteGroupComponent {

@Component({
template: `
<form [formGroup]="form">
<input formControlName="formControl" [nzAutocomplete]="auto" />
<form>
<input [formControl]="formControl" [nzAutocomplete]="auto" />
<nz-autocomplete #auto>
<nz-auto-option *ngFor="let option of options" [nzValue]="option">{{ option }}</nz-auto-option>
</nz-autocomplete>
</form>
`
})
class NzTestAutocompleteWithFormComponent {
form: UntypedFormGroup;
formControl = new FormControl('Burns');
options = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
@ViewChild(NzAutocompleteTriggerDirective, { static: false }) trigger!: NzAutocompleteTriggerDirective;

constructor(private fb: UntypedFormBuilder) {
this.form = this.fb.group({ formControl: 'Burns' });
}
}

@Component({
template: `
<form [formGroup]="form">
<input formControlName="formControl" [nzAutocomplete]="auto" />
<nz-autocomplete #auto>
<nz-auto-option *ngFor="let option of options" [nzValue]="option.value" [nzLabel]="option.label">
{{ option.label }}
</nz-auto-option>
</nz-autocomplete>
</form>
<input [formControl]="formControl" [nzAutocomplete]="auto" />
<nz-autocomplete #auto>
<nz-auto-option *ngFor="let option of options" [nzValue]="option.value" [nzLabel]="option.label">
{{ option.label }}
</nz-auto-option>
</nz-autocomplete>
`
})
class NzTestAutocompleteDifferentValueWithFormComponent {
form: UntypedFormGroup;
formControl = new FormControl('lucy');
options = [
{ label: 'Lucy', value: 'lucy' },
{ label: 'Jack', value: 'jack' }
];
@ViewChild(NzAutocompleteTriggerDirective) trigger!: NzAutocompleteTriggerDirective;

constructor(private fb: UntypedFormBuilder) {
this.form = this.fb.group({ formControl: 'lucy' });
}
}

@Component({
template: `
<form [formGroup]="form">
<input formControlName="formControl" [nzAutocomplete]="auto" />
<nz-autocomplete #auto [compareWith]="compareFun">
<nz-auto-option *ngFor="let option of options" [nzValue]="option" [nzLabel]="option.label">
{{ option.label }}
</nz-auto-option>
</nz-autocomplete>
</form>
<input [formControl]="formControl" [nzAutocomplete]="auto" />
<nz-autocomplete #auto [compareWith]="compareFun">
<nz-auto-option *ngFor="let option of options" [nzValue]="option" [nzLabel]="option.label">
{{ option.label }}
</nz-auto-option>
</nz-autocomplete>
`
})
class NzTestAutocompleteWithObjectOptionComponent {
form: UntypedFormGroup;
formControl = new FormControl<string | { label: string; value: string } | null>({ label: 'Lucy', value: 'lucy' });
options = [
{ label: 'Lucy', value: 'lucy' },
{ label: 'Jack', value: 'jack' }
Expand All @@ -1188,10 +1169,6 @@ class NzTestAutocompleteWithObjectOptionComponent {
return false;
}
};

constructor(private fb: UntypedFormBuilder) {
this.form = this.fb.group({ formControl: { label: 'Lucy', value: 'lucy', age: 20 } });
}
}

@Component({
Expand All @@ -1208,5 +1185,4 @@ class NzTestAutocompleteWithObjectOptionComponent {
class NzTestAutocompleteWithGroupInputComponent {
@ViewChild(NzAutocompleteTriggerDirective, { static: false }) trigger!: NzAutocompleteTriggerDirective;
@ViewChild('inputGroupComponent', { static: false, read: ElementRef }) inputGroupComponent!: ElementRef;
constructor() {}
}
26 changes: 14 additions & 12 deletions components/cascader/cascader.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ import {
} from '@angular/cdk/keycodes';
import { OverlayContainer } from '@angular/cdk/overlay';
import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { ComponentFixture, TestBed, fakeAsync, flush, inject, tick, waitForAsync } from '@angular/core/testing';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

Expand Down Expand Up @@ -1820,7 +1820,9 @@ describe('cascader', () => {
});
describe('In form', () => {
let fixture: ComponentFixture<NzDemoCascaderInFormComponent>;
let formGroup: UntypedFormGroup;
let formGroup: FormGroup<{
demo: FormControl<string[] | null>;
}>;
let cascader: DebugElement;

beforeEach(() => {
Expand All @@ -1833,9 +1835,9 @@ describe('cascader', () => {
it('should className correct', () => {
expect(cascader.nativeElement.className).not.toContain('ant-select-status-error');
expect(cascader.nativeElement.querySelector('nz-form-item-feedback-icon')).toBeNull();
formGroup.get('demo')!.markAsDirty();
formGroup.get('demo')!.setValue(null);
formGroup.get('demo')!.updateValueAndValidity();
formGroup.controls.demo.markAsDirty();
formGroup.controls.demo.setValue(null);
formGroup.controls.demo.updateValueAndValidity();
fixture.detectChanges();

// show error
Expand All @@ -1845,9 +1847,9 @@ describe('cascader', () => {
'ant-form-item-feedback-icon-error'
);

formGroup.get('demo')!.markAsDirty();
formGroup.get('demo')!.setValue(['a', 'b']);
formGroup.get('demo')!.updateValueAndValidity();
formGroup.controls.demo.markAsDirty();
formGroup.controls.demo.setValue(['a', 'b']);
formGroup.controls.demo.updateValueAndValidity();
fixture.detectChanges();
// show success
expect(cascader.nativeElement.className).toContain('ant-select-status-success');
Expand Down Expand Up @@ -2263,9 +2265,9 @@ export class NzDemoCascaderStatusComponent {
`
})
export class NzDemoCascaderInFormComponent {
validateForm: UntypedFormGroup = this.fb.group({
demo: [null, [Validators.required]]
validateForm = this.fb.group({
demo: this.fb.control<string[] | null>(null, Validators.required)
});
public nzOptions: any[] | null = options1;
constructor(private fb: UntypedFormBuilder) {}
constructor(private fb: FormBuilder) {}
}
Loading

0 comments on commit 7d0ad34

Please sign in to comment.