make collapse/expand all functional

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;

src/pytest_html/resources/index.jinja2

@@ -101,8 +101,8 @@
               <input checked="true" class="filter" data-test-result="passed" name="filter_checkbox" type="checkbox"/><span class="passed"></span>
               <input checked="true" class="filter" data-test-result="skipped" name="filter_checkbox" type="checkbox"/><span class="skipped"></span>
             </div>
-            <div class="filters">
-              <a href="javascript:showAllExtras()">Show all details</a>&nbsp;/&nbsp;<a href="javascript:hideAllExtras()">Hide all details</a>
+            <div class="collapse">
+              <button id="show_all_details">Show all details</button>&nbsp;/&nbsp;<button id="hide_all_details">Hide all details</button>
             <div>
           </div>
         </div>

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'
     }
 }
 

src/pytest_html/scripts/dom.js

@@ -64,17 +64,19 @@ 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)
         resultBody.querySelector('.col-result').innerText = outcome
         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')
         }
 

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