Merge pull request #353 from montehurd/run-in-progress-placeholder

Placeholder content for group index.html file while run is in progress
wikimedia · Jul 2, 2024 · c85fdf1 · c85fdf1
2 parents 2371462 + e65fe18
commit c85fdf1
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git a/pixel.js b/pixel.js
@@ -244,12 +244,26 @@ async function runA11yRegressionTests( type, configFile, logResults, opts ) {
 	} );
 }
 
+function writeRunInProgressTemplateToIndexFile(indexFileFullPath, group) {
+	try {
+		let template = fs.readFileSync('./src/run-in-progress-template.html', 'utf8');
+		const startTime = Date.now();
+		template = template.replace('START_TIME_PLACEHOLDER', startTime);
+		template = template.replace('GROUP_NAME_PLACEHOLDER', group);
+		fs.writeFileSync(indexFileFullPath, template);
+	} catch (e) {
+		console.log(`Could not write 'run in progress' template to ${indexFileFullPath}`);
+		console.error(e);
+	}
+}
+
 async function runVisualRegressionTests( type, config, group, runSilently, configFile, resetDb ) {
 	if ( type === 'test' ) {
 		removeFolder( config.paths.bitmaps_test );
 	}
 
 	const indexFileFullPath = `${__dirname}/${config.paths.html_report}/index.html`;
+	writeRunInProgressTemplateToIndexFile( indexFileFullPath, group );
 
 	const finished = await simpleSpawn.spawn(
 		'docker',

diff --git a/src/run-in-progress-template.html b/src/run-in-progress-template.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<body style="font-size: 3em; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center;">
+  <div id="root">
+    Running 'GROUP_NAME_PLACEHOLDER'
+    <hr>
+    Started at: <span id="startTime"></span>
+    <br>
+    Time elapsed: <span id="elapsedTime"></span>
+    <hr>
+    The Backstop report will appear when the run finishes
+  </div>
+
+  <script>
+    const initialTimestamp = START_TIME_PLACEHOLDER;
+    const initialDate = new Date(initialTimestamp);
+
+    function formatPacificTime(date) {
+      return date.toLocaleString("en-US", {
+        timeZone: "America/Los_Angeles",
+        weekday: 'short',
+        month: 'short',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        year: 'numeric',
+        hour12: false,
+      });
+    }
+
+    document.getElementById('startTime').textContent = formatPacificTime(initialDate);
+
+    function updateElapsedTime() {
+      const elapsed = Date.now() - initialTimestamp;
+      const hours = Math.floor(elapsed / 3600000);
+      const minutes = Math.floor((elapsed % 3600000) / 60000);
+      const seconds = Math.floor((elapsed % 60000) / 1000);
+      const elapsedTimeString = [hours, minutes, seconds]
+        .map(v => v.toString().padStart(2, '0'))
+        .join(':');
+      document.getElementById('elapsedTime').textContent = elapsedTimeString;
+    }
+
+    setInterval(updateElapsedTime, 100);
+
+    // This reload lets the user see the Backstop report soon after it overwrites this placeholder content
+    setTimeout(() => {
+      window.location.reload();
+    }, 5000);
+  </script>
+</body>
+
+</html>