fix(html): make HTML column sorting consistent across index pages (fix …

…#1766) (#1768) * Add ids to column headers that you can sort by. * Use table header ids to remember sort columns, special casing the function/class column. * Rename 'function_or_class' and related names to 'region' and related. * Use 'file' as placeholder for the th id, so we sort on file in the absence of a recorded column id. * Fix bug of incorrectly recording direction changes. * Use 'let' instead of 'var' in the new code. * Update gold HTML tests. * Support scrubbing temporary paths in test_html.py on Windows. * Fix long line in test_html. * Add gold files for test_html partial (needs running tests on Python < 3.10). * Use scrub for Windows path when running test suite in all OSes. * Move scrubbing of Windows paths into test_other.
nedbat · Apr 30, 2024 · 2bb5ef2 · 2bb5ef2
1 parent f34a353
commit 2bb5ef2
Show file tree

Hide file tree

Showing 49 changed files with 577 additions and 489 deletions.
diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
@@ -81,7 +81,32 @@ function sortColumn(th) {
         .forEach(tr => tr.parentElement.appendChild(tr));
 
     // Save the sort order for next time.
-    localStorage.setItem(coverage.INDEX_SORT_STORAGE, JSON.stringify({column, direction}));
+    if (th.id !== "region") {
+        let th_id = "file";  // Sort by file if we don't have a column id
+        let current_direction = direction;
+        const stored_list = localStorage.getItem(coverage.INDEX_SORT_STORAGE);
+        if (stored_list) {
+            ({th_id, direction} = JSON.parse(stored_list))
+        }
+        localStorage.setItem(coverage.INDEX_SORT_STORAGE, JSON.stringify({
+            "th_id": th.id,
+            "direction": current_direction
+        }));
+        if (th.id !== th_id || document.getElementById("region")) {
+            // Sort column has changed, unset sorting by function or class.
+            localStorage.setItem(coverage.SORTED_BY_REGION, JSON.stringify({
+                "by_region": false,
+                "region_direction": current_direction
+            }));
+        }
+    }
+    else {
+        // Sort column has changed to by function or class, remember that.
+        localStorage.setItem(coverage.SORTED_BY_REGION, JSON.stringify({
+            "by_region": true,
+            "region_direction": direction
+        }));
+    }
 }
 
 // Find all the elements with data-shortcut attribute, and use them to assign a shortcut key.
@@ -223,18 +248,39 @@ coverage.wire_up_sorting = function () {
     );
 
     // Look for a localStorage item containing previous sort settings:
-    var column = 0, direction = "ascending";
+    let th_id = "file", direction = "ascending";
     const stored_list = localStorage.getItem(coverage.INDEX_SORT_STORAGE);
     if (stored_list) {
-        ({column, direction} = JSON.parse(stored_list));
+        ({th_id, direction} = JSON.parse(stored_list));
+    }
+    let by_region = false, region_direction = "ascending";
+    const sorted_by_region = localStorage.getItem(coverage.SORTED_BY_REGION);
+    if (sorted_by_region) {
+        ({
+            by_region,
+            region_direction
+        } = JSON.parse(sorted_by_region));
     }
 
-    const th = document.querySelector("[data-sortable]").tHead.rows[0].cells[column];  // nosemgrep: eslint.detect-object-injection
+    const region_id = "region";
+    if (by_region && document.getElementById(region_id)) {
+        direction = region_direction;
+    }
+    // If we are in a page that has a column with id of "region", sort on
+    // it if the last sort was by function or class.
+    let th;
+    if (document.getElementById(region_id)) {
+        th = document.getElementById(by_region ? region_id : th_id);
+    }
+    else {
+        th = document.getElementById(th_id);
+    }
     th.setAttribute("aria-sort", direction === "ascending" ? "descending" : "ascending");
     th.click()
 };
 
 coverage.INDEX_SORT_STORAGE = "COVERAGE_INDEX_SORT_2";
+coverage.SORTED_BY_REGION = "COVERAGE_SORT_REGION";
 
 // Loaded on index.html
 coverage.index_ready = function () {

diff --git a/coverage/htmlfiles/index.html b/coverage/htmlfiles/index.html
@@ -82,18 +82,18 @@ <h2>
         <thead>
             {# The title="" attr doesn't work in Safari. #}
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th id="file" class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
                 {% if column2 %}
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">{{ column2 }}<span class="arrows"></span></th>
+                <th id="region" class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">{{ column2 }}<span class="arrows"></span></th>
                 {% endif %}
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
+                <th id="statements" aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
+                <th id="missing" aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
+                <th id="excluded" aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
                 {% if has_arcs %}
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial<span class="arrows"></span></th>
+                <th id="branches" aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches<span class="arrows"></span></th>
+                <th id="partial" aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial<span class="arrows"></span></th>
                 {% endif %}
-                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
+                <th id="coverage" class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
             </tr>
         </thead>
         <tbody>

diff --git a/tests/gold/html/a/class_index.html b/tests/gold/html/a/class_index.html
@@ -4,8 +4,8 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Coverage report</title>
     <link rel="icon" sizes="32x32" href="favicon_32_cb_58284776.png">
-    <link rel="stylesheet" href="style_cb_8e611ae1.css" type="text/css">
-    <script src="coverage_html_cb_606408f0.js" defer></script>
+    <link rel="stylesheet" href="style_cb_718ce007.css" type="text/css">
+    <script src="coverage_html_cb_d1c4fcc4.js" defer></script>
 </head>
 <body class="indexfile">
 <header>
@@ -55,20 +55,20 @@ <h2>
         </h2>
         <p class="text">
             <a class="nav" href="https://coverage.readthedocs.io/en/7.5.1a0.dev1">coverage.py v7.5.1a0.dev1</a>,
-            created at 2024-04-24 09:22 -0400
+            created at 2024-04-28 13:13 -0300
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">class<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
+                <th id="file" class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th id="region" class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">class<span class="arrows"></span></th>
+                <th id="statements" aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
+                <th id="missing" aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
+                <th id="excluded" aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
+                <th id="coverage" class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
             </tr>
         </thead>
         <tbody>
@@ -100,7 +100,7 @@ <h2>
     <div class="content">
         <p>
             <a class="nav" href="https://coverage.readthedocs.io/en/7.5.1a0.dev1">coverage.py v7.5.1a0.dev1</a>,
-            created at 2024-04-24 09:22 -0400
+            created at 2024-04-28 13:13 -0300
         </p>
     </div>
     <aside class="hidden">

diff --git a/tests/gold/html/a/function_index.html b/tests/gold/html/a/function_index.html
@@ -4,8 +4,8 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Coverage report</title>
     <link rel="icon" sizes="32x32" href="favicon_32_cb_58284776.png">
-    <link rel="stylesheet" href="style_cb_8e611ae1.css" type="text/css">
-    <script src="coverage_html_cb_606408f0.js" defer></script>
+    <link rel="stylesheet" href="style_cb_718ce007.css" type="text/css">
+    <script src="coverage_html_cb_d1c4fcc4.js" defer></script>
 </head>
 <body class="indexfile">
 <header>
@@ -55,20 +55,20 @@ <h2>
         </h2>
         <p class="text">
             <a class="nav" href="https://coverage.readthedocs.io/en/7.5.1a0.dev1">coverage.py v7.5.1a0.dev1</a>,
-            created at 2024-04-24 09:22 -0400
+            created at 2024-04-28 13:13 -0300
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">function<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
+                <th id="file" class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th id="region" class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">function<span class="arrows"></span></th>
+                <th id="statements" aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
+                <th id="missing" aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
+                <th id="excluded" aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
+                <th id="coverage" class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
             </tr>
         </thead>
         <tbody>
@@ -100,7 +100,7 @@ <h2>
     <div class="content">
         <p>
             <a class="nav" href="https://coverage.readthedocs.io/en/7.5.1a0.dev1">coverage.py v7.5.1a0.dev1</a>,
-            created at 2024-04-24 09:22 -0400
+            created at 2024-04-28 13:13 -0300
         </p>
     </div>
     <aside class="hidden">

diff --git a/tests/gold/html/a/index.html b/tests/gold/html/a/index.html
@@ -4,8 +4,8 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Coverage report</title>
     <link rel="icon" sizes="32x32" href="favicon_32_cb_58284776.png">
-    <link rel="stylesheet" href="style_cb_8e611ae1.css" type="text/css">
-    <script src="coverage_html_cb_606408f0.js" defer></script>
+    <link rel="stylesheet" href="style_cb_718ce007.css" type="text/css">
+    <script src="coverage_html_cb_f81f1c3a.js" defer></script>
 </head>
 <body class="indexfile">
 <header>
@@ -54,19 +54,19 @@ <h2>
         </h2>
         <p class="text">
             <a class="nav" href="https://coverage.readthedocs.io/en/7.5.1a0.dev1">coverage.py v7.5.1a0.dev1</a>,
-            created at 2024-04-24 09:22 -0400
+            created at 2024-04-25 23:03 -0300
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
+                <th id="file" class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th id="statements" aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
+                <th id="missing" aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
+                <th id="excluded" aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
+                <th id="coverage" class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
             </tr>
         </thead>
         <tbody>
@@ -96,7 +96,7 @@ <h2>
     <div class="content">
         <p>
             <a class="nav" href="https://coverage.readthedocs.io/en/7.5.1a0.dev1">coverage.py v7.5.1a0.dev1</a>,
-            created at 2024-04-24 09:22 -0400
+            created at 2024-04-25 23:03 -0300
         </p>
     </div>
     <aside class="hidden">

diff --git a/tests/gold/html/b_branch/class_index.html b/tests/gold/html/b_branch/class_index.html
@@ -4,8 +4,8 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Coverage report</title>
     <link rel="icon" sizes="32x32" href="favicon_32_cb_58284776.png">
-    <link rel="stylesheet" href="style_cb_8e611ae1.css" type="text/css">
-    <script src="coverage_html_cb_606408f0.js" defer></script>
+    <link rel="stylesheet" href="style_cb_718ce007.css" type="text/css">
+    <script src="coverage_html_cb_d1c4fcc4.js" defer></script>
 </head>
 <body class="indexfile">
 <header>
@@ -57,22 +57,22 @@ <h2>
         </h2>
         <p class="text">
             <a class="nav" href="https://coverage.readthedocs.io/en/7.5.1a0.dev1">coverage.py v7.5.1a0.dev1</a>,
-            created at 2024-04-24 09:22 -0400
+            created at 2024-04-28 13:13 -0300
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">class<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches<span class="arrows"></span></th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial<span class="arrows"></span></th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
+                <th id="file" class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th id="region" class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">class<span class="arrows"></span></th>
+                <th id="statements" aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"></span></th>
+                <th id="missing" aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"></span></th>
+                <th id="excluded" aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"></span></th>
+                <th id="branches" aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches<span class="arrows"></span></th>
+                <th id="partial" aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial<span class="arrows"></span></th>
+                <th id="coverage" class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"></span></th>
             </tr>
         </thead>
         <tbody>
@@ -108,7 +108,7 @@ <h2>
     <div class="content">
         <p>
             <a class="nav" href="https://coverage.readthedocs.io/en/7.5.1a0.dev1">coverage.py v7.5.1a0.dev1</a>,
-            created at 2024-04-24 09:22 -0400
+            created at 2024-04-28 13:13 -0300
         </p>
     </div>
     <aside class="hidden">