Feature: Make entire row collapsible (pytest-dev#656)

bwardrop · Apr 15, 2023 · a5da6fc · a5da6fc
1 parent 60c81d8
commit a5da6fc
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 7 deletions.
diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss
@@ -193,12 +193,13 @@ div.media {
   cursor: pointer;
 }
 
-.col-result {
+.collapsible td:not(.col-links) {
   cursor: pointer;
   &:hover::after {
     @include rowToggle;
   }
 }
+
 .col-result.collapser {
   &:hover::after {
     content: ' (hide details)';

diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2
@@ -29,7 +29,7 @@
     </template>
     <template id="template_results-table__tbody">
       <tbody class="results-table-row">
-        <tr>
+        <tr class="collapsible">
           <td class="col-result"></td>
           <td class="col-name"></td>
           <td class="col-duration"></td>

diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css
diff --git a/src/pytest_html/scripts/dom.js b/src/pytest_html/scripts/dom.js
@@ -85,9 +85,9 @@ const dom = {
         const resultBody = templateResult.content.cloneNode(true)
         resultBody.querySelector('tbody').classList.add(resultLower)
         resultBody.querySelector('tbody').id = testId
+        resultBody.querySelector('.collapsible').dataset.id = id
         resultBody.querySelector('.col-result').innerText = result
         resultBody.querySelector('.col-result').classList.add(`${collapsed ? 'expander' : 'collapser'}`)
-        resultBody.querySelector('.col-result').dataset.id = id
         resultBody.querySelector('.col-name').innerText = testId
 
         const formattedDuration = duration < 1 ? formatDuration(duration).ms : formatDuration(duration).formatted

diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js
@@ -65,9 +65,9 @@ const renderContent = (tests) => {
             redraw()
         })
     })
-    findAll('.col-result').forEach((elem) => {
+    findAll('.collapsible td:not(.col-links').forEach((elem) => {
         elem.addEventListener('click', ({ target }) => {
-            manager.toggleCollapsedItem(target.dataset.id)
+            manager.toggleCollapsedItem(target.parentElement.dataset.id)
             redraw()
         })
     })