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




angular karma-runner (4)

আমি একটি গিথুব সংগ্রহশালা বিকাশ করছি (কৌণিক 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/[email protected]: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();
  }));
});

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


আপনি HeroDetailComponent কম্পোনেন্টটিকে প্রথম উপাদানটি ঘোষণা না করেই TestBed.createComponent() পাস HeroDetailComponent :

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

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

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


আপনি যদি কোনও উপাদানকে সংকলন না করে পরীক্ষা করতে চান তবে সরবরাহকারী হিসাবে ঘোষণা করে আপনি এটি করতে পারেন:

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


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

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

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

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

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





angular-cli