কৌণিক কর্মফল জেসমিন ত্রুটি: অবৈধ অবস্থা: নির্দেশের জন্য সারাংশ লোড করা যায়নি

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'.

আরও ...

আপডেট: শেষ সমাধান

সমস্যা ছিল হিরোস মডুলেল কোথাও আমদানি করা হয়নি। এটি কাজ করে, কারণ হিরোস মোডুল হেরোডেটেল কম্পোনেন্ট ঘোষণা করে যা প্রাথমিক সমস্যা ছিল :

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

এটি পরীক্ষা করার জন্য আপনাকে উপাদানটি ঘোষণা করার দরকার নেই, আপনাকে পরীক্ষা বিছানাটি

— স্টিভেনিকাস

"আপডেটেড: ফাইনাল সলিউশন " এর পরিবর্তে, দয়া করে একটি স্বতন্ত্র উত্তর পোস্ট করুন যাতে আপনার প্রশ্নটি সমাধান থেকে স্পষ্টভাবে বর্ণিত হয় এবং সমাধানটি সমস্ত সম্ভাব্য সমাধানের সাথে সাথে উপরে / ডাউন ভোটের সাপেক্ষে।

— ggorlen

Answer 1

আপনি পাশ HeroDetailComponentথেকে TestBed.createComponent()প্রথম উপাদান প্রকাশক ছাড়া:

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

আশা করি এটা সাহায্য করবে.

---

আপনার পরীক্ষায় নিম্নলিখিত ত্রুটিগুলির জন্য আপডেট: আরও কিছু আমদানি যুক্ত করা হয়েছে (কেবলমাত্র আপনার হিরোমডুলকে একটি নীলনকশা হিসাবে গ্রহণ করুন কারণ এটিই মূলত যা আপনি আমদানি করতে এবং সরবরাহ করতে চান)।

Comments

যদি আমি এই ঘোষণাটি যুক্ত করি তবে আরও ত্রুটি উপস্থিত হবে। আমি তথ্য আপডেট করেছি, আপনি এটি উপরে দেখতে পারেন।

— ismaestro

ঠিক আছে তবে আপনি এই ত্রুটি থেকে মুক্তি পাবেন। ত্রুটিগুলি অনুসরণ করা আপনার টেস্ট সেটআপের সাথে আর একটি সমস্যা হতে পারে।

— লেক্সিথ

এর পরে কী ত্রুটি আসে?

— লেক্সিথ

পাইপ 'অনুবাদ' খুঁজে পাওয়া যায় নি ("<h1 শ্রেণি =" বিভাগ-শিরোনাম "> {{[ERROR ->] 'নায়কদেখেল' | অনুবাদ}} </h1> <এমডি-প্রগতি-স্পিনার * এনজিআইফ ="! নায়ক "শ্রেণি =" অগ্রগতি "): এনজি: ///DynamicTestModule/HeroDetailComp घटक.html@0: 28 'রঙ' বাঁধাই করতে পারে না কারণ এটি 'এমডি-প্রগ্রেস-স্পিনার' এর পরিচিত সম্পত্তি নয়

— ইসমায়েস্ট্রো

এবং ভুলে যাবেন না যে এটি ঘটছে কারণ এটি একটি অলস লোডিং মডিউল। কারণ আমার অন্যান্য পরীক্ষাগুলি যে ব্যর্থ হয় না ...

— ইসমাস্ট্র

Answer 2

আপনি ঘোষণাগুলি মিস করছেন, আপনাকে ঘোষণার মধ্যে পরীক্ষা করা শ্রেণিটি যুক্ত করা দরকার।

declarations: [component]

Comments

আমার ক্ষেত্রে, আমি টেস্টবিডের কনফিগারেশনটি একটি উপাদান থেকে নতুন একটিতে অনুলিপি করেছিলাম এবং তারপরে, আমি পরীক্ষার অধীনে উপাদানটি অন্তর্ভুক্ত করি নি।

— টোনতিও

Answer 3

আমার সহকর্মী এবং আমার এই সমস্যাটি পেয়েছিলেন তবে ঠিক করাটি ইন্টারনেটের অন্য কোনও কিছুর চেয়ে আলাদা।

আমরা ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করছি এবং ফোল্ডারের নামগুলি কেস সংবেদনশীল। তার কারণে, আমরা সবাইকে একটি ছোট হাতের নামকরণ কনভেনশন ব্যবহার করতে বলেছিলাম তবে শেষ পর্যন্ত একটি বড় হাতের নাম উত্স নিয়ন্ত্রণে চলেছে। চতুর্দিকে আমরা এটির নামকরণ করেছি এবং সবকিছু ঠিক আছে।

এক মাস পরে, আমার সহকর্মী এই ত্রুটি বার্তার সাথে ব্রেক করার জন্য একটি নির্দিষ্ট ইউনিট পরীক্ষা দেওয়া শুরু করলেন। কেবলমাত্র তার কম্পিউটারটি সেই পরীক্ষায় ব্রেক করছিল। আমরা আক্ষরিক অর্থে এমন সমস্ত কোডটি মন্তব্য করেছিলাম যা পরীক্ষাটি প্রভাবিত করতে পারে এবং আমরা তবুও ত্রুটি পেয়েছি। অবশেষে, আমি বিশ্বব্যাপী ক্লাসটি অনুসন্ধান করেছিলাম এবং আমরা বুঝতে পারি যে ফোল্ডারের নামটি বড় হাতের অক্ষরে ফিরে গেছে। আমরা এর পরিবর্তে ছোট হাতের নাম রেখেছি, কোনও মুলতুবি পরিবর্তনগুলি স্বীকৃত নয় যা আমি যুক্ত করতে পারি ..., এবং পরীক্ষাটি কার্যকর হয়েছিল।

স্টাইল গাইড অনুসরণ করার জন্য এটি একটি পাঠ্য হওয়া যাক। :)

স্পষ্টতার জন্য, ফিক্স ফোল্ডার নাম পরিবর্তন অনুরূপ ছিল FOOথেকে foo।

Answer 4

টেস্টবেড কনফিগারেশনের সরবরাহকারী হিসাবে ঘোষণা এবং পরিষেবাগুলিতে উপাদান যোগ করার কারণে এই ধরণের ত্রুটি উত্থাপিত হয়েছিল।

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

Answer 5

আপনাকে অবশ্যই সঠিক উপায়ে হিরোডিটল কম্পোনেন্টটি আমদানি করতে হবে । লক্ষ্য করুন যে এমনকি চিঠিপত্রের ক্ষেত্রেও এটি গুরুত্বপূর্ণ। অর্থাত ( '@ কৌণিক / ফরম' সঠিক, কিন্তু '@ কৌণিক / ফরম' নয়।

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#comp घटक-test-basics