我有一个包含很少组件的Angular2前端，我想测试formular.componet中包含的一个表单，这个表单正在gmap上搜索一个地址并返回该位置周围代理商的所有位置，这里是ts文件：
@Component({
moduleId: module.id,
selector: 'ags-form',
templateUrl: 'formular.component.html'
})
export class FormularComponent implements OnInit, AfterViewInit {
public searchName: string = '';
public searchAddress: string = '';
private searchAddendum: string = '';
private searchDivision: string = '';
private searchRadius: string = '';
private autocompletePosition: any;
private currentPosition: any;
…
// configuration
public configuration: Configuration;
@ViewChild("dom_address_input") domAddressInput: ElementRef;
@ViewChild("dom_localizeButton") localizeButton: ElementRef;
@ViewChild(FormularAutocompleteComponent) autocompleteComponent: FormularAutocompleteComponent;
private place_changed_fire: boolean = false;
// autocompletion
public suggestionList: string[] = [];
private inputTimer: Timer;
public autocompleteSelectedIndex: number = -1;
public visibleAutoCompleteSuggestList: string = 'hide-class';
public elementRef: ElementRef;
constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone, private agencySearchService: AgencySearchService, private configurationService: ConfigurationService, private eventBusService: EventBusService, private notificationService: NotificationService, private myElement: ElementRef, private historyService: HistoryService) {
this.configuration = configurationService.getConfiguration();
this.elementRef = myElement;
}
ngOnInit() {
// get division, addendum and radius
let params = new URLSearchParams(window.location.search);
this.searchAddress = params.get('address') || '';
this.searchName = params.get('name') || '';
this.searchDivision = params.get('division') || '';
this.searchAddendum = params.get('addendum') || '';
this.searchRadius = params.get('radius') || '';
if (this.searchDivision) {
console.log("DIVSION: " + this.searchDivision);
this.agencySearchService.sortMode = SortOptionEnum.RANKING;
}
if (this.searchAddress != '' || this.searchName != '') {
this.submitSearchAction(true);
}
//load Places Autocomplete
let options: any = {
types: ['geocode'],
componentRestrictions: {country: 'de'}
};
this.mapsAPILoader.load().then(() => {
let autocomplete = new window['google'].maps.places.Autocomplete(this.domAddressInput.nativeElement, options);
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
let place: any = autocomplete.getPlace();
place = autocomplete.getPlace();
//verify result
if (!place.geometry) {
return;
} else {
this.place_changed_fire = true;
this.autocompletePosition = {
lat: place.geometry.location.lat(),
lon: place.geometry.location.lng(),
name: this.searchAddress
};
this.submitSearchAction(true);
}
});
});
});
search(): void {
this.submitSearchAction(true);
}
…
}
这是相关的htm文件（表单）
<form class="agency-search-form form-inline" role="form">
<div class="form-group row">
<div class="location-container">
<input id="address_input" type="text" class="gmap-street form-control" [ngClass]="errorAddressClass" (keyup)="keyupSearchAddress($event)"
name="address_input"
placeholder="Straße, PLZ oder Ort" autocomplete="off" tabindex="1" [(ngModel)]="searchAddress" #dom_address_input>
<a href="#" class="localization disabled" (click)="clickLocalizeButton()" #dom_localizeButton></a>
<span class="azfs icon-info-clickable green iconInfoAddress" [ngClass]="infoIconAddressClass"
(click)="clickIconInfoAddress()"><div
class="azfs has-information-arrow infoAddressArrow"
[ngClass]="visibleInfoAddressClass"></div></span>
</div>
</div>
<div class="form-group row autocompleteAnchor">
<form-autocomplete [(searchName)] ="searchName" (startSearch)="submitSearchAction(true)" (setButtonState)="setSearchButtonState($event)"></form-autocomplete>
<input id="name_input" name="name_input" type="text" class="gmap-name form-control" [ngClass]="errorNameClass"
placeholder="Name der Agentur" autocomplete="off" tabindex="2" [(ngModel)]="searchName" (keyup)="keyupSearch($event)">
<span class="azfs icon-info-clickable green iconInfoName" [ngClass]="infoIconNameClass"
(click)="clickIconInfoName()"><div
class="azfs has-information-arrow infoNameArrow" [ngClass]="visibleInfoNameClass"></div></span>
</div>
<button type="button" class="agency-search-submit button hero" tabindex="3" (click)="search()" [disabled]="disabledSearchButton">Suchen</button>
</form>
我想要做的是填写表格，提交并检查回复，
所以我该怎么做：
1）找到表格并填写测试方法
2）如何提交表格并发送活动
3）如何从eventbus获得响应
4）在我设置formularInstance.searchAddress和I时的测试1 之后立即记录，结果未定义，我做错了什么？
此组件的测试文件：
import {async,TestBed,ComponentFixture,ComponentFixtureAutoDetect} from '@angular/core/testing';
import {NO_ERRORS_SCHEMA} from "@angular/core";
import {HttpModule} from '@angular/http';
import {AgmCoreModule} from "@agm/core";
import {By} from '@angular/platform-browser';
import {ConfigurationService} from "../shared/services/configuration.service";
import {AgencySearchService} from "../shared/services/agency-search.service";
import {EventBusService} from "../shared/services/event-bus.service";
import {HistoryService} from "../shared/services/history.service";
import {NotificationService} from "../shared/services/notification-service";
import {FormularComponent} from '../formular.component';
describe('Formular', () => {
let fixture: ComponentFixture<FormularComponent>;
let formularInstance: FormularComponent;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [AgmCoreModule.forRoot(),HttpModule],
declarations: [
FormularComponent
],
providers: [
ConfigurationService,
AgencySearchService,
EventBusService,
HistoryService,
NotificationService,
{ provide: ComponentFixtureAutoDetect, useValue: true }
],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents().catch(error => console.error(error));
fixture = TestBed.createComponent(FormularComponent);
formularInstance = fixture.componentInstance;
}));
// Test 1
it('should create a `Form`', () => {
formularInstance.searchAddress = 'Munich';
console.log('Search Address before: '+formularInstance.searchAddress);
formularInstance.ngOnInit();
console.log('Search Address after: '+formularInstance.searchAddress);
console.log('Info Message: '+formularInstance.infoMessage);
console.log('Error Message: '+formularInstance.errorMessage);
});
// Test 2
it('Submit a `Form` call', () => {
const input = fixture.debugElement.query(By.css('#input_address'));
input.nativeElement.value = 'München';
input.nativeElement.dispatchEvent(new Event('form'));
});
});