为了方便描述这里只截取代码的部分片段:比如将国家这个字段由输入转成下拉框
<div class="row">
<label for="country"
class="col-md-3 form-control-label required-label"><span class="asterisk">*</span>Country:</label>
<div class="col-md-9">
<select style="height: 34px;" class="col-md-5 form-control" id="country" name="country" formControlName="country">
<option *ngFor="let country of countries"
[value]="country">
{{ country }}
</option>
</select>
</div>
</div>
import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { DialogService } from '../../service/dialog.service';
import {UtilService} from '../../service/util.service';
@Component({
selector: 'app-create-client',
templateUrl: 'create-client.component.html'
})
export class CreateClientComponent {
countries: string[] = [];
constructor(private fb: FormBuilder, route: ActivatedRoute, dialogService:
DialogService, utilService: UtilService) {
// 请求后端得到所有的countries,并且将得到的countries数组赋值给这里的countries数组变量
this.utilService.getCountries().subscribe(
(countries: string[] ) => this.countries = countries);
}
}
对应的spec文件
import {HttpClientModule, HttpResponse, HttpResponseBase} from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { DialogService } from '../../service/dialog.service';
import { CreateClientComponent } from './create-client.component';
import {UtilService} from '../../service/util.service';
describe('CreateClientComponent', () => {
const states = ['AL', 'AK', 'AZ', 'AR', 'CA'];
const countries = ['United States', 'Canada'];
beforeEach(async(() => {
class RouterStub {
navigate(args: string[]) {
return true;
}
}
class LocationStub {
back() {
return true;
}
}
class DialogServiceStub {
openDialog(isSuccess, title, msgs, leftBtn, rightBtn) {
return Observable.of('OK');
}
}
class UtilServiceStub {
getCountries() {
return Observable.of(countries);
}
}
TestBed.configureTestingModule({
imports: [RouterModule, FormsModule, ReactiveFormsModule, HttpClientModule],
declarations: [CreateClientComponent],
providers: [
{provide: Router, useClass: RouterStub},
{provide: Location, useClass: LocationStub},
{
provide: ActivatedRoute, useValue: {
queryParams: Observable.of(
[
{'profileId': 1},
{'parentOrganizationId': 1},
{'clientId': 1}
]
)
}
},
{provide: DialogService, useClass: DialogServiceStub},
{provide: UtilService, useClass: UtilServiceStub},
Regex
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));
it('should create CreateClientComponent', () => {
const fixture = TestBed.createComponent(CreateClientComponent);
const comp = fixture.debugElement.componentInstance;
expect(comp).toBeTruthy();
});
it('should show correct country items', async(() => {
const fixture = TestBed.createComponent(CreateClientComponent);
const comp = fixture.debugElement.componentInstance;
expect(comp.countries.length).toEqual(countries.length);
expect(comp.countries).toEqual(countries);
}));
});