Модульный тест Angular2. Проверьте, вызывает ли функция router.navigate

Я новичок в тестировании. Имейте функцию, которая при вызове переходит на новую страницу. Но тест не проходит с ошибкой:

Expected spy navigate to have been called with [ [ './../admin/documents/12345' ] ] but it was never called.

public showProfile(id) {
   this.router.navigate(['./../admin/documents/' + id]);
}

В моем тестовом файле есть:

import {ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AppComponent} from './app.component';
import {FormsModule} from "@angular/forms";
import {HttpClientTestingModule} from "@angular/common/http/testing";
import {Router} from "@angular/router";


describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let mockRouter;

  beforeEach(() => {
    TestBed.configureTestingModule({
    declarations: [ AppComponent],
    imports: [FormsModule, HttpClientTestingModule],
    providers: [
      { provide: Router, useValue: mockRouter }]
  });

  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance;
  mockRouter = {
    navigate: jasmine.createSpy('navigate')
  };
 });


 describe('when showProfile() is called', () => {
   it('navigates to a profile page',() => {
     const id= 12345;
     component.showProfile(id);
     expect(mockRouter.navigate)
     .toHaveBeenCalledWith(['./../admin/documents/' + id]);
   });
 });
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
514
1

Ответы 1

Вам необходимо инициализировать mockRouter, прежде чем использовать его в TestBed.configureTestingModule.

Кроме того, expect(mockRouter.navigate).toHaveBeenCalledWith(['./../admin/documents/' + id]); не будет работать, потому что ['a'] !== ['a']. В качестве обходного пути вы можете сделать что-то вроде:

expect(mockRouter.navigate.calls.mostRecent().args[0][0])
  .toEqual('./../admin/documents/' + id);

Я создал Stackblitz для вашего теста.

Другие вопросы по теме