Кнопка модульного тестирования с директивой routerLink

Question

У меня есть простое c представление, для которого я хотел бы написать тесты:

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