При условии, что Angular Router получает «не может прочитать свойство« root »из undefined»

Question

Я пытаюсь протестировать кнопку, которая, когда ее нажимают, делает переход на мою домашнюю страницу, но когда я предоставляю классу Маршрутизатора объект-шпион Jasmine, я получаю сообщение "TypeError: Невозможно прочитать свойство 'root' из неопределенного ».

describe('Error404Component', () =>
{
  let component: Error404Component;
  let fixture: ComponentFixture<Error404Component>;
  const routerSpy = jasmine.createSpyObj('Router', ['navigate']);

  beforeEach(async(() =>
  {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ]
    })
      .compileComponents();
  }));

  beforeEach(() =>
  {
    TestBed.overrideProvider(Router, { useValue: routerSpy });
    fixture = TestBed.createComponent(Error404Component);
    component = fixture.componentInstance;
    fixture.autoDetectChanges();
  });

  fit('should navigate', fakeAsync(() =>
  {
    const buttons = fixture.debugElement.queryAll(By.css('.button_link'));
    expect(buttons).toBeTruthy();

    const homeButton = buttons[0];
    (homeButton.nativeElement as HTMLButtonElement).click();

    fixture.detectChanges();
    tick();

    const spy = routerSpy.navigate as jasmine.Spy;

    expect(spy.calls.any()).toBeTruthy();
    expect(spy.calls.first().args[0][0]).toEqual(HOME_PATH);
  }));

});

Answer 1

Вы должны предоставлять router и все другие сервисные инъекции, используемые в компоненте, в то время как configureTestingModule с использованием TestBed.

 describe('Error404Component', () =>
  {

   class MockRouter {
     navigate = jasmine.createSpy('navigate');
   }
  let component: Error404Component;
  let fixture: ComponentFixture<Error404Component>;
  let routerSpy;

  beforeEach(async(() =>
  {
  routerSpy= new MockRouter();
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      providers: [{ provide: Router, useValue: routerSpy }],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() =>
  {
    fixture = TestBed.createComponent(Error404Component);
    component = fixture.componentInstance;
    fixture.autoDetectChanges();
  });

  fit('should navigate', fakeAsync(() =>
  {
    const buttons = fixture.debugElement.queryAll(By.css('.button_link'));
    expect(buttons).toBeTruthy();

    const homeButton = buttons[0];
    (homeButton.nativeElement as HTMLButtonElement).click();

    fixture.detectChanges();
    tick();

    const spy = routerSpy.navigate as jasmine.Spy;

    expect(spy.calls.any()).toBeTruthy();
    expect(spy.calls.first().args[0][0]).toEqual(HOME_PATH);
  }));

});