Tes sudut gagal dengan Gagal menjalankan 'kirim' pada 'XMLHttpRequest'

Saya mencoba menguji komponen 4.1.0 sudut saya -

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

Namun, tes "seharusnya membuat" yang sederhana melempar kesalahan samar ini ...

NetworkError: Gagal menjalankan 'kirim' pada 'XMLHttpRequest': Gagal memuat 'ng: ///DynamicTestModule/module.ngfactory.js'.

jadi saya menemukan pertanyaan ini , yang menunjukkan bahwa masalah adalah komponen memiliki @Input)_params yang tidak diatur, namun, jika saya memodifikasi pengujian saya seperti:

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

maka saya masih mendapatkan masalah yang sama, sama halnya, jika saya menghapus @Input()anotasi dari komponen, masih tidak ada perbedaan. Bagaimana saya bisa lulus tes ini?

Ini adalah masalah dari Angular Cli baru. Jalankan pengujian Anda dengan --sourcemaps=falsedan Anda akan mendapatkan pesan kesalahan yang tepat.

Lihat detailnya di sini: https://github.com/angular/angular-cli/issues/7296

EDIT:

Singkatan untuk ini adalah:

ng test -sm=false

Pada sudut 6 perintahnya adalah:

ng test --source-map=false

Saya memiliki masalah yang sama menggunakan angualar cli 6, saya telah menggunakan tag ini untuk mendapatkan pesan kesalahan yang benar:

ng test --source-map=false

Mungkin itu akan membantu seseorang :).

Untuk kasus saya ada masalah data mock dan dalam kasus Array, saya kembali stringdari mock.

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

Pesan kesalahan benar-benar mengganggu dan tidak memberitahukan kesalahan sebenarnya. Berlari ng test --source=falsemenunjukkan kesalahan dan garis yang benar, dan membantu saya memperbaikinya dengan cepat.

Banyak kali itu terjadi ketika Anda mengejek data tidak lengkap atau salah.

Anda dapat mengatur properti input () ke nilai default di component.ts

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

ATAU

Ubah file component.spec.ts Anda dengan cara berikut,

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

Seperti yang disarankan di atas di sini: https://stackoverflow.com/a/45570571/7085047 masalah saya ada di saya ngOnInit. Saya sedang memanggil proxy pengendali REST tiruan yang dibuat-buat tiruan. Itu mengembalikan nol, dan saya berlangganan ke nol itu, yang tidak berfungsi ...

Kesalahan kembali:

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

Saya memperbaiki masalah menggunakan ts-mockito: https://github.com/NagRock/ts-mockito

Saya menambahkan kode untuk membuat contoh tiruan seperti ini:

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

Dan kemudian menambahkan instance ke array penyedia tes seperti ini:

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

Ini dapat dikaitkan dengan Chrome yang menyembunyikan kesalahan pengujian yang sebenarnya. Area pengujian akan membingungkan beberapa pabrik tiruan http yang tidak dapat dimuat dan karenanya itu adalah kesalahan yang akan dilaporkan. Kemungkinan besar kesalahannya adalah di sekitar area ngOnInit di mana suatu objek, katakanlah, mengharapkan sub objek dan mereka tidak didefinisikan.

Untuk mencoba dan sampai ke bagian bawah kesalahan, beralih ke PhantomJS sementara yang tampaknya kurang menderita dari kesalahan inisialisasi ini dan ini diharapkan akan melaporkan kesalahan yang sebenarnya kepada Anda. Beberapa kali saya temukan di mana objek yang diharapkan pada inisialisasi tidak lengkap. YAITU:

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

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

Mengoreksi objek memungkinkan PhantomJS untuk menyelesaikan dan juga Chrome untuk melanjutkan ke pengujian berikutnya.

Selain itu saya belum melihat solusi untuk menghapus masalah dari Chrome. Seperti yang pernah dicoba dan mengadopsi kebijakan "hapus kode, sampai kesalahan" untuk mengejar kesalahan.

UPDATE: Perhatikan ini sekarang jawaban yang cukup lama, saya tidak akan merekomendasikan menggunakan PhantomJS lagi (EOL). Pelaporan pengujian browser telah menjadi jauh lebih baik dan jika Chrome memberi Anda kesedihan maka cobalah Firefox, yang juga menjalankan tes dengan sangat baik saat ini.

Saya juga memiliki kesalahan ini, yang mana kebenarannya dikatakan tidak banyak bicara.

Itu terkait dengan panggilan HTTP melalui layanan saya

Saya menggunakan myService.ts dengan 2 metode

get();
getAll();

Saya mengejek layanan ini: mockMyService.ts

Kesalahan ada di sini karena komponen saya menggunakan metode getAll () yang saya lupa implementasikan di mockMyService, jadi saya baru saja menambahkan metode:

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

Kesalahan hilang :)

Saya menghadapi masalah yang sama dan saya menemukan bahwa untuk memperbaikinya Anda harus mengatur input Anda untuk komponen dalam metode sebelumEach seperti yang ditunjukkan di bawah ini:

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

Ini pasti akan menyelesaikan masalah Anda.

Dalam kasus saya pelakunya observable.timeout(x).retry(y) diterapkan di suatu tempat di Observable kembali pada tingkat kelas layanan, sekali lagi dalam komponen yang menggunakan layanan itu.

Semuanya berfungsi dengan benar di browser hingga angular-cli 1.4. Kemudian mulai gagal selama tes Karma (dengan kesalahan konyol). Solusinya tentu saja untuk merapikan batas waktu / coba lagi operator ini.

Bagi saya pesan ini muncul ketika mock palsu dalam pengujian saya: biasanya Anda memberikan mockService di bootstrap tes Anda. Jika tiruan Anda tidak lengkap atau palsu, maka angular mengembalikan kesalahan bodoh ini.

Informasi lebih lanjut tentang kasus saya di sini

Apa yang akan saya lakukan adalah:

Tambahkan console.log () s, baris demi baris di ngOnint () dan cari tahu seberapa jauh, kemudian periksa baris yang tidak akan dilewatinya.

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

Ini gagal pada pengujian saya dengan kesalahan yang sama dalam posting ini. Seperti yang ditunjukkan di atas, saya punya dua console.logs. Yang pertama lulus, tapi yang kedua tidak. Jadi saya menyadari masalahnya ada pada baris const id = params.get ('id'); dan saya memperbaikinya.

Semoga ini bisa membantu seseorang.