Angular2에서 detectChanges()를 올바르게 구현하는 방법은 무엇입니까?

Question

나는 재스민에 다음 코드를 가지고 :

it('should pass on writing secondvalue in the input', async(() => { 

     const fixture=TestBed.createComponent(AppComponent); 
     const app=fixture.debugElement.nativeElement.querySelector("input").getAttribute("value"); 
     expect(app).toContain("firstvalue"); 
     fixture.detectChanges(); 
     expect(app).toContain("secondvalue"); 

     })); 

문제는 내가 테스트를 실행하자마자, 테스트가 실패한다는 것입니다. detectChanges()로 인해 기다리기를 기대하지만 그렇지 않습니다.

어떻게 올바르게 구현합니까? 입력에 대한 두 번째 값 입력을 기다리고 값이 "secondvalue"가 될지 확인하십시오.

fixture.detectChanges()은 짝수 차단기처럼 작동하지 않아야합니다. 예를 들어, 누군가가 입력을 시작할 때 입력이 트리거 될 때까지 기다리는 것과 같이?

Answer 1

구성 요소 상태를 변경하면 detectChanges을 실행하여 변경 사항이 전파됩니다. 예를 들어

,

pageTitle: string; 
ngOnInit() { 
    this.pageTitle = 'first title'; 
} 

그리고 템플릿

: 시험에서

<h2>{{pageTitle}}</h2> 

:

const fixture = TestBed.createComponent(AppComponent); 
const h4 = fixture.debugElement.query(By.css('h4')); 

console.log(component.pageTitle); // 'first title' 
console.log(h4.nativeElement.textContent); // '' 
fixture.detectChanges(); // Propagates ngOnInit changes 
console.log(h4.nativeElement.textContent); // 'first title' 

component.pageTitle = 'second title'; // Here we change state 
console.log(component.pageTitle); // 'second title' 
console.log(h4.nativeElement.textContent); // 'first title' 
fixture.detectChanges(); // Propagate changes 
console.log(h4.nativeElement.textContent); // 'second title' 

전형적인 사용 사례가 같은 상태에 의존하는 것을 확인한다 템플릿 있음 :

구성 요소의

:

over18: boolean = false; 

테스트 : 나는 요소의 논리를 테스트하고있어

it('should show restricted content if over 18',() => { 
    component.over18 = true; // change state from the default one 
    fixture.detectChanges(); // propagate changes to view 

    // now we can actually test 
    const divElem = fixture.debugElement.query(By.css('div#xxx')); // would be null if not shown in DOM 
    expect(divElem).toBeTruthy(); 
}); 

참고. 입력 값에 "asdf"를 입력하면 해당 값이 업데이트 될 것이라는 것을 내 의견으로는, 단위 테스트 범위에서 벗어났습니다.이 기능은 HTML 표준/각도 팀에서 제공합니다.