Angulaire tests à défaut avec de l'Échec de l'exécution de 'envoyer' sur 'XMLHttpRequest'

C'est un problème de la nouvelle Angulaire de la Cli. Exécutez vos tests avec --sourcemaps=false et vous aurez le droit à des messages d'erreur.

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

EDIT:

D'abréviation pour cela est:

ng test -sm=false

Comme angulaire 6 la commande est:

ng test --source-map=false

Pour mon cas, il y avait une maquette de problème de données et, en cas de Array, j'étais de retour string de la maquette.

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

Le message d'erreur est vraiment distrayant et n'était pas de raconter l'erreur réelle. L'exécution de ng test --source=false pointé le corriger l'erreur et la ligne, et m'a aidé à corriger le problème rapidement.

Beaucoup de temps, il arrive quand vous vous moquez de données est incomplète ou incorrecte.

Comme suggéré ci-dessus ici: https://stackoverflow.com/a/45570571/7085047 mon problème était dans ma ngOnInit. J'ai été l'appel d'une maquette swagger généré RESTE contrôleur de proxy. C'était de retourner la valeur null, et j'ai été souscrire à cette null, ce qui ne fonctionne pas...

L'erreur est revenue:


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


J'ai résolu le problème en utilisant ts-mockito: https://github.com/NagRock/ts-mockito

J'ai ajouté le code pour créer une maquette exemple comme ceci:

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

Et ensuite ajouté l'instance à l'épreuve des prestataires tableau comme ceci:

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

J'ai aussi eu cette erreur, qui à vrai dire est assez non bavard.

Il était lié à l'appel HTTP creux de mes services

- Je utiliser myService.ts avec 2 méthodes

get();
getAll();

Je suis moqueur de ce service : mockMyService.ts

L'erreur est ici parce que mon composant à l'aide de getAll() la méthode que j'ai oublié de le mettre en œuvre dans le mockMyService, donc j'ai juste ajouté de la méthode :

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

Erreur a disparu 🙂

Dans mon cas, le coupable était observable.timeout(x).retry(y) appliqué quelque part sur le retour de l'Observable sur le service, le niveau de la classe, puis de nouveau le composant qui a été à l'aide de ce service.

Tout a fonctionné correctement dans le navigateur jusqu'à ce angulaires-cli 1.4. Puis a commencé à défaut pendant le Karma des tests (avec une stupide erreur). La solution était bien sûr pour ranger ces timeout/relance des opérateurs.

Ce que je voudrais faire, c'est:

Ajouter de la console.log() s, ligne après ligne dans ngOnint() et de savoir dans quelle mesure il s'en va , puis inspecter la ligne dont il l'habitude de passer à travers.

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

Ce n'était pas sur de mon test avec le même message d'erreur dans ce post. Comme indiqué ci-dessus, j'ai eu deux console.journaux. D'abord on est passé thorugh , mais le deuxième pas. Donc, j'ai réalisé que le problème est à la ligne const id = params.get('id'); et je l'ai corrigé.

Espère que cela aidera quelqu'un.