Testy kątowe kończą się niepowodzeniem i nie można wykonać polecenia „wyślij” na „XMLHttpRequest”

Próbuję przetestować mój komponent kątowy 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>) {
  }
}

Jednak prosty test „powinien utworzyć” zgłasza ten tajemniczy błąd ...

NetworkError: Nie udało się wykonać polecenia „send” w „XMLHttpRequest”: nie udało się załadować „ng: ///DynamicTestModule/module.ngfactory.js”.

więc znalazłem to pytanie, które sugeruje, że problem polega na tym, że komponent ma parametry, @Input)_które nie są ustawione, jednak jeśli zmodyfikuję mój test w ten sposób:

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

wtedy nadal mam ten sam problem, podobnie, jeśli usunę @Input()adnotacje z komponentu, nadal nie ma różnicy. Jak mogę sprawić, by te testy zdały?

To jest problem nowego Angular Cli. Uruchom test z, --sourcemaps=falsea otrzymasz odpowiednie komunikaty o błędach.

Zobacz szczegóły tutaj: https://github.com/angular/angular-cli/issues/7296

EDYTOWAĆ:

Skrótem do tego jest:

ng test -sm=false

Od kąta 6 polecenie brzmi:

ng test --source-map=false

Miałem ten sam problem, używając angualar cli 6, użyłem tego tagu, aby uzyskać właściwy komunikat o błędzie:

ng test --source-map=false

Może to komuś pomoże :).

W moim przypadku wystąpił problem z fałszywymi danymi, aw przypadku Arraywróciłem stringz makiety.

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

Komunikat o błędzie jest naprawdę rozpraszający i nie informuje o rzeczywistym błędzie. Uruchomienie ng test --source=falsewskazało poprawny błąd i linię i pomogło mi szybko to naprawić.

Często zdarza się, że fałszywe dane są niekompletne lub nieprawidłowe.

Możesz ustawić właściwość input () na wartość domyślną w pliku component.ts

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

LUB

Zmodyfikuj plik component.spec.ts w następujący sposób,

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

Jak zasugerowano powyżej tutaj: https://stackoverflow.com/a/45570571/7085047 mój problem był w moim ngOnInit. Dzwoniłem do fałszywego proxy kontrolera REST generowanego przez Swagger. Zwracał wartość null, a ja subskrybowałem tę wartość null, co nie działa ...

Błąd wrócił:

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

Naprawiłem problem za pomocą ts-mockito: https://github.com/NagRock/ts-mockito

Dodałem kod, aby utworzyć przykładową instancję, taką jak ta:

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

Następnie dodałem instancję do tablicy dostawców testu w następujący sposób:

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

Może to być związane z ukrywaniem przez Chrome rzeczywistego błędu testu. Obszar testowy będzie dezorientujący dla jakiejś fałszywej fabryki http, której nie może załadować i dlatego jest to błąd, który zgłosi. Najprawdopodobniej błąd będzie dotyczył obszaru ngOnInit, w którym, powiedzmy, obiekt oczekuje obiektów podrzędnych i nie są one zdefiniowane.

Aby spróbować dotrzeć do sedna błędu, przełącz się tymczasowo na PhantomJS, który wydaje się mniej cierpieć z powodu tych błędów inicjalizacji i miejmy nadzieję, że zgłosi rzeczywisty błąd. Kilka razy stwierdziłem, że obiekt oczekiwany podczas inicjalizacji nie był kompletny. TO ZNACZY:

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

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

Poprawienie obiektu pozwoliło PhantomJS ukończyć, a także Chrome przejść do następnego testu.

Poza tym nie widziałem rozwiązania, aby usunąć problem z Chrome. Jak zawsze, spróbuj zastosować zasadę „usuwaj kod, aż pojawi się błąd”, aby ścigać błąd.

AKTUALIZACJA: Zauważ, że jest to teraz dość stara odpowiedź, nie polecałbym już używania PhantomJS (EOL). Raporty z testów przeglądarki są znacznie lepsze i jeśli Chrome sprawia Ci przykrość, wypróbuj Firefoksa, który obecnie również bardzo dobrze wykonuje testy.

Miałem też ten błąd, który, prawdę mówiąc, nie jest zbyt rozmowny.

Było to związane z połączeniami HTTP przez moje usługi

Używam myService.ts z 2 metodami

get();
getAll();

Kpię z tej usługi: mockMyService.ts

Błąd był tutaj, ponieważ mój komponent używał metody getAll (), o której zapomniałem zaimplementować w mockMyService, więc właśnie dodałem metodę:

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

Błąd zniknął :)

Napotkałem ten sam problem i dowiedziałem się, że aby go naprawić, musisz ustawić dane wejściowe dla komponentu w metodzie przed każdym, jak pokazano poniżej:

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

To z pewnością rozwiąże Twój problem.

W moim przypadku winowajca został observable.timeout(x).retry(y)zastosowany gdzieś na zwróconym Observable na poziomie klasy usługi, a następnie ponownie w komponencie, który korzystał z tej usługi.

W przeglądarce wszystko działało poprawnie aż do angular-cli 1.4. Potem zaczął zawodzić podczas testów Karmy (z takim głupim błędem). Rozwiązaniem było oczywiście uporządkowanie tych operatorów przekroczenia limitu czasu / ponowienia.

Dla mnie ten komunikat pojawia się, gdy mock jest fałszywy w moich testach: zwykle podajesz mockService w swoim bootstrapie testów. Jeśli twoja próba jest niekompletna lub fałszywa, to angular zwraca ten głupi błąd.

Więcej informacji o mojej sprawie tutaj

Robiłbym to:

Dodaj console.log () s, wiersz po wierszu w ngOnint () i dowiedz się, jak daleko to zajdzie, a następnie sprawdź linię, przez którą nie przejdzie.

Dawny:

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

To zawiodło w moim teście z tym samym błędem w tym poście. Jak pokazano powyżej, miałem dwa console.logs. Pierwsza minęła, ale druga nie. Więc zdałem sobie sprawę, że problem dotyczy linii const id = params.get ('id'); i naprawiłem to.

Mam nadzieję, że to komuś pomoże.