CODEWITHSUNDEEP
unit-testingangulardatepickerangular-clingx-bootstrap
Zhengzhe Li
Zhengzhe Li

Reputation: 1836

How to pass Unit test after implementing ngx-bootstrap/datepicker?

I created independent component with ngx-bootstrap/datepicker on angular-cli project. Everything works fine but Unit test is failing. But I am new on Unit Testing, and I tried to test but it saying fails.

Here is Travic-CI build log.

https://travis-ci.org/webcat12345/webcat-black-page/builds/221961698

Here is my project version and code.

@angular/cli: 1.0.0
node: 7.6.0
os: linux x64
@angular/cli: 1.0.0
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/compiler-cli: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2

Template

<datepicker class="well well-sm main-calendar" [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="false" [dateDisabled]="dateDisabled"></datepicker>

Component (sorry for posting full code. it is just sample code from ngx-bootstrap demo)

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-sidebar-datepicker',
  templateUrl: './sidebar-datepicker.component.html',
  styleUrls: ['./sidebar-datepicker.component.scss']
})
export class SidebarDatepickerComponent implements OnInit {

  public dt: Date = new Date();
  public minDate: Date = void 0;
  public events: any[];
  public tomorrow: Date;
  public afterTomorrow: Date;
  public dateDisabled: {date: Date, mode: string}[];
  public formats: string[] = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY',
    'shortDate'];
  public format: string = this.formats[0];
  public dateOptions: any = {
    formatYear: 'YY',
    startingDay: 1
  };
  private opened: boolean = false;

  constructor() {
    (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
    (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
    (this.minDate = new Date()).setDate(this.minDate.getDate() - 1000);
    (this.dateDisabled = []);
    this.events = [
      {date: this.tomorrow, status: 'full'},
      {date: this.afterTomorrow, status: 'partially'}
    ];
  }

  ngOnInit() {

  }

  public getDate(): number {
    return this.dt && this.dt.getTime() || new Date().getTime();
  }

  public today(): void {
    this.dt = new Date();
  }

  public d20090824(): void {
    this.dt = moment('2009-08-24', 'YYYY-MM-DD')
      .toDate();
  }

  public disableTomorrow(): void {
    this.dateDisabled = [{date: this.tomorrow, mode: 'day'}];
  }

  // todo: implement custom class cases
  public getDayClass(date: any, mode: string): string {
    if (mode === 'day') {
      let dayToCheck = new Date(date).setHours(0, 0, 0, 0);

      for (let event of this.events) {
        let currentDay = new Date(event.date).setHours(0, 0, 0, 0);

        if (dayToCheck === currentDay) {
          return event.status;
        }
      }
    }

    return '';
  }

  public disabled(date: Date, mode: string): boolean {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  }

  public open(): void {
    this.opened = !this.opened;
  }

  public clear(): void {
    this.dt = void 0;
    this.dateDisabled = undefined;
  }

  public toggleMin(): void {
    this.dt = new Date(this.minDate.valueOf());
  }
}

Test Code

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { DatepickerModule } from 'ngx-bootstrap/datepicker';
import { SidebarDatepickerComponent } from './sidebar-datepicker.component';

describe('SidebarDatepickerComponent', () => {
  let component: SidebarDatepickerComponent;
  let fixture: ComponentFixture<SidebarDatepickerComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SidebarDatepickerComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [DatepickerModule.forRoot()]
    })
    .compileComponents();
  }));

  beforeEach(async() => {
    fixture = TestBed.createComponent(SidebarDatepickerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Please help me to figure out this issue.

Thank you!

Upvotes: 3

Views: 3773

Answers (1)

yurzui
yurzui

Reputation: 214255

1) Use NO_ERRORS_SCHEMA instead of CUSTOM_ELEMENTS_SCHEMA because:

CUSTOM_ELEMENTS_SCHEMA will allow:

  • any non-Angular elements with a - in their name,
  • any properties on elements with a - in their name which is the common rule for custom

but your component without -(datepicker)

NO_ERRORS_SCHEMA will allow any property on any element

TestBed.configureTestingModule({
   declarations: [ SidebarDatepickerComponent ],
   schemas: [NO_ERRORS_SCHEMA],
   imports: [DatepickerModule.forRoot()]
})

2) Another option is importing FormsModule

TestBed.configureTestingModule({
   declarations: [ SidebarDatepickerComponent ],
   imports: [DatepickerModule.forRoot(), FormsModule]
})

Upvotes: 4

Related Questions