Skip to content

feat: img diff when resolution differs #108

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Sep 15, 2022
Merged

feat: img diff when resolution differs #108

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5da0aac
feat: img diff when resolution differs
FRSgit Sep 4, 2022
b374189
chore: fix linting issues
FRSgit Sep 4, 2022
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
46 changes: 35 additions & 11 deletions src/plugins.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import sanitize from "sanitize-filename";

type NotFalsy<T> = T extends false | null | undefined ? never : T;

const round = (n: number) => Math.ceil(n * 1000) / 1000;

const createImageResizer = (width: number, height: number) => (source: PNG) => {
const resized = new PNG({ width, height, fill: true });
PNG.bitblt(source, resized, 0, 0, source.width, source.height, 0, 0);
Expand Down Expand Up @@ -131,9 +133,15 @@ export const initPlugin = (
maxDiffThreshold: number;
diffConfig: Parameters<typeof pixelmatch>[5];
} & Parameters<typeof pixelmatch>[5]
) {
): Promise<null | {
error?: boolean;
message?: string;
imgDiff?: number;
maxDiffThreshold?: number;
}> {
const messages = [] as string[];
let imgDiff: number | undefined;
let errorMsg: string | undefined;
let error = false;

if (fs.existsSync(cfg.imgOld) && !cfg.updateImages) {
const rawImgNew = await importAndScaleImage({
Expand Down Expand Up @@ -164,20 +172,30 @@ export const initPlugin = (
imgDiff = diffPixels / (width * height);

if (isImgSizeDifferent) {
errorMsg = `Images size mismatch - new screenshot is ${rawImgNew.width}px by ${rawImgNew.height}px while old one is ${rawImgOld.width}px by ${rawImgOld.height} (width x height).`;
} else if (imgDiff > cfg.maxDiffThreshold) {
const roundedImgDiff = Math.ceil(imgDiff * 1000) / 1000;
errorMsg = `Image diff factor (${roundedImgDiff}) is bigger than maximum threshold option ${cfg.maxDiffThreshold}`;
messages.push(
`Warning: Images size mismatch - new screenshot is ${rawImgNew.width}px by ${rawImgNew.height}px while old one is ${rawImgOld.width}px by ${rawImgOld.height} (width x height).`
);
}

if (imgDiff > cfg.maxDiffThreshold) {
messages.unshift(
`Image diff factor (${round(
imgDiff
)}) is bigger than maximum threshold option ${
cfg.maxDiffThreshold
}.`
);
error = true;
}

if (errorMsg) {
if (error) {
fs.writeFileSync(
cfg.imgNew.replace(FILE_SUFFIX.actual, FILE_SUFFIX.diff),
PNG.sync.write(diff)
);
return {
error: true,
message: errorMsg,
error,
message: messages.join("\n"),
imgDiff,
maxDiffThreshold: cfg.maxDiffThreshold,
};
Expand All @@ -192,9 +210,15 @@ export const initPlugin = (
}

if (typeof imgDiff !== "undefined") {
const roundedImgDiff = Math.ceil(imgDiff * 1000) / 1000;
messages.unshift(
`Image diff (${round(
imgDiff
)}%) is within boundaries of maximum threshold option ${
cfg.maxDiffThreshold
}.`
);
return {
message: `Image diff (${roundedImgDiff}%) is within boundaries of maximum threshold option ${cfg.maxDiffThreshold}`,
message: messages.join("\n"),
imgDiff,
maxDiffThreshold: cfg.maxDiffThreshold,
};
Expand Down