From 8139711a6cb69aca7ab0d487deda5742a8b5f07b Mon Sep 17 00:00:00 2001 From: Viktor Gustafsson Date: Thu, 11 Aug 2022 00:17:39 +0200 Subject: [PATCH 1/3] make collapse/expand all functional --- src/layout/css/style.scss | 13 +++++++- src/pytest_html/resources/index.jinja2 | 4 +-- src/pytest_html/resources/style.css | 15 ++++++++- src/pytest_html/scripts/datamanager.js | 9 +++++- src/pytest_html/scripts/dom.js | 6 ++-- src/pytest_html/scripts/main.js | 45 +++++++++++++++----------- 6 files changed, 66 insertions(+), 26 deletions(-) diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss index b9198ce7..c0d4d224 100644 --- a/src/layout/css/style.scss +++ b/src/layout/css/style.scss @@ -296,9 +296,20 @@ div.media { display: flex; justify-content: space-between; } -.filters { +.filters, +.collapse { display: flex; align-items: center; + button { + color: #999; + border: none; + background: none; + cursor: pointer; + text-decoration: underline; + &:hover { + color: #ccc; + } + } } .filter__label { margin-right: 10px; diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2 index 0fb7fc14..0d3b9e74 100644 --- a/src/pytest_html/resources/index.jinja2 +++ b/src/pytest_html/resources/index.jinja2 @@ -101,8 +101,8 @@ -
- Show all details / Hide all details +
+  / 
diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css index 842c9a1a..93bd1ead 100644 --- a/src/pytest_html/resources/style.css +++ b/src/pytest_html/resources/style.css @@ -245,10 +245,23 @@ div.media { justify-content: space-between; } -.filters { +.filters, +.collapse { display: flex; align-items: center; } +.filters button, +.collapse button { + color: #999; + border: none; + background: none; + cursor: pointer; + text-decoration: underline; +} +.filters button:hover, +.collapse button:hover { + color: #ccc; +} .filter__label { margin-right: 10px; diff --git a/src/pytest_html/scripts/datamanager.js b/src/pytest_html/scripts/datamanager.js index 287be187..42c7f71f 100644 --- a/src/pytest_html/scripts/datamanager.js +++ b/src/pytest_html/scripts/datamanager.js @@ -12,6 +12,13 @@ class DataManager { setRender(data) { this.renderData.tests = data } + + set allCollapsed(collapsed) { + this.renderData = { ...this.data, tests: [...this.data.tests.map((test) => ( + { ...test, collapsed } + ))] } + } + get testSubset() { return [...this.renderData.tests] } @@ -31,7 +38,7 @@ class DataManager { return this.renderData.durationFormat } get isFinished() { - return this.data.runningState === 'Finished' + return this.data.runningState === 'Finished' } } diff --git a/src/pytest_html/scripts/dom.js b/src/pytest_html/scripts/dom.js index 4dac0272..145878cc 100644 --- a/src/pytest_html/scripts/dom.js +++ b/src/pytest_html/scripts/dom.js @@ -64,7 +64,7 @@ const dom = { return header }, getListHeaderEmpty: () => listHeaderEmpty.content.cloneNode(true), - getResultTBody: ({ nodeid, longreprtext, duration, extras, resultsTableRow, tableHtml, outcome}) => { + getResultTBody: ({ nodeid, longreprtext, duration, extras, resultsTableRow, tableHtml, outcome, collapsed }) => { const outcomeLower = outcome.toLowerCase() const resultBody = templateResult.content.cloneNode(true) resultBody.querySelector('tbody').classList.add(outcomeLower) @@ -72,9 +72,11 @@ const dom = { resultBody.querySelector('.col-name').innerText = nodeid resultBody.querySelector('.col-duration').innerText = `${formatDuration(duration)}s` + if (longreprtext) { resultBody.querySelector('.log').innerText = longreprtext - } else { + } + if (collapsed || !longreprtext) { resultBody.querySelector('.extras-row').classList.add('hidden') } diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js index 2e14a76d..a0f602a6 100644 --- a/src/pytest_html/scripts/main.js +++ b/src/pytest_html/scripts/main.js @@ -12,26 +12,25 @@ const removeChildren = (node) => { } const renderStatic = () => { - const title = manager.title - const environment = manager.environment - document.querySelector('#title').innerText = title - document.querySelector('#head-title').innerText = title - const rows = Object.keys(environment).map((key) => - dom.getStaticRow(key, environment[key]) - ) - - const table = document.querySelector('#environment') - removeChildren(table) - rows.forEach((row) => table.appendChild(row)) + const renderTitle = () => { + const title = manager.title + document.querySelector('#title').innerText = title + document.querySelector('#head-title').innerText = title + } + const renderTable = () => { + const environment = manager.environment + const rows = Object.keys(environment).map((key) => dom.getStaticRow(key, environment[key])) + const table = document.querySelector('#environment') + removeChildren(table) + rows.forEach((row) => table.appendChild(row)) + } + renderTitle() + renderTable() } const renderContent = (tests) => { const renderSet = tests.filter(({ when, outcome }) => when === 'call' || outcome === 'Error' ) - - const rows = renderSet.map((test) => - dom.getResultTBody(test) - ) - + const rows = renderSet.map(dom.getResultTBody) const table = document.querySelector('#results-table') removeChildren(table) const tableHeader = dom.getListHeader(manager.renderData) @@ -71,9 +70,9 @@ const renderDerived = (tests, collectedItems, isFinished) => { input.checked = !currentFilter.includes(outcome) }) - const numberOfTests = renderSet.filter(({outcome}) => - ['Passed', 'Failed', 'XPassed', 'XFailed'].includes(outcome) - ).length + const numberOfTests = renderSet.filter(({ outcome }) => + ['Passed', 'Failed', 'XPassed', 'XFailed'].includes(outcome)).length + if (isFinished) { const accTime = tests.reduce((prev, { duration }) => prev + duration, 0) const formattedAccTime = formatDuration(accTime) @@ -105,6 +104,14 @@ const bindEvents = () => { redraw() }) }) + document.querySelector('#show_all_details').addEventListener('click', () => { + manager.allCollapsed= false + redraw() + }) + document.querySelector('#hide_all_details').addEventListener('click', () => { + manager.allCollapsed= true + redraw() + }) } const renderPage = () => { From f37acfdd497dffb273b95a3e59153304b01cfeb5 Mon Sep 17 00:00:00 2001 From: Viktor Gustafsson Date: Thu, 11 Aug 2022 22:46:39 +0200 Subject: [PATCH 2/3] Update src/pytest_html/scripts/main.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Jim Brännlund --- src/pytest_html/scripts/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js index a0f602a6..afcf268c 100644 --- a/src/pytest_html/scripts/main.js +++ b/src/pytest_html/scripts/main.js @@ -105,7 +105,7 @@ const bindEvents = () => { }) }) document.querySelector('#show_all_details').addEventListener('click', () => { - manager.allCollapsed= false + manager.allCollapsed = false redraw() }) document.querySelector('#hide_all_details').addEventListener('click', () => { From 5d5ef9869c777037e5259dab915a38cb73a09921 Mon Sep 17 00:00:00 2001 From: Viktor Gustafsson Date: Thu, 11 Aug 2022 22:46:47 +0200 Subject: [PATCH 3/3] Update src/pytest_html/scripts/main.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Jim Brännlund --- src/pytest_html/scripts/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js index afcf268c..009e4416 100644 --- a/src/pytest_html/scripts/main.js +++ b/src/pytest_html/scripts/main.js @@ -109,7 +109,7 @@ const bindEvents = () => { redraw() }) document.querySelector('#hide_all_details').addEventListener('click', () => { - manager.allCollapsed= true + manager.allCollapsed = true redraw() }) }