"ত্রুটি: রাউটারের জন্য কোনও সরবরাহকারীর" নেই কারমা-জেসমিন ইউনিট পরীক্ষার কেসগুলি লেখার সময়

Question

আমরা একটি কৌণিক 2 প্রকল্প স্থাপন করেছি এবং তার ভিতরে একটি মডিউল তৈরি করেছি (আমার-মডিউল) এবং সেই মডিউলের ভিতরে নিম্নলিখিত সিএমডি কমান্ড ব্যবহার করে একটি উপাদান তৈরি (আমার-নতুন-উপাদান) তৈরি করা হয়েছে:

ng new angular2test
cd angular2test
ng g module my-module
ng generate component my-new-component

সেট আপ এবং সমস্ত উপাদান তৈরির পরে, আমরা ng testকৌণিক 2 ইলেক্ট্রেস ফোল্ডারের অভ্যন্তরে সেন্টিমিডি থেকে কমান্ডটি চালিয়েছিলাম।

নীচের ফাইলটি আমার আমার নতুন-উপাদান.কম্পোনালটি.এসটি ফাইল :

import { Component, OnInit } from '@angular/core';
import { Router, Routes, RouterModule } from '@angular/router';
import { DummyService } from '../services/dummy.service';

@Component({
  selector: 'app-my-new-component',
  templateUrl: './my-new-component.component.html',
  styleUrls: ['./my-new-component.component.css']
})
export class MyNewComponentComponent implements OnInit {

  constructor(private router : Router, private dummyService:DummyService) { }

  ngOnInit() {
  }
    redirect() : void{
        //this.router.navigate(['/my-module/my-new-component-1'])
    }
}

নীচের ফাইলটি আমার আমার নতুন-উপাদান.কম্পোনেন্ট.স্পেক.টি ফাইল :

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { RouterTestingModule } from '@angular/router/testing';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { DummyService } from '../services/dummy.service';

import { MyNewComponentComponent } from './my-new-component.component';

describe('MyNewComponentComponent', () => {
  let component: MyNewComponentComponent;
  let fixture: ComponentFixture<MyNewComponentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule, NgbModule.forRoot(), DummyService],
      declarations: [ MyNewComponentComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyNewComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  }); 
});

এনজি টেস্ট কমান্ড চালানোর সময় আমরা নীচের সিএমডি ত্রুটি পেয়ে যাচ্ছি:

    Chrome 54.0.2840 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.593 secs / 2.007 secs)
Chrome 54.0.2840 (Windows 7 0.0.0) MyNewComponentComponent should create FAILED
        Failed: Unexpected value 'DummyService' imported by the module 'DynamicTestModule'
        Error: Unexpected value 'DummyService' imported by the module 'DynamicTestModule'

আমরা উপাদান ফাইল এবং স্পেক ফাইল আপডেট করেছি। কোড স্নিপেটের নীচে খুশি।

নীচের ফাইলটি আমার আমার নতুন-উপাদান.কম্পোনালটি.এসটি ফাইল :

import { Component, OnInit } from '@angular/core';
import { Router, Routes, RouterModule } from '@angular/router';
import { DummyService } from '../services/dummy.service';

@Component({
  selector: 'app-my-new-component',
  templateUrl: './my-new-component.component.html',
  styleUrls: ['./my-new-component.component.css']
})
export class MyNewComponentComponent implements OnInit {

  constructor(private router : Router, private dummyService:DummyService, public fb: FormBuilder) { 
  super(fb);
  }

  ngOnInit() {
  }
    redirect() : void{
        //this.router.navigate(['/my-module/my-new-component-1'])
    }
}

নীচের ফাইলটি আমার আমার নতুন-উপাদান.কম্পোনেন্ট.স্পেক.টি ফাইল :

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { FormsModule, FormGroup, FormBuilder, Validators, ReactiveFormsModule} from '@angular/forms';
import { SplitPipe } from '../../common/pipes/string-split.pipe';
import { RouterTestingModule } from '@angular/router/testing';
import { DummyService } from '../services/dummy.service';
import { MyNewComponentComponent } from './my-new-component.component';

describe('MyNewComponentComponent', () => {
  let component: MyNewComponentComponent;
  let fixture: ComponentFixture<MyNewComponentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule, DummyService ,HttpModule, FormBuilder],
      declarations: [ MyNewComponentComponent, SplitPipe]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyNewComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  }); 
});

কিন্তু এনজি টেস্ট কমান্ড চালানোর সময়, আমরা নীচের ত্রুটি পাচ্ছি।

09 12 2016 09:13:48.987:WARN [karma]: No captured browser, open http://localhost:9876/
09 12 2016 09:13:49.008:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
09 12 2016 09:13:49.010:INFO [launcher]: Launching browser Chrome with unlimited concurrency
09 12 2016 09:13:49.420:INFO [launcher]: Starting browser Chrome
09 12 2016 09:13:58.642:INFO [Chrome 54.0.2840 (Windows 7 0.0.0)]: Connected on socket /#QZ9LSSUVeK6KwNDlAAAA with id 46830907
        Failed: Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'
        Error: Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'

Answer 1

পরীক্ষার মডিউলটি সেট আপ করার সময় আপনাকে রাউটার টেস্টিংমডুল আমদানি করতে হবে।

  /* tslint:disable:no-unused-variable */
  import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { By } from '@angular/platform-browser';
  import { DebugElement } from '@angular/core';

  import { RouterTestingModule } from '@angular/router/testing';

  import { MyNewComponentComponent } from './my-new-component.component';

  describe('MyNewComponentComponent', () => {
    let component: MyNewComponentComponent;
    let fixture: ComponentFixture<MyNewComponentComponent>;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        declarations: [ MyNewComponentComponent ]
      })
      .compileComponents();
    }));

    beforeEach(() => {
      fixture = TestBed.createComponent(MyNewComponentComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it('should create', () => {
      expect(component).toBeTruthy();
    });
  });

সম্পাদনা করুন: মক ডামি সার্ভিস সহ উদাহরণ

  /* tslint:disable:no-unused-variable */
  import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { By } from '@angular/platform-browser';
  import { DebugElement } from '@angular/core';

  import { RouterTestingModule } from '@angular/router/testing';

  import { MyNewComponentComponent } from './my-new-component.component';

  // import the service
  import { DummyService } from '../dummy.service';

  // mock the service
  class MockDummyService extends DummyService {
    // mock everything used by the component
  };

  describe('MyNewComponentComponent', () => {
    let component: MyNewComponentComponent;
    let fixture: ComponentFixture<MyNewComponentComponent>;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        declarations: [MyNewComponentComponent],
        providers: [{
          provide: DummyService,
          useClass: MockDummyService
        }]
      })
        .compileComponents();
    }));

    beforeEach(() => {
      fixture = TestBed.createComponent(MyNewComponentComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it('should create', () => {
      expect(component).toBeTruthy();
    });
  });

Comments

মকডম্মি সার্ভিস বাস্তবায়ন ছাড়াই ডামি সার্ভিসিকে প্রসারিত করে কি ডামি সার্ভিসে একই পদ্ধতি ব্যবহার করবে না, ফলে মককে অর্থহীন করে তুলবে?

— elliotwesoff

@ জায়েচেস আপনি গিট লিঙ্ক পোস্ট করতে পারেন উদাহরণস্বরূপ আপনি তৈরি করেছেন বা স্ট্যাকব্লিটজ লিঙ্কটি এটি সবার জন্য সহায়ক হবে।

— জয় ত্রিবেদী

Answer 2

টেস্টিংমডিউল টেস্ট কেস কনফিগার করার জন্য রাউটার টেস্টিংমডুল যোগ করুন

==> আমদানি: [রাউটারস্টেস্টিংমডিউল],

import {RouterTestingModule} from '@angular/router/testing';

beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule], // <====
providers: [],
declarations: [],
});
});