forkjoin - Las pruebas angulares fallan con Error al ejecutar ''enviar'' en ''XMLHttpRequest''

forkjoin angular 6

Question

Estoy tratando de probar mi componente angular 4.1.0 -

export class CellComponent implements OnInit {
  lines: Observable<Array<ILine>>;
  @Input() dep: string;
  @Input() embedded: boolean;
  @Input() dashboard: boolean;
  constructor(
    public dataService: CellService,
    private route: ActivatedRoute,
    private router: Router, private store: Store<AppStore>) {
  }
}

Sin embargo, una simple prueba de "debería crear" arroja este error críptico ...

NetworkError: no se pudo ejecutar ''enviar'' en ''XMLHttpRequest'': no ​​se pudo cargar ''ng: ///DynamicTestModule/module.ngfactory.js''.

así que encontré this pregunta, que sugiere que el problema es que el componente tiene @Input)_ parámetros que no están configurados, sin embargo, si @Input)_ mi prueba así:

  it(''should create'', inject([CellComponent], (cmp: CellComponent) => {
    cmp.dep = '''';
    cmp.embedded = false;
    cmp.dashboard = false;
    expect(cmp).toBeTruthy();
  }));

entonces sigo teniendo el mismo problema, de manera similar, si @Input() anotaciones @Input() del componente, todavía no hay diferencia. ¿Cómo puedo hacer que pasen estas pruebas?

Answer 1

Como se sugirió anteriormente aquí: https://.com/a/45570571/7085047 mi problema estaba en mi ngOnInit . Estaba llamando a un proxy de controlador REST generado por swagger simulado. Estaba volviendo nulo, y me estaba suscribiendo a ese nulo, que no funciona ...

El error regresó:

Failed to load ng:///DynamicTestModule/MockNodeDashboardComponent_Host.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Solucioné el problema usando ts-mockito: https://github.com/NagRock/ts-mockito

Agregué código para crear una instancia simulada como esta:

import { mock, instance, when } from ''ts-mockito'';
import { Observable } from ''rxjs/Observable'';
import { Observer } from ''rxjs/Observer'';
import { MockScenario } from ''./vcmts-api-client/model/MockScenario'';

const MockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = mock(VcmtsnodemockresourceApi);
const obs = Observable.create((observer: Observer<MockScenario[]>) => {
  observer.next(new Array<MockScenario>());
  observer.complete();
});
when(MockVcmtsnodemockresourceApi.getMockScenariosUsingGET()).thenReturn(obs);
const instanceMockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = instance(MockVcmtsnodemockresourceApi);

Y luego agregó la instancia a la matriz de proveedores de la prueba de esta manera:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ...
      providers: [
        ...
        { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi },
        ...
      ]        
    }).compileComponents();
  }));

Answer 2

En mi caso, el culpable fue observable.timeout(x).retry(y) aplicado en algún lugar del Observable devuelto en el nivel de clase de servicio, luego nuevamente en el componente que estaba usando ese servicio.

Todo funcionó correctamente en el navegador hasta angular-cli 1.4. Luego comenzó a fallar durante las pruebas de Karma (con un error tan tonto). La solución fue, por supuesto, ordenar estos operadores de tiempo de espera / reintento.

Answer 3

Este es un problema del nuevo Angular Cli. Ejecute su prueba con --sourcemaps=false y obtendrá los mensajes de error correctos.

Ver detalles aquí: github.com/angular/angular-cli/issues/7296

EDITAR:

Taquigrafía para esto es:

ng test -sm=false

A partir de angular 6, el comando es:

ng test --source-map=false

Answer 4

Esto puede estar relacionado con que Chrome oculte un error de prueba real. El área de prueba confundirá a una fábrica falsa de http que no puede cargar y, por lo tanto, ese es el error que informará. Lo más probable es que el error sea alrededor del área ngOnInit donde un objeto, por ejemplo, espera subobjetos y no están definidos.

Para tratar de llegar al fondo del error, cambie a PhantomJS temporalmente, que parece sufrir menos de estos errores de inicialización y con suerte le informará el error real. En varias ocasiones descubrí que un objeto esperado en la inicialización no estaba completo. ES DECIR:

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

    component.object = {}
// should be:
    component.object = {"innerObjectThatIsNeeded" : []}

La corrección del objeto permitió que PhantomJS se completara y también que Chrome pasara a la siguiente prueba.

Aparte de eso, no he visto una solución para eliminar el problema de Chrome. Como siempre, intente adoptar una política de "eliminar el código, hasta que el error desaparezca" para perseguir el error.

Answer 5

Lo que estaría haciendo es:

Agregue console.log () s, línea tras línea en ngOnint () y descubra qué tan lejos llega, luego inspeccione la línea por la que no pasará.

Ex:

ngOnInit() {
    this.route.paramMap
        .switchMap(params => {
            this.busy = true;
            this.updateErrors(null);

            console.log(params);

            **const id = params.get(''id'');**
            console.log(id);

            if (id === ''new'') {
                this.editMode = true;
                return Observable.of(GroupComponent.newGroup());
            }
            return this.apiService.getGroup(id);
        })
    }

Esto estaba fallando en mi prueba con el mismo error en esta publicación. Como se muestra arriba, tuve dos console.logs. El primero pasó por alto, pero el segundo no. Entonces me di cuenta de que el problema está en línea const id = params.get (''id''); y lo arreglé

Espero que esto ayude a alguien.

Answer 6

Me enfrenté al mismo problema y descubrí que para solucionarlo, debe configurar sus entradas para el componente en el método antes de cada uno, como se muestra a continuación:

beforeEach(() => {
    fixture = TestBed.createComponent(CellComponent );
    cmp = fixture.debugElement.componentInstance;
    cmp.dep = '''';
    cmp.embedded = false;
    cmp.dashboard = false;
    fixture.detectChanges();
});

Esto definitivamente resolverá su problema.

Answer 7

Para mí, este mensaje aparece cuando un simulacro es falso en mis pruebas: por lo general, proporciona el servicio simulado en el arranque de sus pruebas. Si su simulación es incompleta o falsa, entonces angular devuelve este estúpido error.

Más información sobre mi caso here

Answer 8

Para mi caso, hubo un problema de datos simulados y, en el caso de Array , estaba devolviendo una string del simulacro.

someApi = fixture.debugElement.injector.get(SomeApi);
spyOn(someApi, ''someMethod'')
  .and.returnValue(Observable.of(''this is not a string but array''));

El mensaje de error realmente distrae y no indica el error real. Ejecutar ng test --source=false señaló el error correcto y la línea, y me ayudó a solucionarlo rápidamente.

Muchas veces sucede cuando se burlan de datos incompletos o incorrectos.

Answer 9

Puede establecer la propiedad input () al valor predeterminado en component.ts

@Input() tableColumns: Array<any> = [];  
@Input() pageObj: any = '''';

O

Modifique su archivo component.spec.ts de la siguiente manera,

beforeEach(() => {  
   fixture = TestBed.createComponent(MyComponent);  
   component = fixture.componentInstance;  
   component.tableColumns = [];  
   component.pageObj = '''';  
   fixture.detectChanges();  
});

Answer 10

También tuve este error, cuya verdad es bastante poco comunicativa.

Estaba relacionado con las llamadas HTTP a través de mis servicios

Yo uso myService.ts con 2 métodos

get();
getAll();

Me estoy burlando de este servicio: mockMyService.ts

El error estaba aquí porque mi componente estaba usando el método getAll () que olvidé implementar en el mockMyService, así que simplemente agregué el método:

private mockObjects = [
{
  ''id'': ''1'',
  ''champ1'': ''TECH'',
  ''champ2'': 2,
  ''champ3'': ''Data bidon''
},
{
  ''id'': ''2'',
  ''champ1'': ''TECH'',
  ''champ2'': 2,
  ''champ3'': ''Data au pif''
},
{
  ''id'': ''3'',
  ''champ1'': ''FUNC'',
  ''champ2'': 3,
  ''champ3'': ''Data quelconque''
},
 ];

getAll(): Observable<any> {
  return Observable.of(this.mockObjects);
}

El error se fue :)

Answer 11

Tuve el mismo problema al usar angualar cli 6, he usado esta etiqueta para obtener el mensaje de error correcto:

ng test --source-map=false

Tal vez ayude a alguien :).