Merge pull request #18 from edcdavid/filter-in-report

Filter-in-report

Author: edcdavid

html/index.js

@@ -313,14 +313,14 @@ function generateTestCasesStatsElement (tableElement, tableName, optionalMandato
     testText = '<thead><tr><th style="width:15%" scope="col">' + optionalMandatory + ' Test  summary (' + tableNameMap[tableName] + ')</th><th scope="col">Test feedback</th></tr></thead><tbody>'
   }
 
-  testText += '<tr><td class="align-top"><b>Total:</b> ' + testsTotal + '<br><b><tg>Passed:</tg></b> ' + testsPassed + ' '
-  testText += '<input type="checkbox" id="filter-' + optionalMandatory + '-passed-' + tableName + '" checked onclick="filterTestCasesBasedOnStateHandler(\'' + tableElement + '\',\'' + tableName + '\', \'passed\',\'' + optionalMandatory + '\' )" >'
-  testText += '<br><b><tgy>Skipped:</tgy></b> ' + testsSkipped + ' '
-  testText += '<input type="checkbox" id="filter-' + optionalMandatory + '-skipped-' + tableName + '" checked onclick="filterTestCasesBasedOnStateHandler(\'' + tableElement + '\',\'' + tableName + '\', \'skipped\', \'' + optionalMandatory + '\' )" >'
-  testText += '<br><b><' + colorFailed + '>Failed:</' + colorFailed + '></b> ' + testsFailed + ' '
-  testText += '<input type="checkbox" id="filter-' + optionalMandatory + '-failed-' + tableName + '" checked onclick="filterTestCasesBasedOnStateHandler(\'' + tableElement + '\',\'' + tableName + '\', \'failed\', \'' + optionalMandatory + '\' )" >'
-  testText += '<br><b><tpurple>Aborted:</tpurple></b> ' + testsAborted + ' '
-  testText += '<input type="checkbox" id="filter-' + optionalMandatory + '-aborted-' + tableName + '" checked onclick="filterTestCasesBasedOnStateHandler(\'' + tableElement + '\',\'' + tableName + '\', \'aborted\', \'' + optionalMandatory + '\' )" >'
+  testText += '<tr><td class="align-top"><b><tblack>Total:</tblack></b><tblack> ' + testsTotal + '</tblack><br><b><tg>Passed:</tg></b> <tblack>' + testsPassed + '</tblack> '
+  testText += '<input type="checkbox" class="larger-checkbox" id="filter-' + optionalMandatory + '-passed-' + tableName + '" checked onclick="filterTestCasesBasedOnStateHandler(\'' + tableElement + '\',\'' + tableName + '\', \'passed\',\'' + optionalMandatory + '\' )" >'
+  testText += '<br><b><tgy>Skipped:</tgy></b> <tblack>' + testsSkipped + '</tblack> '
+  testText += '<input type="checkbox" class="larger-checkbox" id="filter-' + optionalMandatory + '-skipped-' + tableName + '" checked onclick="filterTestCasesBasedOnStateHandler(\'' + tableElement + '\',\'' + tableName + '\', \'skipped\', \'' + optionalMandatory + '\' )" >'
+  testText += '<br><b><' + colorFailed + '>Failed:</' + colorFailed + '></b> <tblack>' + testsFailed + '</tblack> '
+  testText += '<input type="checkbox" class="larger-checkbox" id="filter-' + optionalMandatory + '-failed-' + tableName + '" checked onclick="filterTestCasesBasedOnStateHandler(\'' + tableElement + '\',\'' + tableName + '\', \'failed\', \'' + optionalMandatory + '\' )" >'
+  testText += '<br><b><tpurple>Aborted:</tpurple></b> <tblack>' + testsAborted + '</tblack> '
+  testText += '<input type="checkbox" class="larger-checkbox" id="filter-' + optionalMandatory + '-aborted-' + tableName + '" checked onclick="filterTestCasesBasedOnStateHandler(\'' + tableElement + '\',\'' + tableName + '\', \'aborted\', \'' + optionalMandatory + '\' )" >'
   testText += '</td><td>'
   testText += '<div class="accordion" id="results-accordion">'
   return testText
@@ -593,6 +593,36 @@ function getHtmlResults () {
   const doc = document.implementation.createHTMLDocument()
   const head = doc.head
   const body = doc.body
+
+  const script = doc.createElement('script')
+  script.type = 'text/javascript'
+  script.textContent = `
+  function filterTestCasesBasedOnStateHandler(tableId, tableName, state, mandatoryOptional) { // eslint-disable-line no-unused-vars
+    const checkBox = document.getElementById('filter-' + mandatoryOptional + '-' + state + '-' + tableName)
+    const show = checkBox.checked
+    if (show) {
+      checkBox.setAttribute('checked', '')
+    } else {
+      checkBox.removeAttribute('checked')
+    }
+    const tableIdClean = tableId.replace(/#/g, '')
+    const table = document.getElementById(tableIdClean)
+    const elements = table.getElementsByClassName('accordion-item')
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i]
+      const id = element.getAttribute('data-id')
+      if (id === state) {
+        if (show === true) {
+          element.removeAttribute('hidden')
+        } else {
+          element.setAttribute('hidden', 'hidden')
+        }
+      }
+    }
+  }
+`
+  doc.head.appendChild(script)
+
   selectScenarioComboBox = document.getElementById('selectScenarioComboBox')
   insertResults(body, 'mandatory')
   if (selectScenarioComboBox.value !== 'all') {
@@ -611,13 +641,8 @@ function getHtmlResults () {
   })
 
   // Make document read-only
-  const checkboxes = doc.querySelectorAll('input[type="checkbox"]')
   const textareas = doc.querySelectorAll('textarea')
 
-  checkboxes.forEach(checkbox => {
-    checkbox.setAttribute('disabled', 'disabled')
-  })
-
   textareas.forEach(textarea => {
     textarea.readOnly = true
   })