Feature: Only one collapsed state (#701)

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;

src/pytest_html/resources/index.jinja2

@@ -15,7 +15,7 @@
     <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">
+    <div id="environment-header">
       <h2>Environment</h2>
     </div>
     <table id="environment"></table>

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;

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 = []

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) => {

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,

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):

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)