कोणीय 2 मैक्स के साथ टेस्टबैड

Question

मैं एक घटक का परीक्षण करने की कोशिश कर रहा हूं जो किसी अन्य सेवा का उपयोग करता है। और मैं सेवा के लिए एक नकली प्रदान करके घटक को अलग करना चाहता हूं। आरसी 5 से पहले मैं बस addproviders का उपयोग कर सकता हूं जिसे अब हटा दिया गया है और अगले आरसी द्वारा हटा दिया जाएगा। इसके बजाय मुझे TestBed का उपयोग करना होगा। जब मैं किसी कारण से नकली कोणीय प्रदान करता हूं तो नकली उन सेवाओं की तलाश में रहती है जिन पर नकली निर्भर करता है। और DI exception फेंकता है। जब मैं सभी निर्भरताओं को प्रदान करता हूं तो परीक्षण काम करता है लेकिन मैं प्रत्येक टेस्ट सूट के लिए खुद को दोहराना नहीं चाहता हूं। और यह बुनियादी ओओ सिद्धांतों को तोड़ देता है। मेरे टेस्ट स्वीट:

describe('Component: DummyRestApi',() => { 

    class DummyRestApiTestService { 

    GetAll() { 

     return Rx.Observable.create(observer => { 

     let data:Data[] = []; 

     data.push({ 
      id: 0, 
      data: 'data' 
     }); 

     observer.next(data); 
     observer.complete(); 

     }); 
    } 

    Add(data) { 
    } 
    } 
    let fixture; 
    let myMockWindow:Window; 
    // ToDo use the mocks 
    beforeEach(() => { 
    myMockWindow = <any> {location: <any> {hostname: '127.0.0.1'}}; 
    TestBed.configureTestingModule({ 
     declarations: [DummyRestApiComponent], 
     providers: [ 
     // ServerAddressResolverService, 
     DummyRestApiComponent, 
     // ConfigurationService, 
     {provide: DummyRestApiService, useClass: DummyRestApiTestService}, 
     // {provide: Window, useValue: myMockWindow} 
     ], 
     imports: [FormsModule, HttpModule] 
    }); 
    TestBed.compileComponents().catch(error => console.error(error)); 


    // addProviders([ 
    // DummyRestApiComponent, 
    // {provide: DummyRestApiService, useClass: DummyRestApiTestService}, 
    // ]); 
    }); 


    describe('Initializing',() => { 

    beforeEach(async(() => { 
     console.log('Compiling'); 
     TestBed.compileComponents().catch(error => console.error(error)); 
     console.log('Compiling again'); 
    })); 

    it('should create an instance', async(() => { 
     var fixture = TestBed.createComponent(DummyRestApiComponent); 
     fixture.detectChanges(); 
     expect(fixture.debugElement.componentInstance).toBeTruthy(); 
     } 
    )); 

}); 

कोणीय 2.0.0-RC5

Answer 1

मैं सिर्फ RC5 करने के लिए अपने बीज परियोजना को नवीनीकृत किया है और एक सरल कार्य करने की घटक के लिए अपने परीक्षण सूट इस प्रकार है:

import { provide } from '@angular/core'; 
import { TestBed, ComponentFixture, async } from '@angular/core/testing'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 

import { TodoModule } from './todo.module'; 
import { TodoComponent } from './todo.component'; 
import { Todo, TodoService } from './todo.service'; 

class MockTodoService { 
    get todos$(): Observable<Todo[]> { 
     return Observable.of<Todo[]>([ 
      { task: 'Task 1', description: 'Description 1', completed: false }, 
      { task: 'Task 2', description: 'Description 2', completed: false } 
     ]); 
    } 

    loadAll() { } 

    add(newTodo: Todo) { } 
} 

describe('TodoComponent',() => { 

    beforeEach(() => { 
     this.service = new MockTodoService(); 

     TestBed.configureTestingModule({ 
      imports: [TodoModule], 
      providers: [provide(TodoService, { useValue: this.service })] 
     }); 

     this.fixture = TestBed.createComponent(TodoComponent); 
    }); 

    it('should print out todo tasks', async(() => { 
     this.fixture.whenStable().then(() => { 
      let element = this.fixture.nativeElement; 
      this.fixture.detectChanges(); 

      expect(element.querySelectorAll('li').length).toBe(2); 
     }); 
    })); 

    it('should call the service on init', async(() => { 
     this.fixture.whenStable().then(() => { 
      spyOn(this.service, 'loadAll'); 
      this.fixture.detectChanges(); 

      expect(this.service.loadAll).toHaveBeenCalled(); 
     }); 
    })); 
}); 

बीज प्रोजेक्ट स्वयं https://github.com/froko/ng2-seed-webpack

पर यह आशा करता है कि यह मदद करता है।

Answer 2

ध्यान दें कि पैट्रिक इनइइकेंस उत्तर प्रदान करता है, जो बहिष्कृत है।

providers: [provide(TodoService, { useValue: this.service })] 

बजाय पढ़ना चाहिए:

providers: [{provide:TodoService, useValue: this.service }]