Question

我有一个角度SPA应用程序，该应用程序具有从ngx-bootstrap进行日历控制的功能。我正在从NgModule导入声明中的ngx-bootstrap导入BsDatepickerModule.forRoot()，该声明是从BsDatepickerModule导入的。现在，我有一个包含很少字段作为日期日历控件的组件，当我使用业力茉莉花对该组件运行单元测试时，除该组件外，所有测试都通过了，并且错误提示：

MyTestComponent>应该创建失败：模板解析错误：存在是没有将“ exportAs”设置为“ bsDatepicker”的指令

我尝试了以下操作：
1.在“ beforeEach”下的测试床导入中添加了“ FormModule”
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>应该创建失败：模板解析错误：有没有将“ exportAs”设置为“ bsDatepicker”（“ teOfBirth” [ngClass] =“ {'is-invalid'：displayMessage.testDateOfBirth}” bsDatepicker [错误->]＃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>

Answer 1

我知道我来晚了，但是对于那些正在寻找答案的人... BsDropdownModule确实有问题。 <span #cartDropdown="bs-dropdown" dropdown">...<span>

就像上面提到的 ysf 一样，我在BsDropdownModule导入中添加了TestBed，但之后必须添加.forRoot（）就像ngx-bootstrap文档中告诉您要在app.module中执行的操作一样。

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

Answer 2

将_apply_rl_actions添加到BsDatepickerModule导入中。

TestBed

Answer 3

确保您要从中导入BsDatepickerModule 'ngx-bootstrap / datepicker'，而不是'ngx-bootstrap / datepicker / public_api'

失败：模板解析错误：运行单元测试时，没有将“ exportAs”设置为“ bsDatepicker”的指令

3 个答案: