test-case.html

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jdt.js"></script>

<style>

	div.library { border : 2px solid black }
	div.library .statistics { border : 1px solid red }
	table.books { border : 1px solid black; width : 100%; }
	table.books .book .name span { font-weight : bold; color : red; }
	table.books .book .authors em { font-style : italic; color : green; }

	.error-message { border : 2px solid red; color : red; }
	
	.class_attribute_test .object { float: left; width: 150px; height: 150px; font-size: 20px; font-weight: bold; color: #fff; padding: 10px;  margin: 0 15px;}

  .black { background-color: #000; }
  .red { background-color: #fd0000; }
  .green { background-color: #393; }
  .blue { background-color: #3465cb; }
  
  h2 { margin: 30px 0;}

</style>

<script>

$(function(){
    JDT.helper.DEBUG = false;

    var json_data = { 
     'library' : {
       'statistics' : { 'books-count':'10', 'currently-reading':'madness.txt'},
       'books' : [
         {'name' : 'Amber 1', 'authors' : ['Zheliazny', 'Plasmazny', 'Zemlianyj'], 'summary':'The Amber story - book 1', 'genre' : 'science-fiction'},
         {'name' : 'Amber 2', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 2', 'genre' : 'science-fiction'},
         {'name' : 'Amber 3', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 3', 'genre' : 'science-fiction'},
         {'name' : 'Amber 4', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 4', 'genre' : 'science-fiction'},
         {'name' : 'Amber 5', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 5', 'genre' : 'science-fiction'}
       ],
       'shelfs' : [],
       'a-nema' : 'takogo'
     }
    }

    JDT.process(json_data); 

});

</script>

<h2>General test</h2>

<div class="advanced_test library">
  <div class="statistics">
   I have <span class="books-count">0</span> books in my collection and i am currently reading : <span class="currently-reading">a book</span>
  </div>
  <table class="books">
    <tr class="listing-header">
      <th>name</th>
      <th>author</th>
      <th>summary</th>
      <th>genre</th>
    </tr>
    <tr class="book item">
      <td class="name">
        <span class="value"></span>
      </td>
      <td class="authors">
        <em class="item"></em>
      </td>
      <td class="summary">
        anytexthere
      </td>
      <td class="genre">
        
      </td>
    </tr>
  </table>
</div>

<script>
$(function(){ 
	try {
    JDT.process([1], jQuery('.error_test')); 
		// test
		should_equal('.error_test', jQuery('.error_test .list .item').text(), 1);
	} catch (e) {
		// error should apper here
	}
});
</script>
<div class="error_test">
	<div class="list">
	  <p class="item">hello</p>
	</div>
</div>

<hr/>

<h2>Simple key:value test</h2>

<script>
$(function(){ 
  JDT.process('{"key":"value", "attr":"attrval"}', jQuery('.string_json_test')); 
  // test
  should_equal('.string_json_test', jQuery('.string_json_test .key').text(),  'value' );	
  should_equal('.string_json_test', jQuery('.string_json_test').attr('attr'),  'attrval' );	
});


function should_equal(error_class, value1, value2) {
	if ( value1 != value2 ) { jQuery(error_class).prepend('<div class="error-message">ERROR</div>'); };
}
</script>

<div class="string_json_test" attr="none">
	  <p class="key">value-expectation</p>
</div>


<hr/>

<script>
var links_data = [
	{"link":{"href":"http://yahoo.com", 	"name":"yahoo"}},
	{"link":{"href":"http://altavista.com", "name":"altavista"}},
	{"link":{"href":"http://google.com", 	"name":"google"}},
	{"link":{"href":"http://bing.com", 		"name":"bing"}}
]	

$(function(){ 
	JDT.process(links_data, jQuery('.attributes_test')); 
	// test
	jQuery.each(links_data, function(index, link){
		should_equal('.attributes_test', link["link"]["href"], jQuery('.attributes_test .link:eq('+index+')').attr("href") );
		should_equal('.attributes_test', link["link"]["name"], jQuery('.attributes_test .link:eq('+index+') .name').text() );
})
	
});


function should_equal(error_class, expected, got) {
	if ( expected != got ) { 
		var error_message_container = jQuery(error_class).find('.error-message')
		if ( error_message_container.length == 0 ) { error_message_container = jQuery(error_class).prepend('<div class="error-message"><pre></pre></div>'); }
		
		var error_log = jQuery(error_class).find('.error-message pre').append('ERROR: expected "'+expected+'", got "'+got+'\n');
	};
}
</script>

<div class="attributes_test">	
  <h2>Attributes test</h2>
	The search engines
	<ul>
	<li class="item"><a class="link" href="http://yahoo-template.com"><span class="name">yahoo-template</span></a></li>
	<li class="item"><a class="link" href="http://google-template.com"><span class="name">google-template</span></a></li>
	</ul>
</div>
<hr/>
<script>
$(function(){ 
	CONTAINER=jQuery(".input-test");
	data = {'color' : 'red', 'size' : 15 }
	JDT.process(data, CONTAINER);
	// test
	should_equal(CONTAINER, data['color'], jQuery(CONTAINER).find('.color input.value').val());
	should_equal(CONTAINER, data['size'], jQuery(CONTAINER).find('input.size').val());
})
	
</script>
<div class="input-test">	
  <h2>input value test</h2>
	<span class="color"><input class="value" type="text" value="blue-template" /></span>
	<input class="size" type="text" value="10-template" />
</div>

<script>
var class_attribute_data = [
	{"object":{"class":"red"}},
	{"object":{"class":"green"}},
	{"object":{"class":"blue"}},
	{"object":{"class":"black"}}
]	

$(function(){ 
	JDT.process(class_attribute_data, jQuery('.class_attribute_test')); 
	
});
</script>

<hr/>
<div class="class_attribute_test">
  <h2>"class" attribute test</h2>
  <div class="item object">
    JDT
  </div>
</div>