단위 테스트 용 핸들 막대 템플릿

Question

저는 YUI3에서 클라이언트 측 테스트를 만들고 테스트중인 페이지의 핸들 막대 템플릿을 컴파일해야합니다.

우리는 렌더링 엔진으로 hbs가 설정된 노드 응용 프로그램을 실행 중이므로 요청이 서버에 도착하면 라우터는 res.render()를 호출하고 views 디렉토리의 .hbs 파일을 직접 호출하여 응답합니다 .

테스트에서 내가 핸들 바 템플릿을 인스턴스화하고 DOM에 할당해야하지만 테스트는 자바 스크립트이므로 파일 스트림 기능에 액세스 할 수 없으며 handlebars.compile()은 경로를 사용하지 않습니다. 논증.

기본적으로이 같은 뭔가를 원하지만 어디 Handlebars.compile() 메소드가 연속적으로 참조 된 템플릿 파일을 컴파일합니다

var body = A.one(document.body); 
var container = A.Node.create('<div id="test-container"></div>'); 
var domTemplate = Handlebars.compile('../../../../views/campaign/set-campaign-properties.hbs'); 
var dom = A.Node.create(domTemplate); 
container.append(dom); 
body.append(container); 

Answer 1

클라이언트와 사이에 큰 차연이 있음을 명심를 서버에서, 당신은 몇 가지 이상한 문제를 일으킬 수있는 서버의 클라이언트 측 항목을 테스트하도록 요청하고 있지만 도움이되는 좋은 도구가 있습니다. 일반적으로 유닛 테스트에서 템플릿 렌더링을 수행 할 때 phantomjs 나 selenium과 같은 것을 사용합니다. 그러나 jsdom 또는 jest를 사용하여 서버 측에서 dom을 구문 분석 할 수 있습니다.

내가 jsdom와 샘플을 일한

, http://runnable.com/me/VIZN1VmFRzsBJu8r

var Handlebars = require("handlebars") 
var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " + 
      "{{kids.length}} kids:</p>" + 
      "<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>"; 
var template = Handlebars.compile(source); 

var data = { "name": "Alan", "hometown": "Somewhere, TX", 
      "kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]}; 
var templateResult = template(data); 

var jsdom = require("jsdom"); 

jsdom.env(
    templateResult, 
    ["http://code.jquery.com/jquery.js"], 
    function (errors, window) { 
    console.log("contents of p tag:", window.$("p").text()); 
    } 
);