각도 2 RC5 테스트 detectChanges 나는 다음과 같은 인터페이스와 loginform 구성 요소를 짓고 있어요

Question

작동하지 :

<login-form onlogin="submit()"></login-form> 

을 그리고 그 테스트 코드입니다 : 나는이 메시지를 받고 있어요

it("Should send credentials out of the component", async(() => { 
    TestBed.compileComponents().then(() => { 
     const fixture = TestBed.createComponent(LoginFormComponent); 
     let component = fixture.componentInstance; 
     spyOn(component.onlogin, "emit"); 

     let domRef = fixture.nativeElement; 
     domRef.querySelector("input[name='username']").value = "test@test.com"; 
     domRef.querySelector("input[name='password']").value = '1234'; 
     domRef.querySelector("form").dispatchEvent(new Event('submit')); 

     fixture.detectChanges(); 

     let expectedSubmitData:UserCredentials = { 
     username: "test@test.com", 
     password: "1234" 
     }; 
     expect(component.onlogin.emit).toHaveBeenCalledWith(expectedSubmitData); 
    }); 
    })); 

:

Expected spy emit to have been called with [ Object({ username: 'test@test.com', password: '1234' }) ] but actual calls were [ Object({ username: '', password: '' }) ] 

그래서 입력 값을 채우는 방법은 무엇이며 모델이 이러한 변경을 감지합니까?

Answer 1

다음 작업을 시도해보십시오. 저에게 도움이되었으므로 !!

let domRef = fixture.nativeElement; 
let userInput = domRef.querySelector("input[name='username']") 
userInput.value = "test@test.com"; 
userInput.dispatchEvent(new Event('input')); 
let passwordInput = domRef.querySelector("input[name='password']") 
passwordInput.value = '1234'; 
passwordInput.dispatchEvent(new Event('input')); 
fixture.detectChanges(); 
domRef.querySelector("form").dispatchEvent(new Event('submit')); 
let expectedSubmitData:UserCredentials = { 
    username: "test@test.com", 
    password: "1234" 
}; 
expect(component.onlogin.emit).toHaveBeenCalledWith(expectedSubmitData);