update html report styling

ellraiser · Mar 22, 2024 · 106fd80 · 106fd80
1 parent e0c8e63
commit 106fd80
Show file tree

Hide file tree

Showing 6 changed files with 438 additions and 340 deletions.
diff --git a/classes/TestMethod.lua b/classes/TestMethod.lua
@@ -576,10 +576,10 @@ TestMethod = {
     end
 
     -- append HTML for the test class result
-    local status = '🔴'
+    local status = ''
     local cls = 'red'
-    if self.passed then status = '🟢'; cls = '' end
-    if self.skipped then status = '🟡'; cls = '' end
+    if self.passed then status = '<div class="icon pass"></div>'; cls = 'green' end
+    if self.skipped then status = ''; cls = 'yellow' end
     self.testmodule.html = self.testmodule.html ..
       '<tr class=" ' .. cls .. '">' ..
         '<td>' .. status .. '</td>' ..

diff --git a/classes/TestModule.lua b/classes/TestModule.lua
@@ -82,8 +82,8 @@ TestModule = {
   -- @return {nil}
   printResult = function(self)
     local finaltime = UtilTimeFormat(self.time)
-    local status = '🔴'
-    if self.failed == 0 then status = '🟢' end
+    local status = '<div class="icon fail"></div>'
+    if self.failed == 0 then status = '<div class="icon pass"></div>' end
     -- add md row to main output
     love.test.mdrows = love.test.mdrows .. '| ' .. status .. 
       ' ' .. self.module .. 
@@ -98,13 +98,23 @@ TestModule = {
       '" skipped="' .. tostring(self.skipped) ..
       '" time="' .. finaltime .. '">\n' .. self.xml .. '\t</testsuite>\n'
     -- add html to main output
-    love.test.html = love.test.html .. '<h2>' .. status .. '&nbsp;love.' .. self.module .. '</h2><ul class="summary">' ..
-      '<li>🟢&nbsp;' .. tostring(self.passed) .. ' Tests</li>' ..
-      '<li>🔴&nbsp;' .. tostring(self.failed) .. ' Failures</li>' ..
-      '<li>🟡&nbsp;' .. tostring(self.skipped) .. ' Skipped</li>' ..
-      '<li>' .. finaltime .. 's</li>' .. '<ul><br/><br/>' ..
+    local module_cls = 'toggle close'
+    local module_txt = '▶'
+    local wrap_cls = ''
+    if self.failed > 0 then
+      module_cls = 'toggle open'
+      module_txt = '▼'
+      wrap_cls = 'fail'
+    end
+    love.test.html = love.test.html .. '<div class="module ' .. wrap_cls .. '">' ..
+      '<div class="' .. module_cls .. '" onclick="toggle(this)">' .. module_txt .. '</div>' .. 
+      '<h2>' .. status .. '&nbsp;love.' .. self.module .. '</h2><ul class="summary">' ..
+      '<li class="l' .. tostring(self.passed) .. '">' .. tostring(self.passed) .. ' Passed</li>' ..
+      '<li class="l' .. tostring(self.failed) .. '">' .. tostring(self.failed) .. ' Failed</li>' ..
+      '<li class="l' .. tostring(self.skipped) .. '">' .. tostring(self.skipped) .. ' Skipped</li>' ..
+      '<li>' .. finaltime .. 's</li>' .. '</ul><br/><br/>' ..
       '<table><thead><tr><td width="20px"></td><td width="100px">Method</td><td width="60px">Time</td><td>Details</td></tr></thead><tbody>' ..
-      self.html .. '</tbody></table>'
+      self.html .. '</tbody></table></div>'
     -- print module results to console
     self:log('yellow', 'love.' .. self.module .. '.testmodule.end')
     local failedcol = '\27[31m'

diff --git a/classes/TestSuite.lua b/classes/TestSuite.lua
@@ -175,13 +175,62 @@ TestSuite = {
       '" skipped="' .. tostring(self.totals[3]) ..
       '" time="' .. finaltime .. '">\n'
 
-    local status = '🔴'
-    if self.totals[2] == 0 then status = '🟢' end
-    local html = '<html><head><style>* { font-family: monospace; margin: 0; font-size: 11px; padding: 0; } body { margin: 50px; } h1 { padding-bottom: 10px; font-size: 13px; } h2 { padding: 20px 0 10px 0; font-size: 12px; } .summary { list-style: none; margin: 0; padding: 0; } .summary li { float: left; background: #eee; padding: 5px; margin-right: 10px; } table { background: #eee; margin-top: 10px; width: 100%; max-width: 800px; border-collapse: collapse } table thead { background: #ddd; } table th, table td { padding: 2px; } tr.red { color: red } .wrap { max-width: 800px; margin: auto; } .preview-wrap { display: inline-block; height: 80px; padding: 5px 0 0 5px; margin: 5px; background: #ccc; } .preview { width: 64px; height: 80px; float: left; margin-right: 10px; } .preview:nth-last-child(1) { margin-right: 5px; } .preview img { width: 100%; image-rendering: pixelated; } .preview p { text-align: center; }</style></head><body><div class="wrap"><h1>' .. status .. '&nbsp;love.test</h1><ul class="summary">'
+    local status = '<div class="icon fail"></div>'
+    if self.totals[2] == 0 then status = '<div class="icon pass"></div>' end
+    local html = [[
+      <html>
+        <head>
+          <style>
+          * { font-family: monospace; margin: 0; font-size: 11px; padding: 0; }
+          body { margin: 40px 50px 50px 50px; overflow-y: scroll; background: #222; }
+          h1 { font-weight: normal; color: #eee; font-size: 12px; width: 140px; border-radius: 2px; padding: 5px 0; float: left; background: #333;  }
+          h2 { font-weight: normal; color: #eee; font-size: 12px; width: 140px; border-radius: 2px;  }
+          .summary { z-index: 10; position: relative; list-style: none; margin: 0; padding: 0; float: right; } 
+          .summary li { color: #111; float: left; border-radius: 2px; background: #eee; padding: 5px; margin-right: 10px; text-align: right; }
+          table { color: #eee; background: #444; margin: 5px 0 0 10px; width: calc(100% - 20px); max-width: 800px; border-collapse: collapse }
+          table thead { background: #333; }
+          table th, table td { padding: 2px 4px; font-size: 11px; }
+          tr.red { background: #d26666; color: #111; }
+          tr.yellow { background: slategrey; }
+          .wrap { max-width: 800px; padding-top: 30px; margin: auto; position: relative; }
+          .preview-wrap { display: inline-block; height: 80px; padding: 5px 0 0 5px; margin: 5px; background: rgba(0, 0, 0, 0.1); }
+          .preview { width: 64px; height: 80px; float: left; margin-right: 10px; }
+          .preview:nth-last-child(1) { margin-right: 5px; }
+          .preview img { width: 100%; image-rendering: pixelated; }
+          .preview p { text-align: center; }
+          .module { margin-top: 10px; position: relative; }
+          .module h2 { float: left; margin: 0; padding: 5px 0 0 35px; }
+          .module .toggle { background: #2d9966; color: #111; left: 10px; width: 14px; border-radius: 2px; padding: 6px; text-align: center; cursor: pointer; position: absolute; }
+          .module.fail .toggle { background: #d26666; }  
+          .module.fail h2 { color: #d26666; }
+          .toggle.close ~ table { display: none; }
+          .summary li:nth-child(1) { background: #2d9966; min-width: 70px; }
+          .summary li:nth-child(2) { background: #d26666; min-width: 70px; }
+          .summary li:nth-child(3) { background: slategrey; min-width: 70px; }
+          .summary li:nth-child(4) { background: #bbb; min-width: 60px; }
+          .summary li.l0 { opacity: 0.2; }
+          .renderer { position: absolute; top: 8px; right: 10px; color: #eee; }
+          h1 { width: 100%; top: 0; position: absolute; height: 50px; left: 0; }
+          table .icon.pass { position: relative; width: 8px; height: 8px; border-radius: 8px; margin-left: 6px; }
+          table .icon.pass:after { content: '✓'; top: -3px; position: absolute; color: #2d9966; font-size: 12px;  }
+          </style>
+          <script type="text/javascript">
+            function toggle(el) { 
+              el.className = el.className == 'toggle close' ? 'toggle open' : 'toggle close'; 
+              el.innerText = el.className == 'toggle close' ? '▶' : '▼';
+            }
+          </script>
+        </head>
+        <body>]]
+    local wrap_cls = ''
+    if self.totals[2] > 0 then wrap_cls = 'fail' end
+    html = html .. '<div class="wrap ' .. wrap_cls .. '"><h1>' .. status .. '&nbsp;love.test report</h1>' ..
+    '<p class="renderer">Renderer: ' .. name .. ' | ' .. version .. ' | ' .. vendor .. ' | ' .. device .. '</p>' ..
+    '<ul class="summary">'
     html = html ..
-      '<li>🟢&nbsp;' .. tostring(self.totals[1]) .. ' Tests</li>' ..
-      '<li>🔴&nbsp;' .. tostring(self.totals[2]) .. ' Failures</li>' ..
-      '<li>🟡&nbsp;' .. tostring(self.totals[3]) .. ' Skipped</li>' ..
+      '<li>' .. tostring(self.totals[1]) .. ' Passed</li>' ..
+      '<li>' .. tostring(self.totals[2]) .. ' Failed</li>' ..
+      '<li>' .. tostring(self.totals[3]) .. ' Skipped</li>' ..
       '<li>' .. finaltime .. 's</li></ul><br/><br/>'
 
     love.filesystem.write('tempoutput/' .. self.output .. '.xml', xml .. self.xml .. '</testsuites>')

diff --git a/examples/lovetest_runAllTests.html b/examples/lovetest_runAllTests.html
diff --git a/examples/lovetest_runAllTests.md b/examples/lovetest_runAllTests.md
@@ -1,33 +1,41 @@
-<!-- PASSED 335 || FAILED 0 || SKIPPED 9 || TIME 14.817 -->
+<!-- PASSED 343 || FAILED 2 || SKIPPED 10 || TIME 14.567 -->
 
 ### Info
-**344** tests were completed in **14.817s** with **335** passed, **0** failed, and **9** skipped
+**355** tests were completed in **14.567s** with **343** passed, **2** failed, and **10** skipped
 
 Renderer: OpenGL | 4.1 Metal - 76.3 | Apple | Apple M1 Max
 
 ### Report
 | Module                | Pass | Fail | Skip | Time   |
 | --------------------- | ------ | ------ | ------- | ------ |
-| 🟢 audio | 28 | 0 | 0 | 0.886s |
-| 🟢 data | 12 | 0 | 0 | 0.212s |
-| 🟢 event | 4 | 0 | 2 | 0.103s |
-| 🟢 filesystem | 29 | 0 | 2 | 0.555s |
-| 🟢 font | 7 | 0 | 0 | 0.124s |
-| 🟢 graphics | 104 | 0 | 1 | 3.006s |
-| 🟢 image | 5 | 0 | 0 | 0.085s |
-| 🟢 joystick | 6 | 0 | 0 | 0.106s |
-| 🟢 keyboard | 9 | 0 | 0 | 0.150s |
-| 🟢 love | 6 | 0 | 0 | 0.098s |
-| 🟢 math | 20 | 0 | 0 | 0.337s |
-| 🟢 mouse | 18 | 0 | 0 | 0.302s |
-| 🟢 physics | 26 | 0 | 0 | 0.434s |
-| 🟢 sensor | 1 | 0 | 0 | 0.016s |
-| 🟢 sound | 4 | 0 | 0 | 0.072s |
-| 🟢 system | 6 | 0 | 2 | 0.135s |
-| 🟢 thread | 5 | 0 | 0 | 0.363s |
-| 🟢 timer | 6 | 0 | 0 | 2.074s |
-| 🟢 touch | 3 | 0 | 0 | 0.023s |
-| 🟢 video | 2 | 0 | 0 | 0.039s |
-| 🟢 window | 34 | 0 | 2 | 5.696s |
+| 🟢 audio | 31 | 0 | 0 | 1.328s |
+| 🟢 data | 12 | 0 | 0 | 0.197s |
+| 🟢 event | 4 | 0 | 2 | 0.100s |
+| 🟢 filesystem | 33 | 0 | 2 | 0.601s |
+| 🟢 font | 7 | 0 | 0 | 0.116s |
+| 🔴 graphics | 104 | 1 | 2 | 3.463s |
+| 🟢 image | 5 | 0 | 0 | 0.093s |
+| 🟢 joystick | 6 | 0 | 0 | 0.116s |
+| 🟢 keyboard | 10 | 0 | 0 | 0.170s |
+| 🟢 love | 6 | 0 | 0 | 0.100s |
+| 🟢 math | 20 | 0 | 0 | 0.334s |
+| 🔴 mouse | 17 | 1 | 0 | 0.301s |
+| 🟢 physics | 26 | 0 | 0 | 0.435s |
+| 🟢 sensor | 1 | 0 | 0 | 0.017s |
+| 🟢 sound | 4 | 0 | 0 | 0.075s |
+| 🟢 system | 7 | 0 | 2 | 0.150s |
+| 🟢 thread | 5 | 0 | 0 | 0.306s |
+| 🟢 timer | 6 | 0 | 0 | 0.298s |
+| 🟢 touch | 3 | 0 | 0 | 0.051s |
+| 🟢 video | 2 | 0 | 0 | 0.038s |
+| 🟢 window | 34 | 0 | 2 | 6.275s |
 
 ### Failures
+> 🔴 Shader  
+> assert 4 [check shader valid] expected '' got 'vertex shader:
+pixel shader:
+'  
+
+> 🔴 setGrabbed  
+> assert 2 [check now grabbed] expected 'true' got 'false'  
+