From b7fd443917498060035f2fb2ebd9db82789ab11d Mon Sep 17 00:00:00 2001
From: Gleb Nikonorov <gleb.i.nikonorov@gmail.com>
Date: Sun, 20 Dec 2020 19:51:36 -0500
Subject: [PATCH] Implement the visible URL query parameter to control
 visibility of test results on page load. (#433)

* enable control of test result visability via query params

* fix typos and query parsing

* Add changelog entry

* fix type in changelog
---
 docs/changelog.rst                |  4 ++++
 docs/user_guide.rst               | 26 ++++++++++++++++++++++++++
 src/pytest_html/resources/main.js | 26 +++++++++++++++++++++-----
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/docs/changelog.rst b/docs/changelog.rst
index ceeca76d..b9a929bf 100644
--- a/docs/changelog.rst
+++ b/docs/changelog.rst
@@ -9,6 +9,10 @@ Version History
 3.2.0 (unreleased)
 ~~~~~~~~~~~~~~~~~~
 
+* Implement the ``visible`` URL query parameter to control visibility of test results on page load. (`#399 <https://github.com/pytest-dev/pytest-html/issues/399>`_)
+
+  * Thanks to `@TheCorp <https://github.com/TheCorp>`_ for reporting and `@gnikonorov <https://github.com/gnikonorov>`_ for the fix
+
 * Make the report tab title reflect the report name. (`#412 <https://github.com/pytest-dev/pytest-html/issues/412>`_)
 
   * Thanks to `@gnikonorov <https://github.com/gnikonorov>`_ for the PR
diff --git a/docs/user_guide.rst b/docs/user_guide.rst
index 072c714c..5aedab57 100644
--- a/docs/user_guide.rst
+++ b/docs/user_guide.rst
@@ -234,6 +234,9 @@ additional HTML and log output with a notice that the log is empty:
 Display options
 ---------------
 
+Auto Collapsing Table Rows
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 By default, all rows in the **Results** table will be expanded except those that have :code:`Passed`.
 
 This behavior can be customized either with a query parameter: :code:`?collapsed=Passed,XFailed,Skipped`
@@ -246,6 +249,29 @@ or by setting the :code:`render_collapsed` in a configuration file (pytest.ini,
 
 **NOTE:** Setting :code:`render_collapsed` will, unlike the query parameter, affect all statuses.
 
+Controlling Test Result Visibility Via Query Params
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+By default, all tests are visible, regardless of their results. It is possible to control which tests are visible on
+page load by passing the :code:`visible` query parameter. To use this parameter, please pass a comma separated list
+of test results you wish to be visible. For example, passing :code:`?visible=passed,skipped` will show only those
+tests in the report that have outcome :code:`passed` or :code:`skipped`.
+
+Note that this match is case insensitive, so passing :code:`PASSED` and :code:`passed` has the same effect.
+
+The following query parameters may be passed:
+
+* :code:`passed`
+* :code:`skipped`
+* :code:`failed`
+* :code:`error`
+* :code:`xfailed`
+* :code:`xpassed`
+* :code:`rerun`
+
+Formatting the Duration Column
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 The formatting of the timestamp used in the :code:`Durations` column can be modified by setting :code:`duration_formatter`
 on the :code:`report` attribute. All `time.strftime`_ formatting directives are supported. In addition, it is possible
 to supply :code:`%f` to get duration milliseconds. If this value is not set, the values in the :code:`Durations` column are
diff --git a/src/pytest_html/resources/main.js b/src/pytest_html/resources/main.js
index 9419fe76..34c9c74d 100644
--- a/src/pytest_html/resources/main.js
+++ b/src/pytest_html/resources/main.js
@@ -49,11 +49,27 @@ function showExtras(colresultElem) {
 }
 
 function hideExtras(colresultElem) {
-  const extras = colresultElem.parentNode.nextElementSibling;
-  const expandcollapse = colresultElem.firstElementChild;
-  extras.classList.add('collapsed');
-  expandcollapse.classList.remove('collapser');
-  expandcollapse.classList.add('expander');
+    const extras = colresultElem.parentNode.nextElementSibling;
+    const expandcollapse = colresultElem.firstElementChild;
+    extras.classList.add('collapsed');
+    expandcollapse.classList.remove('collapser');
+    expandcollapse.classList.add('expander');
+}
+
+function showFilters() {
+    let visibleString = getQueryParameter('visible') || 'all';
+    visibleString = visibleString.toLowerCase();
+    const checkedItems = visibleString.split(',');
+
+    const filterItems = document.getElementsByClassName('filter');
+    for (let i = 0; i < filterItems.length; i++) {
+        filterItems[i].hidden = false;
+
+        if (visibleString != 'all') {
+            filterItems[i].checked = checkedItems.includes(filterItems[i].getAttribute('data-test-result'));
+            filterTable(filterItems[i]);
+        }
+    }
 }
 
 function addCollapse() {