कोणीय कर्म जैस्मीन त्रुटि: अवैध स्थिति: निर्देश के लिए सारांश लोड नहीं कर सका

Question

मैं एक गितुब भंडार (कोणीय 7 और कोणीय-क्ली के साथ) विकसित कर रहा हूं , और मेरे पास मास्टर शाखा में काम करने वाले कर्म और जैस्मीन के साथ कुछ परीक्षण हैं।

अब मैं आलसी लोडिंग सुविधा को जोड़ने की कोशिश कर रहा हूं, बात यह है कि परीक्षण जो पहले पारित हो गए थे, अब वे नहीं करते हैं। यह हास्यास्पद है क्योंकि केवल आलसी लोडिंग मॉड्यूल से परीक्षण विफल हो रहे हैं ...

यहाँ कोड और त्रुटि है:

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

त्रुटि यह है:

Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED
    Error: Illegal state: Could not load the summary for directive HeroDetailComponent.
        at syntaxError Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:1690:22)
        at CompileMetadataResolver.getDirectiveSummary Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:15272:1)
        at JitCompiler.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:26733:26)
        at TestingCompilerImpl.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler/testing.es5.js:484:1)
        at TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:874:1)
        at Function.TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:652:1)
        at UserContext.it Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/src/app/heroes/hero-detail/hero-detail.component.spec.ts:18:29)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:391:1)
        at ProxyZoneSpec.onInvoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/proxy.js:79:1)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:390:1)

यदि आपको इसकी आवश्यकता है, तो आप अधिक विवरण के लिए पूरी परियोजना देख सकते हैं।

अद्यतन: इस तरह घोषित घोषणा:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      declarations: [HeroDetailComponent],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

अब, नई त्रुटियाँ दिखाई देती हैं:

The pipe 'translate' could not be found ("<h1 class="section-title">{{[ERROR ->]'heroDetail' | translate}}</h1>
    <md-progress-spinner *ngIf="!hero"
                         class="progre"): ng:///DynamicTestModule/HeroDetailComponent.html@0:28
    Can't bind to 'color' since it isn't a known property of 'md-progress-spinner'.

और अधिक ... यह कोणीय सामग्री से सभी निर्देशों और घटकों की तरह है, और पाइप एनएक्सएक्स-ट्रांसलेशन / कोर से अनुवाद करते हैं, इसमें शामिल नहीं हैं ...

अद्यतन: अंतिम समाधान

समस्या यह थी कि HeroModule को कहीं भी आयात नहीं किया गया था। यह काम करता है, क्योंकि HeroModule HeroDetailComponent घोषित करता है, जो प्रारंभिक समस्या थी :

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroesModule} from '../heroes.module';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule,
        HeroesModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

Comments

आपको इसे परीक्षण करने के लिए घटक घोषित करने की आवश्यकता नहीं है, आपको बस परीक्षण बिस्तर को थोड़ा अलग तरीके से सेट करने की आवश्यकता है: github.com/angular/angular/issues/17477#issuecomment-510397690

— Stevanicar

Answer 1

आप पारित कर दिया HeroDetailComponentकरने के लिए TestBed.createComponent()पहले घटक की घोषणा के बिना:

TestBed.configureTestingModule({
  imports: [AppModule,
     CommonModule,
     FormsModule,
     SharedModule,
     HeroRoutingModule,
     ReactiveFormsModule
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'}
  ],
  declarations: [HeroDetailComponent]
}).compileComponents();

आशा करता हूँ की ये काम करेगा।

---

अपने परीक्षण में निम्नलिखित त्रुटियों के लिए अपडेट करें: कुछ और आयात जोड़े (बस अपने HeroModule को ब्लूप्रिंट के रूप में लें क्योंकि यह मूल रूप से वही है जो आप आयात और प्रदान करना चाहते हैं)।

Comments

यदि मैं उस घोषणा को जोड़ देता हूं, तो अधिक त्रुटियां दिखाई देती हैं। मैंने जानकारी अपडेट की, आप इसे ऊपर देख सकते हैं।

— ismaestro

ठीक है, लेकिन यह है कि आप इस त्रुटि से कैसे छुटकारा पाएं। निम्नलिखित त्रुटि आपके परीक्षण सेटअप के साथ एक और समस्या हो सकती है।

— lexith

आगे क्या त्रुटि आई?

— lexith

पाइप 'अनुवाद' नहीं मिल सका ("<h1 class =" अनुभाग-शीर्षक "> {{[ERROR ->] 'HeroDetail' | Translate}} </ h1> <md-progress-spinner * ngf ="! " Hero "class =" progre "): ng: ///DynamicTestModule/HeroDetailComponent.html@0: 28 'कलर' से नहीं बंध सकता क्योंकि यह '

— md-

और मत भूलो, कि यह हो रहा है क्योंकि यह एक आलसी लोडिंग मॉड्यूल है। क्योंकि अन्य परीक्षण जो मुझे असफल नहीं हुए ...

— ismaestro

Answer 2

आप घोषणाओं को याद कर रहे हैं, आपको घोषणाओं में परीक्षण किए जा रहे वर्ग को जोड़ना होगा।

declarations: [component]

Comments

मेरे मामले में, मैंने TestBed के कॉन्फ़िगरेशन को एक घटक से नए एक में कॉपी किया और फिर, मैंने परीक्षण के तहत घटक को शामिल नहीं किया।

— टन अनुपात

Answer 3

TestBed कॉन्फ़िगरेशन के प्रदाता में घोषणाओं और सेवाओं में अनुपलब्ध घटक को जोड़ने के कारण इस प्रकार की त्रुटि हुई।

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: 'home', component: DummyComponent },
        { path: 'patients/find', component: DummyComponent }
      ])],
      declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent],
      providers : [BreadCrumbService]
    });

Answer 4

मेरे सहकर्मी और मेरे पास यह मुद्दा था लेकिन फिक्स इंटरनेट पर किसी भी चीज़ से अलग था।

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

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

चलो शैली गाइड का पालन करने के लिए एक सबक हो। :)

स्पष्टता के लिए, फिक्स फ़ोल्डर के नाम FOOको बदलने के समान था foo।

Answer 5

आपको सही तरीके से घटक HeroDetailComponent आयात करना होगा । गौर करें कि रास्तों में भी अक्षरों का मामला मायने रखता है। अर्थात ('@ कोणीय / रूप' सही है, लेकिन '' कोणीय / प्रपत्र '' नहीं है।

Answer 6

उन लोगों के लिए जो अभी भी इस मुद्दे के साथ हैं - मैंने एक अलग जीथुब मुद्दा पढ़ा जिसमें पहले से कॉलबैक फ़ंक्शन में किए गए कोणीय टीम में बदलाव पर चर्चा की गई थी।

मैंने जो किया था यह रहा:

beforeAll(async(() => {
    TestBed.configureTestingModule({
        declarations: [BannerNotificationComponent]
    }).compileComponents()

    fixture = TestBed.createComponent(BannerNotificationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
}));

उपयोग करने से पहले सभी समस्या को हल करता है। आशा है कि यह दूसरों की मदद करता है क्योंकि इस अस्पष्ट बग को हल करने में मुझे एक दिन लग गया।

Answer 7

यदि आप किसी घटक का संकलन किए बिना उसका परीक्षण करना चाहते हैं तो आप उसे प्रदाता घोषित कर सकते हैं:

beforeEach(() => {
  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  });
  // inject both the component and the dependent service.
  comp = TestBed.get(WelcomeComponent);
  userService = TestBed.get(UserService);
});

देखें: https://angular.io/guide/testing#component-test-basics