javascript - tutorial - unit test angular 5

Angular 4 Unit test error: no se pudo ejecutar ''enviar'' en ''XMLHttpRequest'': no se pudo cargar ''ng:///DynamicTestModule/LoginComponent.ngfactory.js''

Question

Estoy escribiendo algunas pruebas unitarias para mi componente y recibo este mensaje de error críptico. Encontré una pregunta similar en la prueba de unidad Angular 2: error al cargar ''ng: ///DynamicTestModule/module.ngfactory.js'' pero las respuestas no me ayudaron a resolver mi problema. Soy angular 4.3.2

Aquí está el componente para el que estoy escribiendo la prueba:

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'')
        );
  }
}

Y aquí está el archivo de prueba:

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();
  });
});

Al ejecutar la prueba obtengo lo siguiente en la consola de 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] (

Cualquiera me puede ayudar con eso?

EDITAR - 1 Aquí está la implementación de servicios / 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.'');
  }
}

Servicio de sesion

@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);
  }
}

EDITAR 2 Al cambiar mi configuración de TestBed a lo siguiente se eliminó el error pero se introdujo uno nuevo:

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();
  }));

Ahora el mensaje de error es

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)

Lo que sucede en esta función:

function resetFakeAsyncZone() {
    _fakeAsyncTestZoneSpec = null;
    ProxyZoneSpec.assertPresent().resetDelegate(); //ProxyZoneSpec is undefined here for whatever reason
}

Answer 1

Acabo de encontrarme con este error y el problema fue mi burla. En el component.ngOnInit usé this.route.paramMap.subscribe (...) donde route es una instancia de ActivatedRoute

En mi prueba proporcioné un servicio simulado como este:

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

Y de hecho me perdí de burlarme del método paramMap

Entonces lo arreglo agregando un paramMap propiedades como esta

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

Entonces no tengo más este error estúpido.

Entonces, para usted, espero que la clase SessionServiceStub esté incompleta o sea errónea. ¿Obtiene un método de inicio de sesión que devuelve un observable?

Si no es el problema, puedes revisar el NotificationServiceStub

Debes usar un depurador (con Webstorm es fácil de depurar paso a paso) para ayudarte.

Answer 2

Encontré el mismo problema usando angular-cli 6, así que para obtener el mensaje de error correcto, se debe usar lo siguiente:

ng test --source-map=false

Tal vez ayude a alguien :).

Answer 3

Este es un problema con la versión 1.2.2 de Angular Cli o más reciente . Ejecute su prueba con --sourcemaps=false y obtendrá los mensajes de error correctos.

ng test --sourcemaps = false

EDITAR

taquigrafía para esto es:

ng prueba -sm = falso

Vea los detalles aquí: https://github.com/angular/angular-cli/issues/7296

Answer 4

He estado persiguiendo esto por horas. Finalmente descubrí que el problema era simplemente que había importado HttpClientModule, pero no HttpClient :

import { HttpClient, HttpClientModule } from ''@angular/common/http'';

Todos esos errores CORS, y ''[Script Loader]'', DOMException{stack: ''Error: Failed to execute ''send'' on ''XMLHttpRequest'' , ¡y se redujo a simplemente no tener HttpClient!