Chore: General JS cleanup (#700)

This commit is contained in:
Jim Brännlund 2023-07-26 20:02:37 +02:00 committed by GitHub
parent f740846f06
commit d7301b7e94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 40 additions and 94 deletions

View File

@ -46,15 +46,18 @@ class BaseReport:
def _generate_report(self, self_contained=False): def _generate_report(self, self_contained=False):
generated = datetime.datetime.now() generated = datetime.datetime.now()
rendered_report = self._render_html( test_data = cleanup_unserializable(self._report.data)
generated.strftime("%d-%b-%Y"), test_data = json.dumps(test_data)
generated.strftime("%H:%M:%S"), rendered_report = self._template.render(
__version__, title=self._report.title,
self.css, date=generated.strftime("%d-%b-%Y"),
time=generated.strftime("%H:%M:%S"),
version=__version__,
styles=self.css,
run_count=self._run_count(), run_count=self._run_count(),
self_contained=self_contained, self_contained=self_contained,
outcomes=self._report.data["outcomes"], outcomes=self._report.data["outcomes"],
test_data=cleanup_unserializable(self._report.data), test_data=test_data,
table_head=self._report.data["resultsTableHeader"], table_head=self._report.data["resultsTableHeader"],
prefix=self._report.data["additionalSummary"]["prefix"], prefix=self._report.data["additionalSummary"]["prefix"],
summary=self._report.data["additionalSummary"]["summary"], summary=self._report.data["additionalSummary"]["summary"],
@ -118,36 +121,6 @@ class BaseReport:
return report_extras 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): def _write_report(self, rendered_report):
with self._report_path.open("w", encoding="utf-8") as f: with self._report_path.open("w", encoding="utf-8") as f:
f.write(rendered_report) f.write(rendered_report)

View File

@ -29,7 +29,6 @@ class ReportData:
} }
self._data = { self._data = {
"title": "",
"collectedItems": 0, "collectedItems": 0,
"totalDuration": 0, "totalDuration": 0,
"runningState": "not_started", "runningState": "not_started",

View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title id="head-title"></title> <title id="head-title">{{ title }}</title>
{%- if self_contained %} {%- if self_contained %}
<style type="text/css"> <style type="text/css">
{{- styles|safe }} {{- styles|safe }}
@ -12,7 +12,7 @@
{%- endif %} {%- endif %}
</head> </head>
<body> <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> <p>Report generated on {{ date }} at {{ time }} by <a href="https://pypi.python.org/pypi/pytest-html">pytest-html</a>
v{{ version }}</p> v{{ version }}</p>
<div id="environment-header" class="collapser"> <div id="environment-header" class="collapser">
@ -66,14 +66,6 @@
<th colspan="4">No results found. Check the filters.</th> <th colspan="4">No results found. Check the filters.</th>
</tr> </tr>
</template> </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 --> <!-- END TEMPLATES -->
<div class="summary"> <div class="summary">
<div class="summary__data"> <div class="summary__data">

View File

@ -19,17 +19,21 @@ class DataManager {
get allData() { get allData() {
return { ...this.data } return { ...this.data }
} }
resetRender() { resetRender() {
this.renderData = { ...this.data } this.renderData = { ...this.data }
} }
setRender(data) { setRender(data) {
this.renderData.tests = [...data] this.renderData.tests = [...data]
} }
toggleCollapsedItem(id) { toggleCollapsedItem(id) {
this.renderData.tests = this.renderData.tests.map((test) => this.renderData.tests = this.renderData.tests.map((test) =>
test.id === id ? { ...test, collapsed: !test.collapsed } : test, test.id === id ? { ...test, collapsed: !test.collapsed } : test,
) )
} }
set allCollapsed(collapsed) { set allCollapsed(collapsed) {
this.renderData = { ...this.renderData, tests: [...this.renderData.tests.map((test) => ( this.renderData = { ...this.renderData, tests: [...this.renderData.tests.map((test) => (
{ ...test, collapsed } { ...test, collapsed }
@ -39,24 +43,10 @@ class DataManager {
get testSubset() { get testSubset() {
return [...this.renderData.tests] return [...this.renderData.tests]
} }
get allTests() {
return [...this.data.tests]
}
get title() {
return this.renderData.title
}
get environment() { get environment() {
return this.renderData.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 = { module.exports = {

View File

@ -1,8 +1,7 @@
const mediaViewer = require('./mediaviewer.js') const mediaViewer = require('./mediaviewer.js')
const templateEnvRow = document.querySelector('#template_environment_row') const templateEnvRow = document.getElementById('template_environment_row')
const templateCollGroup = document.querySelector('#template_table-colgroup') const templateResult = document.getElementById('template_results-table__tbody')
const templateResult = document.querySelector('#template_results-table__tbody') const listHeaderEmpty = document.getElementById('template_results-table__head--empty')
const listHeaderEmpty = document.querySelector('#template_results-table__head--empty')
function htmlToElements(html) { function htmlToElements(html) {
const temp = document.createElement('template') const temp = document.createElement('template')
@ -39,7 +38,6 @@ const dom = {
return envRow return envRow
}, },
getListHeaderEmpty: () => listHeaderEmpty.content.cloneNode(true), getListHeaderEmpty: () => listHeaderEmpty.content.cloneNode(true),
getColGroup: () => templateCollGroup.content.cloneNode(true),
getResultTBody: ({ testId, id, log, duration, extras, resultsTableRow, tableHtml, result, collapsed }) => { getResultTBody: ({ testId, id, log, duration, extras, resultsTableRow, tableHtml, result, collapsed }) => {
const resultLower = result.toLowerCase() const resultLower = result.toLowerCase()
const resultBody = templateResult.content.cloneNode(true) const resultBody = templateResult.content.cloneNode(true)

View File

@ -2,7 +2,7 @@ const { redraw, bindEvents, renderStatic } = require('./main.js')
const { doInitFilter } = require('./filter.js') const { doInitFilter } = require('./filter.js')
const { doInitSort } = require('./sort.js') const { doInitSort } = require('./sort.js')
const { manager } = require('./datamanager.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() { function init() {
manager.setManager(data) manager.setManager(data)

View File

@ -11,19 +11,13 @@ const removeChildren = (node) => {
} }
const renderStatic = () => { const renderStatic = () => {
const renderTitle = () => {
const title = manager.title
document.querySelector('#title').innerText = title
document.querySelector('#head-title').innerText = title
}
const renderEnvironmentTable = () => { const renderEnvironmentTable = () => {
const environment = manager.environment const environment = manager.environment
const rows = Object.keys(environment).map((key) => dom.getStaticRow(key, environment[key])) const rows = Object.keys(environment).map((key) => dom.getStaticRow(key, environment[key]))
const table = document.querySelector('#environment') const table = document.getElementById('environment')
removeChildren(table) removeChildren(table)
rows.forEach((row) => table.appendChild(row)) rows.forEach((row) => table.appendChild(row))
} }
renderTitle()
renderEnvironmentTable() renderEnvironmentTable()
} }
@ -31,7 +25,7 @@ const renderContent = (tests) => {
const sortAttr = getSort(manager.allData.initialSort) const sortAttr = getSort(manager.allData.initialSort)
const sortAsc = JSON.parse(getSortDirection()) const sortAsc = JSON.parse(getSortDirection())
const rows = tests.map(dom.getResultTBody) 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) const tableHeader = document.getElementById('template_results-table__head').content.cloneNode(true)
removeChildren(table) removeChildren(table)
@ -40,7 +34,6 @@ const renderContent = (tests) => {
if (!rows.length) { if (!rows.length) {
tableHeader.appendChild(dom.getListHeaderEmpty()) tableHeader.appendChild(dom.getListHeaderEmpty())
} }
table.appendChild(dom.getColGroup())
table.appendChild(tableHeader) table.appendChild(tableHeader)
rows.forEach((row) => !!row && table.appendChild(row)) 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() const currentFilter = getVisible()
possibleFilters.forEach((result) => { possibleFilters.forEach((result) => {
const input = document.querySelector(`input[data-test-result="${result}"]`) const input = document.querySelector(`input[data-test-result="${result}"]`)
@ -83,9 +76,9 @@ const bindEvents = () => {
redraw() redraw()
} }
const header = document.querySelector('#environment-header') const header = document.getElementById('environment-header')
header.addEventListener('click', () => { header.addEventListener('click', () => {
const table = document.querySelector('#environment') const table = document.getElementById('environment')
table.classList.toggle('hidden') table.classList.toggle('hidden')
header.classList.toggle('collapser') header.classList.toggle('collapser')
header.classList.toggle('expander') header.classList.toggle('expander')
@ -94,21 +87,21 @@ const bindEvents = () => {
findAll('input[name="filter_checkbox"]').forEach((elem) => { findAll('input[name="filter_checkbox"]').forEach((elem) => {
elem.addEventListener('click', filterColumn) elem.addEventListener('click', filterColumn)
}) })
document.querySelector('#show_all_details').addEventListener('click', () => { document.getElementById('show_all_details').addEventListener('click', () => {
manager.allCollapsed = false manager.allCollapsed = false
redraw() redraw()
}) })
document.querySelector('#hide_all_details').addEventListener('click', () => { document.getElementById('hide_all_details').addEventListener('click', () => {
manager.allCollapsed = true manager.allCollapsed = true
redraw() redraw()
}) })
} }
const redraw = () => { const redraw = () => {
const { testSubset, allTests, collectedItems, isFinished, formattedDuration } = manager const { testSubset } = manager
renderContent(testSubset) renderContent(testSubset)
renderDerived(allTests, collectedItems, isFinished, formattedDuration ) renderDerived()
} }
module.exports = { module.exports = {

View File

@ -3,10 +3,12 @@ class MediaViewer {
this.assets = assets this.assets = assets
this.index = 0 this.index = 0
} }
nextActive() { nextActive() {
this.index = this.index === this.assets.length - 1 ? 0 : this.index + 1 this.index = this.index === this.assets.length - 1 ? 0 : this.index + 1
return [this.activeFile, this.index] return [this.activeFile, this.index]
} }
prevActive() { prevActive() {
this.index = this.index === 0 ? this.assets.length - 1 : this.index -1 this.index = this.index === 0 ? this.assets.length - 1 : this.index -1
return [this.activeFile, this.index] return [this.activeFile, this.index]
@ -15,6 +17,7 @@ class MediaViewer {
get currentIndex() { get currentIndex() {
return this.index return this.index
} }
get activeFile() { get activeFile() {
return this.assets[this.index] return this.assets[this.index]
} }

View File

@ -1,13 +1,12 @@
const possibleResults = [ const possibleFilters = [
{ result: 'passed', label: 'Passed' }, 'passed',
{ result: 'skipped', label: 'Skipped' }, 'skipped',
{ result: 'failed', label: 'Failed' }, 'failed',
{ result: 'error', label: 'Errors' }, 'error',
{ result: 'xfailed', label: 'Unexpected failures' }, 'xfailed',
{ result: 'xpassed', label: 'Unexpected passes' }, 'xpassed',
{ result: 'rerun', label: 'Reruns' }, 'rerun',
] ]
const possibleFilters = possibleResults.map((item) => item.result)
const getVisible = () => { const getVisible = () => {
const url = new URL(window.location.href) const url = new URL(window.location.href)
@ -113,5 +112,4 @@ module.exports = {
setSortDirection, setSortDirection,
getCollapsedCategory, getCollapsedCategory,
possibleFilters, possibleFilters,
possibleResults,
} }