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
}
20
demandé sur Pedro Garcia Mota 2017-08-07 19:03:13

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

28
répondu yugantar kumar 2017-10-21 06:48:37

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.

6
répondu Rebolon 2017-08-09 15:04:26

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!

1
répondu redOctober13 2018-03-22 17:11:23

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 :) .

1
répondu Tanmoy Bhattacharjee 2018-08-09 10:58:04