Ошибка: невозможно связать с 'ngModel', так как это не известное свойство - PullRequest
Новая
       11

Ошибка: невозможно связать с 'ngModel', так как это не известное свойство

0 голосов
/ 15 мая 2018

В начале у меня есть вопрос, если тестирование с Жасмином должно быть таким сложным?Приложение прекрасно работает при компиляции, но когда я тестирую его, здесь появляется миллион ошибок, подобных этой.Я прочитал любой возможный ресурс об импорте 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!');
            }));
        });
    });
Если я тестирую другой шаблон HTML, на котором есть только метка Visible, тесты работают отлично.Когда я пытаюсь проверить HTML-файл, который находится ниже, он дает мне ошибку ввода.Это HTML-файл: 

<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()">&times;</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:

Я знаю, что читать это очень сложно, но я пробовал любое другое решение и не смог ничего протестировать в течение одного месяца на предмет ошибок, которыедает угловой.Спасибо, что прочитали это.

1 Ответ

0 голосов
/ 15 мая 2018 
- 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, поэтому вместо них укажите свои собственные имена).

...