Documents

DocumentsContent

테스트 및 티도리 API

QUnit TestCase

이 절에서는 기본적으로 테스트 를 작성하는 방법을 간단하게 설명합니다. 글로 읽어본 뒤, 코드를 보면 이해가 빠릅니다. QUnit 모듈과, 티도리 API에 포함된 Core Class 를 불러오고, Document 로 해석하고자 하는 HTML을 작성한뒤 테스트를 진행합니다. 다음의 예제는 클래스 바인딩 테스트를 작성한 것입니다.

Usage

test/*.js */

/** QUnit Framework */
const QUnit = require('qunit');
/** TIDORY Core API */
const { Core } = require('tidory');

let document = new Core.Document('<p t-class={"tidory":"true"}></p>');

QUnit.module('Class');

QUnit.test('Class', function(assert) {
  Core.Class.bind(document); // <p class="tidory"></p>
  assert.ok(document.$('p').hasClass('tidory'));
});

Core.Document

Document 클래스는 HTML문자열을 지정할 수 있는 문서객체입니다. 해당 객체는 DOM API가 아닌 jQuery 방식으로 호출하여 사용합니다.

Usage

test/*.js */

let document = new Core.Document('<p>TIDORY</p>');

Core.GlobalVariable

GlobalVariable 클래스는 전역변수 해석을 테스트하기 위해 사용할 수 있습니다.

translate(document: Core.Document)

전역변수 를 해석합니다.

Usage

test/*.js */

let document = new Core.Document('<p>@{message}</p>');
        
QUnit.test('GlobalVariable', function(assert) {
  // <p>Tistory Skin</p>
  Core.GlobalVariable.translate(document); 
});

QUnit-tidory.config

QUnit-tidory.config.js
        
globalVariable.register(function(done) {
  done('message', 'Tistory Skin');
});

Core.Directive

Directive 클래스는 사용자 정의 디렉티브 해석을 테스트하기 위해 사용할 수 있습니다.

before(document: Core.Document)

Directive.register 함수에 지정된 첫 번째 콜백입니다.

Usage

test/*.js */

let document = new Core.Document('<p t-test="directive">TIDORY</p>');
        
QUnit.test('Directive::before', function(assert) {
  Core.Directive.before(document); 
});

after(document: Core.Document)

Directive.register 함수에 지정된 두 번째 콜백입니다.

Usage

test/*.js */

let document = new Core.Document('<p t-test="directive">TIDORY</p>');
        
QUnit.test('Directive::after', function(assert) {
  Core.Directive.after(document);
});   

QUnit-tidory.config

QUnit-tidory.config.js

directive.register('test', function(el, value) {
  // ... before
}, function(el, value){
  // ... after
});

Core.Condition

Condition 클래스는 조건부 해석 기능을 테스트하기 위해 사용합니다.

translate(document: Core.Document)

t-if, t-else-if, t-else 를 해석합니다.

Usage

test/*.js */

let document = new Core.Document('<p t-if="true">TIDORY</p><p t-else>TISTORY</p>');

QUnit.test('Condition::if', function(assert) {
  Core.Condition.translate(document);

  assert.ok(document.$('p').length == 1, "Length is must be 1");
  assert.equal(document.$('p').html(), "TIDORY");
});

Core.Class

Class 클래스는 클래스 바인딩 기능을 테스트하기 위해 사용합니다.

bind(document: Core.Document)

t-class 를 해석합니다.

Usage

test/*.js */

let document = new Core.Document('<p t-class={"tidory":"true"}></p>');

QUnit.test('Class', function(assert) {
  Core.Class.bind(document);
  assert.ok(document.$('p').hasClass('tidory'));
});

Core.Async

Async 클래스는 비동기 데이터 기능을 테스트하기 위해 사용합니다.

fetch(document: Core.Document, callback: Function)

API에 등록된 fetch 콜백을 실행합니다.

Usage

test/*.js */
        
let document = new Core.Document('<p></p>');

QUnit.test('Async', function(assert) {
  Core.Async.fetch(document, function() {
    // ...
  });
});

QUnit-tidory.config

QUnit-tidory.config
        
const axios = require('axios');

async.fetch(function(document) {
  return axios.get('http://www.naver.com').then(function(res) {
    console.log(res.data);
  }).catch(function(err) {
    console.log(err);
  });
});

Core.Iteration

Iteration 클래스는 리스트 렌더링 기능을 테스트하기 위해 사용합니다.

translate(document: Core.Document, callback: Function)

t-for 디렉티브를 해석합니다.

Usage

test/*.js */
        
let document = new Core.Document('<p t-for="item in [TIDORY, TISTORY]>@{item}</p>');

QUnit.test('Iteration', function(assert) {
  Core.Iteration.translate(document);
  assert.ok(document.$('p').length == 2, "Length is must be 2");
});