@seanox/aspect-js
Version:
full stack JavaScript framework for SPAs incl. reactivity rendering, mvc / mvvm, models, expression language, datasource, virtual paths, unit test and some more
210 lines (197 loc) • 7.56 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
}
input {
display: block;
}
</style>
<script src="aspect-js.js"></script>
<script type="text/javascript">
Test.activate();
const TestModel = {
listA: ["a", "b", "c"],
listB: ["d", "e", "f"],
listC: ["-", "A", "B", "C", "D", "E", "F"]
};
const testS = (text) => {
const span = document.createElement("span");
span.textContent = text + "{{s1}}";
return span;
};
Namespace.create("tempB", () => {
return "123";
});
Test.create({test() {
Assert.assertEquals("false", OutputA1.textContent);
}});
Test.create({test() {
Assert.assertEquals("a:0", window["a:0"].id);
}});
Test.create({test() {
Assert.assertEquals("0: a of a,b,c", window["a:0"].value);
}});
Test.create({test() {
Assert.assertEquals("a:1", window["a:1"].id);
}});
Test.create({test() {
Assert.assertEquals("1: b of a,b,c", window["a:1"].value);
}});
Test.create({test() {
Assert.assertEquals("a:2", window["a:2"].id);
}});
Test.create({test() {
Assert.assertEquals("2: c of a,b,c", window["a:2"].value);
}});
Test.create({test() {
Assert.assertEquals("false", OutputA2.textContent);
}});
Test.create({test() {
Assert.assertEquals("123", OutputB1.textContent);
}});
Test.create({test() {
Assert.assertEquals("b:0", window["b:0"].id);
}});
Test.create({test() {
Assert.assertEquals("0: d of d,e,f", window["b:0"].value);
}});
Test.create({test() {
Assert.assertEquals("b:1", window["b:1"].id);
}});
Test.create({test() {
Assert.assertEquals("1: e of d,e,f", window["b:1"].value);
}});
Test.create({test() {
Assert.assertEquals("b:2", window["b:2"].id);
}});
Test.create({test() {
Assert.assertEquals("2: f of d,e,f", window["b:2"].value);
}});
Test.create({test() {
Assert.assertEquals("123", OutputB2.textContent);
}});
Test.create({test() {
const content = document.querySelector("table").outerHTML;
Assert.assertEquals("B202EWU5NG1620L", content.hashCode());
}});
Test.create({test() {
Assert.assertEquals("161616", OutputS1.textContent);
Composite.render(document.body);
}});
Test.create({test() {
Assert.assertEquals("", OutputC.textContent.trim());
}});
Test.create({test() {
Assert.assertEquals("", OutputD.textContent.trim());
}});
Test.create({test() {
Assert.assertEquals("ExExEx", OutputE.textContent.replace(/\s+/g, ""));
}});
Test.create({test() {
Assert.assertEquals("x1x1x1Error:InvalidexpressionError:InvalidexpressionError:Invalidexpression", OutputF.textContent.replace(/\s+/g, ""));
}});
Test.create({test() {
Assert.assertEquals("__0:1____1:2____2:3__", OutputG.textContent.replace(/\s+/g, ""));
}});
Test.create({test() {
Assert.assertEquals("__0:1____1:2____2:3__", OutputI.textContent.replace(/\s+/g, ""));
}});
Test.create({test() {
Assert.assertEquals("__0:____1:____2:__", OutputJ.textContent.replace(/\s+/g, ""));
}});
Test.create({test() {
Assert.assertEquals("SpringSummerAutumnWinter", OutputK.textContent.replace(/\s+/g, ""));
}});
Test.create({test() {
const error = String(console.output.error);
Assert.assertTrue(error.includes("Invalid iterate: x {{tempX2:[1,2,3]}}"));
Assert.assertTrue(error.includes("Invalid iterate: {{tempX3:[1,2,3]}} x"));
Assert.assertTrue(error.includes("Invalid iterate: {{tempX4:[1,2,3]}}{{}}"));
}});
const snapshots = [];
Composite.listen(Composite.EVENT_RENDER_END, () => {
if (snapshots.length < 5) {
let snapshot = document.body.textContent;
snapshot = snapshot.replace(/^\s+/mg, "");
snapshots.push(snapshot);
window.setTimeout(() => {
Composite.render(document.body);
}, 250);
if (snapshots.length === 5)
Test.start();
}
});
</script>
</head>
<body>
<div id="OutputA1">{{(?tempA)}}</div>
<div iterate={{tempA:TestModel.listA}}>
<input id="a:{{tempA.index}}" type="text" value="{{tempA.index}}: {{tempA.item}} of {{tempA.data}}">
</div>
<div id="OutputA2">{{(?tempA)}}</div>
<div id="OutputB1">{{tempB()}}</div>
<div iterate={{tempB:TestModel.listB}}>
<input id="b:{{tempB.index}}" type="text" value="{{tempB.index}}: {{tempB.item}} of {{tempB.data}}">
</div>
<div id="OutputB2">{{tempB()}}</div>
{{s1:((?s1) || 0) +1}}
S:{{s1}}:<span id="OutputS1" iterate="{{tempS:TestModel.listA}}" import="{{testS(s1)}}">---</span>
<table>
<thead>
<tr iterate={{tempCol:TestModel.listC}}>
<th condition="{{not (tempCol.index gt 0)}}">\</th>
<th condition="{{tempCol.index gt 0}}">{{tempCol.item}}</th>
</tr>
</thead>
<tbody iterate={{tempRow:TestModel.listC}}>
<tr iterate={{tempCol:TestModel.listC}}>
<th condition="{{not (tempCol.index gt 0)}}">{{tempRow.index +1}}</th>
<td condition="{{tempCol.index gt 0}}">{{tempCol.item + (tempRow.index +1)}}</td>
</tr>
</tbody>
</table>
<div id="OutputC">
<span iterate="{{tempC:null}}">
<a>Cx</a>
</span>
</div>
<div id="OutputD">
<span iterate="{{tempD:[]}}">
<a>Dx</a>
</span>
</div>
<div id="OutputE">
<span iterate="{{tempE:[1,2,3]}}">
<a>Ex</a>
</span>
</div>
<p id="OutputF">
<span iterate=" {{tempX1:[1,2,3]}} ">x1</span>
<span iterate=" x {{tempX2:[1,2,3]}}">x2</span>
<span iterate=" {{tempX3:[1,2,3]}} x">x3</span>
<span iterate="{{tempX4:[1,2,3]}}{{}}">x4</span>
</p>
<p id="OutputG">
<span iterate=" {{tempX5:[1,2,3]}} ">__{{tempX5.index}}:{{tempX5.item}}__</span><br/>
</p>
<p id="OutputH">
<span iterate=" {{tempX6:['1','2','3']}} ">__{{tempX6.index}}:{{tempX6.item}}__</span><br/>
</p>
<p id="OutputI">
<span iterate=" {{tempX7:['1','2','3']}} ">__{{tempX7.index}}:{{tempX7.item}}__</span><br/>
</p>
<p id="OutputJ">
<span iterate=" {{tempX7:Array(3)}} ">__{{tempX7.index}}:{{tempX7.item}}__</span><br/>
</p>
<select id="OutputK" iterate="{{months:['Spring','Summer','Autumn','Winter']}}">
<option value="{{months.index}}">
{{months.item}}
</option>
</select>
</body>
</html>