Erreur d'essai angulaire de 4 unités-défaut d'exécuter 'send' on 'XMLHttpRequest': défaut de charger 'ng:///DynamicTestModule/LoginComponent.ngfactory.js'
j'écris quelques tests unitaires pour mon composant et je reçois ce message d'erreur cryptique. J'ai trouvé une question similaire à Angulaire 2 unité d'essai - erreur Failed to load 'ng:///DynamicTestModule/module.ngfactory.js' mais les réponses ne m'aide pas à résoudre mon problème. Je suis angulaire 4.3.2
voici le composant pour lequel j'écris le test:
import {Component} from '@angular/core';
import {Router} from '@angular/router';
import {NotificationService} from '../common/notification/notification.service';
import {SessionService} from '../common/session/session.service';
import {Login} from './login.model';
@Component({
selector: 'cc-login-form',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
export class LoginComponent {
model: Login = new Login('', '');
constructor(private sessionService: SessionService,
private router: Router,
private notificationService: NotificationService) {
}
onSubmit() {
this.sessionService
.login(this.model.email, this.model.password)
.subscribe(
sessionInfo => {
this.notificationService.showSuccess('notification.successfully.logged.in');
this.router.navigate([`/cc/list`]);
},
error => this.notificationService.showError('notification.invalid.login')
);
}
}
et voici le fichier test:
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';
import {Router} from '@angular/router';
import {TranslateModule, TranslateService} from '@ngx-translate/core';
import {NotificationService} from '../common/notification/notification.service';
import {NotificationServiceStub} from '../common/notification/tests/NotificationServiceStub';
import {SessionService} from '../common/session/session.service';
import {SessionServiceStub} from '../common/session/tests/SessionServiceStub';
import {RouterStub} from '../common/tests/RouterStub';
import {TranslateServiceStub} from '../common/translate/tests/TranslateServiceStub';
import {LoginComponent} from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
TranslateModule
],
declarations: [LoginComponent],
providers: [
{provide: SessionService, useClass: SessionServiceStub},
{provide: Router, useClass: RouterStub},
{provide: NotificationService, useClass: NotificationServiceStub},
{provide: TranslateService, useClass: TranslateServiceStub},
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
lors de l'exécution du test, j'obtiens ce qui suit sur la console chrome:
zone.js:2642 XMLHttpRequest cannot load ng:///DynamicTestModule/LoginComponent.ngfactory.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ zone.js:2642
zone.js:195 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/LoginComponent.ngfactory.js'.
at http://localhost:9876/_karma_webpack_/webpack:/Users/pedrompg/Documents/quandoo/fe/chains-center/~/zone.js/dist/zone.js:2642:1
at XMLHttpRequest.proto.(anonymous function) [as send] (
Quelqu'un peut m'aider avec ça?
EDIT - 1 Voici les services / stubs implementation
SessionServiceStub
export class SessionServiceStub implements ISessionService {
login(login: string, password: string): Observable<any> {
return Observable.of({merchantId: 123});
}
logout(): Observable<any> {
throw new Error('Method not implemented.');
}
validateSessionToken(): Observable<any> {
throw new Error('Method not implemented.');
}
}
SessionService
@Injectable()
export class SessionService implements ISessionService {
constructor(private http: CcHttpClient, private router: Router, private localSessionService: LocalSessionService) {
}
login(login: string, password: string): Observable<any> {
return this.http.post(`api/sessions`, {login: login, password: password}).map((res: Object) => {
this.localSessionService.createSession(res);
return res;
});
}
}
RouterStub
export class RouterStub {
navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> {
return Promise.resolve(true);
};
}
TranslationServiceStub
export class TranslateServiceStub {
instant(key: string | Array<string>, interpolateParams?: Object): string | any {
return 'translation';
};
}
NotificationServiceStub
export class NotificationServiceStub implements INotificationService {
showToast(type, text, title, defaultTitle): Promise<Toast> {
return Promise.resolve(null);
}
showSuccess(msg, title?): Promise<Toast> {
return Promise.resolve(null);
}
showError(msg, title?): Promise<Toast> {
return Promise.resolve(null);
}
}
EDIT 2 Changer ma configuration de banc D'essai pour la suivante a éliminé l'erreur mais en a apporté une nouvelle:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpTranslateLoaderFactory,
deps: [HttpClient]
}
})
],
declarations: [LoginComponent],
providers: [
{provide: SessionService, useClass: SessionServiceStub},
{provide: Router, useClass: RouterStub},
{provide: NotificationService, useClass: NotificationServiceStub},
]
})
.compileComponents();
}));
maintenant le message d'erreur est
TypeError: Cannot read property 'assertPresent' of undefined
at resetFakeAsyncZone home/pedrompg/Documents/quandoo/fe/chains-center/~/@angular/core/@angular/core/testing.es5.js:304:1)
at Object.<anonymous> home/pedrompg/Documents/quandoo/fe/chains-center/~/@angular/core/@angular/core/testing.es5.js:1001:1)
at ZoneQueueRunner.webpackJsonp.../../../../zone.js/dist/jasmine-patch.js.jasmine.QueueRunner.ZoneQueueRunner.execute home/pedrompg/Documents/quandoo/fe/chains-center/~/zone.js/dist/jasmine-patch.js:132:1)
qui se produit à cette fonction:
function resetFakeAsyncZone() {
_fakeAsyncTestZoneSpec = null;
ProxyZoneSpec.assertPresent().resetDelegate(); //ProxyZoneSpec is undefined here for whatever reason
}
4 réponses
il s'agit d'un problème avec la Angular Cli
version 1.2.2 ou plus récente . Exécutez votre test avec --sourcemaps=false
et vous obtiendrez les bons messages d'erreur.
ng test --sourcemaps=false
MODIFIER
raccourci est la suivante:
ng test-sm=false
voir les détails ici: https://github.com/angular/angular-cli/issues/7296
je viens de tomber sur cette erreur et le problème était mes moqueries. Dans le composant.ngOnInit j'ai utilisé ce.route.paramMap.abonner.(..) où route est une instance de route activée
dans mon test j'ai fourni un service simulé comme ceci:
providers: [
{ provide: ActivatedRoute, useValue: { snapshot: { params: { id: 1 } } } }
]
et en fait j'ai manqué de moquer la méthode paramMap
puis je le fixe en ajoutant des propriétés paramMap comme ceci
providers: [
{ provide: ActivatedRoute, useValue: { snapshot: { params: { id: 1 } }, paramMap: Observable.of({get: () => 1}) } }
]
Alors je n'ai plus cette erreur stupide.
donc pour vous, je m'attends à ce que la classe SessionServiceStub soit incomplète ou erronée. Obtient-il une méthode de connexion qui renvoie un Observable ?
si ce n'est pas le problème, vous pouvez consulter le service des notifications
, Vous devez utiliser un débogueur (avec Webstorm il est facile de déboguer étape par étape pour vous aider.
poursuit ça depuis des heures. Finalement découvert que le problème était simplement que j'avais importé HttpClientModule,
, mais pas HttpClient
:
import { HttpClient, HttpClientModule } from '@angular/common/http';
toutes ces erreurs CORS, et '[Script Loader]', DOMException{stack: 'Error: Failed to execute 'send' on 'XMLHttpRequest'
stuff, et il s'est avéré tout simplement ne pas avoir HttpClient!
j'ai rencontré le même problème en utilisant angular-cli 6, donc pour obtenir le bon message d'erreur on devrait utiliser ce qui suit:
ng test --source-map=false
peut-être cela aidera quelqu'un :) .