Angular 2 TestBed, 의존성 주입없는 모의 메소드

Question

TestBed을 사용하여, 우리는 의존성 주입으로 사용 가능한 클래스에 대한 모의 클래스를 생성 할 수 있습니다. 예를 들어, MyButtonClass은 ElementRef 및 MyService에 액세스 할 수 있습니다. 이들이 종속성 삽입으로 구현되어 있으므로이를 대체 할 수 있습니다. 내가 가지고있는 문제는 재스민 테스트를 작성하기 위해서, 의존성 주입으로 액세스되지 않는 클래스의 메소드를 오버라이드 (override)하기 위해 모의 클래스를 만들어야한다는 것이다.

이 경우 ScriptLoader.load은 전체 공간에 ThirdPartyCheckout을로드합니다. 이것은 Jasmine이 subscribe 연산자 안에있는 것을 읽었을 때 사용할 수 없다는 것을 의미합니다. 이런 이유로 저는 처음과 나중을 조롱하고 싶습니다. 아니면이 문제를 해결할 다른 방법이있을 수 있습니다.

ScriptLoader.load 메서드와 ThirdPartyCheckout.configure 메서드를 재정의하기 위해 모의 클래스를 만드는 방법을 제안 할 수 있다면 좋을 것입니다.

이 지침 테스트 할 :

@Component({ 
    selector: 'test-cmp', 
    template: '' 
}) 
class TestComponent {} 

class mockMyService { 
    getKey() { 
     return Promise.resolve('this is a key in real code'); 
    } 
} 

describe('myButton',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [TestComponent, MyButtonClass], 
      providers: [ 
       {provide: MyService, useClass: mockMyService} 
      ] 
     }); 
    }); 

    describe('ngAfterViewInit', fakeAsync(() => { 
     const template = '<div><div myButton></div></div>'; 
     TestBed.overrideComponent(TestComponent, {set: {template: template}}); 
     let fixture = TestBed.createComponent(TestComponent); 
     fixture.detectChanges(); 
     tick(); 
    })); 
}); 

이

Answer 1

기능 일류 시민이되고, 당신은 그냥

let originalFn; 

beforeEach(() => { 
    originalFn = ScriptLoader.load; 
}); 

afterEach(() => { 
    ScriptLoader.load = originalFn; 
}); 

it('...', fakeAsync(() => { 
    ScriptLoader.load = (url, el: Element): Observable<string> => { 
    return Observable.of('HelloSquirrel'); 
    }; 
    ... 
})); 

에 새로운 기능을 할당 할 수 있습니다 : 여기

@Directive({ 
    selector: '[myButton]' 
}) 
export class MyButtonClass implements AfterViewInit { 

    private myKey: string; 

    constructor(private _el: ElementRef, private myService: MyService) {} 

    ngAfterViewInit() { 
     this.myService.getKey() 
      .then((myKey: string) => { 
       this.myKey = myKey; 
       ScriptLoader.load('https://thirdpartyurl.js', this._el.nativeElement) 
        .subscribe(
         data => { 
          this.handeler = ThirdPartyCheckout.configure(<any>{ 
           key: this.myKey 
           // etc 
           // and some methods go here 
          }); 
         }, 
         error => { 
          console.log(error); 
         } 
        ); 
     }); 
    } 
} 

테스트 코드

이 외에도 DI 사용을 고려할 수도 있습니다. DI를 사용하는 주된 이유 중 하나는 더 나은 테스트 가능성입니다. ScriptLoader의 경우 메서드를 비 정적 메서드로 만들고 제 3 자 라이브러리의 경우 추상화 서비스 계층으로 만듭니다.