visreg-test
Version:
A visual regression testing solution that offers an easy setup with simple yet powerful customisation options, wrapped up in a convenient CLI runner to make assessing and accepting/rejecting diffs a breeze.
136 lines (135 loc) • 6.14 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.assessInCLI = exports.resetTerminalAssessmentState = void 0;
const fs = require("fs");
const path = require("path");
const readline = require("readline");
const child_process_1 = require("child_process");
const utils_1 = require("./utils");
const summarize_1 = require("./summarize");
let approvedFiles = [];
let rejectedFiles = [];
let visregConfig;
const resetTerminalAssessmentState = () => {
approvedFiles = [];
rejectedFiles = [];
};
exports.resetTerminalAssessmentState = resetTerminalAssessmentState;
const assessInCLI = (args) => __awaiter(void 0, void 0, void 0, function* () {
const { files, failed, visregConfig: config } = args;
visregConfig = config;
(0, utils_1.printColorText)(`Opening image preview \x1b[2m- takes a couple of seconds\x1b[0m\n\n`, '33');
for (const [index, file] of files.entries()) {
yield processImage(file, index, files.length);
}
closeImagePreview();
(0, utils_1.printColorText)('Done!\n', '1');
if (approvedFiles.length > 0) {
(0, utils_1.printColorText)('\nApproved:', '2');
for (const file of approvedFiles) {
(0, utils_1.printColorText)(file, '32');
}
}
if (rejectedFiles.length > 0) {
(0, utils_1.printColorText)('\nRejected:', '2');
for (const file of rejectedFiles) {
(0, utils_1.printColorText)(file, '31');
}
}
(0, summarize_1.summarizeResultsAndQuit)(approvedFiles, rejectedFiles, failed);
});
exports.assessInCLI = assessInCLI;
const processImage = (imageFile, index, total) => __awaiter(void 0, void 0, void 0, function* () {
const imageName = imageFile.replace('.diff.png', '');
const pathToRecievedFile = path.join((0, utils_1.RECEIVED_DIR)(), imageName + '-received.png');
const recievedSize = (0, utils_1.getHumanReadableFileSize)(pathToRecievedFile);
(0, utils_1.printColorText)(`${imageName}\x1b[2m - ${recievedSize} - ${index + 1}/${total}\x1b[0m`, '4');
openImage(imageFile);
const rl = readline.createInterface({
input: process.stdin,
});
while (true) {
const answer = yield new Promise(resolve => {
// Enable raw mode to get individual keypresses
readline.emitKeypressEvents(process.stdin);
if (process.stdin.isTTY)
process.stdin.setRawMode(true);
// Listen for keypress event
process.stdin.on('keypress', (str, key) => {
if (key.ctrl && key.name === 'c') {
closeImagePreview();
process.exit();
}
else if (key.name === 'r') {
resolve('reopen');
process.stdin.removeAllListeners('keypress');
}
else if (key.name === 'space') {
resolve('reject');
process.stdin.removeAllListeners('keypress');
}
else if (key.name === 'return') {
resolve('approve');
process.stdin.removeAllListeners('keypress');
}
});
(0, utils_1.printColorText)('ENTER to approve, SPACEBAR to reject, R to reopen image', '2');
});
if (answer === 'approve') {
approvedFiles.push(imageName);
console.log('✅');
const baselineName = `${imageName}.base.png`;
const receivedName = `${imageName}-received.png`;
fs.unlinkSync(path.join((0, utils_1.SUITE_SNAPS_DIR)(), baselineName));
fs.renameSync(path.join((0, utils_1.RECEIVED_DIR)(), receivedName), path.join((0, utils_1.SUITE_SNAPS_DIR)(), baselineName));
fs.unlinkSync(path.join((0, utils_1.DIFF_DIR)(), imageFile));
break;
}
else if (answer === 'reopen') {
openImage(imageFile);
}
else if (answer === 'reject') {
rejectedFiles.push(imageName);
console.log('❌');
break;
}
}
rl.close();
console.log('\n');
});
const closeImagePreview = () => {
if (process.platform === 'win32')
return;
if (visregConfig.disableAutoPreviewClose)
return;
try {
const darwin = `osascript -e 'quit app "Preview"'`;
const linux = `pkill ${visregConfig.imagePreviewProcess}`;
(0, child_process_1.execSync)(process.platform === 'darwin' ? darwin : linux);
}
catch (error) {
console.error('Failed to close image preview:', error);
console.log('------------------');
console.log('Linux users, you have some options:');
console.log('- Specify the process name of your image previewer in visreg.config.json (imagePreviewProcess) so that it can be closed automatically');
console.log('- Set disableAutoPreviewClose to true in visreg.config.json to prevent the warning message (you will have to close the image previewer manually');
console.log('- Install Gnome Image Viewer (eog) and set it as your default image previewer');
}
};
const openImage = (imageFile) => {
if (process.platform === 'darwin') {
(0, child_process_1.execSync)(`open -g "${path.join((0, utils_1.DIFF_DIR)(), imageFile)}"`);
}
else {
(0, child_process_1.execSync)(`xdg-open "${path.join((0, utils_1.DIFF_DIR)(), imageFile)}"`);
}
};