带有 routerLink 指令的单元测试按钮

Question

我有一个简单的 static 视图，我想为它编写测试：

<div class="landing-page">
 <app-cover>
   <app-stack [large]="true">
     <app-center> 
       <img src="assets/images/logo.svg" />
     </app-center>
     <app-center>
       <p>
         Try matching the employee to their photo.
       </p>
     </app-center>
     <app-center>
       <app-button routerLink="namegame">
         Play!
       </app-button>
     </app-center>
   </app-stack>
 </app-cover>
</div>

我能够轻松断言<p>标签和<button>的文本是准确的。 但是，我在为按钮行为编写单元测试时遇到了麻烦，例如，当我单击按钮时，我被导航到/namegame路线。

我从 Karma 看到的信息真的很混乱：

Chrome 83.0.4103.106 (Mac OS 10.15.5) NamegameComponent navigates to /namegame when the "Play" 

button is clicked FAILED
Expected spy navigateByUrl to have been called with:
 [ '/namegame', <jasmine.anything> ]
but actual calls were:
 [ /namegame, Object({ skipLocationChange: false, replaceUrl: false, state: undefined }) ].
Call 0:
 Expected $[0] = /namegame to equal '/namegame'.

测试代码：

// ... imports ...

describe('NamegameComponent', () => {
 let component: LandingPageComponent;
 let fixture: ComponentFixture<LandingPageComponent>;
 let router: Router;

 beforeEach(async(() => {
   TestBed.configureTestingModule({
     imports: [RouterTestingModule.withRoutes([])],
     declarations: [
       LandingPageComponent,
       CenterComponent,
       CoverComponent,
       StackComponent,
       ButtonComponent,
     ],
   }).compileComponents();
 }));

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

 // ... other tests ...

 it('navigates to /namegame when the "Play" button is clicked', () => {
   const navSpy = spyOn(router, 'navigateByUrl');
   const button = fixture.nativeElement.querySelector('app-button');
   button.click();
   expect(navSpy).toHaveBeenCalledTimes(1);
   expect(navSpy).toHaveBeenCalledWith(`/namegame`, jasmine.anything());
 });
});

任何想法为什么断言不匹配？ 引用有问题吗？

Answer 1

事实证明， navigateByUrl是用UrlTree调用的，而不是我最初预期的字符串。

这些断言中的任何一个都将起作用：

// matching the UrlTree directly
expect(navSpy).toHaveBeenCalledWith(
  router.createUrlTree(['/namegame']), 
  jasmine.anything()
);

或者

// explicitly convert the UrlTree to a string before comparison
expect(navSpy.calls.mostRecent().args[0].toString()).toEqual('/namegame');

Answer 2

我只能假设这是因为您使用的是反引号而不是普通引号。 尝试：

expect(navSpy).toHaveBeenCalledWith('/namegame', jasmine.anything());