javascript - 使用 ng-select 包的 Jasmine 单元测试错误
问题描述
我已将 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 版本没有导入所有必要的依赖项，但是我在前端成功使用了下拉列表，所以我认为这可能是一个单独的问题。
识别问题的任何帮助都会很棒。
谢谢！
解决方案
将 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;
});
编辑：格式化。
推荐阅读
- javascript - JQuery滚动到下一个非同级不起作用
- python - 训练一段时间后 DQN 平均奖励下降
- excel - VBA Code Excel：我希望宏通过使用多个 ifs 来删除行
- angular - 如果我们在角度 4 中使用 *ngFor，如何在一个实例上触发函数
- label - 分箱标签和边缘错误
- java - 为登录保留连接对象
- angular - 我正面临 ngModel 的一个问题
- c# - c#中sha256对字符串进行加密和解密
- php - PHP/SQL 使用一个 SELECT 语句从多个其他 lat/lng 位置获取所有 lat/lng 位置
- php - 无法根据此查询获得低库存商品