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

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

0 голосов
/ 01 января 2019

Я попытался включить 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, а такжепредложения, данные инструментом Кармы выше, но он все еще не работает.

Мои текущие спецификации и файл 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.тс 

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 {}

1 Ответ

0 голосов
/ 02 января 2019

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

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

...