unit-testing - 实现ngx-bootstrap/datepicker后如何通过单元测试？

Question

我在 angular-cli 项目上使用 ngx-bootstrap/datepicker 创建了独立组件。一切正常，但单元测试失败。但我是单元测试的新手，我尝试测试但它说失败。

这是 Travic-CI 构建日志。

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

这是我的项目版本和代码。

@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

模板

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

组件(抱歉发布完整代码。它只是来自 ngx-bootstrap 演示的示例代码)

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

测试代码

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

请帮我解决这个问题。

谢谢!

Answer 1

1) 使用 NO_ERRORS_SCHEMA 而不是 CUSTOM_ELEMENTS_SCHEMA 因为:

CUSTOM_ELEMENTS_SCHEMA 将允许:

• 名称中带有-的任何非Angular元素，
• 名称中带有 - 的元素的任何属性，这是自定义的通用规则

但是你的组件没有-(datepicker)

NO_ERRORS_SCHEMA 将允许任何元素上的任何属性

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

---

2) 另一种选择是导入 FormsModule

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