CODEWITHSUNDEEP
angularjasminekarma-jasmineangular8karma-runner
user4676558
user4676558

Reputation:

Angular 9 How to test window.open in jasmine

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

Answers (1)

user4676558
user4676558

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

Related Questions