<!DOCTYPE html>
<html>
<head>
<title>Yote Template Tests</title>
<style>
.fail { color:red }
.pass { color:green }
body { background-color:wheat }
.hide { display:none }
</style>
<script src="/yote/JS"></script>
<script>
<!--
var tests = 0;
var failed = 0;
var calls_made = 0;
$.yote.old_message = $.yote.message;
$.yote.message = function( params ) {
calls_made++;
return $.yote.old_message( params );
}
function fail( test ) {
return function(d) {
++failed;
++tests;
$('#tests').append( "<span class=fail>FAILED : </span>" + test + '<BR>' );
}
}
function pass( test ) {
return function(d) {
++tests;
$('#tests').append( "<span class=pass>PASSED : </span>" + test + '<BR>' );
}
}
function msg( txt ) {
$('#tests').append( txt + '<BR>' );
}
function is( result, expected, msg ) {
if( result === expected ) {
pass( msg )();
}
else {
fail( msg + "( expected '" + expected + "' and got '" + result +"')" )();
}
}
function ok( result, msg ) {
if( result === true ) {
pass( msg )();
}
else {
fail( msg )();
}
}
function wrap_up() {
$( '#results' ).append( "<BR>Calls made " + calls_made + "<BR>" );
if( failed > 0 ) {
$('#results').append( "Failed " + failed + " tests out of " + tests );
} else {
$('#results').append( "Passed all " + tests + " tests" );
}
var d = new Date();
var t2 = d.getTime();
var d2 = new Date();
$('#tests').append( "<br>tests completed in " + Math.round(d2.getTime() - t2) + " ms" );
} //wrap_up
var step_count = 0;
function step( msg ) {
console.log( "step " + step_count + ':' + msg );
step_count++;
}
$().ready(function(){
/*
Test the following template parts
<# comments go here #>
<??? function( ctx ) ...
- test ability to set values in the context
- test ability to return other filled in templates
<$$$ controlname html
<?? function( ctx ) ....
<$$ template
<$$ List template list max_rows $$>
<$$ Hash template list max_rows $$>
<$ var $>
<$ _index_ $>
<$ _hashkey_ $>
<? function( ctx ) ... ( after render )
*/
$.yote.templates.import_templates( '/templates/yote_templates.html' );
$.yote.templates.import_templates( '/templates/default_templates.html' );
function do_tests() {
// init yote
$.yote.templates.debug = false;
$.yote.init('Yote::Test::Template');
$.yote.logout();
$.yote.reinit();
try {
var app = $.yote.fetch_default_app();
app.reset();
var sandbox = app.get_sandbox();
sandbox.set( 'name', 'sandy' );
$.yote.templates.init();
$.yote.templates.refresh();
is( $.yote.templates.fill_template( 'Comments' ).trim(), 'This template has comments', '$.yote.templates.fill_template works' );
is( $( '#comments' ).html().trim(), 'This template has comments', 'automatic filling of template variables' );
is( $( '#comments' ).html().trim(), 'This template has comments', '<# comment template #>' );
is( $.yote.templates.fill_template( 'TripleQuest' ).trim().replace( /[\n\s]+/g, ' '), 'A very simple test This template has comments Number 4 WAZ ZBorgs around', '< ??? function ??\?> effect on building templates, effect on using ??? to create variables and effect of setting values directly in the context' );
is( $.yote.templates.fill_template( 'SimpleTemplate' ).trim().replace( /[\n\s]+/g, ' '), 'A very simple test This template has comments', '<$$ templatename $$>' );
is( $.yote.templates.fill_template( 'VarTest' ).trim().replace( /[\n\s]+/g, ' '),
'Give me arguments alpha beta zappa wack Tootx and wack',
'<$$ templatename args $$>, <??? function ???>' );
is( $.yote.templates.fill_template( 'PaginationTest' ).trim().replace( /[\n\s]+/g, ' '), 'ARRAY 0 : A 1 : C 2 : B Apple : butter Daikon : radish Lemon : yellow YARRA', 'tests <??? function(ctx) { that puts a list in context } ???>, <$$ List template @list maxrows $$>, <$ _index_ $> <$ _hashkey_ $> and <$ _ $> ' );
is( $.yote.templates.fill_template( 'PaginationTest', undefined, [ '1' ] ).trim().replace( /[\n\s]+/g, ' '), 'ARRAY 4 : E Pea : green Spinach : wild YARRA', 'tests list and hash paginate advances' );
is( $.yote.templates.fill_template( 'ArrayHashTest' ).trim().replace( /[\n\s]+/g, ' '), 'LISTYHASHY 0 : A 1 : C 2 : B 3 : D 4 : E 5 : N Crate : BARREL Nose : RED Poke : MON BEETS', 'tests list and hash non-paginated' );
is( $.yote.templates.fill_template( 'SandBox' ).trim().replace( /[\n\s]+/g, ' '), 'sandy sandy sandy', '<$ app.sandbox.name $>' );
is( $.yote.templates.fill_template( 'Vars' ).trim().replace( /[\n\s]+/g, ' '), 'My name is unknown', 'default value for get' );
is( $( '#after_render' ).text().trim().replace( /[\n\s]+/g, ' '), 'TEST', 'after render function' );
// is( $.yote.templates.fill_template( '' ).trim().replace( /[\n\s]+/g, ' '), '', '' );
}
catch( err ) {
fail( err )();
wrap_up();
}
wrap_up();
} //do_tests
do_tests();
} ); //ready
-->
</script>
</head>
<templates>
<script type="text/template" class="yote_template_definition" template_name="SelTest">
<??? ctx.vars.myHash = { '1' : "Number One", '2' : "Lets Go" }; ???>
<$$ BuildSelectFromHash myHash% mySelect 2 $$>
<?
$( ctx.controls.mySelect ).click( function() { alert( 'clicked ' + $( ctx.controls.mySelect ).val() ) } );
?>
</script>
<script type="text/template" class="yote_template_definition" template_name="AfterRender">
<$$$ ar_div <div></div>$$$>
<? function( ctx ) { $( ctx.controls.ar_div ).append( "TEST" ) } ?>
</script>
<script type="text/template" class="yote_template_definition" template_name="Vars">
My name is <$ name unknown $>
</script>
<script type="text/template" class="yote_template_definition" template_name="SandBox">
<??? function( ctx ) {
ctx.vars.app = $.yote.fetch_default_app();
ctx.vars.sandbox = $.yote.fetch_default_app().get_sandbox();
} ???>
<$ app|sandbox|name $>
<$ _app_|sandbox|name $>
<$ sandbox|name $>
</script>
<script type="text/template" class="yote_template_definition" template_name="ArrayRow">
<$ _index_ $> : <$ _ $>
</script>
<script type="text/template" class="yote_template_definition" template_name="HashRow">
<$ _hashkey_ $> : <$ _ $>
</script>
<script type="text/template" class="yote_template_definition" template_name="ArrayHashTest">
<???
ctx.vars.array = [ "A", "C", "B", "D", "E", "N" ];
ctx.vars.hash = { Poke : "MON", Crate : "BARREL", Nose : "RED" };
???>
LISTYHASHY
<$$ List ArrayRow array@ $$>
<$$ Hash HashRow hash% $$>
BEETS
<??
??>
</script>
<script type="text/template" class="yote_template_definition" template_name="PaginationTest">
<???
ctx.vars.array = [ "A", "C", "B", "D", "E" ];
ctx.vars.hash = { Apple : 'butter', Spinach : 'wild', Daikon : 'radish', Lemon : 'yellow', Pea : 'green'};
ctx.vars.array_pag = ctx.parse( "array@@" );
ctx.vars.hash_pag = ctx.parse( "hash%%" );
if( ctx.args && ctx.args.length == 1 ) {
ctx.vars.array_pag._start = 4;
ctx.vars.hash_pag._start = 3;
}
???>
ARRAY
<# putting the size in the array_pag because
the array_pag might be needed for paginations
control html #>
<$$ ListPaginate ArrayRow array@@ 3 $$>
<$$ HashPaginate HashRow hash%% 3 $$>
YARRA
<??
??>
</script>
<script type="text/template" class="yote_template_definition" template_name="VarTestPartTwo">
<??? function( ctx ) { ctx.vars.e = 'x'; return ''; } ???>
<?? return ctx.args.join(" ").toLowerCase() + ' ' + ctx.vars.x + ' ' + ctx.vars.y + ctx.vars.e; ??>
</script>
<script type="text/template" class="yote_template_definition" template_name="VarTest">
<??? function( ctx ) {
ctx.vars.x = "wack";
ctx.vars.y = "Toot";
} ???>
Give me arguments <$$ VarTestPartTwo 'Alpha' 'Beta' 'Zappa' $$> and <$ x $>
</script>
<script type="text/template" class="yote_template_definition" template_name="TripleQuest">
<???
ctx.vars.foo = 1 + 3;
return '<?? ctx.vars.fool = "Borgs around";ctx.vars.bar = "WAZ Z"; return ""; ??>' +
'<$$ SimpleTemplate $$>';
???>
<?? return "Number " + ctx.vars.foo + ' ' + ctx.vars.bar + ctx.vars.fool; ??>
</script>
<script type="text/template" class="yote_template_definition" template_name="SimpleTemplate">
A very simple test <$$ Comments $$>
</script>
<script type="text/template" class="yote_template_definition" template_name="Comments">
This template<# doesn't #> has comments <# I'd say #>
</script>
<script type="text/template" class="yote_template_definition" template_name="Ed">
Edit field <$$ edit _app_|sandbox 'wistle' $$> UM
</script>
</templates>
<body>
<h1>Yote Template Tests</h1>
<div id="comments" class="yote_template hide" template="Comments"></div>
<div id="after_render" class="yote_template hide" template="AfterRender"></div>
<div id="eddy" class="yote_template" template="Ed"></div>
<div id="tests"></div>
<div id="results"></div>
<div id="after_render" class="yote_template" template="SelTest"></div>
</body>
</html>