ng2-dragula unit test "dragulaService.setOptions is not a function"

I want to run unit tests on my component which has ng2-dragula.

However, when I run a simple unit test on the component, I get the error

TypeError: Cannot read property 'setOptions' of undefined

component.html

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

component.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');
      }
    });
  }

  ...
}

component.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();
  });

});

I guess that Dragula is not being imported correctly, so how do I add Dragula as a provider in the test to use it in the component's constructor?

I've looked at Angular2 unit testing : testing a component's constructor which seems related, but I can't resolve the error.

Note: I'm not so fussed about unit testing Dragula; I want to test other functionality in the component, but this error isn't allowing any further tests to run.

Solution

Change the way you are providing the DragulaService. If you provide it like

{ provide: DragulaService }

then you should either mention useClass or useValue attribute to it.

For ex : { provide: DragulaService, useClass : MockService }

If you are not interested to mock, then directly add it to providers array.

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