Skip to content

Commit

Permalink
Remove resize handling in visual regression specs (#438)
Browse files Browse the repository at this point in the history
  • Loading branch information
aduth committed May 7, 2024
1 parent 61f75b4 commit c4c1580
Showing 1 changed file with 3 additions and 36 deletions.
39 changes: 3 additions & 36 deletions test/screenshot.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,6 @@ const SNAPSHOT_DIRECTORY = 'tmp/screenshot/branches';
const MAIN_SNAPSHOTS_DIRECTORY = join(SNAPSHOT_DIRECTORY, 'main');
const BRANCH_SNAPSHOTS_DIRECTORY = join(SNAPSHOT_DIRECTORY, branch);

/**
* Resizes an image to the given dimensions.
*
* @param {import('pngjs').PNGWithMetadata} image
* @param {number} width
* @param {number} height
*
* @return {import('pngjs').PNG}
*/
function fillImageToSize(image, width, height) {
if (image.width === width && image.height === height) {
return image;
}

const resizedImage = new PNG({ width, height, fill: true });
PNG.bitblt(image, resizedImage, 0, 0, image.width, image.height, 0, 0);

for (let y = image.height; y < height; y += 1) {
for (let x = image.width; x < width; x += 1) {
// eslint-disable-next-line no-bitwise
const index = (resizedImage.width * y + x) << 2;
resizedImage.data[index] = 255; // Red
resizedImage.data[index + 1] = 255; // Green
resizedImage.data[index + 2] = 255; // Blue
resizedImage.data[index + 3] = 255; // Alpha (Opacity)
}
}

return resizedImage;
}

const skip = !!process.env.SKIP_VISUAL_REGRESSION_TEST;

describe('screenshot visual regression', { skip, concurrency: true }, async () => {
Expand All @@ -68,18 +37,16 @@ describe('screenshot visual regression', { skip, concurrency: true }, async () =
const mainPNG = PNG.sync.read(await readFile(join(MAIN_SNAPSHOTS_DIRECTORY, path)));
const width = Math.max(branchPNG.width, mainPNG.width);
const height = Math.max(branchPNG.height, mainPNG.height);
const resizedBranchPNG = fillImageToSize(branchPNG, width, height);
const resizedMainPNG = fillImageToSize(mainPNG, width, height);
const diff = new PNG({ width, height });
const diffs = match(resizedBranchPNG.data, resizedMainPNG.data, diff.data, width, height, {
const diffs = match(branchPNG.data, mainPNG.data, diff.data, width, height, {
threshold: 0.2,
});
if (diffs > 0) {
const diffOutputBase = join(DIFF_DIRECTORY, path);
await mkdir(DIFF_DIRECTORY, { recursive: true });
await Promise.all([
writeFile(`${diffOutputBase}-local.png`, PNG.sync.write(resizedBranchPNG)),
writeFile(`${diffOutputBase}-remote.png`, PNG.sync.write(resizedMainPNG)),
writeFile(`${diffOutputBase}-local.png`, PNG.sync.write(branchPNG)),
writeFile(`${diffOutputBase}-remote.png`, PNG.sync.write(mainPNG)),
writeFile(`${diffOutputBase}-diff.png`, PNG.sync.write(diff)),
]);
}
Expand Down

0 comments on commit c4c1580

Please sign in to comment.