Adding docstrings to snapshot report output

darrenburns · Jul 21, 2024 · 4e8e69c · 4e8e69c
1 parent 63e9e98
commit 4e8e69c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git a/tests/conftest.py b/tests/conftest.py
@@ -1,4 +1,5 @@
 from __future__ import annotations
+import inspect
 
 import os
 import pickle
@@ -178,7 +179,7 @@ def compare(
 
         result = snapshot == actual_screenshot
         expected_svg_text = str(snapshot)
-        full_path, line_number, name = request.node.reportinfo()
+        full_path, line_number, name = node.reportinfo()
 
         data = (
             result,
@@ -188,6 +189,7 @@ def compare(
             full_path,
             line_number,
             name,
+            inspect.getdoc(node.function) or "",
         )
         data_path = node_to_report_path(request.node)
         data_path.write_bytes(pickle.dumps(data))
@@ -210,6 +212,7 @@ class SvgSnapshotDiff:
     line_number: int
     app: App
     environment: dict
+    docstring: str
 
 
 def pytest_sessionstart(
@@ -253,9 +256,16 @@ def retrieve_svg_diffs(
 
     n = 0
     for data_path in Path(tempdir.name).iterdir():
-        (passed, expect_svg_text, svg_text, app, full_path, line_index, name) = (
-            pickle.loads(data_path.read_bytes())
-        )
+        (
+            passed,
+            expect_svg_text,
+            svg_text,
+            app,
+            full_path,
+            line_index,
+            name,
+            docstring,
+        ) = pickle.loads(data_path.read_bytes())
         pass_count += 1 if passed else 0
         if not passed:
             n += 1
@@ -268,6 +278,7 @@ def retrieve_svg_diffs(
                     line_number=line_index + 1,
                     app=app,
                     environment=dict(os.environ),
+                    docstring=docstring,
                 )
             )
     return diffs, pass_count

diff --git a/tests/resources/snapshot_report_template.jinja2 b/tests/resources/snapshot_report_template.jinja2
@@ -7,6 +7,12 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
     <style>
+        #page-header {
+            background: #983DE7;
+            background: linear-gradient(to right, #983DE7 0%, #EC22BD 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
         .overlay-container {
             position: relative;
         }
@@ -18,15 +24,15 @@
         }
     </style>
 </head>
-<body>
+<body class="bg-dark text-white">
 
 <div class="container-fluid">
-    <div class="row mb-4" style="background-color:#F4F8F7;">
+    <div class="row mb-4">
         <div class="col-8 p-4">
-            <h4>
+            <h4 id="page-header">
                 <strong>Posting</strong> Snapshot Tests
             </h4>
-            <span class="text-muted">Showing diffs for {{ fails }} mismatched snapshot(s)</span>
+            <span class="text-white opacity-50">Showing diffs for {{ fails }} mismatched snapshot(s)</span>
         </div>
         <div class="col p-4">
             <div class="w-100 d-flex justify-content-end mb-1 mt-2">
@@ -53,7 +59,7 @@
     {% for diff in diffs %}
         <div class="row mb-4">
             <div class="col">
-                <div class="card">
+                <div class="card text-white bg-dark border-secondary rounded-0">
                     <div class="card-header d-flex justify-content-between">
                         <span class="font-monospace mt-1">
                             <span class="fw-bold">{{ diff.test_name }}</span>
@@ -62,7 +68,7 @@
                             </span>
                         </span>
                         {% if diff.snapshot != "" %}
-                        <div class="form-check form-switch mt-1">
+                        <div class="form-check form-switch mt-1 bg-dark">
                             <input class="form-check-input" type="checkbox" role="switch"
                                    id="flexSwitchCheckDefault{{ loop.index0 }}" onchange="toggleOverlayCheckbox(this, {{ loop.index0 }})">
                             <label class="form-check-label text-muted" for="flexSwitchCheckDefault{{ loop.index0 }}">
@@ -75,10 +81,15 @@
                         <div class="row">
                             <div class="col">
                                 {{ diff.actual }}
-                                <div class="w-100 d-flex justify-content-center mt-1">
-                                    <span class="small">Output from test (<a href="#" class="link-primary mb-0"
-                                                                             data-bs-toggle="modal"
-                                                                             data-bs-target="#environmentModal{{ loop.index0 }}">More info</a>)</span>
+                                <div class="w-100 d-flex flex-column justify-content-center align-items-center mt-1">
+                                    <div class="small opacity-75">{{ diff.docstring }}</div>
+                                    <div class="small">
+                                        <a href="#" class="mb-0 text-primary"
+                                           data-bs-toggle="modal"
+                                           data-bs-target="#environmentModal{{ loop.index0 }}">
+                                           View environment info
+                                        </a>
+                                    </div>
                                 </div>
                             </div>
                             <div class="col">
@@ -125,7 +136,7 @@
                      aria-labelledby="environmentModalLabel{{ loop.index0 }}"
                      aria-hidden="true">
                     <div class="modal-dialog">
-                        <div class="modal-content">
+                        <div class="modal-content bg-dark text-white">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="environmentModalLabel{{ loop.index0 }}">More info for <span
                                         class="font-monospace">{{ diff.test_name }}</span></h5>
@@ -134,7 +145,7 @@
                             </div>
                             <div class="modal-body overflow-auto">
                                 <h5>Textual App State</h5>
-                                <table class="table mb-4">
+                                <table class="table mb-4 text-white">
                                     <thead>
                                     <tr>
                                         <th scope="col">Variable</th>
@@ -153,7 +164,7 @@
                                     </tbody>
                                 </table>
                                 <h5>Environment (<span class="font-monospace">os.environ</span>)</h5>
-                                <table class="table">
+                                <table class="table text-white">
                                     <thead>
                                     <tr>
                                         <th scope="col">Variable</th>
@@ -182,9 +193,9 @@
         </div>
     {% endfor %}
 
-    <div class="row" style="background-color:#F4F8F7;">
+    <div class="row">
         <div class="col">
-            <div class="card bg-light">
+            <div class="card text-white bg-dark border-secondary rounded-0">
                 <div class="card-body">
                     <p class="card-text">If you're happy with the test output, run <span class="font-monospace text-primary">pytest</span> with the <span
                             class="font-monospace text-primary">--snapshot-update</span> flag to update the snapshot.