使用Karma Jasmine进行角度单元测试：测试导入的librariries

Question

是Angular单元测试的新手。

我开始为每个组件生成基本单元测试：组件创建的测试：

MyComponent.spec.ts

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

为了使测试有效，我注意到，我应该声明并删除所有使用过的库和文件。

在我的情况下：我在我的所有projet部件中使用 DevExtreme UI小部件，我在全球范围内导入它：

app.module.ts：（上次导入）

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from './../shared/shared.module';
import { LoginComponent } from './login/login.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { AppComponent } from './app.component';
import { CustomerModule } from './customer/customer.module';
import { ApplicationParametersComponent } from './superAdministrator/application-parameters/application-parameters.component';
import { InscriptionComponent } from './inscription/inscription.component';

import { DevExtremeModule } from 'devextreme-angular';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    WelcomeComponent,
    ApplicationParametersComponent,
    InscriptionComponent
  ],
  imports: [
    AppRoutingModule,
    SharedModule,
    CustomerModule,
    DevExtremeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我的组件中发现我正在使用 DevExtremeModule 中的 dataGrid 小部件：

MyComponent.ts：

import {Component, OnInit} from '@angular/core';
import {Response, Http} from '@angular/http';
import {Inject, Injectable} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs/Rx';
import {Router} from '@angular/router';
import {Input, ContentChildren, ViewChild, QueryList} from '@angular/core';
import {HttpService} from './../../../shared/service';
import {SessionService} from './../../../shared/service';
import {Customer, TableState, StateCustomer} from './../../../model';
import {DxDataGridComponent} from 'devextreme-angular';


@Component({
  selector: 'app-MyComponent',
  templateUrl: './MyComponent.component.html',
  styleUrls: ['./MyComponent.component.css']
})
export class MyComponentComponent implements OnInit {
  @ViewChild(DxDataGridComponent) grid: DxDataGridComponent;

  customersList: Customer[];
  error: string;
  StateCustomer = StateCustomer; 
  Customer = Customer; /
  private dataGridConfig: any;

  constructor(private http: HttpService,
              private sessionService: SessionService,
              private router: Router,
  ) {
    this.tableStateSave = this.tableStateSave.bind(this);

    const url = this.http.wsCustomer
      .concat('getAll/')
      .concat('0/')
      .concat('999999/')
      .concat('null/')
      .concat('null');
    this.http.get(url)
      .map((response: Response) => response.json().map((jsonItem) => Customer.parseJson(jsonItem)))
      .subscribe(
        (customers: Customer[]) => this.customersList = customers,
        (error: Response) => console.error(error)
      );

    // Récupération état grid
    const urlStateGrid = this.http.wsSession
      .concat('tableStateLoad/')
      .concat(TableState.convertIdStringTableToInt('customersTable')
        .toString());
    this.http.get(urlStateGrid, false)
      .map((result: Response) => JSON.parse(result.json()))
      .subscribe(
        (tableConfig: any) => {
          this.dataGridConfig = tableConfig;
          this.tableStateLoad = this.tableStateLoad.bind(this);
        }
      );
  }

  create(): void {
    this.router.navigate(['/customer-detail']);
  }

  view(customer: Customer): void {
    this.router.navigate(['/customer-detail/'.concat(customer.id.toString())]);
  }

  delete(customer: Customer): void {
    const url = this.http.wsCustomer
      .concat('delete/')
      .concat(customer.id.toString())
      .concat('/')
      .concat(customer.version.toString()
      );

    this.http.delete(url).subscribe(
      this.customersList.splice(this.customersList.indexOf(customer), 1);
      () => null,
      (error: Response) => console.error(error)
    );
  }

  tableStateSave(gridState: object): void {

    this.saveState(gridState);
  }

  manualSave() {
    const detectedState = this.grid.instance.state();

    this.saveState(detectedState);
  }
  saveState(state) {
    const url = this.http.wsSession.concat('tableStateSave');
    const tableState = new TableState();
    tableState.idTable = TableState.convertIdStringTableToInt('customersTable');
    tableState.state = JSON.stringify(state);

    this.http.put(url, tableState, false).subscribe(
      () => null,
      (error: Response) => console.error(error)
    );
  }


  tableStateLoad(): any {
    return this.dataGridConfig;
  }
}

MyComponent.html：

<button (click)="create()" id="buttonCreate" class="btn btn-secondary rightFloat">Créer</button><br><br>
<button (click)="manualSave()" class="btn btn-secondary">Save state</button>

<dx-data-grid
    id="customersTable"
    [dataSource]="customersList"
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true"
    [columnMinWidth]="50"
    [showBorders]="true"
    [rowAlternationEnabled]="true"
    [hoverStateEnabled]="true"
    (onRowRemoving)="delete($event.data)"
    (onRowClick)="view($event.data)"
>
    <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
    <dxo-search-panel [visible]="true" placeholder="Rechercher"></dxo-search-panel>
    <dxo-selection mode="single"></dxo-selection>

    <dxo-state-storing [enabled]="true" type="custom" savingTimeout="900000" [customSave]="tableStateSave" [customLoad]="tableStateLoad"></dxo-state-storing>

    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 50, 100]" [showInfo]="true"></dxo-pager>
    <dxo-editing mode="row" [allowDeleting]="true"></dxo-editing>
    <dxo-export [enabled]="true" fileName="Mes clients"></dxo-export>
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxo-group-panel [visible]="true"></dxo-group-panel>
    <dxo-grouping #expand [autoExpandAll]="true"></dxo-grouping>

    <dxi-column dataField="id" caption="Id" [width]="30"></dxi-column>
    <dxi-column dataField="name1" caption="Nom 1" [width]="150"></dxi-column>
    <dxi-column dataField="name2" caption="Nom 2" [width]="150"></dxi-column>
    <dxi-column dataField="email" caption="Email" [width]="300"></dxi-column>
    <dxi-column dataField="dateCreated" caption="Date création" [width]="100" dataType="date" format="dd/MM/yyyy"></dxi-column>
    <dxi-column dataField="dateUpdated" caption="Date modification" [width]="100" dataType="date" format="dd/MM/yyyy"></dxi-column>
    <dxi-column dataField="state" caption="Etat" [width]="30" cellTemplate="cellTemplate_stateCustomer"></dxi-column>

    <div *dxTemplate="let data of 'cellTemplate_stateCustomer'">
        <span *ngIf="data.value == StateCustomer.BLOCKED">{{ Customer.getStateCustomer(StateCustomer.BLOCKED) }}</span>
        <span *ngIf="data.value == StateCustomer.ALLOWED">{{ Customer.getStateCustomer(StateCustomer.ALLOWED) }}</span>
    </div>

运行我的测试（spec文件）时

关于devExtreme语法的上帝错误，我认为相对于我的devExtreme模块导入，通常是任何其他库，

我的错误如下：

  

无法绑定到'dxTemplateOf'，因为它不是'div'的已知属性。   （“tate”caption =“Etat”[width] =“30”   cellTemplate = “cellTemplate_stateCustomer” ＆GT;         ] * dxTemplate =“让'cellTemplate_stateCustomer''的数据＆gt;                      [错误 - ＆gt;]             HTTP：//本地主机：9877webpack：///~/@angular/compiler/@angular/compiler.es5.js：1690：21   ＆lt; - src / test.ts:114544:34）         在TemplateParser.Array.concat.TemplateParser.parse（http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:12814:0   ＆lt; - src / test.ts:125668:19）         在JitCompiler.Array.concat.JitCompiler._compileTemplate（http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26966:0   ＆lt; - src / test.ts:139820:39）         在http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:47   ＆lt; - src / test.ts:139740:62         at Set.forEach（native）         在JitCompiler.Array.concat.JitCompiler._compileComponents（http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:0   ＆lt; - src / test.ts:139740:19）         在http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26787:0   ＆lt; - src / test.ts:139641:19         在Object.then（http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1679:32   ＆lt; - src / test.ts:114533：148）         在JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents   （http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26785:0   ＆lt; - src / test.ts:139639:26）         在JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsAsync   （http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26717:0   ＆lt; - src / test.ts:139571:37）错误：模板解析错误：无法绑定   到'dxTemplateOf'，因为它不是'div'的已知属性。 （“大老”   caption =“Etat”[宽度] =“30”   cellTemplate = “cellTemplate_stateCustomer” ＆GT;         ] * dxTemplate =“让'cellTemplate_stateCustomer''的数据＆gt;                      [错误 - ＆gt;]             HTTP：//本地主机：9877webpack：///~/@angular/compiler/@angular/compiler.es5.js：1690：21   ＆lt; - src / test.ts:114544:34）         在TemplateParser.Array.concat.TemplateParser.parse（http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:12814:0   ＆lt; - src / test.ts:125668:19）         在JitCompiler.Array.concat.JitCompiler._compileTemplate（http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26966:0   ＆lt; - src / test.ts:139820:39）         在http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:47   ＆lt; - src / test.ts:139740:62         at Set.forEach（native）         在JitCompiler.Array.concat.JitCompiler._compileComponents（http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:0   ＆lt; - src / test.ts:139740:19）         在http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26787:0   ＆lt; - src / test.ts:139641:19         在Object.then（http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1679:32   ＆lt; - src / test.ts:114533：148）         在JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents   （http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26785:0   ＆lt; - src / test.ts:139639:26）         在JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsSync   （http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26709:0   ＆lt; - src / test.ts:139563:42）预期未定义为真实。         在对象。 （http://localhost:9877webpack:///src/app/customer/customers-list/customers-list.component.spec.ts:25:22   ＆lt; - src / test.ts:232248:27）         在ZoneDelegate.invoke（http://localhost:9877webpack:///~/zone.js/dist/zone.js:391:0＆lt; -   SRC / polyfills.ts：1546：26）         在ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke（http://localhost:9877webpack:///~/zone.js/dist/proxy.js:79:0＆lt; -   SRC / test.ts：228722：39）         在ZoneDelegate.invoke（http://localhost:9877webpack:///~/zone.js/dist/zone.js:390:0＆lt; -   SRC / polyfills.ts：1545：32）

我需要针对此类问题的一般解决方案，因为我认为我应该找到一种方法将我的模块正确导入我的测试文件，类似于我的项目组件：

有什么建议吗？