Angular Virtual Scroll отлично работает в браузере, но не проходит тест Jasmine при инициализации

Я попытался включить 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 {}

person Laxminarayan    schedule 01.01.2019    source источник
comment
Я рекомендую попробовать добавить CUSTOM_ELEMENTS_SCHEMA, и если вы все еще получаете ошибки, добавьте NO_ERRORS_SCHEMA. Оба они упоминаются в сообщениях об ошибках. Это должно сделать это: schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],. Решает ли их добавление проблему?   -  person JeffryHouser    schedule 01.01.2019
comment
@JeffryHouser, я добавил их ранее в свой app.module, и они, похоже, не повлияли на ошибку.   -  person Laxminarayan    schedule 01.01.2019
comment
Для ясности я предложил добавить схемы в TestBed, а не в app.module.ts.   -  person JeffryHouser    schedule 02.01.2019
comment
Я тоже пробовал их, безрезультатно   -  person Laxminarayan    schedule 02.01.2019


Ответы (1)


Для любопытных: это было исправлено путем импорта ScrollingModule во все файлы спецификаций внедренных сервисов из других функциональных модулей.

Таким образом, если ваш компонент использует service1 из featuremodule1, вам необходимо обновить файл .spec для service1, чтобы импортировать ScrollingModule.

person Laxminarayan    schedule 02.01.2019
comment
Я рад, что вы решили проблему, но если service1 никогда не использует ScrollingModule, необходимо импортировать его, и это не должно исправлять сломанные модульные тесты. К сожалению, я недостаточно понимаю вашу структуру, чтобы ставить дальнейшие диагнозы. - person JeffryHouser; 02.01.2019
comment
Это то, о чем даже я запутался. Но это, на удивление, исправило проблему, не нарушив существующие тестовые случаи. - person Laxminarayan; 02.01.2019