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

Question

मैं अपने कोणीय 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' लोड करने में विफल।

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

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

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

Comments

घटक बनाने के लिए, आपको सभी निर्भरताएं प्रदान करने की आवश्यकता है। क्या आप अपना सभी परीक्षण सेटअप दिखा सकते हैं? मैं plnkr

— Aleksandr Petrovskij

मेरे पास यही मुद्दा था और आपको वही पोस्ट मिलीं जो आपने की थीं। मैं एक समाधान खोजने में सक्षम था। मैंने दूसरे प्रश्न पर पोस्ट करना समाप्त कर दिया है, लेकिन आप यहां एक नज़र डाल सकते हैं: stackoverflow.com/a/45419372/6739517 आशा है कि यह मदद करता है!

— नाइल्स टान्नर

इसे देखें: github.com/angular/angular-cli/issues/7296

— titusfx

Answer 1

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

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

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

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

ng test -sm=false

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

ng test --source-map=false

Comments

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

— एलन स्मिथ

इस जवाब ने वास्तव में मेरा दिन बचा लिया! मैं पूरे दिन और रात बिताने के बाद सामान्य रूप से विकास पर छोड़ देने के करीब था, ताकि मैं इसे ठीक करने की कोशिश करूं ताकि मैं व्यक्ति को असफल होने से रोक

— सकूं

आज मुझे यह त्रुटि संदेश आया: हेडलेसक्रोम 65.0.3325 (मैक ओएस एक्स 10.13.4) त्रुटि {"संदेश": "स्क्रिप्ट त्रुटि। \ nat: 0: 0", "str": "स्क्रिप्ट त्रुटि। \ nat: 0 : 0 "} और हटाने - सोर्समैप = झूठी अधिक जानकारी दिखाता है।

— पेन्गुई

एनजी परीक्षण - स्रोत-मानचित्र = गलत ...

— danday74

@ danday74 FTW! जटिल परीक्षण फ़ाइलों को लिखने के बाद, इस पर लटका दिया जाना क्रूर है।

— ब्रैड रिचर्डसन

Answer 2

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

ng test --source-map=false

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

Answer 3

मेरे मामले के लिए एक नकली डेटा समस्या थी और मामले में 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ने सही त्रुटि और रेखा को इंगित किया, और मुझे इसे जल्दी ठीक करने में मदद की।

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

Answer 4

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

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

या

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

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

Answer 5

जैसा कि यहाँ ऊपर सुझाव दिया गया है: https://stackoverflow.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();
  }));

Comments

यदि आपके पास कोई नया प्रश्न है, तो कृपया प्रश्न पूछें बटन पर क्लिक करके इसे पूछें । इस प्रश्न का लिंक शामिल करें यदि यह संदर्भ प्रदान करने में मदद करता है। - समीक्षा से

— एंटोन बालानियुक

ऐसा लग रहा था कि मेरा लक्षण ओपी के समान था, इसलिए मैंने सोचा कि लोगों को मेरे लिए काम करने वाले काम को ठीक करने में मदद मिल सकती है ...

— डेटम गीक

Answer 6

मुझे एक ही समस्या का सामना करना पड़ा और मुझे पता चला है कि इसे ठीक करने के लिए आपको घटक के लिए अपने इनपुट सेट करने होंगे, जैसा कि नीचे दिखाया गया है।

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

यह निश्चित रूप से आपके मुद्दे को हल करेगा।

Answer 7

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

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

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

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

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

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

अद्यतन: ध्यान दें कि यह अब एक बहुत पुराना उत्तर है, मैं अब फैंटमज (ईओएल) का उपयोग करने की सिफारिश नहीं करूंगा। ब्राउज़र परीक्षण रिपोर्टिंग बहुत बेहतर हो गई है और यदि क्रोम आपको दुःख दे रहा है, तो फ़ायरफ़ॉक्स का प्रयास करें, जो आजकल बहुत अच्छी तरह से परीक्षण भी चलाता है।

Answer 8

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

यह मेरी सेवाओं को गर्त 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);
}

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

Answer 9

मेरे मामले में अपराधी था observable.timeout(x).retry(y) सेवा वर्ग स्तर पर ऑब्जर्वेबल पर लौटे कहीं पर लागू किया , फिर उस घटक में जो उस सेवा का उपयोग कर रहा था।

सब कुछ सही ढंग से ब्राउज़र में कोणीय-क्ली 1.4 तक काम किया। फिर कर्मा परीक्षणों (ऐसी मूर्खतापूर्ण त्रुटि के साथ) के दौरान असफल होना शुरू हो गया। समाधान निश्चित रूप से इन टाइमआउट / रिट्री ऑपरेटरों को साफ करने के लिए था।

Answer 10

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

मेरे मामले की अधिक जानकारी यहाँ

Answer 11

मैं क्या कर रहा हूँ:

कंसोल जोड़ें।

उदाहरण के लिए:

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

यह इस पोस्ट में उसी त्रुटि के साथ मेरे परीक्षण में विफल रहा था। जैसा कि ऊपर दिखाया गया है, मेरे पास दो कंसोल थे। पहले वाले ने थुघ को पास किया, लेकिन दूसरे ने नहीं। इसलिए मैंने महसूस किया कि मुद्दा लाइन कॉन्स्टेबल आईडी = params.get ('id') पर है; और मैंने इसे ठीक कर दिया।

उम्मीद है कि यह किसी की मदद करेगा।