Fix: Environment table toggle bug (#693)

docs/user_guide.rst

@@ -61,19 +61,23 @@ To modify the *Environment* section **before** tests are run, use :code:`pytest_
 
 .. code-block:: python
 
+  from pytest_metadata.plugin import metadata_key
+
+
   def pytest_configure(config):
-      config._metadata["foo"] = "bar"
+      config.stash[metadata_key]["foo"] = "bar"
 
 To modify the *Environment* section **after** tests are run, use :code:`pytest_sessionfinish`:
 
 .. code-block:: python
 
   import pytest
+  from pytest_metadata.plugin import metadata_key
 
 
   @pytest.hookimpl(tryfirst=True)
   def pytest_sessionfinish(session, exitstatus):
-      session.config._metadata["foo"] = "bar"
+      session.config.stash[metadata_key]["foo"] = "bar"
 
 Note that in the above example `@pytest.hookimpl(tryfirst=True)`_ is important, as this ensures that a best effort attempt is made to run your
 :code:`pytest_sessionfinish` **before** any other plugins ( including :code:`pytest-html` and :code:`pytest-metadata` ) run theirs.
@@ -282,7 +286,10 @@ The following values may be passed:
 Results Table Sorting
 ~~~~~~~~~~~~~~~~~~~~~
 
-You can change the sort order of the results table on page load by passing the :code:`sort` query parameter.
+You can change which column the results table is sorted on, on page load by passing the :code:`sort` query parameter.
+
+You can also set the initial sorting by setting :code:`initial_sort` in a configuration file (pytest.ini, setup.cfg, etc).
+Note that the query parameter takes precedence.
 
 The following values may be passed:
 

src/pytest_html/scripts/datamanager.js

@@ -3,11 +3,15 @@ const { getCollapsedCategory } = require('./storage.js')
 class DataManager {
     setManager(data) {
         const collapsedCategories = [...getCollapsedCategory(data.renderCollapsed)]
-        const dataBlob = { ...data, tests: Object.values(data.tests).flat().map((test, index) => ({
-            ...test,
-            id: `test_${index}`,
-            collapsed: collapsedCategories.includes(test.result.toLowerCase()),
-        })) }
+        const tests = Object.values(data.tests).flat().map((test, index) => {
+            const collapsed = collapsedCategories.includes(test.result.toLowerCase())
+            return {
+                ...test,
+                id: `test_${index}`,
+                collapsed,
+            }
+        })
+        const dataBlob = { ...data, tests }
         this.data = { ...dataBlob }
         this.renderData = { ...dataBlob }
     }

src/pytest_html/scripts/dom.js

@@ -93,7 +93,7 @@ const dom = {
                 resultBody.querySelector('.extraHTML').insertAdjacentHTML('beforeend', `<div>${content}</div>`)
             }
         })
-        mediaViewer.setUp(resultBody, media)
+        mediaViewer.setup(resultBody, media)
 
         // Add custom html from the pytest_html_results_table_html hook
         tableHtml?.forEach((item) => {
@@ -104,7 +104,9 @@ const dom = {
     },
 }
 
-exports.dom = dom
-exports.htmlToElements = htmlToElements
-exports.find = find
-exports.findAll = findAll
+module.exports = {
+    dom,
+    htmlToElements,
+    find,
+    findAll,
+}

src/pytest_html/scripts/filter.js

@@ -18,13 +18,8 @@ const doFilter = (type, show) => {
     }
 
     const currentFilter = storageModule.getVisible()
-
-    if (currentFilter.length) {
-        const filteredSubset = getFilteredSubSet(currentFilter)
-        manager.setRender(filteredSubset)
-    } else {
-        manager.resetRender()
-    }
+    const filteredSubset = getFilteredSubSet(currentFilter)
+    manager.setRender(filteredSubset)
 }
 
 module.exports = {

src/pytest_html/scripts/index.js

@@ -1,4 +1,4 @@
-const { redraw, bindEvents } = require('./main.js')
+const { redraw, bindEvents, renderStatic } = require('./main.js')
 const { doInitFilter } = require('./filter.js')
 const { doInitSort } = require('./sort.js')
 const { manager } = require('./datamanager.js')
@@ -8,6 +8,7 @@ function init() {
     manager.setManager(data)
     doInitFilter()
     doInitSort()
+    renderStatic()
     redraw()
     bindEvents()
 }

src/pytest_html/scripts/main.js

@@ -22,13 +22,6 @@ const renderStatic = () => {
         const table = document.querySelector('#environment')
         removeChildren(table)
         rows.forEach((row) => table.appendChild(row))
-
-        const header = document.querySelector('#environment-header')
-        header.addEventListener('click', () => {
-            table.classList.toggle('hidden')
-            header.classList.toggle('collapser')
-            header.classList.toggle('expander')
-        })
     }
     renderTitle()
     renderEnvironmentTable()
@@ -59,6 +52,7 @@ const renderContent = (tests) => {
             redraw()
         })
     })
+
     findAll('.collapsible td:not(.col-links').forEach((elem) => {
         elem.addEventListener('click', ({ target }) => {
             manager.toggleCollapsedItem(target.parentElement.dataset.id)
@@ -103,8 +97,16 @@ const bindEvents = () => {
         doFilter(testResult, element.checked)
         redraw()
     }
+
+    const header = document.querySelector('#environment-header')
+    header.addEventListener('click', () => {
+        const table = document.querySelector('#environment')
+        table.classList.toggle('hidden')
+        header.classList.toggle('collapser')
+        header.classList.toggle('expander')
+    })
+
     findAll('input[name="filter_checkbox"]').forEach((elem) => {
-        elem.removeEventListener('click', filterColumn)
         elem.addEventListener('click', filterColumn)
     })
     document.querySelector('#show_all_details').addEventListener('click', () => {
@@ -120,10 +122,12 @@ const bindEvents = () => {
 const redraw = () => {
     const { testSubset, allTests, collectedItems, isFinished, formattedDuration } = manager
 
-    renderStatic()
     renderContent(testSubset)
     renderDerived(allTests, collectedItems, isFinished, formattedDuration )
 }
 
-exports.redraw = redraw
-exports.bindEvents = bindEvents
+module.exports = {
+    redraw,
+    bindEvents,
+    renderStatic,
+}

src/pytest_html/scripts/mediaviewer.js

@@ -21,7 +21,7 @@ class MediaViewer {
 }
 
 
-const setUp = (resultBody, assets) => {
+const setup = (resultBody, assets) => {
     if (!assets.length) {
         resultBody.querySelector('.media').classList.add('hidden')
         return
@@ -71,4 +71,6 @@ const setUp = (resultBody, assets) => {
     imageEl.addEventListener('click', openImg)
 }
 
-exports.setUp = setUp
+module.exports = {
+    setup,
+}

src/pytest_html/scripts/sort.js

@@ -78,5 +78,7 @@ const doSort = (type) => {
     manager.setRender(sortedList)
 }
 
-exports.doSort = doSort
-exports.doInitSort = doInitSort
+module.exports = {
+    doInitSort,
+    doSort,
+}

src/pytest_html/scripts/storage.js

@@ -37,6 +37,7 @@ const showCategory = (categoryToShow) => {
     noFilter ? url.searchParams.delete('visible') : url.searchParams.set('visible', settings.join(','))
     history.pushState({}, null, unescape(url.href))
 }
+
 const setFilter = (currentFilter) => {
     if (!possibleFilters.includes(currentFilter)) {
         return
@@ -56,6 +57,7 @@ const getSort = (initialSort) => {
     }
     return sort
 }
+
 const setSort = (type) => {
     const url = new URL(window.location.href)
     url.searchParams.set('sort', type)