index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!doctype html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
  7. <!--link rel="stylesheet" href="../common/emscripten.css"/-->
  8. <link rel="stylesheet" href="../common/testing.css"/>
  9. <title>SQLTester</title>
  10. </head>
  11. <style>
  12. fieldset {
  13. display: flex;
  14. flex-direction: row;
  15. padding-right: 1em;
  16. }
  17. fieldset > :not(.legend) {
  18. display: flex;
  19. flex-direction: row;
  20. padding-right: 1em;
  21. }
  22. </style>
  23. <body>
  24. <h1>SQLTester for JS/WASM</h1>
  25. <p>This app reads in a build-time-defined set of SQLTester test
  26. scripts and runs them through the test suite.
  27. </p>
  28. <fieldset>
  29. <legend>Options</legend>
  30. <span class='input-wrapper'>
  31. <input type='checkbox' id='cb-log-reverse' checked>
  32. <label for='cb-log-reverse'>Reverse log order?</label>
  33. </span>
  34. <input type='button' id='btn-run-tests' value='Run tests'/>
  35. </fieldset>
  36. <div id='test-output'>Test output will go here.</div>
  37. <!--script src='SQLTester.run.mjs' type='module'></script-->
  38. <script>
  39. (async function(){
  40. const W = new Worker('SQLTester.run.mjs',{
  41. type: 'module'
  42. });
  43. const wPost = (type,payload)=>W.postMessage({type,payload});
  44. const mapToString = (v)=>{
  45. switch(typeof v){
  46. case 'string': return v;
  47. case 'number': case 'boolean':
  48. case 'undefined': case 'bigint':
  49. return ''+v;
  50. default: break;
  51. }
  52. if(null===v) return 'null';
  53. if(v instanceof Error){
  54. v = {
  55. message: v.message,
  56. stack: v.stack,
  57. errorClass: v.name
  58. };
  59. }
  60. return JSON.stringify(v,undefined,2);
  61. };
  62. const normalizeArgs = (args)=>args.map(mapToString);
  63. const logTarget = document.querySelector('#test-output');
  64. const logClass = function(cssClass,...args){
  65. const ln = document.createElement('div');
  66. if(cssClass){
  67. for(const c of (Array.isArray(cssClass) ? cssClass : [cssClass])){
  68. ln.classList.add(c);
  69. }
  70. }
  71. ln.append(document.createTextNode(normalizeArgs(args).join(' ')));
  72. logTarget.append(ln);
  73. };
  74. {
  75. const cbReverse = document.querySelector('#cb-log-reverse');
  76. const cbReverseKey = 'SQLTester:cb-log-reverse';
  77. const cbReverseIt = ()=>{
  78. logTarget.classList[cbReverse.checked ? 'add' : 'remove']('reverse');
  79. };
  80. cbReverse.addEventListener('change', cbReverseIt, true);
  81. cbReverseIt();
  82. }
  83. const btnRun = document.querySelector('#btn-run-tests');
  84. const runTests = ()=>{
  85. btnRun.setAttribute('disabled','disabled');
  86. wPost('run-tests');
  87. logTarget.innerText = 'Running tests...';
  88. }
  89. btnRun.addEventListener('click', runTests);
  90. const log2 = function f(...args){
  91. logClass('', ...args);
  92. return f;
  93. };
  94. const log = function f(...args){
  95. logClass('','index.html:',...args);
  96. return f;
  97. };
  98. const timerId = setTimeout( ()=>{
  99. logClass('error',"The SQLTester module is taking an unusually ",
  100. "long time to load. More information may be available",
  101. "in the dev console.");
  102. }, 3000 /* assuming localhost */ );
  103. W.onmessage = function({data}){
  104. switch(data.type){
  105. case 'stdout': log2(data.payload.message); break;
  106. case 'tests-end':
  107. btnRun.removeAttribute('disabled');
  108. delete data.payload.nTest;
  109. log("test results:",data.payload);
  110. break;
  111. case 'is-ready':
  112. clearTimeout(timerId);
  113. runTests(); break;
  114. default:
  115. log("unhandled onmessage",data);
  116. break;
  117. }
  118. };
  119. })();
  120. </script>
  121. </body>
  122. </html>