Winkeltests fehlgeschlagen mit Fehler beim Ausführen von 'send' bei 'XMLHttpRequest'

Ich versuche meine eckige 4.1.0-Komponente zu testen -

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

Ein einfacher "sollte erstellen" -Test löst jedoch diesen kryptischen Fehler aus ...

NetworkError: Fehler beim Ausführen von 'send' bei 'XMLHttpRequest': Fehler beim Laden von 'ng: ///DynamicTestModule/module.ngfactory.js'.

Daher habe ich diese Frage gefunden, die darauf hindeutet, dass das Problem darin besteht, dass die Komponente @Input)_Parameter enthält, die jedoch nicht festgelegt sind, wenn ich meinen Test wie folgt ändere:

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

dann bekomme ich immer noch das gleiche Problem, ähnlich, wenn ich die @Input()Anmerkungen aus der Komponente entferne , immer noch kein Unterschied. Wie kann ich diese Tests bestehen?

Dies ist ein Problem des neuen Angular Cli. Führen Sie Ihren Test mit aus --sourcemaps=falseund Sie erhalten die richtigen Fehlermeldungen.

Details finden Sie hier: https://github.com/angular/angular-cli/issues/7296

BEARBEITEN:

Abkürzung dafür ist:

ng test -sm=false

Ab Winkel 6 lautet der Befehl:

ng test --source-map=false

Ich hatte das gleiche Problem mit angualar cli 6, ich habe dieses Tag verwendet, um die richtige Fehlermeldung zu erhalten:

ng test --source-map=false

Vielleicht hilft es jemandem :).

Für meinen Fall gab es ein Scheindatenproblem und im Falle von Arraykehrte ich stringvom Schein zurück.

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

Die Fehlermeldung ist wirklich ablenkend und hat den tatsächlichen Fehler nicht mitgeteilt. Das Laufen ng test --source=falsezeigte auf den richtigen Fehler und die richtige Linie und half mir, ihn schnell zu beheben.

Oft passiert es, wenn Sie Daten verspotten, die unvollständig oder falsch sind.

Sie können entweder die Eigenschaft input () in component.ts auf den Standardwert setzen

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

ODER

Ändern Sie Ihre Datei component.spec.ts wie folgt:

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

Wie oben hier vorgeschlagen: https://stackoverflow.com/a/45570571/7085047 Mein Problem war in meinem ngOnInit. Ich habe einen von Mock Swagger generierten REST-Controller-Proxy angerufen. Es gab null zurück und ich habe diese null abonniert, was nicht funktioniert ...

Der Fehler kam zurück:

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

Ich habe das Problem mit ts-mockito behoben: https://github.com/NagRock/ts-mockito

Ich habe Code hinzugefügt, um eine Scheininstanz wie diese zu erstellen:

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

Anschließend wurde die Instanz wie folgt zum Anbieter-Array des Tests hinzugefügt:

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

Dies kann damit zusammenhängen, dass Chrome einen tatsächlichen Testfehler verbirgt. Der Testbereich wird einige nachgebildete http-Fabriken verwirren, die nicht geladen werden können, und daher ist dies der Fehler, den er meldet. Höchstwahrscheinlich liegt der Fehler im Bereich ngOnInit, in dem ein Objekt beispielsweise Unterobjekte erwartet und diese nicht definiert sind.

Um dem Fehler auf den Grund zu gehen, wechseln Sie vorübergehend zu PhantomJS, das anscheinend weniger unter diesen Initialisierungsfehlern leidet. Dadurch wird Ihnen hoffentlich der tatsächliche Fehler gemeldet. Bei mehreren Gelegenheiten stellte ich fest, dass ein bei der Initialisierung erwartetes Objekt nicht vollständig war. IE:

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

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

Durch das Korrigieren des Objekts konnte PhantomJS abgeschlossen werden und Chrome konnte mit dem nächsten Test fortfahren.

Ansonsten habe ich keine Lösung gefunden, um das Problem aus Chrome zu entfernen. Versuchen Sie wie immer, die Richtlinie "Code entfernen, bis der Fehler behoben ist" zu verwenden, um den Fehler zu beheben.

UPDATE: Beachten Sie, dass dies jetzt eine ziemlich alte Antwort ist. Ich würde die Verwendung von PhantomJS (EOL) nicht mehr empfehlen. Die Berichterstellung für Browsertests ist viel besser geworden. Wenn Chrome Ihnen Kummer bereitet, versuchen Sie es mit Firefox, das heutzutage auch sehr gute Tests durchführt.

Ich hatte auch diesen Fehler, dessen Wahrheit ehrlich gesagt nicht gesprächig ist.

Es hing mit den HTTP-Aufrufen über meine Dienste zusammen

Ich benutze myService.ts mit 2 Methoden

get();
getAll();

Ich verspotte diesen Dienst: mockMyService.ts

Der Fehler war hier, weil meine Komponente die Methode getAll () verwendete, die ich vergessen hatte, im mockMyService zu implementieren. Deshalb habe ich einfach die folgende Methode hinzugefügt:

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

Fehler war weg :)

Ich hatte das gleiche Problem und habe herausgefunden, dass Sie zur Behebung Ihrer Eingaben für die Komponente in der Methode vor jedem die folgenden Eingaben vornehmen müssen:

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

Dies wird Ihr Problem definitiv lösen.

In meinem Fall wurde der Täter observable.timeout(x).retry(y)irgendwo auf der zurückgegebenen Observable auf Serviceklassenebene angewendet, dann wieder in der Komponente, die diesen Service verwendete.

Bis zu angle-cli 1.4 hat im Browser alles richtig funktioniert. Dann begann es während der Karma-Tests zu scheitern (mit solch einem dummen Fehler). Die Lösung bestand natürlich darin, diese Timeout- / Wiederholungsoperatoren aufzuräumen.

Für mich wird diese Meldung angezeigt, wenn ein Mock in meinen Tests falsch ist: Normalerweise geben Sie mockService in Ihrem Test-Bootstrap an. Wenn Ihr Mock unvollständig oder falsch ist, dann gibt Angular diesen dummen Fehler zurück.

Weitere Informationen zu meinem Fall hier

Was ich tun würde ist:

Fügen Sie console.log () s Zeile für Zeile in ngOnint () hinzu und finden Sie heraus, wie weit es geht. Überprüfen Sie dann die Zeile, die nicht durchlaufen wird.

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

Dies schlug bei meinem Test mit dem gleichen Fehler in diesem Beitrag fehl. Wie oben gezeigt, hatte ich zwei console.logs. Der erste ging durch, der zweite nicht. Also wurde mir klar, dass das Problem online ist. Const id = params.get ('id'); und ich habe es behoben.

Hoffe das wird jemandem helfen.