@seanox/aspect-js
Version:
full stack JavaScript framework for SPAs incl. reactivity rendering, mvc / mvvm, models, expression language, datasource, routing, paths, unit test and some more
300 lines (285 loc) • 8.95 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 src="scripts/capture.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 capture = new Capture();
Composite.listen(Composite.EVENT_RENDER_END, () => {
capture.snap();
const count = capture.snapshots().length;
if (count <= 5)
window.setTimeout(() => {
Composite.render(document.body);
}, 250);
if (count === 6)
Test.start();
});
Test.create({test() {
const count = capture.snapshots().length;
const snapshot = capture.snapshots()[count -1];
const content = document.querySelector("script[type='text/test']").textContent;
try {Assert.assertSameText(content, snapshot);
} catch (error) {
console.log(snapshot);
}
}});
</script>
<script type="text/test">
false
false
123
123
S:7:171717
\
A
B
C
D
E
F
1
A1
B1
C1
D1
E1
F1
2
A2
B2
C2
D2
E2
F2
3
A3
B3
C3
D3
E3
F3
4
A4
B4
C4
D4
E4
F4
5
A5
B5
C5
D5
E5
F5
6
A6
B6
C6
D6
E6
F6
7
A7
B7
C7
D7
E7
F7
Ex
Ex
Ex
x1x1x1
Error: Invalid expression
Error: Invalid expression
Error: Invalid expression
__0:1____1:2____2:3__
__0:1____1:2____2:3__
__0:1____1:2____2:3__
__0:____1:____2:__
Spring
Summer
Autumn
Winter
Error: missing ) in parenthetical in (new Array(2)
</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>
<div iterate="{{x:new Array(2}}"></div>
</body>
</html>