Проблема с Angular 7 тестированием компонентов с использованием RouterTestingModule и getCurrentNavigation ()

Question

Я пытаюсь протестировать компонент, который использует routerLink в шаблоне (который обрабатывается в тесте с RouterTestingModule) и getCurrentNavigation() в файле ts, чтобы получить информацию о состоянии навигации.

Я пытался использовать только RouterTestingModule, но потом я ничего не могу высмеять для getCurrentNavigation()

Я пытался использовать класс с заглушкой, но это оказалось слишком сложным, потому что я пытаюсь в основном издеваться над всем маршрутизатором (с помощью ts-mockito).

Вот мой код (закомментированный код не работает):

import { async, ComponentFixture, TestBed } from '@angular/core/testing'
import { ErrorsComponent } from './errors.component'
import { RouterTestingModule } from '@angular/router/testing'
import { Router, UrlTree, Navigation } from '@angular/router'
import { mock, when } from 'ts-mockito'

//*** trying to stub Router and all its intricacies ***

// export type Trigger = 'imperative' | 'popstate' | 'hashchange'

// class RouterStub implements Router {

//   getCurrentNavigation() {
//     return {
//       id: 1,
//       initialUrl: 'test.com',
//       extractedUrl: mock(UrlTree),
//       trigger: 'imperative' as Trigger,
//       previousNavigation: null,
//       extras: {
//         state: {
//           http: false,
//           type: null
//         }
//       }
//     }
//   }
// }

fdescribe('ErrorsComponent', () => {

  //*** trying ts-mockito for mocking the Router and manually setting getCurrentNavigation ***
  let mockRouter = mock(Router)
  let mockNavigation: Navigation = {
    id: 1,
    initialUrl: 'test.com',
    extractedUrl: mock(UrlTree),
    trigger: 'imperative' as Trigger,
    previousNavigation: null,
    extras: {
      state: {
        http: false,
        type: null
      }
    }
  }

  when(mockRouter.getCurrentNavigation()).thenReturn(mockNavigation)

  let router: Router
  let component: ErrorsComponent
  let fixture: ComponentFixture<ErrorsComponent>

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ErrorsComponent
      ],
      imports: [
        RouterTestingModule
      ],
      providers: [
        //*** have tried both useClass and useValue here ***
        { provide: Router, useClass: mockRouter }
      ]
    })
    .compileComponents()

    router = TestBed.get(Router)
    // router.initialNavigation()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(ErrorsComponent)
    component = fixture.componentInstance

    //*** here I tried to brute force the setting of getCurrentNavigation ***
    // Object.defineProperty(router, 'getCurrentNavigation()', {writable: true})
    // router.getCurrentNavigation().extras = { state: {http: false, type: 'this'}}

    // spyOn(router, 'getCurrentNavigation').and.returnValue({'extras': {state: {http: false, type: 'hello'}}})
    // router.getCurrentNavigation().extras.state = {http: false, type: 'this'}

    fixture.detectChanges()
  })

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

  //*** took this from another stackoverflow but doesn't seem to make any difference ***
  afterEach(() => {
    TestBed.resetTestingModule();
  })
})

Любая помощь очень ценится!

Answer 1

В вашем случае вы используете экземпляр класса, поэтому, когда вы создаете фиктивный класс, как вы сделали, вы можете сделать так:

providers: [

        { provide: Router, useClass: RouterStub }
      ]

, если вы хотите использовать свой класс переменная, которую вы используете:

providers: [
        { provide: Router, useFactory: () =>  mockRouter }
      ]