web-dev-qa-db-fra.com

Erreur de test d'unité angulaire 4 - Échec d'exécution de 'l'envoi' sur 'XMLHttpRequest': Échec du chargement de 'ng: ///DynamicTestModule/LoginComponent.ngfactory.js'

J'écris des tests unitaires pour mon composant et j'obtiens ce message d'erreur cryptique. J'ai trouvé une question similaire dans Angular 2 unit testing - getting error. Echec du chargement de 'ng: ///DynamicTestModule/module.ngfactory.js' mais les réponses ne m'ont pas aidé à résoudre mon problème. Je suis angulaire 4.3.2

Voici le composant pour lequel je rédige 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 de 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 les éléments suivants 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 l'implémentation des services/stubs

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 Le fait de modifier ma configuration TestBed comme suit supprimait l'erreur mais en apportait 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)

Ce qui se passe à cette fonction:

function resetFakeAsyncZone() {
    _fakeAsyncTestZoneSpec = null;
    ProxyZoneSpec.assertPresent().resetDelegate(); //ProxyZoneSpec is undefined here for whatever reason
}
javascriptangularunit-testing
19
Pedro Garcia Mota

Ceci est un problème avec la version Angular Cli1.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

le raccourci pour ceci est:

ng test -sm = false

Voir les détails ici: https://github.com/angular/angular-cli/issues/7296

29
yugantar kumar

Je viens de rencontrer cette erreur et le problème vient de ma maquette . Dans le composant.ngOnInit, j'ai utilisé this.route.paramMap.subscribe (...) Où route est une instance de ActivatedRoute

Dans mon test, j'ai fourni un service simulé comme celui-ci: 

providers: [
    { provide: ActivatedRoute, useValue: { snapshot: { params: { id: 1 } } } }
]

Et en fait, j'ai raté la méthode paramMap

Puis je le fixe en ajoutant un paramMap propriétés comme ceci

providers: [
    { provide: ActivatedRoute, useValue: { snapshot: { params: { id: 1 } }, paramMap: Observable.of({get: () => 1}) } }
]

Ensuite, 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 vérifier le NotificationServiceStub

Vous devez utiliser un débogueur (avec Webstorm, il est facile de déboguer étape par étape) pour vous aider.

6
Rebolon

J'ai rencontré le même problème avec angular-cli 6, donc pour obtenir le bon message d'erreur, il faut utiliser ce qui suit:

ng test --source-map=false

Peut-être que ça va aider quelqu'un :).

1
Tanmoy Bhattacharjee

Je poursuis cela depuis des heures. Enfin 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 de CORS, et '[Script Loader]', DOMException{stack: 'Error: Failed to execute 'send' on 'XMLHttpRequest', et ça s'est réduit à ne pas avoir HttpClient!

1
redOctober13