Неправильная реализация Mock Router

Question

ОБНОВЛЕНИЕ: согласно принятому ответу ниже, я вижу, что я смешал методы тестирования маршрутизатора. Я обновил свой код, и тесты проходят, но я получаю это предупреждение:

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

Вот код:

describe('NavigationComponent', () => {
let component: RaNavigationComponent;
let fixture: ComponentFixture<RaNavigationComponent>;
let location: Location;
let router: Router;

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule.withRoutes([
        {
          path: 'home',
          component: RaHomeComponent
        }
      ])
    ],
    declarations: [RaNavigationComponent, RaHomeComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  });

  router = TestBed.get(Router);
  location = TestBed.get(Location);
  fixture = TestBed.createComponent(RaNavigationComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
  router.initialNavigation();
});

it('should create', () => {
  expect(component).toBeTruthy();
});

it('should navigate back to home', fakeAsync(() => {
  component.navigateToHome();
  tick();
  expect(location.path()).toBe('/home');
}));

Я получаю ошибку после добавления mock router для моего навигационного компонента, вот он:

NavigationComponent
✗ should create
    TypeError: Cannot read property 'root' of undefined

Проходил до того, как я добавил свой второй тестовый пример, в котором используется MockRouter.

В моем файле spe c для моего компонента навигации у меня есть следующее:

class MockRouter {
  navigateByUrl(params) {}
}

describe('NavigationComponent', () => {
  let component: RaNavigationComponent;
  let fixture: ComponentFixture<RaNavigationComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [RaNavigationComponent],
      providers: [{ provide: Router, useClass: MockRouter }]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(RaNavigationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should navigate back to home', () => {
    let router = TestBed.get(MockRouter);
    let spy = spyOn(router, 'navigateByUrl');

    component.navigateToHome();

    expect(spy).toHaveBeenCalledWith(['home']);
  });
});

Вот метод в моем классе компонентов:

navigateToHome() {
this.router.navigateByUrl('/home');

}

Неправильно ли я реализовал использование Mock Router? Спасибо за любые полезные советы.

Answer 1

Вам не нужно издеваться над роутером, если вы импортируете RouterTestingModule. Это import сделает насмешку за вас.

Попробуйте:

describe('NavigationComponent', () => {
  let component: RaNavigationComponent;
  let fixture: ComponentFixture<RaNavigationComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [RaNavigationComponent],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(RaNavigationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should navigate back to home', () => {
    let router = TestBed.get(Router);
    let spy = spyOn(router, 'navigateByUrl');

    component.navigateToHome();

    expect(spy).toHaveBeenCalledWith('/home');
  });
});