web-dev-qa-db-fra.com

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

J'essaie de tester mon composant 4.1.0 angulaire -

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 test "devrait créer" renvoie cette erreur cryptique ...

NetworkError: Echec de l'exécution de 'send' sur 'XMLHttpRequest': Echec du chargement de 'ng: ///DynamicTestModule/module.ngfactory.js'.

donc j'ai trouvé this question, ce qui suggère que le problème est que le composant a @Input)_ params qui ne sont pas définis, cependant, si je modifie mon test de la manière suivante:

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

alors j'obtiens toujours le même problème, de même si je supprime les annotations @Input() du composant, toujours pas de différence. Comment puis-je réussir ces tests?

angularunit-testingkarma-jasmineangular-cli
124
George Edwards

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

315
penghui

J'ai eu le même problème en utilisant angular 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 :).

19
jmuhire

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. Lancer ng test --source=false a 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.

8
Aniruddha Das

Vous pouvez soit définir input () property 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();  
});
6
Mangesh Daundkar

Comme suggéré ci-dessus ici: https://stackoverflow.com/a/45570571/7085047 mon problème était dans ma ngOnInit. J'appelais un proxy de contrôleur REST simulé. Il retournait null, et je souscrivais à ce null, 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é du code pour créer une instance fictive 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 puis ajouté l'instance au tableau de fournisseurs du test comme ceci:

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

Cela peut être lié au fait que Chrome cache une erreur de test réelle. La zone de test confondra certaines usines fictives http qu’elle ne peut pas charger et c’est donc l’erreur qu’elle signalera. Très probablement, l'erreur concernera la zone ngOnInit où un objet est, par exemple, en attente de sous-objets et ils ne sont pas définis.

Pour essayer de comprendre l'erreur, basculez temporairement sur PhantomJS, qui semble moins souffrir de ces erreurs d'initialisation, ce qui, espérons-le, vous rapportera l'erreur réelle. À plusieurs reprises, j'ai constaté qu'un objet attendu lors de l'initialisation n'était pas complet. C'EST À DIRE:

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

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

La correction de l'objet a permis à PhantomJS de se terminer et à Chrome de passer au test suivant.

Autre que cela, je n'ai pas vu de solution pour supprimer le problème de Chrome. Comme toujours, essayez d'adopter une stratégie "Supprimez le code, jusqu'à ce que l'erreur disparaisse" pour poursuivre l'erreur.

2
PeterS

J'ai aussi eu cette erreur, dont la vérité est assez non bavarde.

Il était lié aux appels HTTP via mes services

J'utilise myService.ts avec 2 méthodes

get();
getAll();

Je me moque de ce service: mockMyService.ts

L'erreur était due au fait que mon composant utilisait la méthode getAll () que j'avais oublié d'implémenter dans mockMyService.

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

L'erreur était partie :)

2
Deunz

Pour moi, ce message s’affiche lorsqu’un simulacre est faux lors de mes tests: habituellement, vous fournissez mockService dans vos tests bootstrap. Si votre maquette est incomplète ou faussée, alors angular renvoie cette erreur stupide.

Plus d'informations sur mon cas ici

1
Rebolon

Dans mon cas, le coupable était observable.timeout(x).retry(y) appliqué quelque part sur l'observable renvoyé au niveau de la classe de service, puis de nouveau dans le composant qui utilisait ce service.

Tout fonctionnait correctement dans le navigateur jusqu'à angular-cli 1.4. Puis commencé à échouer lors des tests Karma (avec une erreur aussi stupide). La solution consistait bien sûr à mettre de l'ordre dans ces opérateurs de délai d'attente/nouvelle tentative.

1
Marcin R

J'ai rencontré le même problème et j'ai découvert que pour résoudre ce problème, vous devez définir vos entrées pour le composant dans la méthode beforeEach, comme indiqué ci-dessous:

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

Cela résoudra définitivement votre problème.

1
Jayant Patil

Ce que je ferais c'est:

Ajoutez console.log () s, ligne après ligne dans ngOnint () et déterminez la distance parcourue, puis inspectez la ligne qu’elle ne franchira pas.

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

Cela échouait sur mon test avec la même erreur dans ce post. Comme indiqué ci-dessus, j'avais deux consoles.logs. Le premier est passé, mais le second pas. J'ai donc compris que le problème était en ligne const id = params.get ('id'); et je l'ai réparé. 

J'espère que cela aidera quelqu'un.

0
Josf