Skip to content

Commit 843aeb0

Browse files
committed
feat: add simple image screenshot test reporting functionality to Jest to assist with debugging VRT issues until full Github integration is wired up
1 parent aee3f0d commit 843aeb0

File tree

3 files changed

+87
-0
lines changed

3 files changed

+87
-0
lines changed

jest.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ module.exports = {
3030
globalTeardown: './jest-global-teardown.js',
3131
setupFilesAfterEnv: ['./jest-setup-files-after-env.js'],
3232
snapshotSerializers: ['jest-serializer-html'],
33+
reporters: ['default', '<rootDir>/scripts/report-jest-screenshots.js'],
3334
// Notify not working correctly; we want to only get a notification when tests fail, and then get ONE success notificaiton after it passes
3435
// notify: true,
3536
// notifyMode: 'failure-success',

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
"sleep-promise": "^8.0.1",
112112
"url-exists": "^1.0.3",
113113
"yaml-lint": "^1.2.4"
114+
"now-storage": "^1.3.0",
114115
},
115116
"workspaces": {
116117
"packages": [

scripts/report-jest-screenshots.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
#!/usr/bin/env node
2+
const chalk = require('chalk');
3+
const fs = require('fs');
4+
const path = require('path');
5+
const { upload } = require('now-storage');
6+
const { promisify } = require('util');
7+
8+
async function uploadImage(name, content) {
9+
const { url } = await upload(process.env.NOW_TOKEN, {
10+
name,
11+
content,
12+
});
13+
return url;
14+
}
15+
16+
const NOW_TOKEN = process.env.NOW_TOKEN;
17+
// let filesToUpload = [];
18+
19+
// async function finishUploading() {
20+
// const { url } = await multiUpload(process.env.NOW_TOKEN, filesToUpload, {
21+
// deploymentName: 'bolt-jest-vrt',
22+
// });
23+
// return url;
24+
// }
25+
async function asyncForEach(array, callback) {
26+
for (let index = 0; index < array.length; index++) {
27+
// eslint-disable-next-line no-await-in-loop
28+
await callback(array[index], index, array);
29+
}
30+
}
31+
32+
class JestScreenshotReporter {
33+
constructor(globalConfig, options) {
34+
this._globalConfig = globalConfig;
35+
this._options = options;
36+
}
37+
38+
onTestResult(test, testResult, aggregateResults) {
39+
if (
40+
testResult.numFailingTests &&
41+
testResult.failureMessage.match(/different from snapshot/)
42+
) {
43+
return new Promise(async (resolveAll, reject) => {
44+
const allImagePromises = [];
45+
46+
const testingDir = path.dirname(testResult.testFilePath);
47+
const filesToProcess = fs.readdirSync(
48+
path.join(testingDir, '/__image_snapshots__/__diff_output__/'),
49+
);
50+
51+
filesToProcess.forEach(file => {
52+
const filePromise = new Promise(async function(resolve, reject) {
53+
const imageData = fs.readFileSync(
54+
path.join(
55+
testingDir,
56+
`/__image_snapshots__/__diff_output__/${file}`,
57+
),
58+
);
59+
uploadImage(file, imageData).then(url => {
60+
const urlToDisplay = `https://${url}/${file}`;
61+
resolve(urlToDisplay);
62+
});
63+
});
64+
allImagePromises.push(filePromise);
65+
});
66+
return Promise.all(allImagePromises)
67+
.then(function(values) {
68+
console.log(
69+
chalk.red.bold(
70+
`Uploaded image diff(s) to: \n${values.join('\n')}`,
71+
),
72+
);
73+
resolveAll(values);
74+
})
75+
.catch(err => {
76+
console.log(
77+
chalk.red.bold(`Error uploading image diffs to now.sh: ${err}`),
78+
);
79+
});
80+
});
81+
}
82+
}
83+
}
84+
85+
module.exports = JestScreenshotReporter;

0 commit comments

Comments
 (0)