angular - Tt XMLHttpRequest ’पर on send’ को अंजाम देने में विफल हुए कोणीय परीक्षण




unit-testing karma-jasmine (8)

मैं अपने कोणीय 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>) {
  }
}

हालांकि, एक सरल "परीक्षण" बनाना चाहिए इस गंभीर त्रुटि को फेंकता है ...

NetworkError: 'XMLHttpRequest' पर 'send' को क्रियान्वित करने में विफल: 'ng: ///DynamicTestModule/module.ngfactory.js' लोड करने में विफल।

इसलिए मुझे this प्रश्न मिला, जो बताता है कि समस्या का घटक है @Input)_ params जो सेट नहीं हैं, हालांकि, अगर मैं अपना परीक्षण संशोधित करता हूं तो:

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

तब मुझे अभी भी वही मुद्दा मिलता है, इसी तरह, अगर मैं घटक से @Input() एनोटेशन @Input() हूं, तब भी कोई अंतर नहीं है। मैं इन परीक्षणों को कैसे पास कर सकता हूं?


आप या तो इनपुट () प्रॉपर्टी को डिफॉल्ट वैल्यू में कंपोनेंट सेट कर सकते हैं

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

या

निम्न तरीके से अपने कंपोनेंट .spec.ts फ़ाइल को संशोधित करें,

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

जैसा कि यहाँ ऊपर सुझाव दिया गया है: https://.com/a/45570571/7085047 मेरी समस्या मेरे ngOnInit । मैं एक नकली स्वैगर-जेनरेट रेस्ट कंट्रोलर प्रॉक्सी कह रहा था। यह अशक्त लौट रहा था, और मैं उस नल की सदस्यता ले रहा था, जो काम नहीं करता है ...

त्रुटि वापस आई:

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: https://github.com/NagRock/ts-mockito का उपयोग करके समस्या को ठीक किया

मैंने इस तरह एक नकली उदाहरण बनाने के लिए कोड जोड़ा:

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

और फिर इस तरह परीक्षण प्रदाताओं के सरणी में उदाहरण जोड़ा:

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

मेरे पास भी यह त्रुटि थी, जो सच कहा गया है वह काफी गैर-बातूनी है।

यह मेरी सेवाओं को गर्त HTTP कॉल से संबंधित था

मैं 2 तरीकों के साथ myService.ts का उपयोग करता हूं

get();
getAll();

मैं इस सेवा का मजाक उड़ा रहा हूं: mockMyService.ts

त्रुटि यहाँ थी क्योंकि मेरे घटक getAll () विधि का उपयोग कर रहे थे जिसे मैं 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);
}

त्रुटि हो गई :)


मेरे मामले के लिए एक मॉक डेटा समस्या थी और Array मामले में, मैं मॉक से string लौट रहा था।

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

त्रुटि संदेश वास्तव में विचलित करने वाला था और वास्तविक त्रुटि को नहीं बता रहा था। ng test --source=false चल रहा है - ng test --source=false ने सही त्रुटि और रेखा को इंगित किया, और मुझे इसे जल्दी ठीक करने में मदद की।

कई बार ऐसा होता है जब आप डेटा को अपूर्ण या गलत मानते हैं।


मेरे लिए यह संदेश तब दिखाई देता है जब मेरे परीक्षणों में नकली होता है: आमतौर पर आप अपने परीक्षण बूटस्ट्रैप में mockService प्रदान करते हैं। यदि आपका मॉक अधूरा या झूठा है, तो कोणीय इस बेवकूफ त्रुटि को लौटाता है।

मेरे मामले की अधिक जानकारी here


मैं एंगुलर क्लि 6 का उपयोग करके एक ही मुद्दा था, मैंने सही त्रुटि संदेश प्राप्त करने के लिए इस टैग का उपयोग किया है:

ng test --source-map=false

शायद यह किसी की मदद करेगा :)।


यह क्रोम द्वारा वास्तविक परीक्षण त्रुटि को छिपाने से संबंधित हो सकता है। परीक्षण क्षेत्र कुछ नकली http कारखाने को भ्रमित कर रहा होगा जिसे वह लोड नहीं कर सकता है और इसलिए वह त्रुटि है जो यह रिपोर्ट करेगा। सबसे अधिक संभावना यह है कि त्रुटि ngOnInit क्षेत्र के आसपास होगी जहां एक वस्तु है, कहते हैं, उप वस्तुओं की अपेक्षा करते हैं और वे परिभाषित नहीं हैं।

प्रयास करने और त्रुटि की तह में जाने के लिए, PhantomJS पर अस्थायी रूप से स्विच करें जो इन प्रारंभिक त्रुटियों से कम पीड़ित लगता है और यह आपको वास्तविक त्रुटि की उम्मीद करेगा। कई बार मैंने पाया कि जहां एक वस्तु की उम्मीद की जा रही थी वह पूर्ण नहीं थी। अर्थात:

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

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

ऑब्जेक्ट को सही करने से PhantomJS को पूरा करने की अनुमति मिली और साथ ही क्रोम को अगले परीक्षण के लिए आगे बढ़ना पड़ा।

इसके अलावा मैंने क्रोम से समस्या को दूर करने के लिए एक समाधान नहीं देखा है। कभी भी कोशिश करें और "कोड हटाएं, जब तक कि त्रुटि न हो जाए" को अपनाने के लिए नीति का पालन करें।


यह नए एंगुलर क्ली की समस्या है। --sourcemaps=false साथ अपना परीक्षण चलाएं और आपको सही त्रुटि संदेश मिलेंगे।

यहां देखें विवरण: github.com/angular/angular-cli/issues/7296

संपादित करें:

इसके लिए आशुलिपि है:

ng test -sm=false

कोणीय 6 के रूप में कमांड है:

ng test --source-map=false





angular-cli