使用 ng-select 包的 Jasmine 单元测试错误答案

【问题标题】：Jasmine Unit Testing errors using ng-select package使用 ng-select 包的 Jasmine 单元测试错误
【发布时间】：2018-11-06 15:50:49
【问题描述】：

我已将 ng-select 组件 (https://github.com/ng-select/ng-select) 导入到我的 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;
    });

我的单元测试如下所示：

  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 的 HTML 如下所示：

<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 (v 1.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)

我相信这可能是因为我使用的 ng-select 版本没有导入所有必要的依赖项，但是我在前端成功使用了下拉菜单，所以我认为这可能是一个单独的问题。

任何识别问题的帮助都会很棒。

谢谢！

【问题讨论】：

标签： javascript angular unit-testing jasmine

【解决方案1】：

我遇到了同样的错误，但没有找到单独注入“ng-dropdown-panel”的方法。要解决此问题以进行测试，您可以在测试台中设置模式：[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();
}));

【讨论】：

【解决方案2】：

将 NgSelectModule 添加到您的导入中，这为我修复了错误。

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

编辑：格式化。

【讨论】：