Feature: Template table header (#696)

src/pytest_html/basereport.py

@@ -53,6 +53,7 @@ class BaseReport:
             self.css,
             self_contained=self_contained,
             test_data=cleanup_unserializable(self._report.data),
+            table_head=self._report.data["resultsTableHeader"],
             prefix=self._report.data["additionalSummary"]["prefix"],
             summary=self._report.data["additionalSummary"]["summary"],
             postfix=self._report.data["additionalSummary"]["postfix"],
@@ -123,6 +124,7 @@ class BaseReport:
         styles,
         self_contained,
         test_data,
+        table_head,
         summary,
         prefix,
         postfix,
@@ -134,6 +136,7 @@ class BaseReport:
             styles=styles,
             self_contained=self_contained,
             test_data=json.dumps(test_data),
+            table_head=table_head,
             summary=summary,
             prefix=prefix,
             postfix=postfix,

src/pytest_html/resources/index.jinja2

@@ -55,6 +55,9 @@
     <template id="template_results-table__head">
       <thead id="results-table-head">
         <tr>
+        {% for th in table_head %}
+        {{ th|safe }}
+        {% endfor %}
         </tr>
       </thead>
     </template>

src/pytest_html/scripts/dom.js

@@ -1,9 +1,7 @@
-const storageModule = require('./storage.js')
 const mediaViewer = require('./mediaviewer.js')
 const templateEnvRow = document.querySelector('#template_environment_row')
 const templateCollGroup = document.querySelector('#template_table-colgroup')
 const templateResult = document.querySelector('#template_results-table__tbody')
-const listHeader = document.querySelector('#template_results-table__head')
 const listHeaderEmpty = document.querySelector('#template_results-table__head--empty')
 
 function htmlToElements(html) {
@@ -40,21 +38,6 @@ const dom = {
 
         return envRow
     },
-    getListHeader: ({ initialSort, resultsTableHeader }) => {
-        const header = listHeader.content.cloneNode(true)
-        const sortAttr = storageModule.getSort(initialSort)
-        const sortAsc = JSON.parse(storageModule.getSortDirection())
-
-        resultsTableHeader.forEach((html) => {
-            const t = document.createElement('template')
-            t.innerHTML = html
-            header.querySelector('#results-table-head > tr').appendChild(t.content)
-        })
-
-        header.querySelector(`.sortable[data-column-type="${sortAttr}"]`)?.classList.add(sortAsc ? 'desc' : 'asc')
-
-        return header
-    },
     getListHeaderEmpty: () => listHeaderEmpty.content.cloneNode(true),
     getColGroup: () => templateCollGroup.content.cloneNode(true),
     getResultTBody: ({ testId, id, log, duration, extras, resultsTableRow, tableHtml, result, collapsed }) => {

src/pytest_html/scripts/main.js

@@ -2,7 +2,7 @@ const { dom, findAll } = require('./dom.js')
 const { manager } = require('./datamanager.js')
 const { doSort } = require('./sort.js')
 const { doFilter } = require('./filter.js')
-const { getVisible, possibleResults } = require('./storage.js')
+const { getVisible, getSort, getSortDirection, possibleResults } = require('./storage.js')
 
 const removeChildren = (node) => {
     while (node.firstChild) {
@@ -28,10 +28,15 @@ const renderStatic = () => {
 }
 
 const renderContent = (tests) => {
+    const sortAttr = getSort(manager.allData.initialSort)
+    const sortAsc = JSON.parse(getSortDirection())
     const rows = tests.map(dom.getResultTBody)
     const table = document.querySelector('#results-table')
+    const tableHeader = document.getElementById('template_results-table__head').content.cloneNode(true)
+
     removeChildren(table)
-    const tableHeader = dom.getListHeader(manager.renderData)
+
+    tableHeader.querySelector(`.sortable[data-column-type="${sortAttr}"]`)?.classList.add(sortAsc ? 'desc' : 'asc')
     if (!rows.length) {
         tableHeader.appendChild(dom.getListHeaderEmpty())
     }

testing/unittest.js

@@ -7,7 +7,7 @@ const storageModule = require('../src/pytest_html/scripts/storage.js')
 
 
 const setTestData = () => {
-    const jsonDatan = {
+    const jsonData = {
         'tests':
             [
                 {
@@ -36,7 +36,17 @@ const setTestData = () => {
                 },
             ],
     }
-    dataModule.manager.setManager(jsonDatan)
+    dataModule.manager.setManager(jsonData)
+}
+
+const mockWindow = (queryParam) => {
+    const mock = {
+        location: {
+            href: `https://example.com/page?${queryParam}`,
+        },
+    }
+    originalWindow = global.window
+    global.window = mock
 }
 
 describe('Filter tests', () => {
@@ -190,16 +200,6 @@ describe('Sort tests', () => {
     })
 })
 
-const mockWindow = (queryParam) => {
-    const mock = {
-        location: {
-            href: `https://example.com/page?${queryParam}`,
-        },
-    }
-    originalWindow = global.window
-    global.window = mock
-}
-
 describe('Storage tests', () => {
     describe('getCollapsedCategory', () => {
         let originalWindow