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




unit-testing karma-jasmine (9)

मैं अपने कोणीय 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() हूं, तब भी कोई अंतर नहीं है। मैं इन परीक्षणों को कैसे पास कर सकता हूं?


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

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


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

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

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


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

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

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


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

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

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

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

ng test -sm=false

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

ng test --source-map=false


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

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

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


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

ng test --source-map=false

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


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

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

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

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

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

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


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

कंसोल.लॉग () एस जोड़ें, लाइन इनकॉन्इन्ट () के बाद लाइन और पता करें कि यह कितनी दूर तक जाता है, फिर उस लाइन का निरीक्षण करें जो इसे पास नहीं करती है।

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

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') पर है; और मैंने इसे ठीक कर दिया।

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





angular-cli