Функция тестирования submit () в Component + Service, используя Angular 5

Question

Мне нужно проверить функцию отправки.У меня есть этот код:

onAddProd() {
    this.areWeWaiting = true;
    let newProd= new Product(
      this.addProdForm.value
    );
    this.ws.createProduct(newProd).subscribe( //createProduct is function service
      result => {
        if (result === true) {
          this.router.navigate(['/home']);
        } else {
          this.areWeWaiting = false;
        }
      },
      error => {
        this.areWeWaiting = false;
      }
    );
  }

Мне нужно в основном тестирование.- Если результат верен, следует перейти к /home

Можете ли вы предложить мне любую идею, пожалуйста?

Answer 1

Сначала первые вещи: в вашей функции происходит многое.Неплохо было бы протестировать все сервисы независимо друг от друга.

В частности, маршрутизация до /home управляется модулем Route и должна проверяться в отдельном файле.Подробнее о здесь .

Ключевым моментом при тестировании вашей функции является возможность макетировать все вызываемые сервисы.Обычно вы должны объявлять эти макеты перед функцией describe

let wsMock
let routerMock

describe('MyComponentUnderTest', () => {
  let component: MyComponentUnderTest
  let fixture: ComponentFixture<MyComponentUnderTest>
  ...
})

Далее вы должны инициировать макеты и переопределять значения, которые должны возвращаться во время теста:

beforeEach(async(() => {
  wsMock = jasmine.createSpyObj('ws', ['createProduct'])
  wsMock.createProduct.and.returnValue(of(SOME_VALUE_THAT_YOU_HAVE_TO_SET))

  routerMock = jasmine.createSpyObj('Router', ['navigate'])
}))

И последнее, но не менее важное: ваша функция beforeEach завершается настройкой модуля тестирования, в который вы должны добавить свои поддельные услуги:

TestBed.configureTestingModule({
  declarations: [ LoginComponent ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [
    {provide: ws, useValue: wsMock},
    {provide: Router, useValue: routerMock}
  ]
})
.compileComponents()

Вот и все для котельной плиты.Давайте перейдем к тесту:

it('should create a product', () => {
  component.onAddProd()
  expect(component.areWeWaiting).toBeTruthy()
})

Вы можете посетить Angular веб-сайт для более подробной информации о тестировании компонентов.

Answer 2

В функции beforeEach объявите

Providers: [
....
{ provide: Router, useValue: jasmine.createSpyObj("router", ["navigate"]) }
]
const injector = getTestBed();
router = injector.get(Router);

, а в функции

expect(router.navigate).toHaveBeenCalledWith(["/home"]);