swsnu / swppfall2019

31 stars 23 forks source link

File Upload 시 test code 작성 관련 질문 #217

Open donghyunlee00 opened 4 years ago

donghyunlee00 commented 4 years ago

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();
});

다음과 같은 메시지가 터미널에 출력됩니다. image

handlePhoto() 안의 reader.onloadend()가 실행되지 않는 것 같은데, 어떻게 test code를 짜야 reader.onloadend()의 코드들을 테스트할 수 있을지 궁금합니다.