Javascript 使用ng select软件包的Jasmine单元测试错误

我已经将ng select component（）导入我的angular应用程序，在运行该应用程序时不会抛出任何控制台错误，并按预期工作。但是，在使用Jasmine运行角度单元测试时，它会导致错误

我已将NgSelectModule导入到imports数组下的app.module.ts文件中，并且还通过声明数组将NgSelectComponent导入到我的configuration.component.spec.ts文件中：

import { NgSelectComponent } from '@ng-select/ng-select';

 describe('Test Configuration Component',
  () => {
    let component: ConfigurationComponent;
    let fixture: ComponentFixture<ConfigurationComponent>;

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [ConfigurationComponent, NgSelectComponent],
        imports: [FormsModule],
        providers: [{ provide: APIService, useClass: APIServiceMock }, Helper]
      });

      fixture = TestBed.createComponent(ConfigurationComponent);
      component = fixture.componentInstance;
    });

ng select in配置组件的HTML如下所示：

  it('check that array of employees got binded to accounts', async () => {
    fixture.detectChanges();
    let employeeAccounts = [
      { "employeeAccountId": 1, "employeeId": 1, "name": "Name", "descriptor": "descriptor", "street": "Street", "postcode": "postcode", "state": "VIC", "city": "Melb", "country": "AU", "phone": "3123", "MCC": "MCC" },
      { "employeeAccountId": 2, "employeeId": 1, "name": "Name2", "descriptor": "descriptor2", "street": "Street2", "postcode": "postcode2", "state": "VIC2", "city": "Melb2", "country": "AU2", "phone": "3123", "MCC": "MCC2" }];
      component.employeeAccounts = employeeAccounts;
      component.ngOnInit();
      fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(component.employeeAccounts[1]).toEqual(employeeAccounts[1]);
      });
    });

<ng-select [(ngModel)]="selectedEmployeeAccountId" [items]="employeeAccounts" (change)="accountSelected()" [disabled]="isLoadingAccounts" [loading]="isLoadingAccounts" bindLabel="name" bindValue="employeeAccountId" placeholder="Please Select"></ng-select>

由于Angular 5兼容性问题，我不得不使用旧版本的ng select（V1.5.2）

单元测试错误：

HeadlessChrome 0.0.0 (Windows 10 0.0.0) Test Configuration Component check that array of employees got binded to accounts FAILED
        Error: Template parse errors:
        Can't bind to 'virtualScroll' since it isn't a known property of 'ng-dropdown-panel'.
        1. If 'virtualScroll' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
        2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
        <ng-dropdown-panel *ngIf="isOpen"
            class="ng-dropdown-panel"
            [ERROR ->][virtualScroll]="virtualScroll"
            [bufferAmount]="bufferAmount"
            [appendTo]="appendTo"
        "): ng:///DynamicTestModule/NgSelectComponent.html@47:4
        Can't bind to 'bufferAmount' since it isn't a known property of 'ng-dropdown-panel'.
        1. If 'bufferAmount' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
        2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
            class="ng-dropdown-panel"
            [virtualScroll]="virtualScroll"
            [ERROR ->][bufferAmount]="bufferAmount"
            [appendTo]="appendTo"
            [position]="dropdownPosition"
        "): ng:///DynamicTestModule/NgSelectComponent.html@48:4
        Can't bind to 'appendTo' since it isn't a known property of 'ng-dropdown-panel'.
        1. If 'appendTo' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
        2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
            [virtualScroll]="virtualScroll"
            [bufferAmount]="bufferAmount"
            [ERROR ->][appendTo]="appendTo"
            [position]="dropdownPosition"
            [headerTemplate]="headerTemplate"
        "): ng:///DynamicTestModule/NgSelectComponent.html@49:4
        Can't bind to 'position' since it isn't a known property of 'ng-dropdown-panel'.
        1. If 'position' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
        2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
            [bufferAmount]="bufferAmount"
            [appendTo]="appendTo"
            [ERROR ->][position]="dropdownPosition"
            [headerTemplate]="headerTemplate"
            [footerTemplate]="footerTempl"): ng:///DynamicTestModule/NgSelectComponent.html@50:4
        Can't bind to 'headerTemplate' since it isn't a known property of 'ng-dropdown-panel'.
        1. If 'headerTemplate' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
        2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
            [appendTo]="appendTo"
            [position]="dropdownPosition"
            [ERROR ->][headerTemplate]="headerTemplate"
            [footerTemplate]="footerTemplate"
            [items]="itemsList.filter"): ng:///DynamicTestModule/NgSelectComponent.html@51:4
        Can't bind to 'footerTemplate' since it isn't a known property of 'ng-dropdown-panel'.
        1. If 'footerTemplate' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
        2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
            [position]="dropdownPosition"
            [headerTemplate]="headerTemplate"
            [ERROR ->][footerTemplate]="footerTemplate"
            [items]="itemsList.filteredItems"
            (update)="viewPortItems ="): ng:///DynamicTestModule/NgSelectComponent.html@52:4
        Can't bind to 'items' since it isn't a known property of 'ng-dropdown-panel'.
        1. If 'items' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
        2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
            [headerTemplate]="headerTemplate"
            [footerTemplate]="footerTemplate"
            [ERROR ->][items]="itemsList.filteredItems"
            (update)="viewPortItems = $event"
            (scrollToEnd)="scrollToEn"): ng:///DynamicTestModule/NgSelectComponent.html@53:4
        'ng-dropdown-panel' is not a known element:
        1. If 'ng-dropdown-panel' is an Angular component, then verify that it is part of this module.
        2. If 'ng-dropdown-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
            </span>
        </div>
        [ERROR ->]<ng-dropdown-panel *ngIf="isOpen"
            class="ng-dropdown-panel"
            [virtualScroll]="virtualScroll"
        "): ng:///DynamicTestModule/NgSelectComponent.html@45:0
            at syntaxError node_modules/@angular/compiler/esm5/compiler.js:486:22)
            at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse node_modules/@angular/compiler/esm5/compiler.js:24674:1)
            at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate node_modules/@angular/compiler/esm5/compiler.js:34629:1)
            at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate node_modules/@angular/compiler/esm5/compiler.js:34604:1)
            at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48
            at Set.forEach (<anonymous>)
            at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents node_modules/@angular/compiler/esm5/compiler.js:34505:1)
            at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1
            at Object.then node_modules/@angular/compiler/esm5/compiler.js:475:33)
            at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents node_modules/@angular/compiler/esm5/compiler.js:34391:1)
        Failed: Cannot read property 'detectChanges' of undefined
        TypeError: Cannot read property 'detectChanges' of undefined
            at Object.<anonymous> src/app/configuration/configuration.component.spec.ts:87:17)
            at step (http://localhost:9876/_karma_webpack_/main.bundle.js:89:23)
            at Object.next (http://localhost:9876/_karma_webpack_/main.bundle.js:70:53)
            at http://localhost:9876/_karma_webpack_/main.bundle.js:64:71
            at new ZoneAwarePromise node_modules/zone.js/dist/zone.js:891:1)
            at webpackJsonp../src/app/configuration/configuration.component.spec.ts.__awaiter (http://localhost:9876/_karma_webpack_/main.bundle.js:60:12)
            at UserContext.<anonymous> src/app/configuration/configuration.component.spec.ts:86:66)
            at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
            at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:288:1)
            at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:387:1)

HeadlessChrome 0.0.0（Windows 10 0.0.0）测试配置组件检查员工阵列是否绑定到帐户失败
错误：模板分析错误：
无法绑定到“virtualScroll”，因为它不是“ng下拉面板”的已知属性。
1.如果“virtualScroll”是角度指令，则将“CommonModule”添加到此组件的“@NgModule.imports”中。
2.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
][virtualScroll]=“virtualScroll”
[bufferAmount]=“bufferAmount”
[appendTo]=“appendTo”
“”：ng:///DynamicTestModule/NgSelectComponent。html@47:4
无法绑定到“bufferAmount”，因为它不是“ng下拉面板”的已知属性。
1.如果“bufferAmount”是角度指令，则将“CommonModule”添加到此组件的“@NgModule.imports”中。
2.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
class=“ng下拉面板”
[virtualScroll]=“virtualScroll”
[错误->][bufferAmount]=“bufferAmount”
[appendTo]=“appendTo”
[位置]=“下拉位置”
“”：ng:///DynamicTestModule/NgSelectComponent。html@48:4
无法绑定到“appendTo”，因为它不是“ng下拉面板”的已知属性。
1.如果“appendTo”是角度指令，则将“CommonModule”添加到此组件的“@NgModule.imports”中。
2.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
[virtualScroll]=“virtualScroll”
[bufferAmount]=“bufferAmount”
[错误->][appendTo]=“appendTo”
[位置]=“下拉位置”
[headerTemplate]=“headerTemplate”
“”：ng:///DynamicTestModule/NgSelectComponent。html@49:4
无法绑定到“position”，因为它不是“ng下拉面板”的已知属性。
1.如果“位置”是角度指令，则将“CommonModule”添加到此组件的“@NgModule.imports”中。
2.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
[bufferAmount]=“bufferAmount”
[appendTo]=“appendTo”
[错误->][position]=“dropdownPosition”
[headerTemplate]=“headerTemplate”
[footerTemplate]=“footerTemplate”）：ng:///DynamicTestModule/NgSelectComponent。html@50:4
无法绑定到“headerTemplate”，因为它不是“ng下拉面板”的已知属性。
1.如果“headerTemplate”是角度指令，则将“CommonModule”添加到此组件的“@NgModule.imports”中。
2.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。（“
[appendTo]=“appendTo”
[位置]=“下拉位置”
[错误->][headerTemplate]=“headerTemplate”
[footerTemplate]=“footerTemplate”
[items]=“itemsList.filter”）：ng:///DynamicTestModule/NgSelectComponent。html@51:4
无法绑定到“footerTemplate”，因为它不是“ng下拉面板”的已知属性。
1.如果“footerTemplate”是角度指令，则将“CommonModule”添加到此组件的“@NgModule.imports”中。
2.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
[位置]=“下拉位置”
[headerTemplate]=“headerTemplate”
[错误->][footerTemplate]=“footerTemplate”
[items]=“itemsList.filteredItems”
（更新）=“viewPortItems=”）：ng:///DynamicTestModule/NgSelectComponent。html@52:4
无法绑定到“items”，因为它不是“ng下拉面板”的已知属性。
1.如果“items”是角度指令，则将“CommonModule”添加到此组件的“@NgModule.imports”中。
2.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。（“
[headerTemplate]=“headerTemplate”
[footerTemplate]=“footerTemplate”
[错误->][items]=“itemsList.filteredItems”
（更新）=“viewPortItems=$event”
（scrollToEnd）=“scrollToEn”）：ng:///DynamicTestModule/NgSelectComponent。html@53:4
“ng下拉面板”不是已知元素：
1.如果“ng下拉面板”是一个角度组件，则确认它是该模块的一部分。
2.如果“ng下拉面板”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。("
[错误->]我也遇到了同样的错误，没有找到单独注入“ng下拉面板”的方法。要绕过此问题进行测试，您可以在测试床中设置模式：[NO_ERRORS_SCHEMA]以防止发生此错误

按如下方式设置测试：

import { NO_ERRORS_SCHEMA } from '@angular/core';

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

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

从'@angular/core'导入{NO_ERRORS_SCHEMA}；
描述（'TestComponent'，（）=>{
let组件：TestComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[FormsModule，ReactiveFormsModule]，
声明：[TestComponent，NgSelectComponent]，
提供者：[]，
架构：[无错误\u架构]
})
.compileComponents（）；
}));
添加NgSelectM
import {
 NgSelectModule
} from '@ng-select/ng-select';

describe('Test Configuration Component',
() => {
 let component: ConfigurationComponent;
 let fixture: ComponentFixture < ConfigurationComponent > ;

 beforeEach(() => {
   TestBed.configureTestingModule({
     declarations: [ConfigurationComponent],
     imports: [FormsModule, NgSelectModule],
     providers: [{
       provide: APIService,
       useClass: APIServiceMock
     }, Helper]
   });

   fixture = TestBed.createComponent(ConfigurationComponent);
   component = fixture.componentInstance;
 });