Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Placeholder content for group index.html file while run is in progress #353

Merged
merged 1 commit into from
Jul 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions pixel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
55 changes: 55 additions & 0 deletions src/run-in-progress-template.html
Original file line number Diff line number Diff line change
@@ -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>
Loading