Échec des tests angulaires avec Impossible d'exécuter 'send' sur 'XMLHttpRequest'

Question

Je suis en train de tester mon angulaire 4.1.0 composant -

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

Cependant, un simple "devrait créer" test génère cette erreur cryptique...

NetworkError: Échec de l'exécution de 'envoyer' sur 'XMLHttpRequest': impossible de charger "ng:///DynamicTestModule/module.ngfactory.js'.

j'ai donc trouvé cette question, ce qui suggère que le problème est le composant a @Input)_ params qui ne sont pas, cependant, si je modifie mon test comme ceci:

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

alors, je reçois toujours le même problème, de la même façon, si je supprime l' @Input() d'annotations à partir du composant, toujours pas de différence. Comment puis-je obtenir ces tests à passer?

Answer 1

C'est un problème du nouveau Cli angulaire. Exécutez votre test avec --sourcemaps=false et vous obtiendrez les bons messages d'erreur.

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

MODIFIER:

La sténographie pour ceci est:

ng test -sm=false

À partir de l'angle 6, la commande est la suivante:

ng test --source-map=false

Answer 2

J'ai eu le même problème en utilisant angualar cli 6, j'ai utilisé cette balise pour obtenir le bon message d'erreur:

 ng test --source-map=false
 

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

Answer 3

Dans mon cas, il y avait un problème de données factices et dans le cas de Array , je retournais 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 gênant et ne dit pas l'erreur réelle. Courir ng test --source=false indiqué la bonne erreur et la bonne ligne, et m'a aidé à la réparer rapidement.

Plusieurs fois, cela se produit lorsque vous simulez des données incomplètes ou incorrectes.

Answer 4

Vous pouvez soit définir la propriété input () sur la valeur par défaut dans composant.ts.

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

OU

Modifiez votre fichier component.spec.ts de la manière suivante,

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

Answer 5

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