Merge pull request #24 from michaelchadwick/improve-output-styling

jrjohnson · web-flow · commit 3d5437356027 · 2026-01-26T17:03:24.000-08:00
Improved output styling and such
diff --git a/templates/report.html b/templates/report.html
@@ -10,19 +10,24 @@
       gap: 1rem;
       margin: 1rem 0;
     }
-    
     .diff-images img {
       max-width: 30vw;
       height: auto;
     }
+    details {
+      margin-bottom: 1em;
+    }
+    summary {
+      cursor: pointer;
+      font-size: 1.17em;
+      font-weight: bold;
+    }
   </style>
 </head>
 <body>
   <main>
   <h1>Visual Diff Report</h1>
-  
   <p><strong>Status:</strong> <span aria-hidden="true">{{statusEmoji}}</span> {{statusText}}</p>
-  
   <h2>Summary</h2>
   <ul>
     <li><strong>Total Images:</strong> {{totalImages}}</li>
@@ -32,7 +37,7 @@ <h2>Summary</h2>
     <li><strong>Identical:</strong> {{identicalCount}}</li>
   </ul>
 
-{{#if withDifferences.length}}
+  {{#if withDifferences.length}}
   <h2>Images with Differences ({{withDifferences.length}})</h2>
   {{#each withDifferences}}
   <div>
@@ -44,41 +49,49 @@ <h3>{{name}}</h3>
     {{/if}}
     <div class="diff-images">
       <a href="{{baselineImage}}"><img src="{{baselineImage}}" alt="Baseline screenshot for {{name}}" /></a>
+      {{#unless dimensionMismatch}}
       <a href="{{diffImage}}"><img src="{{diffImage}}" alt="Visual difference highlighting changed pixels in {{name}}"/></a>
+      {{/unless}}
       <a href="{{candidateImage}}"><img src="{{candidateImage}}" alt="Candidate screenshot for {{name}}" /></a>
     </div>
   </div>
   {{/each}}
-{{/if}}
+  {{/if}}
 
-{{#if hasRemovedOrAdded}}
+  {{#if hasRemovedOrAdded}}
   <h2>Missing or New Files</h2>
-  {{#if baselineOnly.length}}
-    <h3>Removed from Candidate ({{baselineOnly.length}})</h3>
-    <ul>
-      {{#each baselineOnly}}
-      <li>{{name}}</li>
-      {{/each}}
-    </ul>
+    {{#if baselineOnly.length}}
+    <details>
+      <summary>Removed from Candidate ({{baselineOnly.length}})</summary>
+      <ul>
+        {{#each baselineOnly}}
+        <li>{{name}}</li>
+        {{/each}}
+      </ul>
+    </details>
+    {{/if}}
+    {{#if candidateOnly.length}}
+    <details>
+      <summary>Added in Candidate ({{candidateOnly.length}})</summary>
+      <ul>
+        {{#each candidateOnly}}
+        <li>{{name}}</li>
+        {{/each}}
+      </ul>
+    </details>
+    {{/if}}
   {{/if}}
-  {{#if candidateOnly.length}}
-    <h3>Added in Candidate ({{candidateOnly.length}})</h3>
+
+  {{#if withoutDifferences.length}}
+  <details>
+    <summary>Identical Images ({{withoutDifferences.length}})</summary>
     <ul>
-      {{#each candidateOnly}}
+      {{#each withoutDifferences}}
       <li>{{name}}</li>
       {{/each}}
     </ul>
+  </details>
   {{/if}}
-{{/if}}
-
-{{#if withoutDifferences.length}}
-  <h2>Identical Images ({{withoutDifferences.length}})</h2>
-  <ul>
-    {{#each withoutDifferences}}
-    <li>{{name}}</li>
-    {{/each}}
-  </ul>
-{{/if}}
 
   <hr>
   <p><em>Generated by visual-differ</em></p>
diff --git a/test/report-generator.test.ts b/test/report-generator.test.ts
@@ -94,6 +94,9 @@ describe('report-generator', () => {
       expect(html).toContain('Dimension mismatch');
       expect(html).toContain('10x20');
       expect(html).toContain('20x30');
+      expect(html).toContain('mismatched-baseline.png');
+      expect(html).not.toContain('mismatched-diff.png');
+      expect(html).toContain('mismatched-candidate.png');
     });
 
     it('should show status indicator', () => {
