@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
234 lines (229 loc) • 5.95 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
white-space: pre;
}
</style>
<script src="aspect-js.js"></script>
<script type="text/javascript">
Test.activate();
const snapshots = [];
const values = [];
Composite.listen(Composite.EVENT_RENDER_END, () => {
const snapshot = document.body.textContent.trim();
snapshots.push(snapshot);
values.push(document.querySelector("#value").value);
const count = document.querySelectorAll("script[type=\"text/test\"]").length;
if (snapshots.length === count)
Test.start();
if (snapshots.length >= count)
Assert.assertEquals("expected {1} steps but was {2}", count, snapshots.length);
});
Test.create({test() {
snapshots.forEach((snapshot, index) => {
console.log(`Test based on script #${index +1}`);
Assert.assertSameText(document.querySelectorAll("script[type='text/test']")[index].textContent, snapshot);
});
}});
Test.create({test() {
const pattern = ["test", "test", "test", "test", "test", "test", "test",
"123", "123", "123", "123", "123", "123", "123",
"_123_", "_123_", "_123_", "_123_", "_123_", "_123_", "_123_"];
Assert.assertEquals(JSON.stringify(pattern), JSON.stringify(values.slice(1)));
}});
const modelA = {
value: "hallo"
}.reactive();
window.setTimeout(() => {document.querySelector("#value").typeValue("test");}, 1000);
window.setTimeout(() => {document.querySelector("#value").typeValue("123");}, 1500);
window.setTimeout(() => {document.querySelector("#value").typeValue("_123_");}, 2000);
</script>
<script type="text/test">
_A_hallo_
Value of variable modelA.value: hallo
SPAN
_A_hallo_
_B_HALLO_
_C_o_
</script>
<script type="text/test">
_A_test_
Value of variable modelA.value: hallo
SPAN
_A_hallo_
_B_HALLO_
_C_o_
</script>
<script type="text/test">
_A_test_
Value of variable modelA.value: test
SPAN
_A_hallo_
_B_HALLO_
_C_o_
</script>
<script type="text/test">
_A_test_
Value of variable modelA.value: test
SPAN
_A_hallo_
_B_HALLO_
_C_o_
</script>
<script type="text/test">
_A_test_
Value of variable modelA.value: test
SPAN
_A_test_
_B_HALLO_
_C_o_
</script>
<script type="text/test">
_A_test_
Value of variable modelA.value: test
SPAN
_A_test_
_B_TEST_
_C_o_
</script>
<script type="text/test">
_A_test_
Value of variable modelA.value: test
SPAN
_A_test_
_B_TEST_
_C__
</script>
<script type="text/test">
_A_test_
Value of variable modelA.value: test
SPAN
_A_test_
_B_TEST_
_C__
</script>
<script type="text/test">
_A_123_
Value of variable modelA.value: test
SPAN
_A_test_
_B_TEST_
_C__
</script>
<script type="text/test">
_A_123_
Value of variable modelA.value: 123
SPAN
_A_test_
_B_TEST_
_C__
</script>
<script type="text/test">
_A_123_
Value of variable modelA.value: 123
_A_test_
_B_TEST_
_C__
</script>
<script type="text/test">
_A_123_
Value of variable modelA.value: 123
_A_123_
_B_TEST_
_C__
</script>
<script type="text/test">
_A_123_
Value of variable modelA.value: 123
_A_123_
_B_123_
_C__
</script>
<script type="text/test">
_A_123_
Value of variable modelA.value: 123
_A_123_
_B_123_
_C__
</script>
<script type="text/test">
_A_123_
Value of variable modelA.value: 123
_A_123_
_B_123_
_C__
</script>
<script type="text/test">
_A__123__
Value of variable modelA.value: 123
_A_123_
_B_123_
_C__
</script>
<script type="text/test">
_A__123__
Value of variable modelA.value: _123_
_A_123_
_B_123_
_C__
</script>
<script type="text/test">
_A__123__
Value of variable modelA.value: _123_
SPAN
_A_123_
_B_123_
_C__
</script>
<script type="text/test">
_A__123__
Value of variable modelA.value: _123_
SPAN
_A__123__
_B_123_
_C__
</script>
<script type="text/test">
_A__123__
Value of variable modelA.value: _123_
SPAN
_A__123__
_B__123__
_C__
</script>
<script type="text/test">
_A__123__
Value of variable modelA.value: _123_
SPAN
_A__123__
_B__123__
_C___
</script>
<script type="text/test">
_A__123__
Value of variable modelA.value: _123_
SPAN
_A__123__
_B__123__
_C___
</script>
</head>
<body>
_A_{{modelA.value}}_
<p id="modelA" composite>
<input type="text" id="value" events="input"/>
Value of variable modelA.value: {{modelA.value}}
</p>
<span condition="{{modelA.value != '123'}}">
SPAN
</span>
_A_{{modelA.value}}_
_B_{{modelA.value.toUpperCase()}}_
_C_{{modelA.value.substring(4)}}_
</body>
</html>