title: Angular Unit Testing with Karma Jasmine : Test Imported librariries
body: <p>Am new on Angular unit testing .</p>
  
  <p>I started by generating the basic unit test for each of my component : the test of the component creation :</p>
  
  <p><strong>MyComponent.spec.ts</strong> </p>
  
  <pre><code>beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ MyComponent ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(MyComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  </code></pre>
  
  <p>To make that test works , as i notice , i should declare and imprts all my used libs and files.</p>
  
  <p>in my case : i'm using <strong>DevExtreme</strong> UI Widgets in all my projet parts , i imported it globally:</p>
  
  <p><strong>app.module.ts :</strong> (last import)</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>fo exaple in my component i'm using a <strong>dataGrid</strong> widget from the <strong>DevExtremeModule</strong>:</p>
  
  <p><strong>MyComponent.ts :</strong> </p>
  
  <pre><code>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) =&gt; response.json().map((jsonItem) =&gt; Customer.parseJson(jsonItem)))
        .subscribe(
          (customers: Customer[]) =&gt; this.customersList = customers,
          (error: Response) =&gt; 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) =&gt; JSON.parse(result.json()))
        .subscribe(
          (tableConfig: any) =&gt; {
            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);
        () =&gt; null,
        (error: Response) =&gt; 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(
        () =&gt; null,
        (error: Response) =&gt; console.error(error)
      );
    }
  
  
    tableStateLoad(): any {
      return this.dataGridConfig;
    }
  }
  </code></pre>
  
  <p><strong>MyComponent.html:</strong></p>
  
  <pre><code>&lt;button (click)="create()" id="buttonCreate" class="btn btn-secondary rightFloat"&gt;Créer&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  &lt;button (click)="manualSave()" class="btn btn-secondary"&gt;Save state&lt;/button&gt;
  
  &lt;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)"
  &gt;
      &lt;dxo-column-chooser [enabled]="true"&gt;&lt;/dxo-column-chooser&gt;
      &lt;dxo-column-fixing [enabled]="true"&gt;&lt;/dxo-column-fixing&gt;
      &lt;dxo-search-panel [visible]="true" placeholder="Rechercher"&gt;&lt;/dxo-search-panel&gt;
      &lt;dxo-selection mode="single"&gt;&lt;/dxo-selection&gt;
  
      &lt;dxo-state-storing [enabled]="true" type="custom" savingTimeout="900000" [customSave]="tableStateSave" [customLoad]="tableStateLoad"&gt;&lt;/dxo-state-storing&gt;
  
      &lt;dxo-paging [pageSize]="10"&gt;&lt;/dxo-paging&gt;
      &lt;dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 50, 100]" [showInfo]="true"&gt;&lt;/dxo-pager&gt;
      &lt;dxo-editing mode="row" [allowDeleting]="true"&gt;&lt;/dxo-editing&gt;
      &lt;dxo-export [enabled]="true" fileName="Mes clients"&gt;&lt;/dxo-export&gt;
      &lt;dxo-filter-row [visible]="true"&gt;&lt;/dxo-filter-row&gt;
      &lt;dxo-group-panel [visible]="true"&gt;&lt;/dxo-group-panel&gt;
      &lt;dxo-grouping #expand [autoExpandAll]="true"&gt;&lt;/dxo-grouping&gt;
  
      &lt;dxi-column dataField="id" caption="Id" [width]="30"&gt;&lt;/dxi-column&gt;
      &lt;dxi-column dataField="name1" caption="Nom 1" [width]="150"&gt;&lt;/dxi-column&gt;
      &lt;dxi-column dataField="name2" caption="Nom 2" [width]="150"&gt;&lt;/dxi-column&gt;
      &lt;dxi-column dataField="email" caption="Email" [width]="300"&gt;&lt;/dxi-column&gt;
      &lt;dxi-column dataField="dateCreated" caption="Date création" [width]="100" dataType="date" format="dd/MM/yyyy"&gt;&lt;/dxi-column&gt;
      &lt;dxi-column dataField="dateUpdated" caption="Date modification" [width]="100" dataType="date" format="dd/MM/yyyy"&gt;&lt;/dxi-column&gt;
      &lt;dxi-column dataField="state" caption="Etat" [width]="30" cellTemplate="cellTemplate_stateCustomer"&gt;&lt;/dxi-column&gt;
  
      &lt;div *dxTemplate="let data of 'cellTemplate_stateCustomer'"&gt;
          &lt;span *ngIf="data.value == StateCustomer.BLOCKED"&gt;{{ Customer.getStateCustomer(StateCustomer.BLOCKED) }}&lt;/span&gt;
          &lt;span *ngIf="data.value == StateCustomer.ALLOWED"&gt;{{ Customer.getStateCustomer(StateCustomer.ALLOWED) }}&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When running my test (spec file)</p>
  
  <p>I god errors about the devExtreme syntax , i think that relative to my devExtreme module import , and generally any other library , </p>
  
  <p>My error is the following :</p>
  
  <blockquote>
    <p>Can't bind to 'dxTemplateOf' since it isn't a known property of 'div'.
    ("tate" caption="Etat" [width]="30"
    cellTemplate="cellTemplate_stateCustomer">
          ]*dxTemplate="let data of 'cellTemplate_stateCustomer'">
              
          [ERROR ->]
              http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1690:21
    &lt;- src/test.ts:114544:34)
          at TemplateParser.Array.concat.TemplateParser.parse (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:12814:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:12814:0</a>
    &lt;- src/test.ts:125668:19)
          at JitCompiler.Array.concat.JitCompiler._compileTemplate (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26966:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26966:0</a>
    &lt;- src/test.ts:139820:39)
          at <a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:47" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:47</a>
    &lt;- src/test.ts:139740:62
          at Set.forEach (native)
          at JitCompiler.Array.concat.JitCompiler._compileComponents (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:0</a>
    &lt;- src/test.ts:139740:19)
          at <a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26787:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26787:0</a>
    &lt;- src/test.ts:139641:19
          at Object.then (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1679:32" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1679:32</a>
    &lt;- src/test.ts:114533:148)
          at JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents
    (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26785:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26785:0</a>
    &lt;- src/test.ts:139639:26)
          at JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsAsync
    (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26717:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26717:0</a>
    &lt;- src/test.ts:139571:37)     Error: Template parse errors:   Can't bind
    to 'dxTemplateOf' since it isn't a known property of 'div'. ("tate"
    caption="Etat" [width]="30"
    cellTemplate="cellTemplate_stateCustomer">
          ]*dxTemplate="let data of 'cellTemplate_stateCustomer'">
              
          [ERROR ->]
              http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1690:21
    &lt;- src/test.ts:114544:34)
          at TemplateParser.Array.concat.TemplateParser.parse (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:12814:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:12814:0</a>
    &lt;- src/test.ts:125668:19)
          at JitCompiler.Array.concat.JitCompiler._compileTemplate (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26966:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26966:0</a>
    &lt;- src/test.ts:139820:39)
          at <a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:47" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:47</a>
    &lt;- src/test.ts:139740:62
          at Set.forEach (native)
          at JitCompiler.Array.concat.JitCompiler._compileComponents (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:0</a>
    &lt;- src/test.ts:139740:19)
          at <a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26787:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26787:0</a>
    &lt;- src/test.ts:139641:19
          at Object.then (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1679:32" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1679:32</a>
    &lt;- src/test.ts:114533:148)
          at JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents
    (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26785:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26785:0</a>
    &lt;- src/test.ts:139639:26)
          at JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsSync
    (<a href="http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26709:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26709:0</a>
    &lt;- src/test.ts:139563:42)     Expected undefined to be truthy.
          at Object. (<a href="http://localhost:9877webpack:///src/app/customer/customers-list/customers-list.component.spec.ts:25:22" rel="nofollow noreferrer">http://localhost:9877webpack:///src/app/customer/customers-list/customers-list.component.spec.ts:25:22</a>
    &lt;- src/test.ts:232248:27)
          at ZoneDelegate.invoke (<a href="http://localhost:9877webpack:///~/zone.js/dist/zone.js:391:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/zone.js/dist/zone.js:391:0</a> &lt;-
    src/polyfills.ts:1546:26)
          at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (<a href="http://localhost:9877webpack:///~/zone.js/dist/proxy.js:79:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/zone.js/dist/proxy.js:79:0</a> &lt;-
    src/test.ts:228722:39)
          at ZoneDelegate.invoke (<a href="http://localhost:9877webpack:///~/zone.js/dist/zone.js:390:0" rel="nofollow noreferrer">http://localhost:9877webpack:///~/zone.js/dist/zone.js:390:0</a> &lt;-
    src/polyfills.ts:1545:32)</p>
  </blockquote>
  
  <p>I need a general solution for such problems , because i think that i should find a way to import properly my modules to my test files similarly to my project components :</p>
  
  <p><strong>Any suggestions ??</strong></p>