angular - Angular 11 は、URL が呼び出されたかどうかをテストできません

Question

angular testingに問題がありました。ボタンのクリックでURLがいつ変更されるかを検出したい。私はスタックで多くの同様の問題を追跡しましたが、1週間後に目標を達成できません:/

説明

ここに私のHTMLテンプレートがあります:

<a id="signInButton" [routerLink]="['/my/route/call']">Sign in</a>

これが私のテストです：

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture< MyComponent >;
  let httpMock: HttpTestingController;
  // Creating mocked router here
  const router = {
    navigate: jasmine.createSpy('navigate'),
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [
        RouterTestingModule,
        HttpClientTestingModule,
        DatabaseModule.forRoot(),
        FormsModule,
        ReactiveFormsModule,
      ],
      providers: [
       MyComponentService,
        { provide: Router, useValue: router },
      ],
    }).compileComponents();
  });

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

  beforeEach(() => (httpMock = TestBed.inject(HttpTestingController)));

  afterEach(() => {
    router.navigate.calls.reset();
    httpMock.verify();
  });

  fit('should redirect on sign in click', async () => {
    fixture.detectChanges();
    const signInButton = fixture.debugElement.nativeElement.querySelector(
      '#signInButton'
    );
    signInButton.click();
    fixture.detectChanges();
    await fixture.whenStable();
    
    // impossible to pass this step :/
    expect(router.navigate).toHaveBeenCalledWith(['/my/route/call']);
  });
});

テストを実行すると、次の2 つのエラーが発生します。

TypeError: Cannot read property 'root' of undefined
TypeError: Cannot read property 'detectChanges' of undefined

研究

• スタックに関するいくつかの調査の後RouterTestingModule、インポートから削除することができたので、次のようになりました。

Expected spy navigate to have been called with:
  [ [ '/my/route/call' ] ]
but it was never called.

• スタック :p で別の検索を行いましたが、削除することはできまし{ provide: Router, useValue: router }たが、保持RouterTestingModuleしたところ、次のようになりました。

Expected spy navigate to have been called with:
  [ [ '/my/route/call' ] ]
but it was never called.

注: を削除しているときにすべてのリンクがレンダリングされないことに気付いたRouterTestingModuleので、解決策はRouterTestingModuleと{ provide: Router, useValue: router },?

• (click)代わりにa を使用するrouterLinkと、うまく機能しないのはなぜですか?

<a id="signInButton" (click)="openNewPage()">Sign in</a>

openNewPage() {
  this.router.navigate(['/my/route/call']);
}

どんな助けでも素晴らしいでしょう:) よろしくお願いします！