Improved support for hash comparison only HTML summary

Author: ConorMacBride

pytest_mpl/summary/templates/filter.html

@@ -16,7 +16,9 @@ <h5>Sort tests by...</h5>
             {{ sort_option('status-sort', 'status', 'desc', default=true) }}
             {{ sort_option('collected-sort', 'collected', 'asc') }}
             {{ sort_option('test-name', 'name') }}
+            {% if results.warn_missing['baseline_image'] -%}
             {{ sort_option('rms-sort', 'RMS', 'desc') }}
+            {%- endif %}
         </div>
         <form id="filterForm" onsubmit="return false;">
             <h5>Show tests which have...</h5>
@@ -32,11 +34,13 @@ <h5>Show tests which have...</h5>
                 {{ filter_option('overall-failed', 'failed') }}
                 {{ filter_option('overall-skipped', 'skipped') }}
             </div>
+            {% if results.warn_missing['baseline_image'] -%}
             <div class="list-group m-2">
                 {{ filter_option('image-match', 'matching images') }}
                 {{ filter_option('image-diff', 'differing images') }}
                 {{ filter_option('image-missing', 'no baseline image') }}
             </div>
+            {%- endif %}
             {% if results.warn_missing['baseline_hash'] -%}
             <div class="list-group m-2 mpl-hash">
                 {{ filter_option('hash-match', 'matching hashes') }}

pytest_mpl/summary/templates/result_images.html

@@ -6,6 +6,7 @@ <h6><small class="text-muted">{{ r.module }}</small></h6>
     </div>
     <div class="offcanvas-body">
         <h5 class="card-title">{{ r.name }}</h5>
+        {% if results.warn_missing['baseline_image'] -%}
         <div class="row row-cols-1 row-cols-md-3 g-4 mt-3">
             {% macro image_card(file, name) -%}
             <div class="col py-3 m-0">
@@ -21,6 +22,7 @@ <h5 class="card-title">{{ r.name }}</h5>
             {{ image_card(r.diff_image, 'Diff') }}
             {{ image_card(r.result_image, 'Result') }}
         </div>
+        {%- endif %}
         <div class="row row-cols-1 row-cols-md-2 g-4">
             <div class="col">
                 <div class="card text-white bg-{{ r.status | status_class }}">
@@ -31,19 +33,23 @@ <h5 class="card-title">{{ r.name }}</h5>
                 </div>
             </div>
             <div class="col">
+                {% macro pre_data(id, value, name) -%}
+                {% filter indent(width=8) -%}
+                <div class="mb-3 {{ id | replace('_', '-') }}">
+                    <label for="{{ id }}" class="form-label">{{ name }}</label>
+                    <pre class="form-control {{ id | replace('_', '-') }}-value" id="{{ id }}">{{ value }}</pre>
+                </div>
+                {%- endfilter %}
+                {%- endmacro -%}
+                {% if results.warn_missing['baseline_image'] -%}
                 <div class="card text-white bg-{{ r.image_status | status_class }} mb-3 mpl-image">
                     <div class="card-header">{{ r.image_status | image_status_msg }}</div>
                     <div class="card-body">
-                        {% macro pre_data(id, value, name) -%}
-                        <div class="mb-3 {{ id | replace('_', '-') }}">
-                            <label for="{{ id }}" class="form-label">{{ name }}</label>
-                            <pre class="form-control {{ id | replace('_', '-') }}-value" id="{{ id }}">{{ value }}</pre>
-                        </div>
-                        {%- endmacro -%}
                         {{ pre_data('rms', r.rms_str, 'RMS') }}
                         {{ pre_data('tolerance', r.tolerance, 'Tolerance') }}
                     </div>
                 </div>
+                {%- endif %}
                 {% if results.warn_missing['baseline_hash'] -%}
                 <div class="card text-white bg-{{ r.hash_status | status_class }} mb-3 mpl-hash">
                     <div class="card-header">{{ r.hash_status | hash_status_msg }}</div>

pytest_mpl/summary/templates/styles.css

@@ -33,7 +33,7 @@ body.no-hash-test .mpl-hash {
     display: none;
 }
 pre {
-    white-space: pre-wrap;
+    white-space: pre-line;
 }
 div.result div.status-badge button img {
     vertical-align: sub;