Как пользоваться шпионом из жасмина

Question

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

public uploadFile(confirm) {
  this.uploadModalRef.close();
  if (this.filePath.length) {
    let ngbModalOptions: NgbModalOptions = {
       backdrop : 'static',
       keyboard : 'false',
       windowClass: 'custom-class'
    };
    this.importModalRef = this.modalservice.open(confirm, ngbModalOption);
  }
}

Вот что я пытаюсь:

it('should upload the file', () => {
  let close: "11";
  let filepath;
  component.uploadFile;
  expect(component.uploadFile([filePath]) = ['11'].toBe(close);
});

Но все же, если условия были выделены в покрытии кода и this.uploadModalref

Пожалуйста, дайте мне знать, что я здесь делаю неправильно.

Answer 1

Я создал простой модульный тест для метода uploadFile: тест ожидает, что modalService.open будет вызываться с поддельными параметрами, когда у нас есть непустой массив filePath:

 describe('HelloComponent', () => {
  let fixture: ComponentFixture<TestComponent>;
  let component: HelloComponent;
  const modalService: NgbModal = jasmine.createSpyObj('modalService', ['open']);

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ HelloComponent, TestComponent ],
      providers: [{
        provide: NgbModal,
        useValue: modalService
      }]
    });

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.debugElement.children[0].componentInstance;

    fixture.detectChanges();
  });

  it('should call modalService.open on uploadFile', () => {
    component.filePath = 'File1';
    component.uploadModalRef = jasmine.createSpyObj('uploadModalRef', ['close']);
    let mockOptions: NgbModalOptions = {
      backdrop : 'static',
      keyboard : false,
      windowClass: 'custom-class'
    };
    const mockConfirm = 'confirm-template';

    component.uploadFile(mockConfirm);

    expect(modalService.open).toHaveBeenCalledWith(mockConfirm, mockOptions);
  });
});

Поскольку ваш компонент зависит от NgbModal, мы должны смоделировать этот инжектор, и для этого мы можем создать шпионский объект Жасмин :

const modalService: NgbModal = jasmine.createSpyObj('modalService', ['open']);

Затем мы предоставляем NgbModal поставщикам тестовых модулей, используя наш созданный шпионский объект. Это позволит нам следить за его методами (для этого примера это open метод).

В самом тесте мы следуем схеме ААА: организуем акт, утверждаем. Сначала мы организуем свойства класса и аргументы метода, создавая фиктивные данные. Затем мы вызываем целевую функцию uploadFile. И наконец - мы ожидаем, что метод modalService.open будет вызван с правильными аргументами. Вы также можете добавить другие модульные тесты, основанные на этом примере, изменив фиктивные данные. Например:

it('should not call modalService.open on uploadFile when filePath is empty', () => {
    component.filePath = '';
    component.uploadModalRef = jasmine.createSpyObj('uploadModalRef', ['close']);
    const mockConfirm = 'confirm-template';

    component.uploadFile(mockConfirm);

    expect(modalService.open).not.toHaveBeenCalled();
  });

Поскольку в методе uploadFile есть оператор if, метод modalService.open не будет вызван, если массив filePath пуст. Это именно то, что мы ожидаем в последнем примере.

Также создан демонстрационный стек , так что вы можете проверить его здесь.