Сбой: ошибки синтаксического анализа шаблона: во время выполнения модульного теста отсутствует директива с параметром "exportAs", установленным на "bsDatepicker". - PullRequest
Новая
       24

Сбой: ошибки синтаксического анализа шаблона: во время выполнения модульного теста отсутствует директива с параметром "exportAs", установленным на "bsDatepicker".

1 голос
/ 03 июля 2019

У меня есть угловое приложение SPA, которое имеет управление календарем из ngx-bootstrap. Я импортирую BsDatepickerModule.forRoot() из ngx-bootstrap в декларации импорта NgModule, которая импортируется из BsDatepickerModule.Теперь у меня есть компонент, который содержит несколько полей в качестве элементов управления календарем даты. Когда я запускаю модульные тесты для этого компонента с использованием karma-jasmine, все тесты проходят, кроме этого компонента, и ошибка говорит:

MyTestComponent> должен создать Failed: Ошибки синтаксического анализа шаблона: нет директивы с «exportAs», установленным в «bsDatepicker»

Я пробовал следующее:
1. Добавлен «FormModule» вимпорт испытательного стенда в "beforeEach"
2. Удалил папку node_modules и снова запустил npm install

html код файла: 

<input class="form-control" placeholder="yyyy-mm-dd" formControlName="testDateOfBirth"
[ngClass]="{ 'is-invalid': displayMessage.testDateOfBirth }" bsDatepicker #dp="bsDatepicker">

файл spec.ts: 

import { FormsModule } from '@angular/forms';
describe('MyTestComponent', () => {
  let component: MyTestComponent;
  let fixture: ComponentFixture<MyTestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[FormsModule],
      declarations: [ MyTestComponent],
      schemas:[NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyTestComponent);
    component = fixture.componentInstance;
    component.ngOnInit();
    fixture.detectChanges();
  });

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

ожидается: тест "должен создать" должен пройти
актуально: я вижу эту ошибку:

MyTestComponent> должен создать Failed: Ошибки синтаксического анализа шаблона: нет директивы с "exportAs "установлено в" bsDatepicker "(" teOfBirth "[ngClass] =" {'is-invalid': displayMessage.testDateOfBirth} "bsDatepicker [ERROR ->] # dp =" bsDatepicker ">

HTML-код какзапрашивается: 

 id="wrap" class="container">
  <div class="col-md-12 col-lg-6">
    <h1>{{pageTitle}}</h1>
    <form novalidate (ngSubmit)="save()" [formGroup]="testForm">

      <div class="form-group">
        <label class="form-label required " for="EightDigitNumberId">
          What is your eightdigitNumber?
        </label>
        <input class="form-control " id="EightDigitNumberId" type="text"
          formControlName="EightDigitNumber" [ngClass]="{ 'is-invalid': displayMessage.EightDigitNumber }" mask='99999999' />
        <span class="invalid-message">{{ displayMessage.EightDigitNumber }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="firstNameId">
           First Name:
        </label>
        <input class="form-control " id="firstNameId" type="text" placeholder="First Name"
          formControlName="firstName" [ngClass]="{ 'is-invalid': displayMessage.firstName }" />
        <span class="invalid-message">{{ displayMessage.firstName }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="lastNameId">
           Last Name:
        </label>
        <input class="form-control " id="lastNameId" type="text" placeholder="last Name"
          formControlName="lastName" [ngClass]="{ 'is-invalid': displayMessage.lastName }" />
        <span class="invalid-message">{{ displayMessage.lastName }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="DateOfBirthId">
           Date of Birth:
        </label>
        <div class="input-group">
          <!-- 
              To add more options:
                [outsideClick]="true"
                [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-orange'}" 
            -->

          <input class="form-control" placeholder="yyyy-mm-dd" formControlName="DateOfBirth"
            [ngClass]="{ 'is-invalid': displayMessage.DateOfBirth }" bsDatepicker #dp="bsDatepicker">
          <div class="input-group-append">
            <button class=" fa fa-calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
        <span class="invalid-message">{{ displayMessage.DateOfBirth }}</span>
      </div>

      <div class="form-group">
        <button class="btn btn-primary" type="submit" [title]="
            testForm.valid
              ? 'Save your entered data'
              : 'Disabled until the form data is valid'
          " [disabled]="!testForm.valid">
          Submit
        </button>


      </div>
    </form>

    <div class="alert alert-danger" *ngIf="errorMessage">{{errorMessage}}
    </div>
  </div>
</main>

1 Ответ

0 голосов
/ 03 июля 2019

добавить BsDatepickerModule к TestBed импортам. 

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[BsDatepickerModule, FormsModule],
      declarations: [ MyTestComponent],
      schemas:[NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));
...