swppfall2019
swppfall2019 copied to clipboard
File Upload 시 test code 작성 관련 질문
File Upload에 대한 test code를 작성하다가 막히는 부분이 생겨 질문드립니다.
아래와 같이 input을 받아 file이 upload되면 handlePhoto 함수를 실행합니다.
<Input type="file" id="photo_file"
onChange={(event) => this.handlePhoto(event)} accept=".jpg,.png,.bmp,.jpeg" />
handlePhoto 함수는 다음과 같습니다.
handlePhoto = (event) => {
event.preventDefault();
const reader = new FileReader();
let file = event.target.files[0];
reader.onloadend = () => {
console.log("**");
const imageData = reader.result.split(",")[1];
const img = new Image();
img.src = reader.result;
img.onload = () => {
this.fileUpload(imageData)
.then((result) => {
this.drawInCanvas(result.info, result.num_faces);
});
}
}
reader.readAsDataURL(file);
}
이를 test하기 위해 test code를 아래와 같이 짜보았는데,
it(`should call 'handlePhoto'`, function (done) {
const component = mount(photoUpload);
const photoFile = new File(['(⌐□_□)'], 'TEST_FILE.png', { type: 'image/png' });
const wrapper = component.find('#photo_file').at(0);
wrapper.simulate('change', { target: { files: [photoFile] } });
done();
});
다음과 같은 메시지가 터미널에 출력됩니다.
handlePhoto() 안의 reader.onloadend()가 실행되지 않는 것 같은데, 어떻게 test code를 짜야 reader.onloadend()의 코드들을 테스트할 수 있을지 궁금합니다.