我尝试将 Angular Virtual 合并到我的一个组件中,它在浏览器上可以正常工作。但是,当我尝试编写相同的测试用例时,Karma 运行器在初始化组件时会引发以下一组错误:
Error: Template parse errors:
Can't bind to 'cdkVirtualForOf' since it isn't a known property of 'ng-container'.
1. If 'cdkVirtualForOf' 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. ("t">
<cdk-virtual-scroll-viewport style="height: 150px" itemSize="90">
<ng-container [ERROR ->]*cdkVirtualFor="let i of commentsData">
<li class="commentBlock">
<div>
"): ng:///DynamicTestModule/AppComponent3Component.html@11:22
Property binding cdkVirtualForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("<ul class="list">
<cdk-virtual-scroll-viewport style="height: 150px" itemSize="90">
[ERROR ->]<ng-container *cdkVirtualFor="let i of commentsData">
<li class="commentBlock">
"): ng:///DynamicTestModule/AppComponent3Component.html@11:8
'cdk-virtual-scroll-viewport' is not a known element:
1. If 'cdk-virtual-scroll-viewport' is an Angular component, then verify that it is part of this module.
2. If 'cdk-virtual-scroll-viewport' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</h4>
<ul class="list">
[ERROR ->]<cdk-virtual-scroll-viewport style="height: 150px" itemSize="90">
<ng-container *cdkVirtualF"): ng:///DynamicTestModule/AppComponent3Component.html@10:6
我尝试将 ScrollingModule 导入到我的 .spec 文件以及上面 Karma 工具给出的建议,但它仍然失败。
我当前的规范文件和 app.module.ts 文件(组件所在的位置)如下所示:
.spec 文件:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent3Component } from './app-component3.component';
import { SharedModule } from '@app/shared/shared.module';
import { Routes } from '@angular/router';
import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { RouterTestingModule } from '@angular/router/testing';
describe('AppComponent3Component', () => {
let component: AppComponent3Component;
let fixture: ComponentFixture<AppComponent3Component>;
beforeEach(async(() => {
const routes: Routes = [
{
path: 'comp3',
component: AppComponent3Component
}
];
TestBed.configureTestingModule({
declarations: [AppComponent3Component],
imports: [
SharedModule.forRoot(),
RouterTestingModule.withRoutes(routes),
HttpClientModule,
ScrollingModule,
SharedModule.forRoot(),
CommonModule
],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent3Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('click button function works', async(() => {
spyOn(component, 'continueFn');
const button = fixture.debugElement.nativeElement.querySelector('button');
button.click();
fixture.whenStable().then(() => {
expect(component.continueFn).toHaveBeenCalled();
});
}));
});
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { AppComponent1Component } from './app-component1/app-component1.component';
import { SharedModule } from '@app/shared/shared.module';
import { AppComponent3Component } from './app-component3/app-component3.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
declarations: [
AppComponent1Component ,
AppComponent3Component,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
SharedModule.forRoot(),
HttpClientModule,
ScrollingModule,
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production
})
],
providers: [],
bootstrap: [AppComponent1Component ]
})
export class AppModule {}