InnerHTML 출력 텍스트 Javascript를 비웃으십시오.

Question

저는 현재 웹 앱을 빌드하고 바닐라 자바 ​​스크립트 만 사용하는 프로젝트를하고 있습니다. 우리는 자체 테스트 프레임 워크를 작성한 다음이를 앱 테스트에 사용하는 데 어려움을 겪었습니다.

내 ID 태그에 올바른 InnerHTML 텍스트를 출력하도록 컨트롤러를 테스트하려고합니다.

이렇게하면이 테스트를 격리하기 위해 조롱을 사용하고 있습니다. 내 생성자 매개 변수를 조롱하고 커스텀 태그와 id를 생성하고 있지만, console.logs는 그것을 인식하지 못하는 것 같습니다.

// 노트 controller.js

(function(exports) { 
    function NoteController(list, listView, tag) { 
    this.list = list; 
    this.listView = listView; 
    this.tag = tag; 
    } 

    NoteController.prototype.getListView = function() { 
    return this.listView.converted; 
    }; 

    NoteController.prototype.outputHTML = function() { 
    document.getElementById(this.tag).innerHTML = this.getListView(); 
    }; 

    exports.NoteController = NoteController; 
})(this); 

// 컨트롤러 tests.js

describe("#outputHTML",() => { 
    var list = { text: "hello this is another note" }; 
    var listView = { 
     converted: "<ul><li><div>hello this is another note</div></li></ul>" 
    }; 
    var mockElement = document.createElement("div"); 
    mockElement.id = "mock"; 
    mockElement.innerHTML = "hello"; 
    var noteController = new NoteController(list, listView, "mock"); 

    console.log(mockElement); 
// outputs <div id="mock">hello</div> 

    console.log(document.getElementById("mock")); 
// outputs null 

    expect.isEqual(
     "outputs the note as HTML to the page", 
     noteController.outputHTML(), 
     "<ul><li><div>hello this is another note</div></li></ul>" 
    ); 
    }); 

두 번째 CONSOLE.LOG에서 인식되지 않는이 태그를 만든 이유를 아십니까?

나는 이것이 정확하지 않다는 것을 알고 있지만, 나는 단지 document.getElementById을 올바른 방향으로 나아가는 단계로 조롱하려고하고있다. 즉, 내 outputHTML 기능을 테스트하기위한 효과적인 전략이라고 생각하십니까?

Answer 1

귀하의 제안에 감사드립니다. 이것이 내가 통과 시험을하기 위해 생각한 것입니다.

describe("#outputHTML",() => { 
    var list = { text: "hello this is another note" }; 
    var listView = { 
     converted: "<ul><li><div>hello this is another note</div></li></ul>" 
    }; 
    var body = document.getElementsByTagName("body"); 
    var mockElement = document.createElement("span"); 
    mockElement.id = "test"; 
    body.item(0).appendChild(mockElement); 

    var noteController = new NoteController(list, listView, "test"); 

    expect.isEqual(
     "outputs the note as HTML to the page", 
     noteController.outputHTML(), 
     "<ul><li><div>hello this is another note</div></li></ul>" 
    ); 

    body.item(0).removeChild(mockElement); 
}); 

내 함수가 테스트를 통과 한 것으로 인식하는 임시 요소 태그를 생성 할 수있었습니다. 테스트 후에는 필자가 만든 스펙 러너 페이지에 실제로 적용되므로 제거합니다.