zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
194 lines (178 loc) • 9.21 kB
HTML
<html lang="es">
<head>
<meta charset="utf-8">
<title>Standalone tests</title>
<link rel="stylesheet" href="/node_modules/qunit/qunit/qunit.css">
<script src="/node_modules/qunit/qunit/qunit.js"></script>
<script src="http://127.0.0.1:9966/standalone.js" defer></script>
<script src="/node_modules/zzdom/build/zzDOM-closures-full.js" defer></script>
<script src="js/app/standaloneTest.js" defer></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="tests-1">
<h2>Tests using java API</h2>
<p>
Define
</p>
<ol data-define="integer1 1; float1 1.5; text1 'this is a text'; text2 string:this is a text too">
<li>integer1 = 1 = <span id="t1-1-1" data-content="integer1">an integer</span></li>
<li>float1 = 1.5 = <span id="t1-1-2" data-content="float1">a float</span></li>
<li>text1 = this is a text = <span id="t1-1-3" data-content="text1">a text</span></li>
<li>text2 = this is a text too = <span id="t1-1-4" data-content="text2">a text</span></li>
</ol>
<ol data-define="integer1 1;
float1 1.5;
text1 'this is a text';
text2 string:this is a text too">
<li>integer1 = 1 = <span id="t1-1-5" data-content="integer1">an integer</span></li>
<li>float1 = 1.5 = <span id="t1-1-6" data-content="float1">a float</span></li>
<li>text1 = this is a text = <span id="t1-1-7" data-content="text1">a text</span></li>
<li>text2 = this is a text too = <span id="t1-1-8" data-content="text2">a text</span></li>
</ol>
<p>
Condition
</p>
<ol>
<li>Condition true 1: <span id="t1-2-1" data-condition="true">yes!</span></li>
<li>Condition true 2: <span id="t1-2-2" data-condition="true" data-content="user/name">a name</span></li>
<li>Condition false 1: <span id="t1-2-3" data-condition="false">no!</span></li>
<li>Condition false 2: <span id="t1-2-4" data-condition="false" data-content="user/name">a name</span></li>
<li>Condition not: false 1: <span id="t1-2-5" data-condition="not: false">yes!</span></li>
<li>Condition not: false 2: <span id="t1-2-6" data-condition="not: false" data-content="user/name">a name</span></li>
<li>Condition not: true 1: <span id="t1-2-7" data-condition="not: true">no!</span></li>
<li>Condition not: true 2: <span id="t1-2-8" data-condition="not: true" data-content="user/name">a name</span></li>
<li>Condition with nested tags true 1:
<span id="t1-2-9" data-condition="true">
<span data-replace="user/name">a name</span>
</span>
</li>
<li>Condition with nested tags false 1:
<span id="t1-2-10" data-condition="false">
<span data-replace="user/name">a name</span>
</span>
</li>
</ol>
<p>
Attributes
</p>
<ol>
<li>
Textarea:
<textarea id="t1-3-1"
data-attributes="placeholder 'Write something here!';
textareaAttrs;
maxlength 200"></textarea>
</li>
</ol>
<p>
Alt attributes
</p>
<ol>
<li>Link 1: <a id="t1-4-1" data-attributes="title string:title in string expression; href 'http://www.xxx.org'">a link</a></li>
<li>Link 2: <a id="t1-4-2"
data-attributes="title string:title in string expression;
href 'http://www.xxx.org'">a link</a></li>
</ol>
<p>
Boolean attributes
</p>
<ol>
<li><button type="submit" data-attributes="disabled false">This must be NOT disabled!</button></li>
<li><button type="submit" data-attributes="disabled true">This must be disabled!</button></li>
</ol>
<p>
Null attributes should be hidden
</p>
<ol>
<li>Link 2: <a id="t1-5-1"
data-attributes="title nullValue;
href 'http://www.xxx.org'">a link</a>
</li>
</ol>
</div>
<div id="tests-2">
<h2>Tests using jQuery plugin</h2>
<p>
Define
</p>
<ol data-define="integer1 1; float1 1.5; text1 'this is a text'; text2 string:this is a text too">
<li>integer1 = 1 = <span id="t2-1-1" data-content="integer1">an integer</span></li>
<li>float1 = 1.5 = <span id="t2-1-2" data-content="float1">a float</span></li>
<li>text1 = this is a text = <span id="t2-1-3" data-content="text1">a text</span></li>
<li>text2 = this is a text too = <span id="t2-1-4" data-content="text2">a text</span></li>
</ol>
<ol data-define="integer1 1;
float1 1.5;
text1 'this is a text';
text2 string:this is a text too">
<li>integer1 = 1 = <span id="t2-1-5" data-content="integer1">an integer</span></li>
<li>float1 = 1.5 = <span id="t2-1-6" data-content="float1">a float</span></li>
<li>text1 = this is a text = <span id="t2-1-7" data-content="text1">a text</span></li>
<li>text2 = this is a text too = <span id="t2-1-8" data-content="text2">a text</span></li>
</ol>
<p>
Condition
</p>
<ol>
<li>Condition true 1: <span id="t2-2-1" data-condition="true">yes!</span></li>
<li>Condition true 2: <span id="t2-2-2" data-condition="true" data-content="user/name">a name</span></li>
<li>Condition false 1: <span id="t2-2-3" data-condition="false">no!</span></li>
<li>Condition false 2: <span id="t2-2-4" data-condition="false" data-content="user/name">a name</span></li>
<li>Condition not: false 1: <span id="t2-2-5" data-condition="not: false">yes!</span></li>
<li>Condition not: false 2: <span id="t2-2-6" data-condition="not: false" data-content="user/name">a name</span></li>
<li>Condition not: true 1: <span id="t2-2-7" data-condition="not: true">no!</span></li>
<li>Condition not: true 2: <span id="t2-2-8" data-condition="not: true" data-content="user/name">a name</span></li>
<li>Condition with nested tags true 1:
<span id="t2-2-9" data-condition="true">
<span data-replace="user/name">a name</span>
</span>
</li>
<li>Condition with nested tags false 1:
<span id="t2-2-10" data-condition="false">
<span data-replace="user/name">a name</span>
</span>
</li>
</ol>
<p>
Attributes
</p>
<ol>
<li>
Textarea:
<textarea id="t2-3-1"
data-attributes="placeholder 'Write something here!';
textareaAttrs;
maxlength 200"></textarea>
</li>
</ol>
<p>
Alt attributes
</p>
<ol>
<li>Link 1: <a id="t2-4-1" data-attributes="title string:title in string expression; href 'http://www.xxx.org'">a link</a></li>
<li>Link 2: <a id="t2-4-2"
data-attributes="title string:title in string expression;
href 'http://www.xxx.org'">a link</a></li>
</ol>
<p>
Boolean attributes
</p>
<ol>
<li><button type="submit" data-attributes="disabled false">This must be NOT disabled!</button></li>
<li><button type="submit" data-attributes="disabled true">This must be disabled!</button></li>
</ol>
<p>
Null attributes should be hidden
</p>
<ol>
<li>Link 2: <a id="t2-5-1"
data-attributes="title nullValue;
href 'http://www.xxx.org'">a link</a>
</li>
</ol>
</div>
</body>
</html>