Improved output in render test HTML files.

GitOrigin-RevId: 4e4e738c90ce174aecb1b8d0cc061d8f37f31943

Author: jakra-mb

test/integration/render-tests/index.test.ts

@@ -68,7 +68,7 @@ function loadPngFromUrl(url: string): Promise<ImageDataWithCanvas> {
     });
 }
 
-async function getExpectedImages(currentTestName: string, renderTest: Record<string, unknown>): Promise<ImageDataWithCanvas[]> {
+async function getExpectedImages(currentTestName: string, renderTest: Record<string, unknown>): Promise<Array<ImageDataWithCanvas & {src: string}>> {
     const urls: string[] = [];
     for (const prop in renderTest) {
         if (prop.indexOf('expected') > -1) {
@@ -80,12 +80,16 @@ async function getExpectedImages(currentTestName: string, renderTest: Record<str
             urls.push(url);
         }
     }
-    return Promise.all(urls.map(loadPngFromUrl));
+    return Promise.all(urls.map(async (url) => {
+        const result = await loadPngFromUrl(url);
+        return Object.assign({}, result, {src: url});
+    }));
 }
 
 type TestMetadata = {
     name: string;
     minDiff: number;
+    allowed: number;
     status: string;
     actual?: string;
     expected?: string;
@@ -118,11 +122,12 @@ const getTest = (renderTestName: string) => async () => {
             throw new Error(`No expected images found for ${renderTestName}. Please run the test with UPDATE=true to generate expected images.`);
         }
 
-        const {minDiff, minDiffImage, expectedIndex, minImageSrc} = calculateDiff(actualImageData, expectedImages.map(({imageData}) => imageData), {w, h}, options['diff-calculation-threshold']);
+        const {minDiff, minDiffImage, expectedIndex, minImageSrc} = calculateDiff(actualImageData, expectedImages.map(({imageData, src}) => ({data: imageData.data, src})), {w, h}, options['diff-calculation-threshold']);
         const pass = minDiff <= options.allowed;
         const testMetaData: TestMetadata = {
             name: renderTestName,
             minDiff: Math.round(100000 * minDiff) / 100000,
+            allowed: options.allowed,
             status: pass ? 'passed' : 'failed',
         };
 

test/util/html_generator.ts

@@ -11,7 +11,7 @@ const generateResultHTML = template(`
     <% } else { %>
       <input type="checkbox" id="<%- r.id %>">
     <% } %>
-    <label class="tab-label" style="background: <%- r.color %>" for="<%- r.id %>"><p class="status-container"><span class="status"><%- r.status %></span> - <%- r.name %> <% if (r.attempt !== 0) { %>retry <%- r.attempt + 1 %><% } %> diff: <%- r.minDiff %></p></label>
+    <label class="tab-label" style="background: <%- r.color %>" for="<%- r.id %>"><p class="status-container"><span class="status"><%- r.status %></span> - <%- r.name %> <% if (r.attempt !== 0) { %>retry <%- r.attempt + 1 %><% } %></p></label>
     <div class="tab-content">
       <% if (r.actual || r.expected) { %>
         <span class="img-hover-container">
@@ -31,6 +31,15 @@ const generateResultHTML = template(`
           <img title="diff" src="<%- r.imgDiff %>">
         </span>
       <% } %>
+      <% if (r.allowed !== undefined) { %>
+        <p class="diff"><strong>Allowed:</strong> <%- r.allowed %></p>
+      <% } %>
+      <% if (r.minDiff !== undefined) { %>
+        <p class="diff"><strong>Diff:</strong> <%- r.minDiff === 0 ? 'none' : r.minDiff %></p>
+      <% } %>
+      <% if (r.expectedPath) { %>
+        <p class="diff"><strong>Expected image path:</strong> <%- r.expectedPath %></p>
+      <% } %>
       <% if (r.jsonDiff) { %>
           <details>
             <summary><strong style="color: red">JSON Diff</strong></summary>