如果用Jasmine进行测试应该如此困难，那么我在开始时会有一个问题吗？该应用程序在编译时非常有效，但是当我测试它时，这里出现了一百万个错误。我已经阅读了有关在angular中导入FormsModule的任何可能的资源。
我有这个组件：
import { Component, OnInit, OnDestroy, ViewChild, ElementRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager, JhiAlertService } from 'ng-jhipster';
import { Paciente } from './paciente.model';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'jhi-paciente-dialog',
template: require('./paciente-dialog.component.html'),
styleUrls: [
'paciente.css'
],
})
export class PacienteDialogComponent implements OnInit {
@ViewChild('hiddenLabel') hidden: ElementRef; //the element that I am gonna test
/* tslint:disable max-line-length */
import { ComponentFixture, TestBed, async, inject, fakeAsync, tick } from '@angular/core/testing';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { PacienteDialogComponent } from '../../../../../../main/webapp/app/entities/paciente/paciente-dialog.component';
import { HttpResponse } from '@angular/common/http';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs/Observable';
import { JhiEventManager } from 'ng-jhipster';
import { OncosupTestModule } from '../../../test.module';
import { Paciente } from '../../../../../../main/webapp/app/entities/paciente/paciente.model';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
describe('Component Tests', () => {
describe('Paciente Management Dialog Component', () => {
let comp: PacienteDialogComponent;
let fixture: ComponentFixture<PacienteDialogComponent>;
//const service: PacienteService; //let
//const mockEventManager: any; //let
//const mockActiveModal: any; //let
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [OncosupTestModule],
declarations: [PacienteDialogComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PacienteDialogComponent);
comp = fixture.componentInstance;
});
fit ('first test', async(() => {
console.log('holaaa THIS IS SPARTA '); expect(comp.hidden.nativeElement.innerHTML).toContain('Visible!');
}));
});
});
<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
<div class="modal-header">
<h4 class="modal-title" id="myPacienteLabel" jhiTranslate="oncosupApp.paciente.home.createOrEditLabel">Create or edit a Paciente</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
(click)="clear()">×</button>
</div>
<div class="modal-body">
<jhi-alert-error></jhi-alert-error>
<div class="half-block">
<div class="form-group half-item">
<label #hiddenLabel class="form-control-label" jhiTranslate="oncosupApp.paciente.nombre" for="field_nombre">Nombre</label>
<input type="text" class="form-control" name="nombre" id="field_nombre"
[(ngModel)]="paciente.nombre" required/>
<div [hidden]="!(editForm.controls.nombre?.dirty && editForm.controls.nombre?.invalid)">
<small class="form-text text-danger"
[hidden]="!editForm.controls.nombre?.errors?.required" jhiTranslate="entity.validation.required">
This field is required.
</small>
</div>
</div>
这是我的submodule.ts：
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OncosupSharedModule } from '../../shared';
import { CommonModule } from '@angular/common';
import {
PacienteService,
PacientePopupService,
PacienteComponent,
PacienteDetailComponent,
PacienteDialogComponent,
PacientePopupComponent,
PacienteDeletePopupComponent,
PacienteDeleteDialogComponent,
pacienteRoute,
pacientePopupRoute,
PacienteResolvePagingParams,
} from './';
const ENTITY_STATES = [
...pacienteRoute,
...pacientePopupRoute,
];
@NgModule({
imports: [
OncosupSharedModule,
FormsModule,
BrowserModule,
ReactiveFormsModule,
RouterModule.forChild(ENTITY_STATES)
],
declarations: [
PacienteComponent,
PacienteDetailComponent,
PacienteDialogComponent,
PacienteDeleteDialogComponent,
PacientePopupComponent,
PacienteDeletePopupComponent,
],
entryComponents: [
PacienteComponent,
PacienteDialogComponent,
PacientePopupComponent,
PacienteDeleteDialogComponent,
PacienteDeletePopupComponent,
],
providers: [
PacienteService,
PacientePopupService,
PacienteResolvePagingParams,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class OncosupPacienteModule {}
我的app.module.ts
import './vendor.ts';
import { NgModule, Injector, ElementRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { Ng2Webstorage } from 'ngx-webstorage';
import { JhiEventManager } from 'ng-jhipster';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor';
import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor';
import { OncosupSharedModule, UserRouteAccessService } from './shared';
import { OncosupAppRoutingModule} from './app-routing.module';
import { OncosupHomeModule } from './home/home.module';
import { OncosupAdminModule } from './admin/admin.module';
import { OncosupAccountModule } from './account/account.module';
import { OncosupEntityModule } from './entities/entity.module';
import { PaginationConfig } from './blocks/config/uib-pagination.config';
import { StateStorageService } from './shared/auth/state-storage.service';
// jhipster-needle-angular-add-module-import JHipster will add new module here
import {
JhiMainComponent,
NavbarComponent,
FooterComponent,
ProfileService,
PageRibbonComponent,
ActiveMenuDirective,
ErrorComponent
} from './layouts';
@NgModule({
imports: [
BrowserModule,
OncosupAppRoutingModule,
Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),
OncosupSharedModule,
OncosupHomeModule,
OncosupAdminModule,
OncosupAccountModule,
OncosupEntityModule,
FormsModule,
ReactiveFormsModule,
// jhipster-needle-angular-add-module JHipster will add new module here
],
declarations: [
JhiMainComponent,
NavbarComponent,
ErrorComponent,
PageRibbonComponent,
ActiveMenuDirective,
FooterComponent
],
providers: [
ProfileService,
PaginationConfig,
UserRouteAccessService,
{
provide: HTTP_INTERCEPTORS,
useClass: AuthExpiredInterceptor,
multi: true,
deps: [
StateStorageService,
Injector
]
},
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorHandlerInterceptor,
multi: true,
deps: [
JhiEventManager
]
},
{
provide: HTTP_INTERCEPTORS,
useClass: NotificationInterceptor,
multi: true,
deps: [
Injector
]
}
],
bootstrap: [ JhiMainComponent ]
})
export class OncosupAppModule {}
这是输出错误：
webpack: Compiling...
[at-loader] Checking started in a separate process...
[at-loader] Ok, 1.7 sec.
Hash: d6582b121edcc8bb2f2a
Version: webpack 3.10.0
Time: 13069ms
Asset Size Chunks Chunk Names
spec/entry.ts 23.3 MB 0 [big] spec/entry.ts
[111] ./node_modules/@angular/core/esm5/testing.js 49.6 kB {0}
[278] ./node_modules/rxjs/Rx.js 9.79 kB {0}
[563] ./src/test/javascript/spec/entry.ts 853 bytes {0}
[564] ./node_modules/core-js/index.js 639 bytes {0}
[752] ./node_modules/zone.js/dist/zone.js 129 kB {0}
[753] ./node_modules/zone.js/dist/long-stack-trace-zone.js 6.16 kB {0}
[754] ./node_modules/zone.js/dist/async-test.js 3.23 kB {0}
[755] ./node_modules/zone.js/dist/fake-async-test.js 19.6 kB {0}
[756] ./node_modules/zone.js/dist/sync-test.js 1.41 kB {0}
[757] ./node_modules/zone.js/dist/proxy.js 5.6 kB {0}
[758] ./node_modules/zone.js/dist/jasmine-patch.js 6.5 kB {0}
[801] ./node_modules/rxjs/add/observable/onErrorResumeNext.js 263 bytes {0}
[1023] ./node_modules/intl/locale-data/jsonp/en-US.js 24 kB {0}
[1024] ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js 17.9 kB {0}
[1028] ./src/test/javascript/spec \.spec 455 bytes {0} [built]
+ 1169 hidden modules
WARNING in ./node_modules/@angular/core/esm5/core.js
6541:15-36 Critical dependency: the request of a dependency is an expression
@ ./node_modules/@angular/core/esm5/core.js
@ ./node_modules/@angular/platform-browser/esm5/platform-browser.js
@ ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js
@ ./src/test/javascript/spec/entry.ts
WARNING in ./node_modules/@angular/core/esm5/core.js
6561:15-102 Critical dependency: the request of a dependency is an expression
@ ./node_modules/@angular/core/esm5/core.js
@ ./node_modules/@angular/platform-browser/esm5/platform-browser.js
@ ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js
@ ./src/test/javascript/spec/entry.ts
webpack: Compiled with warnings.
......
There is no directive with "exportAs" set to "ngForm" ("<form name="editForm" role="form" novalidate (ngSubmit)="save()" [ERROR ->]#editForm="ngForm">
<div class="modal-header">
<h4 class="modal-title" id="myPacienteLa"): ng:///DynamicTestModule/PacienteDialogComponent.html@0:66
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" name="nombre" id="field_nombre"
[ERROR ->][(ngModel)]="paciente.nombre" required/>
<div [hidden]="!(editForm.controls.nombre?.dir"): ng:///DynamicTestModule/PacienteDialogComponent.html@12:17
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" name="apellidos"
id="field_apellidos"
[ERROR ->][(ngModel)]="paciente.apellidos" required/>
<div [hidden]="!(editForm.controls.apellido"): ng:///DynamicTestModule/PacienteDialogComponent.html@24:17
There is no directive with "exportAs" set to "ngbDatepicker" ("t id="field_fechaNacimiento" type="text" class="form-control" name="fechaNacimiento" ngbDatepicker [ERROR ->]#fechaNacimientoDp="ngbDatepicker" [(ngModel)]="paciente.fechaNacimiento"
required/"): ng:///DynamicTestModule/PacienteDialogComponent.html@38:122
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("text" class="form-control" name="fechaNacimiento" ngbDatepicker #fechaNacimientoDp="ngbDatepicker" [ERROR ->][(ngModel)]="paciente.fechaNacimiento"
required/>
<span class="in"): ng:///DynamicTestModule/PacienteDialogComponent.html@38:157
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("paciente.sexo" for="field_sexo">Sexo</label>
<select class="form-control" name="sexo" [ERROR ->][(ngModel)]="paciente.sexo" id="field_sexo" required>
<option value="VARON">{{'onc"): ng:///DynamicTestModule/PacienteDialogComponent.html@53:54
The pipe 'translate' could not be found ("o" [(ngModel)]="paciente.sexo" id="field_sexo" required>
<option value="VARON">{{[ERROR ->]'oncosupApp.Sexo.VARON' | translate}}</option>
<option value="MUJER">{{'oncosupApp."): ng:///DynamicTestModule/PacienteDialogComponent.html@54:41
The pipe 'translate' could not be found ("="VARON">{{'oncosupApp.Sexo.VARON' | translate}}</option>
<option value="MUJER">{{[ERROR ->]'oncosupApp.Sexo.MUJER' | translate}}</option>
</select>
<div [hidden]="!"): ng:///DynamicTestModule/PacienteDialogComponent.html@55:41
Can't bind to 'ngModel' since it isn't a known property of 'input'. (">
<input type="text" class="form-control" name="nhc" id="field_nhc"
[ERROR ->][(ngModel)]="paciente.nhc" maxlength="38" pattern="[0-9]+"/>
<div [hidden]="!(editForm."): ng:///DynamicTestModule/PacienteDialogComponent.html@70:17
Can't bind to 'ngModel' since it isn't a known property of 'input'. (">
<input type="text" class="form-control" name="nss" id="field_nss"
[ERROR ->][(ngModel)]="paciente.nss" maxlength="20"/>
<div [hidden]="!(editForm.controls.nss?.dir"): ng:///DynamicTestModule/PacienteDialogComponent.html@85:17
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("e="text" class="form-control" name="tarjetaSanitaria" id="field_tarjetaSanitaria"
[ERROR ->][(ngModel)]="paciente.tarjetaSanitaria" maxlength="20"/>
<div [hidden]="!(editForm.cont"): ng:///DynamicTestModule/PacienteDialogComponent.html@99:17
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
<input type="text" class="form-control" name="cipa" id="field_cipa"
[ERROR ->][(ngModel)]="paciente.cipa" maxlength="20"/>
<div [hidden]="!(editForm.controls.cipa?.d"): ng:///DynamicTestModule/PacienteDialogComponent.html@110:17
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" name="telefono" id="field_telefono"
[ERROR ->][(ngModel)]="paciente.telefono" />
</div>
<div class="form-group half-item">
"): ng:///DynamicTestModule/PacienteDialogComponent.html@125:17
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" class="form-control" name="email" id="field_email"
[ERROR ->][(ngModel)]="paciente.email" />
</div>
</div>
"): ng:///DynamicTestModule/PacienteDialogComponent.html@130:17
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("d</label>
<select class="form-control" id="field_nacionalidad" name="nacionalidad" [ERROR ->][(ngModel)]="paciente.nacionalidadId" >
<option value="null"></option>
"): ng:///DynamicTestModule/PacienteDialogComponent.html@137:89
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("field_etnia">Etnia</label>
<select class="form-control" id="field_etnia" name="etnia" [ERROR ->][(ngModel)]="paciente.etniaId" >
<option value="null"></option>
<"): ng:///DynamicTestModule/PacienteDialogComponent.html@144:72
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("ld_comunidadActual" name="comunidadActual" (change)="onComunidadActual(paciente.comunidadActualId)" [ERROR ->][(ngModel)]="paciente.comunidadActualId" >
<option value="null"></option>
"): ng:///DynamicTestModule/PacienteDialogComponent.html@155:149
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("label>
<select class="form-control" id="field_provinciaActual" name="provinciaActual" [ERROR ->][(ngModel)]="paciente.provinciaActualId" >
<option value="null"></option>
"): ng:///DynamicTestModule/PacienteDialogComponent.html@162:92
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("ico" name="comunidadDiagnostico" (change)="onComunidadDiagnostico(paciente.comunidadDiagnosticoId)" [ERROR ->][(ngModel)]="paciente.comunidadDiagnosticoId" >
<option value="null"></option>
"): ng:///DynamicTestModule/PacienteDialogComponent.html@171:172
Can't bind to 'ngModel' since it isn't a known property of 'select'. (" <select class="form-control" id="field_provinciaDiagnostico" name="provinciaDiagnostico" [ERROR ->][(ngModel)]="paciente.provinciaDiagnosticoId" >
<option value="null"></option>
"): ng:///DynamicTestModule/PacienteDialogComponent.html@178:105
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("tal">Hospital</label>
<select class="form-control" id="field_hospital" name="hospital" [ERROR ->][(ngModel)]="paciente.hospitalId" >
<option value="null"></option>
"): ng:///DynamicTestModule/PacienteDialogComponent.html@186:77
Error: Template parse errors:
at syntaxError (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:485:21 <- spec/entry.ts:63150:34)
at TemplateParser.parse (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:24661:0 <- spec/entry.ts:87326:19)
at JitCompiler._parseTemplate (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34601:0 <- spec/entry.ts:97266:37)
at JitCompiler._compileTemplate (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34576:0 <- spec/entry.ts:97241:23)
at http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34477:47 <- spec/entry.ts:97142:62
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34477:0 <- spec/entry.ts:97142:19)
at http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34365:0 <- spec/entry.ts:97030:19
at Object.then (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:474:32 <- spec/entry.ts:63139:77)
at JitCompiler._compileModuleAndAllComponents (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34363:0 <- spec/entry.ts:97028:26)
Error: Template parse errors:
我知道这是一个很大的阅读，但我已经尝试过任何其他解决方案，而且我还没有能够在一个月内测试任何有关角度的错误。 感谢您阅读本文。
答案 0 :(得分：4)
- There is no directive with "exportAs" set to "ngForm" ([ERROR ->]#editForm="ngForm">)
- Can't bind to 'ngModel' since it isn't a known property of XXX
- There is no directive with "exportAs" set to "ngbDatepicker" ([ERROR ->]#fechaNacimientoDp="ngbDatepicker")
- The pipe 'translate' could not be found ([ERROR ->]'oncosupApp.Sexo.VARON' | translate)
这些都是同样的错误;看到你的测试，我知道你为什么会有这些错误。你说
我已阅读任何有关以角度
导入FormsModule的资源
但似乎你没有采取行动;这是您的测试平台配置：
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [OncosupTestModule],
declarations: [PacienteDialogComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
}).compileComponents();
}));
注意你根本不应付你的模块：
@NgModule({
imports: [
OncosupSharedModule,
FormsModule,
BrowserModule,
ReactiveFormsModule,
RouterModule.forChild(ENTITY_STATES)
],
declarations: [
PacienteComponent,
PacienteDetailComponent,
PacienteDialogComponent,
PacienteDeleteDialogComponent,
PacientePopupComponent,
PacienteDeletePopupComponent,
],
entryComponents: [
PacienteComponent,
PacienteDialogComponent,
PacientePopupComponent,
PacienteDeleteDialogComponent,
PacienteDeletePopupComponent,
],
providers: [
PacienteService,
PacientePopupService,
PacienteResolvePagingParams,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class OncosupPacienteModule {}
测试床应该镜像您的模块配置：当您想要使用库时，首先必须导入相应的模块，对吧？
对于测试来说，它是一样的。不同的是，测试是隔离的，这意味着您必须导入组件的所有依赖项而不是模块。
如果要正确配置测试平台，则需要满足要求。
您的测试平台应如下所示，以防止出现这些错误：
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [OncosupTestModule, FormsModule, DatePickerModule],
declarations: [PacienteDialogComponent, TranslatePipe],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
}).compileComponents();
}));
（我不知道DatePickerModule或TranslatePipe的名字，所以请用自己的名字代替它。