Reputation:
I wish to test one method in my component, this method should open new website in new tab url to Google Maps. my method:
class OrganizationDetailsComponent {
public goToMap(address: OrganizationAddressResponse) {
const mapAddress = `${address.address1}, ${
address.address2 ? address.address2 + ", " : " "
}${address.city}, ${address.state} ${address.postcode}`;
const url = `https://maps.google.com?q=${mapAddress}`;
window.open(url, "_blank");
}
}
my component:
<a
data-qa-test="organization-details-goToMap"
(click)="goToMap(currentOrganization?.address)"
href="#"
>
{{ "ORGANIZATION.DETAILS.GO_TO_MAP" | translate }}
<i class="material-icons">open_in_new</i>
</a>
and test:
beforeEach(() => {
fixture = TestBed.createComponent(OrganizationDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it("should openen new window with correct url after click on addressLink", () => {
const spy = spyOn(window, "open").and.callThrough();
const link = fixture.debugElement.query(
By.css('[data-qa-test="organization-details-goToMa"]')
);
link.triggerEventHandler("click", null);
expect(spy).toHaveBeenCalled();
});
And if I started test, I got an error: TypeError:
Cannot read property 'triggerEventHandler' of null.
What am I doing wrong
Upvotes: 1
Views: 4585
Reputation:
Ok, I was able to fix the problem :) first you should detect changes:
it('should call method "goToMap" after click on addressLink', () => {
fixture.detectChanges();
const spyGoToMap = spyOn(component, "goToMap").and.callThrough();
const link = fixture.debugElement.query(
By.css('[data-qa-test="organization-details-goToMap"]')
);
link.triggerEventHandler("click", {});
expect(spyGoToMap).toHaveBeenCalled();
});
Upvotes: 2