test: Reorganize screenshots in review tool (#4918)

Now screenshots are grouped by test for easy comparison across platforms, and have an optional line break element between each set of tests. Related to work on PR #4767
shaka-project · Jan 30, 2023 · ff66f33 · ff66f33
1 parent f0603ed
commit ff66f33
Showing 1 changed file with 40 additions and 7 deletions.
diff --git a/test/test/assets/screenshots/review.html b/test/test/assets/screenshots/review.html
@@ -146,6 +146,12 @@
   display: inline-block;
 }
 
+/* If the body element has the lineBreaks class, enable lineBreaks between
+   tests. */
+body.lineBreaks .lineBreak {
+  display: block;
+}
+
     </style>
   </head>
   <body>
@@ -163,6 +169,9 @@ <h3>Prefixes</h3>
 
       <h3>Tests</h3>
       <div class="optionList" id="testsElement"></div>
+
+      <h3>Misc</h3>
+      <div class="optionList" id="miscElement"></div>
     </div>
 
     <div id="reviewElement">
@@ -196,15 +205,18 @@ <h2 id="instructions">
   }
 }
 
-for (const platform of platforms) {
-  for (const suite in suites) {
+appendOption(miscElement, 'misc', 'break between tests', applyFilters);
+
+for (const suite in suites) {
+  for (const test of suites[suite]) {
     for (const prefix of prefixes) {
-      for (const test of suites[suite]) {
-        if (excludes.includes(`${suite}-${prefix}-${test}`)) {
-          continue;
-        }
+      if (excludes.includes(`${suite}-${prefix}-${test}`)) {
+        continue;
+      }
+      for (const platform of platforms) {
         appendScreenshot(platform, suite, prefix, test);
       }
+      appendScreenshotLineBreak();
     }
   }
 }
@@ -220,7 +232,7 @@ <h2 id="instructions">
 for (const param of location.hash.substr(1).split('&')) {
   const [key, value] = param.split('=');
   try {
-    allOptions[key][value].checked = true;
+    allOptions[key][decodeURIComponent(value)].checked = true;
   } catch (error) {}  // ignore errors
 }
 
@@ -299,6 +311,12 @@ <h2 id="instructions">
   allScreenshots.push(container);
 }
 
+function appendScreenshotLineBreak() {
+  const lineBreak = document.createElement('div');
+  lineBreak.className = 'lineBreak';
+  reviewElement.appendChild(lineBreak);
+}
+
 function keyHandler(event) {
   if (event.shiftKey) {
     document.body.classList.add('shift');
@@ -363,6 +381,14 @@ <h2 id="instructions">
     }
   }
 
+  // For misc options, collect parameters only.
+  for (const miscKey in allOptions['misc']) {
+    const miscInput = allOptions['misc'][miscKey];
+    if (miscInput.checked) {
+      params.push(`misc=${miscKey}`);
+    }
+  }
+
   // Set the location hash so that we keep the same filters on reload.
   location.hash = params.join('&');
 
@@ -397,6 +423,13 @@ <h2 id="instructions">
 
     container.style.display = show ? '' : 'none';
   }
+
+  // This body class enables the styles that make lineBreak divs work.
+  if (allOptions['misc']['break between tests'].checked) {
+    document.body.classList.add('lineBreaks');
+  } else {
+    document.body.classList.remove('lineBreaks');
+  }
 }
 
 function applySuiteFilters(resetTests = true) {