Chore: General JS cleanup (#700)

BeyondEvil · web-flow · commit d7301b7e94ab · 2023-07-26T20:02:37.000+02:00
diff --git a/src/pytest_html/basereport.py b/src/pytest_html/basereport.py
@@ -46,15 +46,18 @@ def _asset_filename(self, test_id, extra_index, test_index, file_extension):
 
     def _generate_report(self, self_contained=False):
         generated = datetime.datetime.now()
-        rendered_report = self._render_html(
-            generated.strftime("%d-%b-%Y"),
-            generated.strftime("%H:%M:%S"),
-            __version__,
-            self.css,
+        test_data = cleanup_unserializable(self._report.data)
+        test_data = json.dumps(test_data)
+        rendered_report = self._template.render(
+            title=self._report.title,
+            date=generated.strftime("%d-%b-%Y"),
+            time=generated.strftime("%H:%M:%S"),
+            version=__version__,
+            styles=self.css,
             run_count=self._run_count(),
             self_contained=self_contained,
             outcomes=self._report.data["outcomes"],
-            test_data=cleanup_unserializable(self._report.data),
+            test_data=test_data,
             table_head=self._report.data["resultsTableHeader"],
             prefix=self._report.data["additionalSummary"]["prefix"],
             summary=self._report.data["additionalSummary"]["summary"],
@@ -118,36 +121,6 @@ def _process_extras(self, report, test_id):
 
         return report_extras
 
-    def _render_html(
-        self,
-        date,
-        time,
-        version,
-        styles,
-        run_count,
-        self_contained,
-        outcomes,
-        test_data,
-        table_head,
-        summary,
-        prefix,
-        postfix,
-    ):
-        return self._template.render(
-            date=date,
-            time=time,
-            version=version,
-            styles=styles,
-            run_count=run_count,
-            self_contained=self_contained,
-            outcomes=outcomes,
-            test_data=json.dumps(test_data),
-            table_head=table_head,
-            summary=summary,
-            prefix=prefix,
-            postfix=postfix,
-        )
-
     def _write_report(self, rendered_report):
         with self._report_path.open("w", encoding="utf-8") as f:
             f.write(rendered_report)
diff --git a/src/pytest_html/report_data.py b/src/pytest_html/report_data.py
@@ -29,7 +29,6 @@ def __init__(self, config):
         }
 
         self._data = {
-            "title": "",
             "collectedItems": 0,
             "totalDuration": 0,
             "runningState": "not_started",
diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8"/>
-    <title id="head-title"></title>
+    <title id="head-title">{{ title }}</title>
     {%- if self_contained %}
       <style type="text/css">
         {{- styles|safe }}
@@ -12,7 +12,7 @@
     {%- endif %}
   </head>
   <body>
-    <h1 id="title"></h1>
+    <h1 id="title">{{ title }}</h1>
     <p>Report generated on {{ date }} at {{ time }} by <a href="https://pypi.python.org/pypi/pytest-html">pytest-html</a>
         v{{ version }}</p>
     <div id="environment-header" class="collapser">
@@ -66,14 +66,6 @@
         <th colspan="4">No results found. Check the filters.</th>
       </tr>
     </template>
-    <template id="template_table-colgroup">
-      <colgroup>
-        <col span="1" style="width: 25%;">
-        <col span="1" style="width: 25%;">
-        <col span="1" style="width: 25%;">
-        <col span="1" style="width: 25%;">
-      </colgroup>
-    </template>
     <!-- END TEMPLATES -->
     <div class="summary">
       <div class="summary__data">
diff --git a/src/pytest_html/scripts/datamanager.js b/src/pytest_html/scripts/datamanager.js
@@ -19,17 +19,21 @@ class DataManager {
     get allData() {
         return { ...this.data }
     }
+
     resetRender() {
         this.renderData = { ...this.data }
     }
+
     setRender(data) {
         this.renderData.tests = [...data]
     }
+
     toggleCollapsedItem(id) {
         this.renderData.tests = this.renderData.tests.map((test) =>
             test.id === id ? { ...test, collapsed: !test.collapsed } : test,
         )
     }
+
     set allCollapsed(collapsed) {
         this.renderData = { ...this.renderData, tests: [...this.renderData.tests.map((test) => (
             { ...test, collapsed }
@@ -39,24 +43,10 @@ class DataManager {
     get testSubset() {
         return [...this.renderData.tests]
     }
-    get allTests() {
-        return [...this.data.tests]
-    }
-    get title() {
-        return this.renderData.title
-    }
+
     get environment() {
         return this.renderData.environment
     }
-    get collectedItems() {
-        return this.renderData.collectedItems
-    }
-    get isFinished() {
-        return this.data.runningState === 'Finished'
-    }
-    get formattedDuration() {
-        return this.data.totalDuration.formatted
-    }
 }
 
 module.exports = {
diff --git a/src/pytest_html/scripts/dom.js b/src/pytest_html/scripts/dom.js
@@ -1,8 +1,7 @@
 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 listHeaderEmpty = document.querySelector('#template_results-table__head--empty')
+const templateEnvRow = document.getElementById('template_environment_row')
+const templateResult = document.getElementById('template_results-table__tbody')
+const listHeaderEmpty = document.getElementById('template_results-table__head--empty')
 
 function htmlToElements(html) {
     const temp = document.createElement('template')
@@ -39,7 +38,6 @@ const dom = {
         return envRow
     },
     getListHeaderEmpty: () => listHeaderEmpty.content.cloneNode(true),
-    getColGroup: () => templateCollGroup.content.cloneNode(true),
     getResultTBody: ({ testId, id, log, duration, extras, resultsTableRow, tableHtml, result, collapsed }) => {
         const resultLower = result.toLowerCase()
         const resultBody = templateResult.content.cloneNode(true)
diff --git a/src/pytest_html/scripts/index.js b/src/pytest_html/scripts/index.js
@@ -2,7 +2,7 @@ const { redraw, bindEvents, renderStatic } = require('./main.js')
 const { doInitFilter } = require('./filter.js')
 const { doInitSort } = require('./sort.js')
 const { manager } = require('./datamanager.js')
-const data = JSON.parse(document.querySelector('#data-container').dataset.jsonblob)
+const data = JSON.parse(document.getElementById('data-container').dataset.jsonblob)
 
 function init() {
     manager.setManager(data)
diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js
@@ -11,27 +11,21 @@ const removeChildren = (node) => {
 }
 
 const renderStatic = () => {
-    const renderTitle = () => {
-        const title = manager.title
-        document.querySelector('#title').innerText = title
-        document.querySelector('#head-title').innerText = title
-    }
     const renderEnvironmentTable = () => {
         const environment = manager.environment
         const rows = Object.keys(environment).map((key) => dom.getStaticRow(key, environment[key]))
-        const table = document.querySelector('#environment')
+        const table = document.getElementById('environment')
         removeChildren(table)
         rows.forEach((row) => table.appendChild(row))
     }
-    renderTitle()
     renderEnvironmentTable()
 }
 
 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 table = document.getElementById('results-table')
     const tableHeader = document.getElementById('template_results-table__head').content.cloneNode(true)
 
     removeChildren(table)
@@ -40,7 +34,6 @@ const renderContent = (tests) => {
     if (!rows.length) {
         tableHeader.appendChild(dom.getListHeaderEmpty())
     }
-    table.appendChild(dom.getColGroup())
     table.appendChild(tableHeader)
 
     rows.forEach((row) => !!row && table.appendChild(row))
@@ -66,7 +59,7 @@ const renderContent = (tests) => {
     })
 }
 
-const renderDerived = (tests, collectedItems, isFinished, formattedDuration) => {
+const renderDerived = () => {
     const currentFilter = getVisible()
     possibleFilters.forEach((result) => {
         const input = document.querySelector(`input[data-test-result="${result}"]`)
@@ -83,9 +76,9 @@ const bindEvents = () => {
         redraw()
     }
 
-    const header = document.querySelector('#environment-header')
+    const header = document.getElementById('environment-header')
     header.addEventListener('click', () => {
-        const table = document.querySelector('#environment')
+        const table = document.getElementById('environment')
         table.classList.toggle('hidden')
         header.classList.toggle('collapser')
         header.classList.toggle('expander')
@@ -94,21 +87,21 @@ const bindEvents = () => {
     findAll('input[name="filter_checkbox"]').forEach((elem) => {
         elem.addEventListener('click', filterColumn)
     })
-    document.querySelector('#show_all_details').addEventListener('click', () => {
+    document.getElementById('show_all_details').addEventListener('click', () => {
         manager.allCollapsed = false
         redraw()
     })
-    document.querySelector('#hide_all_details').addEventListener('click', () => {
+    document.getElementById('hide_all_details').addEventListener('click', () => {
         manager.allCollapsed = true
         redraw()
     })
 }
 
 const redraw = () => {
-    const { testSubset, allTests, collectedItems, isFinished, formattedDuration } = manager
+    const { testSubset } = manager
 
     renderContent(testSubset)
-    renderDerived(allTests, collectedItems, isFinished, formattedDuration )
+    renderDerived()
 }
 
 module.exports = {
diff --git a/src/pytest_html/scripts/mediaviewer.js b/src/pytest_html/scripts/mediaviewer.js
@@ -3,10 +3,12 @@ class MediaViewer {
         this.assets = assets
         this.index = 0
     }
+
     nextActive() {
         this.index = this.index === this.assets.length - 1 ? 0 : this.index + 1
         return [this.activeFile, this.index]
     }
+
     prevActive() {
         this.index = this.index === 0 ? this.assets.length - 1 : this.index -1
         return [this.activeFile, this.index]
@@ -15,6 +17,7 @@ class MediaViewer {
     get currentIndex() {
         return this.index
     }
+
     get activeFile() {
         return this.assets[this.index]
     }
diff --git a/src/pytest_html/scripts/storage.js b/src/pytest_html/scripts/storage.js
@@ -1,13 +1,12 @@
-const possibleResults = [
-    { result: 'passed', label: 'Passed' },
-    { result: 'skipped', label: 'Skipped' },
-    { result: 'failed', label: 'Failed' },
-    { result: 'error', label: 'Errors' },
-    { result: 'xfailed', label: 'Unexpected failures' },
-    { result: 'xpassed', label: 'Unexpected passes' },
-    { result: 'rerun', label: 'Reruns' },
+const possibleFilters = [
+    'passed',
+    'skipped',
+    'failed',
+    'error',
+    'xfailed',
+    'xpassed',
+    'rerun',
 ]
-const possibleFilters = possibleResults.map((item) => item.result)
 
 const getVisible = () => {
     const url = new URL(window.location.href)
@@ -113,5 +112,4 @@ module.exports = {
     setSortDirection,
     getCollapsedCategory,
     possibleFilters,
-    possibleResults,
 }

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,6 @@ def __init__(self, config):`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`self._data = {`
`32`		`- "title": "",`
`33`	`32`	`"collectedItems": 0,`
`34`	`33`	`"totalDuration": 0,`
`35`	`34`	`"runningState": "not_started",`
Original file line number	Diff line number	Diff line change
`@@ -3,10 +3,12 @@ class MediaViewer {`
`3`	`3`	`this.assets = assets`
`4`	`4`	`this.index = 0`
`5`	`5`	`}`
	`6`	`+`
`6`	`7`	`nextActive() {`
`7`	`8`	`this.index = this.index === this.assets.length - 1 ? 0 : this.index + 1`
`8`	`9`	`return [this.activeFile, this.index]`
`9`	`10`	`}`
	`11`	`+`
`10`	`12`	`prevActive() {`
`11`	`13`	`this.index = this.index === 0 ? this.assets.length - 1 : this.index -1`
`12`	`14`	`return [this.activeFile, this.index]`
`@@ -15,6 +17,7 @@ class MediaViewer {`
`15`	`17`	`get currentIndex() {`
`16`	`18`	`return this.index`
`17`	`19`	`}`
	`20`	`+`
`18`	`21`	`get activeFile() {`
`19`	`22`	`return this.assets[this.index]`
`20`	`23`	`}`