2

我想在具有 ng2-dragula 的组件上运行单元测试。

但是，当我在组件上运行一个简单的单元测试时，我得到了错误

TypeError：无法读取未定义的属性“setOptions”

组件.html

<div [dragula]="'section-bag'"
     [dragulaModel]='form.sections'>
  <div *ngFor="let section of form.sections">
    <div class="drag-handle__section"></div>
  </div>
</div>

组件.ts

import { Component, Input } from '@angular/core';
import { DragulaService } from 'ng2-dragula';
...


export class MyComponent {

  @Input() form;

  constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('section-bag', {
      moves: (el, container, handle) => {
        return handle.classList.contains('drag-handle__section');
      }
    });
  }

  ...
}

组件.spec.ts

import { DragulaService } from 'ng2-dragula';
...


describe('Test for MyComponent', () => {
  let comp: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      providers: [
        { provide: DragulaService }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    comp = fixture.componentInstance;
    comp.form.sections = [];
    comp.form.sections.push(new FormSection());

    fixture.detectChanges();
  });

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

});

我猜 Dragula 没有被正确导入，那么如何在测试中添加 Dragula 作为提供程序以在组件的构造函数中使用它？

我查看了Angular2 单元测试：测试组件的构造函数，这似乎是相关的，但我无法解决该错误。

注意：我对 Dragula 的单元测试并不那么大惊小怪；我想测试组件中的其他功能，但此错误不允许运行任何进一步的测试。

4

1 回答 1

2

更改您提供DragulaService. 如果你提供它喜欢

{ provide: DragulaService }

那么您应该提及useClass或useValue归因于它。

例如：{ provide: DragulaService, useClass : MockService }

如果你对 mock 不感兴趣，那么直接将它添加到providers数组中。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      providers: [
         DragulaService  // see this line
      ]
    })
    .compileComponents();
}));
于 2018-08-01T10:17:29.210 回答