Angular setTimeout() call in component is causing console errors in test, even though the test passes

Question

I am testing a click action in Angular 7 of an a tag

Here's the a tag markup in my component

<div id="region-start" class="timeline-region">
    <div class="row">
      <div class="col-12 col-md-4">
        <a class="timeline-region-heading" [ngClass]="{'timeline-region-active':activeStart}" [routerLink]="" (click)="showRegionAndVisit(true, 'start', 0)">Start</a>
      </div>
    </div>
</div>

Here's the test

it('should display a start date', () => {

    var startHeading = fixture.nativeElement.querySelector('#region-start a.timeline-region-heading');

    startHeading.click();  // This will display the start visit details box

    fixture.detectChanges();

    let visitDate = fixture.nativeElement.querySelector('#region-start .timeline-visit-content-desktop .visit-date');

    expect(visitDate.textContent).toContain(learnerStartDate);
});

The test passes but I get the following error in the console.

Access to XMLHttpRequest at 'ng:///DynamicTestModule/LearnerEventsActivitiesComponent.ngfactory.js' from origin 'http://localhost:9876' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

The function that is being called by the a tag 'showRegionAndVisit()' is calling setTimeout() and when I comment this out I no longer get the error in the console so that is the culprit.

Is there any way of providing a mock setTimeout to components in tests?

Cheers

What else happens in showRegionAndVisit()? Can you post the code? — Fabian Küng
– Fabian Küng, Commented Apr 18, 2019 at 12:06
It just sets a couple of bool variables, there aren't any calls to other services or functions. When I comment out the setTimeout block the console error disappears — Tracey Penberthy
– Tracey Penberthy, Commented Apr 18, 2019 at 13:18

Tracey Penberthy · Accepted Answer · 2019-04-18 13:24:12Z

1

I have found the answer. I added

jasmine.clock().install();

at the beginning of my test, this replaces setTimeout with a mock function

answered Apr 18, 2019 at 13:24

Tracey Penberthy

2251 gold badge3 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular setTimeout() call in component is causing console errors in test, even though the test passes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related