From 7452e5c76fd6c2506da2494d2aceca619bab144f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jim=20Br=C3=A4nnlund?= Date: Thu, 27 Jul 2023 23:33:12 +0200 Subject: [PATCH] Feature: Only one collapsed state --- src/layout/css/style.scss | 11 ++++------- src/pytest_html/resources/index.jinja2 | 2 +- src/pytest_html/resources/style.css | 12 ++++-------- src/pytest_html/scripts/dom.js | 4 +++- src/pytest_html/scripts/main.js | 3 +-- src/pytest_html/scripts/storage.js | 15 ++------------- testing/test_integration.py | 2 +- testing/unittest.js | 3 --- 8 files changed, 16 insertions(+), 36 deletions(-) diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss index b4f0287e..b32277ac 100644 --- a/src/layout/css/style.scss +++ b/src/layout/css/style.scss @@ -182,9 +182,6 @@ div.media { flex: 0 0 25px; align-items: center; } -.collapsed { - display: none; -} @mixin rowToggle { color: #bbb; @@ -199,25 +196,25 @@ div.media { } } -.col-result.collapser { +.col-result { &:hover::after { content: ' (hide details)'; } } -.col-result.expander { +.col-result.collapsed { &:hover::after { content: ' (show details)'; } } -#environment-header.collapser h2 { +#environment-header h2 { &:hover::after { content: ' (hide details)'; @include rowToggle; font-size: $font-size-text; } } -#environment-header.expander h2 { +#environment-header.collapsed h2 { &:hover::after { content: ' (show details)'; @include rowToggle; diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2 index dc96ce48..d6ab11a3 100644 --- a/src/pytest_html/resources/index.jinja2 +++ b/src/pytest_html/resources/index.jinja2 @@ -15,7 +15,7 @@

{{ title }}

Report generated on {{ date }} at {{ time }} by pytest-html v{{ version }}

-
+

Environment

diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css index 7a58b92f..5b99ebe4 100644 --- a/src/pytest_html/resources/style.css +++ b/src/pytest_html/resources/style.css @@ -164,10 +164,6 @@ div.media { align-items: center; } -.collapsed { - display: none; -} - .collapsible td:not(.col-links) { cursor: pointer; } @@ -177,15 +173,15 @@ div.media { cursor: pointer; } -.col-result.collapser:hover::after { +.col-result:hover::after { content: " (hide details)"; } -.col-result.expander:hover::after { +.col-result.collapsed:hover::after { content: " (show details)"; } -#environment-header.collapser h2:hover::after { +#environment-header h2:hover::after { content: " (hide details)"; color: #bbb; font-style: italic; @@ -193,7 +189,7 @@ div.media { font-size: 12px; } -#environment-header.expander h2:hover::after { +#environment-header.collapsed h2:hover::after { content: " (show details)"; color: #bbb; font-style: italic; diff --git a/src/pytest_html/scripts/dom.js b/src/pytest_html/scripts/dom.js index d91916c3..96ca17ef 100644 --- a/src/pytest_html/scripts/dom.js +++ b/src/pytest_html/scripts/dom.js @@ -50,7 +50,6 @@ const dom = { t.innerHTML = html resultBody.querySelector('.collapsible').appendChild(t.content) }) - resultBody.querySelector('.collapsible > td')?.classList.add(`${collapsed ? 'expander' : 'collapser'}`) if (log) { // Wrap lines starting with "E" with span.error to color those lines red @@ -61,7 +60,10 @@ const dom = { } if (collapsed) { + resultBody.querySelector('.collapsible > td')?.classList.add('collapsed') resultBody.querySelector('.extras-row').classList.add('hidden') + } else { + resultBody.querySelector('.collapsible > td')?.classList.remove('collapsed') } const media = [] diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js index 9dac3339..4fe30f7d 100644 --- a/src/pytest_html/scripts/main.js +++ b/src/pytest_html/scripts/main.js @@ -80,8 +80,7 @@ const bindEvents = () => { header.addEventListener('click', () => { const table = document.getElementById('environment') table.classList.toggle('hidden') - header.classList.toggle('collapser') - header.classList.toggle('expander') + header.classList.toggle('collapsed') }) findAll('input[name="filter_checkbox"]').forEach((elem) => { diff --git a/src/pytest_html/scripts/storage.js b/src/pytest_html/scripts/storage.js index ba795dcf..fdcc9882 100644 --- a/src/pytest_html/scripts/storage.js +++ b/src/pytest_html/scripts/storage.js @@ -38,7 +38,8 @@ const showCategory = (categoryToShow) => { return } const url = new URL(window.location.href) - const currentVisible = new URLSearchParams(url.search).get('visible')?.split(',') || [...possibleFilters] + const currentVisible = new URLSearchParams(url.search).get('visible')?.split(',').filter(Boolean) || + [...possibleFilters] const settings = [...new Set([categoryToShow, ...currentVisible])] const noFilter = possibleFilters.length === settings.length || !settings.length @@ -46,17 +47,6 @@ const showCategory = (categoryToShow) => { history.pushState({}, null, unescape(url.href)) } -const setFilter = (currentFilter) => { - if (!possibleFilters.includes(currentFilter)) { - return - } - const url = new URL(window.location.href) - const settings = [currentFilter, ...new Set(new URLSearchParams(url.search).get('filter').split(','))] - - url.searchParams.set('filter', settings) - history.pushState({}, null, unescape(url.href)) -} - const getSort = (initialSort) => { const url = new URL(window.location.href) let sort = new URLSearchParams(url.search).get('sort') @@ -103,7 +93,6 @@ const setSortDirection = (ascending) => sessionStorage.setItem('sortAsc', ascend module.exports = { getVisible, - setFilter, hideCategory, showCategory, getSort, diff --git a/testing/test_integration.py b/testing/test_integration.py index 58f5d3a3..b911683a 100644 --- a/testing/test_integration.py +++ b/testing/test_integration.py @@ -88,7 +88,7 @@ def get_text(page, selector): def is_collapsed(page, test_name): - return get_element(page, f".summary tbody[id$='{test_name}'] .expander") + return get_element(page, f".summary tbody[id$='{test_name}'] .collapsed") def get_log(page, test_id=None): diff --git a/testing/unittest.js b/testing/unittest.js index cb44eb25..36229787 100644 --- a/testing/unittest.js +++ b/testing/unittest.js @@ -76,11 +76,8 @@ describe('Filter tests', () => { }) }) describe('doFilter', () => { - let setFilterMock - afterEach(() => setFilterMock.restore()) it('removes all but passed', () => { getFilterMock = sinon.stub(storageModule, 'getVisible').returns(['passed']) - setFilterMock = sinon.stub(storageModule, 'setFilter') managerSpy = sinon.spy(dataModule.manager, 'setRender') doFilter('passed', true)