1

Recently upgraded our library that we use for our apps to angular 14. But now all router.navigate that we have in our tests says:

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

But seeing how this is a route inside the angular app and it haven't been needed before what has changed? Is there something we have to do in the test to convert the routes to Angular 14 format? The urls work in the applikation so it's only the tests that fails. I've read through the angular 14 updates but can't see anything that would affect this.

This now works but why is ngZone needed now after upgrade makes no sense?

import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router, Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { BreadcrumbComponent } from './breadcrumb.component';

@Component({
  template: '',
})
export class EmptyComponent {}

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: EmptyComponent,
    data: {
      title: 'One Title',
    }
  },
];

describe('Navigate to', () => {
  let component: BreadcrumbComponent;
  let fixture: ComponentFixture<BreadcrumbComponent>;
  let router: Router;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [BreadcrumbComponent],
      imports: [RouterTestingModule.withRoutes(routes)],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BreadcrumbComponent);
    component = fixture.componentInstance;
    router = TestBed.inject(Router);
    fixture.detectChanges();
  });

  it('/ gives a breadcrumb', done => {
    fixture.ngZone.run(() => { // Added this line around the navigate and observable.
      router.navigate(['/']);
      component.breadcrumbs$.pipe(take(1)).subscribe(breadcrumb => {
        expect(breadcrumb.length).toBe(1);
        expect(breadcrumb[0].title).toContain('One Title');
        expect(breadcrumb[0].url).toContain('/');
        done();
      });
    });
  });
});
Kamirura
  • 11
  • 2
  • Managed to get the test working with ngZone so have edited the code. But would still like to know why this suddenly is needed. What did Angular 14 bring that required this change I can't see anything that would cause this in the release notes. – Kamirura Aug 29 '22 at 05:56
  • There is an open issue that seems to be covering this: https://github.com/angular/angular/issues/47236 – Stefan Jan 24 '23 at 10:10

0 Answers0