Fix: Order and layout of outcome summary

Author: BeyondEvil

src/pytest_html/resources/index.jinja2

@@ -97,13 +97,13 @@
         <div class="summary__spacer"></div>
           <div class="controls">
             <div class="filters">
-              <input checked="true" class="filter" data-test-result="error" name="filter_checkbox" type="checkbox"/><span class="error"></span>
               <input checked="true" class="filter" data-test-result="failed" name="filter_checkbox" type="checkbox"/><span class="failed"></span>
-              <input checked="true" class="filter" data-test-result="rerun" name="filter_checkbox" type="checkbox"/><span class="rerun"></span>
-              <input checked="true" class="filter" data-test-result="xfailed" name="filter_checkbox" type="checkbox"/><span class="xfailed"></span>
-              <input checked="true" class="filter" data-test-result="xpassed" name="filter_checkbox" type="checkbox"/><span class="xpassed"></span>
               <input checked="true" class="filter" data-test-result="passed" name="filter_checkbox" type="checkbox"/><span class="passed"></span>
               <input checked="true" class="filter" data-test-result="skipped" name="filter_checkbox" type="checkbox"/><span class="skipped"></span>
+              <input checked="true" class="filter" data-test-result="xfailed" name="filter_checkbox" type="checkbox"/><span class="xfailed"></span>
+              <input checked="true" class="filter" data-test-result="xpassed" name="filter_checkbox" type="checkbox"/><span class="xpassed"></span>
+              <input checked="true" class="filter" data-test-result="error" name="filter_checkbox" type="checkbox"/><span class="error"></span>
+              <input checked="true" class="filter" data-test-result="rerun" name="filter_checkbox" type="checkbox"/><span class="rerun"></span>
             </div>
             <div class="collapse">
               <button id="show_all_details">Show all details</button>&nbsp;/&nbsp;<button id="hide_all_details">Hide all details</button>

src/pytest_html/scripts/main.js

@@ -62,10 +62,15 @@ const renderContent = (tests) => {
 
 const renderDerived = (tests, collectedItems, isFinished) => {
     const currentFilter = getVisible()
-    possibleResults.forEach(({ result, label }) => {
+    possibleResults.forEach(({ result, label }, index) => {
         const count = tests.filter((test) => test.result.toLowerCase() === result).length
         const input = document.querySelector(`input[data-test-result="${result}"]`)
+        const lastInput = document.querySelector(`input[data-test-result="${result}"]:last-of-type`)
         document.querySelector(`.${result}`).innerText = `${count} ${label}`
+        // add a comma and whitespace between the results
+        if (input !== lastInput) {
+            document.querySelector(`.${result}`).innerText += ', '
+        }
 
         input.disabled = !count
         input.checked = currentFilter.includes(result)