@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

github.com/seanox/aspect-js

seanox/aspect-js

581 lines (575 loc) • 12.9 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" id="___01"> _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" id="___02"> _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" id="___03"> _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" id="___04"> _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" id="___05"> _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" id="___06"> _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" id="___07"> _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" id="___08"> _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" id="___09"> _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" id="___10"> _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" id="___11"> _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" id="___12"> _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" id="___13"> _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" id="___14"> _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" id="___15"> _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" id="___16"> _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" id="___17"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___18"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___19"> _A_123_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___20"> _A_123_ true: _true false: _ react: __ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___21"> _A_123_ true: _true false: _ react: __ react: __ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___22"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ </script> <script type="text/test" id="___23"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 108 108 1 [object HTMLButtonElement] 126 126 </script> <script type="text/test" id="___24"> _A_456_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 108 108 1 [object HTMLButtonElement] 126 126 </script> <script type="text/test" id="___25"> _A_456_ true: _true false: _ react: _A456B_ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 108 108 1 [object HTMLButtonElement] 126 126 </script> <script type="text/test" id="___26"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 108 108 1 [object HTMLButtonElement] 126 126 </script> <script type="text/test" id="___27"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 108 108 1 [object HTMLButtonElement] 126 126 </script> <script type="text/test" id="___28"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___29"> _A_456_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___30"> _A_123_ true: _true false: _ react: _A456B_ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___31"> _A_123_ true: _true false: _ react: __ react: _A456B_ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___32"> _A_123_ true: _true false: _ react: __ react: __ react: _A456B_ count: _80_ / _80_ </script> <script type="text/test" id="___33"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ </script> <script type="text/test" id="___34"> _A_123_ true: _true false: _ react: __ react: __ react: __ count: _80_ / _80_ _80_ / _80_ [object HTMLDivElement] 169 169 2 [object HTMLButtonElement] 187 187 </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@model//String('A')//]}} {{#[button@model//String('A')//].serial}} {{#[button@model//String('A')//].ordinal()}}  {{modelA.count(#[button@modelA].serial)}} </button> </div> </body> </html>