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

Question

我有一个简单的静态 View ，我想为其编写测试:

<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');