CODEWITHSUNDEEP
angularunit-testingdatepickerng-bootstrap
redOctober13
redOctober13

Reputation: 4004

Angular Unit Test using NgbDatepicker is failing

This seems pretty simple, and I'm sure I'm not importing something somewhere, but I've tried all the modules, including the test, and no luck. The test fails with this error:

There is no directive with "exportAs" set to "ngbDatepicker" (placeholder="a year ago" [(ngModel)]="fromDate" ngbDatepicker [ERROR->]#fromDateToggle="ngbDatepicker" title="Select a date">

I have a component template that uses the ng-bootstrap datepicker in a popup (as per their docs)

My template code looks like:

<div class="input-group">
  <input id="to-date" name="dp" class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="toDate"
    ngbDatepicker #toDateToggle="ngbDatepicker" title="Select a date">
  <button class="input-group-addon" (click)="toDateToggle.toggle()" type="button">
    <span class="fa fa-calendar"></span>
  </button>
</div>

I have NgbModule.forRoot() in app.module.ts and have imported NgbModule in my spec file, which seems to be all that the guide requires.

My spec file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser';
import { NgbModule, NgbActiveModal, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { ExtractModalComponent } from './extract-modal.component';

fdescribe('ExtractModalComponent', () => {
  let component: ExtractModalComponent;
  let fixture: ComponentFixture<ExtractModalComponent>;
  let debugEl: DebugElement;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [ExtractModalComponent],
        providers: [NgbActiveModal],
        schemas: [NO_ERRORS_SCHEMA]
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(ExtractModalComponent);
    component = fixture.componentInstance;
    debugEl = fixture.debugElement.query(By.css('.modal-body'));
    fixture.detectChanges();
  });

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

Upvotes: 5

Views: 7473

Answers (2)

Rajesh Sah
Rajesh Sah

Reputation: 21

Simply use imports: [ NgbModule ] and it will fix the problem. forRoot() is not required now and has been removed.

Note: Never forget to write import on the top: import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Upvotes: 1

72GM
72GM

Reputation: 3124

"I have NgbModule.forRoot() in app.module.ts"

.... this is irrelevant to your tests. You need to do this in you spec file

e.g. imports:[NgbModule.forRoot()]

Worth noting that you don't have to import the full NgbModule i.e.: you could just import the NgbDatepickerModule ... but I'd get it working first before tinkering with this

Upvotes: 11

Related Questions