Ошибка типа: не удается прочитать свойство 'show' из неопределенного - PullRequest
Новая
       21

Ошибка типа: не удается прочитать свойство 'show' из неопределенного

0 голосов
/ 04 апреля 2019

Я пишу тестовые случаи для ngx-bootstrap (bsDateRangePickerDirective) в angular 7. Но когда я пытаюсь открыть экземпляр bsdaterangePickerDirective из файла спецификации, я получаю сообщение об ошибке, которое не может прочитать показ свойства undefined.

Ниже приведен код, который я написал:

Файл component.ts 

@ViewChild("sdp") sdatepicker: BsDaterangepickerDirective;
// Function
openDatePicker() {
    this.sdatepicker.show();
  }

Файл Component.spec.ts 

import { ComponentFixture, async, TestBed } from "@angular/core/testing";
import { NO_ERRORS_SCHEMA } from "@angular/core";
import { NameComponent } from "./name-box.component";
import { FormsModule } from "@angular/forms";
import { BsDatepickerModule, BsDaterangepickerDirective } from "ngx-bootstrap";
import { HttpClientTestingModule } from "@angular/common/http/testing";

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

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [NameComponent],
      imports: [
        FormsModule,
        BsDatepickerModule,
        HttpClientTestingModule
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NameComponent);
    component = fixture.componentInstance;

  });


  it('Should open date picker', () => {
    const dateSpy = spyOn(BsDaterangepickerDirective.prototype, "show").and.returnValue(true);
    component.openDatePicker('sdatepicker');
    expect(dateSpy).toHaveBeenCalled();
  });

});

Файл шаблона компонента: 

<div class="grid-search-datepicker date-selector">
      <input type="text" class="form-control" id="start-date-selector_{{searchTableId}}" [(ngModel)]="dateRange.startDate"
        bsDatepicker #sdp="bsDatepicker" (onHidden)="updateMinEndDate()" [bsConfig]="startDateConfig" placeholder="{{l10n.fromdate}}"
        readonly>
      <i class="icon-small-calendar text-blue open-datetimepicker" (click)='openDatePicker("sdatepicker")' aria-hidden="true"></i>
    </div>

1 Ответ

0 голосов
/ 04 апреля 2019

В вашем шаблоне вы используете bsDatepicker, но в компоненте вы называете его BsDaterangepickerDirective.Я думаю, что это будет работать, если вы измените шаблон на: 

<div class="grid-search-datepicker date-selector">
  <input type="text" class="form-control" id="start-date-selector_{{searchTableId}}" 
    [(ngModel)]="dateRange.startDate"
    bsDaterangepicker
    #sdp="bsDaterangepicker"
    (onHidden)="updateMinEndDate()"
    [bsConfig]="startDateConfig"
    placeholder="{{l10n.fromdate}}"
    readonly
  >
  <i class="icon-small-calendar text-blue open-datetimepicker" 
    (click)='openDatePicker("sdatepicker")'
    aria-hidden="true"
  >
  </i>
</div>

См .: https://stackblitz.com/edit/angular-sgaq4e

...