Угловое модульное тестирование с помощью Karma Jasmine: тестирование импортированных библиотек
Я новичок в угловом модульном тестировании.
Я начал с создания базового модульного теста для каждого моего компонента: теста создания компонента:
MyComponent.spec.ts
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
Чтобы сделать этот тест работоспособным, как я заметил, я должен объявить и импортировать все мои используемые библиотеки и файлы.
в моем случае: я использую виджеты 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 { }
Например, в моем компоненте я использую виджет dataGrid из DevExtremeModule:
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>
При запуске моего теста (файл спецификации)
Я бог ошибок в синтаксисе devExtreme, я думаю, что относительно моего импорта модуля devExtreme и вообще любой другой библиотеки,
Моя ошибка заключается в следующем:
Невозможно привязать к dxTemplateOf, так как это не известное свойство div. ("tate" caption="Etat" [width]="30" cellTemplate="cellTemplate_stateCustomer"> ]*dxTemplate="пустить данные для 'cellTemplate_stateCustomer'"> [ERROR ->] http: // localhost: 9877webpack: // /~/@angular/compiler/@angular/compiler.es5.js:1690:21<- src / test.ts: 114544: 34) в TemplateParser.Array.concat.TemplateParser.parse ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:12814:0 <- src / test.ts: 125668: 19) в JitCompiler.Array.concat.JitCompiler._compileTemplate ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26966:0 <- src / test.ts: 139820: 39) по адресу http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:47 <- src / test.ts: 139740: 62 в Set.forEach (родной) в JitCompiler.Array.concat.JitCompiler._compileComponents ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:0 <- src / test.ts: 139740: 19) по адресу http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26787:0 <- src / te st.ts: 139641: 19 в Object.then ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1679:32 <- src / test.ts: 114533: 148) на JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26785:0 <- src / test.ts: 139639: 26) в JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsAsync ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26717:0 <- src / test.ts: 139571: 37) Ошибка: ошибки синтаксического анализа шаблона: невозможно связать с dxTemplateOf, поскольку оно не является известным свойством div. ("tate" caption="Etat" [width]="30" cellTemplate="cellTemplate_stateCustomer"> ]*dxTemplate="пустить данные для 'cellTemplate_stateCustomer'"> [ERROR ->] http: // localhost: 9877webpack: // /~/@angular/compiler/@angular/compiler.es5.js:1690:21<- src / test.ts: 114544: 34) в TemplateParser.Array.concat.TemplateParser.parse ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:12814:0 <- src / test.ts: 125668: 19) в JitCompiler.Array.concat.JitCompiler._compileTemplate ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26966:0 <- src / test.ts: 139820: 39) по адресу http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:47 <- src / test.ts: 139740: 62 в Set.forEach (родной) в JitCompiler.Array.concat.JitCompiler._compileComponents ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26886:0 <- src / test.ts: 139740: 19) по адресу http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26787:0 <- src / te st.ts: 139641: 19 в Object.then ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:1679:32 <- src / test.ts: 114533: 148) на JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26785:0 <- src / test.ts: 139639: 26) в JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsSync ( http://localhost:9877webpack:///~/@angular/compiler/@angular/compiler.es5.js:26709:0 <- src / test.ts: 139563: 42) Ожидается, что неопределенное будет правдой. на объекте. ( http://localhost:9877webpack:///src/app/customer/customers-list/customers-list.component.spec.ts:25:22 <- src / test.ts: 232248: 27) в ZoneDelegate. вызвать ( http://localhost:9877webpack:///~/zone.js/dist/zone.js:391:0 <- src / polyfills.ts: 1546: 26) в ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke ( http://localhost:9877webpack:///~/zone.js/dist/proxy.js:79:0 <- src / test.ts: 228722: 39) в ZoneDelegate.invoke ( http://localhost:9877webpack:///~/zone.js/dist/zone.js:390:0 <- src / polyfills.ts: 1545: 32)
Мне нужно общее решение для таких проблем, потому что я думаю, что я должен найти способ правильно импортировать мои модули в мои тестовые файлы, аналогично компонентам моего проекта:
Какие-либо предложения??