@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

github.com/seanox/aspect-js

seanox/aspect-js

580 lines (574 loc) • 12.4 kB

HTML

<!DOCTYPE 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 src="scripts/capture.js"></script> <script type="text/javascript"> Test.activate(); const capture = new Capture(); Composite.listen(Composite.EVENT_RENDER_END, () => { capture.snap(); const count = capture.patterns().length; if (capture.size() === count) Test.start(); if (capture.size() > count) Assert.assertEquals("expected {1} steps but was {2}", count, capture.size()); }); Test.create({test() { capture.validate(); }}); const modelA = { valueA: 123, get valueAa() { return this.valueA; }, valueAb() { return this.valueA; }, button: { ticks: 0, onClick() { this.ticks++; } }, counter: 0, count(value) { if (this.counter < 50) this.counter += value; } }.reactive(); // The button is added and removed multiple times with a condition in // the DOM. The mounting was a bug that was fixed. const buttonPush = () => { const button = document.getElementById("button@modelA"); if (button) button.click(); }; window.setTimeout(() => {modelA.valueA = 456; buttonPush();}, 1000); window.setTimeout(() => {modelA.valueA = 123; buttonPush();}, 1250); window.setTimeout(() => {modelA.valueA = 456; buttonPush();}, 1500); window.setTimeout(() => {modelA.valueA = 123; buttonPush();}, 1750); </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _0_ / _0_ _0_ / _0_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _0_ _0_ / _0_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _0_ / _0_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _0_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_456_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 31 31 0 [object HTMLButtonElement] 49 49 </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 104 104 1 [object HTMLButtonElement] 122 122 </script> <script type="text/test"> _A_456_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 104 104 1 [object HTMLButtonElement] 122 122 </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 104 104 1 [object HTMLButtonElement] 122 122 </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 104 104 1 [object HTMLButtonElement] 122 122 </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 104 104 1 [object HTMLButtonElement] 122 122 </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ </script> <script type="text/test"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 162 162 2 [object HTMLButtonElement] 180 180 </script> </head> <body> _A_{{modelA.valueA}}_ true: _<span condition="{{true}}">true</span> false: _<span condition="{{false}}">false</span> react: _<span condition="{{modelA.valueA ne 123}}">A{{modelA.valueA}}B</span>_ react: _<span condition="{{modelA.valueAa ne 123}}">A{{modelA.valueA}}B</span>_ react: _<span condition="{{modelA.valueAb() ne 123}}">A{{modelA.valueA}}B</span>_ count: _{{modelA["counter"]}}_ / _{{modelA.counter}}_ <div id="_condition" condition="{{modelA.valueA eq 123}}"> _{{modelA["counter"]}}_ / _{{modelA.counter}}_ {{#_condition}} {{#_condition.serial}} {{#_condition.ordinal()}}  {{modelA.count(#_condition.serial)}} <button id="button@modelA" event="click"> {{modelA.button.ticks}} {{#[button@modelA]}} {{#[button@modelA].serial}} {{#[button@modelA].ordinal()}}  {{modelA.count(#[button@modelA].serial)}} </button> </div> </body> </html>