'XMLHttpRequest' üzerinde 'send' yürütülemedi

Açısal 4.1.0 bileşenimi test etmeye çalışıyorum -

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

Ancak, basit bir "yaratmalı" testi bu şifreli hatayı atar ...

NetworkError: 'XMLHttpRequest' üzerinde 'send' çalıştırılamadı: 'ng: ///DynamicTestModule/module.ngfactory.js' yüklenemedi.

Bu yüzden , sorunun bileşeninin ayarlanmayan parametrelere sahip olduğunu düşündüren bu soruyu buldum @Input)_, ancak testimi şu şekilde değiştirirsem:

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

yine aynı sorunu alıyorum, benzer şekilde, @Input()ek açıklamaları bileşenden kaldırırsam , yine de fark yoktur. Bu testleri nasıl geçebilirim?

Bu yeni Açısal Klibin bir problemidir. Testinizi çalıştırın --sourcemaps=falseve doğru hata mesajlarını alacaksınız.

Ayrıntıları buradan görebilirsiniz: https://github.com/angular/angular-cli/issues/7296

DÜZENLE:

Bunun için kısayol:

ng test -sm=false

Açısal 6'dan itibaren komut:

ng test --source-map=false

Angualar cli 6 kullanarak aynı sorunu vardı, doğru hata iletisini almak için bu etiketi kullandım:

ng test --source-map=false

Belki birine yardım edecek :).

Benim durumum için bir sahte veri sorunu vardı ve durumunda Array, ben stringsahte dönen .

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

Hata mesajı gerçekten dikkat dağıtıcı ve gerçek hatayı söylemiyordu. Koşmak ng test --source=falsedoğru hatayı ve çizgiyi gösterdi ve hızlı bir şekilde düzeltmeme yardımcı oldu.

Çoğu zaman sahte veriler eksik veya yanlış olduğunda olur.

İnput.) özelliğini component.ts dosyasında varsayılan değere ayarlayabilirsiniz

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

VEYA

Senin değiştirin component.spec.ts yol aşağıdaki dosyayı,

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

Yukarıda önerildiği gibi: https://stackoverflow.com/a/45570571/7085047 benim sorunum benim ngOnInit. Sahte swagger tarafından üretilen REST denetleyicisi proxy'sini çağırıyordum. Boş döndürülüyordu ve işe yaramayan o boş'a abone oluyordum ...

Hata geri geldi:

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

Ts-mockito kullanarak sorunu çözdüm: https://github.com/NagRock/ts-mockito

Ben böyle bir sahte örnek oluşturmak için kod ekledi:

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

Ardından örneği testin sağlayıcılar dizisine şu şekilde ekledi:

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

Aynı sorunla karşı karşıya kaldım ve bunu düzeltmek için aşağıdaki yöntemdeki bileşen için girişlerinizi aşağıda gösterildiği gibi ayarlamanız gerektiğini öğrendim:

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

Bu kesinlikle sorununuzu çözecektir.

Bu, Chrome'un gerçek bir test hatasını gizlemesi ile ilgili olabilir. Test alanı, yükleyemediği bazı sahte http fabrikasını karıştırıyor ve bu nedenle rapor edeceği hata bu. Büyük olasılıkla hata, bir nesnenin, örneğin alt nesneleri beklediği ve tanımlanmadığı ngOnInit alanı çevresinde olacaktır.

Hatanın en altına inmeyi denemek için geçici olarak bu başlatma hatalarından daha az muzdarip gibi görünen PhantomJS'ye geçin ve bu gerçek hatayı size bildirecektir. Başlatma sırasında beklenen bir nesnenin tamamlanmadığı birkaç durum buldum. IE:

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

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

Nesneyi düzeltmek PhantomJS'nin tamamlanmasına ve Chrome'un bir sonraki teste geçmesine izin verdi.

Bunun dışında, sorunu Chrome'dan kaldırmak için bir çözüm görmedim. Her zamanki gibi hatayı kovalamak için "hata giderilene kadar kodu kaldırın" ilkesini deneyin.

GÜNCELLEME: Bu artık oldukça eski bir yanıt, artık PhantomJS (EOL) kullanmanızı tavsiye etmem. Tarayıcı testi raporlaması çok daha iyi oldu ve Chrome size keder veriyorsa, bugünlerde testleri gerçekten iyi çalıştıran Firefox'u deneyin.

Ben de bu gerçeği söyleyebilirim ki, bu gerçeğin oldukça konuşkan olmadığı söylenebilir.

Hizmetlerimdeki HTTP çağrılarıyla ilgiliydi

MyService.ts dosyasını 2 yöntemle kullanıyorum

get();
getAll();

Bu hizmeti alay ediyorum: mockMyService.ts

Benim bileşen mockMyService uygulamak unuttum getAll () yöntemi kullanıyordu çünkü hata buradaydı, bu yüzden sadece yöntemi ekledi:

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

Hata gitti :)

Benim durumumda suçlu observable.timeout(x).retry(y) iade edilen Gözlemlenebilir hizmetinin bir yerinde, daha sonra yine bu hizmeti kullanan bileşene uygulandı.

Açısal cli 1.4'e kadar her şey tarayıcıda doğru çalıştı. Sonra Karma testleri sırasında başarısız olmaya başladı (böyle aptalca bir hatayla). Çözüm elbette bu zaman aşımı / yeniden deneme operatörlerini toplamaktı.

Benim için bu mesaj, testlerimde sahte bir şey olduğunda görünür: genellikle testlerinizin önyüklemesinde mockService sağlarsınız. Eğer alayınız eksik veya yanlışsa, o zaman bu aptal hatayı döndürün.

Davam hakkında daha fazla bilgi burada

Ne yapacağım:

Console.log () s, satır sonrasını ngOnint () 'de ekleyin ve ne kadar ilerlediğini bulun, ardından geçmeyeceği satırı inceleyin.

Ör:

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

Bu, bu yazıda aynı hatayla testimde başarısız oldu. Yukarıda gösterildiği gibi, iki console.log'um vardı. Birincisi dik geçti, ikincisi geçmedi. Böylece sorunun hat const id = params.get ('id') olduğunu fark ettim ; ve ben tamir ettim.

Umarım bu birine yardımcı olur.