Angular Метод in-memory-web-api всегда возвращает 404 NotFound в консоли браузера, даже если тесты пройдены - PullRequest
Новая
       25

Angular Метод in-memory-web-api всегда возвращает 404 NotFound в консоли браузера, даже если тесты пройдены

0 голосов
/ 09 марта 2020

Я новичок в модульном тестировании в Angular (используя Жасмин и Карму)

Я пытаюсь создать несколько тестов для моего httpService, очевидно, тесты в порядке.

enter image description here

Но иногда, когда я запускаю ng test или обновляем sh браузер, я обнаруживал, что один из тестов в одном из 3 наборов тестов не удался с это сообщение: Uncaught [object Object] thrown.

enter image description here

Еще одна неприятная вещь заключается в том, что независимо от того, пройдены ли все тесты или нет, если вы проверите в консоли браузера вы ВСЕГДА найдете это сообщение:

enter image description here

Я прилагаю код в zip-файле (загружен на диск ) . Вам нужно только запустить npm install и npm start.

Я очень надеюсь, что вы поможете мне понять, почему это тестирование ведет себя как русская рулетка.

1 Ответ

0 голосов
/ 09 марта 2020

Проблема calculator.component.spec.ts. Вы не издеваетесь loanService, когда он выходит и делает HTTP звонки. Вы всегда должны насмехаться над внешними службами.

Измените calculator.component.spec.ts на: 

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { CalculatorComponent } from './calculator.component';
import { LoanService } from '../loan.service';
import { Campaign } from '../campaign';
import { of } from 'rxjs/internal/observable/of';

describe('CalculatorComponent', () => {
  let component: CalculatorComponent;
  let fixture: ComponentFixture<CalculatorComponent>;
  let mockLoanService: any;

  beforeEach(async(() => {
    // mockLoanService object, first parameter ('loanService') is optional, second paramter => array of methods needing
    // mock for component
    mockLoanService = jasmine.createSpyObj('loanService', ['getCurrentCampaign', 'getMonthlyAmount']);
    TestBed.configureTestingModule({
      declarations: [ CalculatorComponent ],
      imports: [],
      // NO_ERRORS_SCHEMA to ignore child components, if you need the
      // painting of the DOM of the child components/directives, put them in declarations
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        FormBuilder,
        // provide the mock for LoanService
        { provide: LoanService, useValue: mockLoanService },
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CalculatorComponent);
    component = fixture.componentInstance;
    // getCurrentCampaig is related to ngOnInit so we have to mock it
    mockLoanService.getCurrentCampaign.and.returnValue(of({
      id: 1,
      campaign_name: 'Donald Trump 2020',
      min_quota: -200000000,
      max_quota: 0,
      max_amount: 0,
      min_amount: 0,
      tea: 1,
      payment_date: new Date(),
      currency: 'Fake News',
    } as Campaign))
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Я написал несколько комментариев в самом файле. Кстати, Donald Trump 2020 и Fake News - это просто шутки, у меня нет политической принадлежности, но я люблю писать шутки в своих юнит-тестах для других разработчиков:).

Некоторые примечания:

1.) Когда вы вводите услугу, всегда издевайтесь над ней. Вы тестируете компонент и компонент в одиночку, вы должны предположить, что служба выполнит свою работу, потому что она уже тестируется.

2.) Проверьте NO_ERRORS_SCHEMA. В основном он игнорирует все компоненты / директивы в вашем HTML, которого нет в массиве declarations. Если вы пишете тест, в котором вы нажимаете кнопку дочернего компонента, и это влияет на этот компонент, то объявите его в declarations (в основном, если вам нужна фактическая реализация дочернего компонента, объявите его). В противном случае, используйте NO_ERRORS_SCHEMA.

3.) Импорт SharedModule во всех модульных тестах, на мой взгляд, не очень хорош. Это замедлит ваши юнит-тесты. Вместо этого воспользуйтесь declarations и providers и дайте компоненту то, что ему нужно, и просто то, что ему нужно (не лишние вещи).

4.) Действительно хороший класс в PluralSight, называемый Unit Testing in Angular. Пройдя этот класс, вы получите лучшее представление о модульном / интеграционном тестировании. Может быть, купить подписку на PluralSight или начать бесплатную пробную версию.

...