Fix: Collapsed state between redraws

package.json

@@ -4,7 +4,7 @@
     "build:css": "sass --no-source-map --no-error-css src/layout/css/style.scss src/pytest_html/resources/style.css",
     "build:jsapp": "browserify ./src/pytest_html/scripts/index.js > ./src/pytest_html/resources/app.js",
     "lint": "eslint src/pytest_html/scripts/ testing/",
-    "unit": "nyc mocha testing/**/unittest.js",
+    "unit": "nyc mocha testing/**/unittest.js --require mock-local-storage",
     "all": "npm run lint && npm run unit && npm run build:css && npm run build:jsapp"
   },
   "devDependencies": {
@@ -13,6 +13,7 @@
     "eslint": "^8.20.0",
     "eslint-config-google": "^0.14.0",
     "mocha": "^10.0.0",
+    "mock-local-storage": "^1.1.24",
     "nyc": "^15.1.0",
     "sass": "^1.52.3",
     "sinon": "^14.0.0"

src/pytest_html/scripts/datamanager.js

@@ -1,19 +1,25 @@
-const { getCollapsedCategory } = require('./storage.js')
+const { getCollapsedCategory, setCollapsedIds } = require('./storage.js')
 
 class DataManager {
     setManager(data) {
         const collapsedCategories = [...getCollapsedCategory(data.renderCollapsed)]
+        const collapsedIds = []
         const tests = Object.values(data.tests).flat().map((test, index) => {
             const collapsed = collapsedCategories.includes(test.result.toLowerCase())
+            const id = `test_${index}`
+            if (collapsed) {
+                collapsedIds.push(id)
+            }
             return {
                 ...test,
-                id: `test_${index}`,
+                id,
                 collapsed,
             }
         })
         const dataBlob = { ...data, tests }
         this.data = { ...dataBlob }
         this.renderData = { ...dataBlob }
+        setCollapsedIds(collapsedIds)
     }
 
     get allData() {
@@ -47,6 +53,10 @@ class DataManager {
     get environment() {
         return this.renderData.environment
     }
+
+    get initialSort() {
+        return this.data.initialSort
+    }
 }
 
 module.exports = {

src/pytest_html/scripts/filter.js

@@ -1,4 +1,5 @@
 const { manager } = require('./datamanager.js')
+const { doSort } = require('./sort.js')
 const storageModule = require('./storage.js')
 
 const getFilteredSubSet = (filter) =>
@@ -20,6 +21,9 @@ const doFilter = (type, show) => {
     const currentFilter = storageModule.getVisible()
     const filteredSubset = getFilteredSubSet(currentFilter)
     manager.setRender(filteredSubset)
+
+    const sortColumn = storageModule.getSort()
+    doSort(sortColumn)
 }
 
 module.exports = {

src/pytest_html/scripts/main.js

@@ -2,7 +2,14 @@ const { dom, findAll } = require('./dom.js')
 const { manager } = require('./datamanager.js')
 const { doSort } = require('./sort.js')
 const { doFilter } = require('./filter.js')
-const { getVisible, getSort, getSortDirection, possibleFilters } = require('./storage.js')
+const {
+    getVisible,
+    getCollapsedIds,
+    setCollapsedIds,
+    getSort,
+    getSortDirection,
+    possibleFilters,
+} = require('./storage.js')
 
 const removeChildren = (node) => {
     while (node.firstChild) {
@@ -22,7 +29,7 @@ const renderStatic = () => {
 }
 
 const renderContent = (tests) => {
-    const sortAttr = getSort(manager.allData.initialSort)
+    const sortAttr = getSort(manager.initialSort)
     const sortAsc = JSON.parse(getSortDirection())
     const rows = tests.map(dom.getResultTBody)
     const table = document.getElementById('results-table')
@@ -53,7 +60,17 @@ const renderContent = (tests) => {
 
     findAll('.collapsible td:not(.col-links').forEach((elem) => {
         elem.addEventListener('click', ({ target }) => {
-            manager.toggleCollapsedItem(target.parentElement.dataset.id)
+            const id = target.parentElement.dataset.id
+            manager.toggleCollapsedItem(id)
+
+            const collapsedIds = getCollapsedIds()
+            if (collapsedIds.includes(id)) {
+                const updated = collapsedIds.filter((item) => item !== id)
+                setCollapsedIds(updated)
+            } else {
+                collapsedIds.push(id)
+                setCollapsedIds(collapsedIds)
+            }
             redraw()
         })
     })
@@ -73,6 +90,14 @@ const bindEvents = () => {
         const { testResult } = element.dataset
 
         doFilter(testResult, element.checked)
+        const collapsedIds = getCollapsedIds()
+        const updated = manager.renderData.tests.map((test) => {
+            return {
+                ...test,
+                collapsed: collapsedIds.includes(test.id),
+            }
+        })
+        manager.setRender(updated)
         redraw()
     }
 
@@ -88,10 +113,13 @@ const bindEvents = () => {
     })
     document.getElementById('show_all_details').addEventListener('click', () => {
         manager.allCollapsed = false
+        setCollapsedIds([])
         redraw()
     })
     document.getElementById('hide_all_details').addEventListener('click', () => {
         manager.allCollapsed = true
+        const allIds = manager.renderData.tests.map((test) => test.id)
+        setCollapsedIds(allIds)
         redraw()
     })
 }

src/pytest_html/scripts/sort.js

@@ -43,10 +43,14 @@ const durationSort = (list, ascending) => {
 }
 
 const doInitSort = () => {
-    const type = storageModule.getSort(manager.allData.initialSort)
+    const type = storageModule.getSort(manager.initialSort)
     const ascending = storageModule.getSortDirection()
     const list = manager.testSubset
     const initialOrder = ['Error', 'Failed', 'Rerun', 'XFailed', 'XPassed', 'Skipped', 'Passed']
+
+    storageModule.setSort(type)
+    storageModule.setSortDirection(ascending)
+
     if (type?.toLowerCase() === 'original') {
         manager.setRender(list)
     } else {
@@ -67,13 +71,13 @@ const doInitSort = () => {
 }
 
 const doSort = (type) => {
-    const newSortType = storageModule.getSort(manager.allData.initialSort) !== type
+    const newSortType = storageModule.getSort(manager.initialSort) !== type
     const currentAsc = storageModule.getSortDirection()
     const ascending = newSortType ? true : !currentAsc
     storageModule.setSort(type)
     storageModule.setSortDirection(ascending)
-    const list = manager.testSubset
 
+    const list = manager.testSubset
     const sortedList = type === 'duration' ? durationSort(list, ascending) : genericSort(list, type, ascending)
     manager.setRender(sortedList)
 }

src/pytest_html/scripts/storage.js

@@ -87,17 +87,21 @@ const getCollapsedCategory = (renderCollapsed) => {
     return categories
 }
 
-const getSortDirection = () => JSON.parse(sessionStorage.getItem('sortAsc'))
-
+const getSortDirection = () => JSON.parse(sessionStorage.getItem('sortAsc')) || true
 const setSortDirection = (ascending) => sessionStorage.setItem('sortAsc', ascending)
 
+const getCollapsedIds = () => JSON.parse(sessionStorage.getItem('collapsedIds')) || []
+const setCollapsedIds = (list) => sessionStorage.setItem('collapsedIds', JSON.stringify(list))
+
 module.exports = {
     getVisible,
     hideCategory,
     showCategory,
+    getCollapsedIds,
+    setCollapsedIds,
     getSort,
-    getSortDirection,
     setSort,
+    getSortDirection,
     setSortDirection,
     getCollapsedCategory,
     possibleFilters,

testing/unittest.js

@@ -76,7 +76,12 @@ describe('Filter tests', () => {
         })
     })
     describe('doFilter', () => {
+        let originalWindow
+
+        after(() => global.window = originalWindow)
+
         it('removes all but passed', () => {
+            mockWindow()
             getFilterMock = sinon.stub(storageModule, 'getVisible').returns(['passed'])
             managerSpy = sinon.spy(dataModule.manager, 'setRender')