Skip to content

Commit d03b446

Browse files
FRSgitFRSgit
committed
test: update snapshots
refactor tests for compareImagesTask remove tests for cachedReadFile method Signed-off-by: Jakub Freisler <[email protected]>
1 parent 82538fc commit d03b446

File tree

6 files changed

+88
-39
lines changed

6 files changed

+88
-39
lines changed

‎src/__snapshots__/support.test.ts.snap

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`generateOverlayTemplate > generates proper template 1`] = `
55
<header style=\\"position:static\\">
66
<nav style=\\"display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;\\">
77
<h2>some title - screenshot diff</h2>
8-
<form>
8+
<form style=\\"display:flex;align-items:center;gap:5px;text-align:right\\">
99
<button type=\\"submit\\"><i class=\\"fa fa-check\\"></i> Update screenshot</button>
1010
<button type=\\"button\\" data-type=\\"close\\"><i class=\\"fa fa-times\\"></i> Close</button>
1111
<form>
@@ -39,7 +39,7 @@ exports[`generateOverlayTemplate > generates proper template 2`] = `
3939
<header style=\\"position:static\\">
4040
<nav style=\\"display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;\\">
4141
<h2>some title - screenshot diff</h2>
42-
<form>
42+
<form style=\\"display:flex;align-items:center;gap:5px;text-align:right\\">
4343
Image was already updated, rerun test to see new comparison
4444
<button type=\\"button\\" data-type=\\"close\\"><i class=\\"fa fa-times\\"></i> Close</button>
4545
<form>
@@ -67,3 +67,37 @@ exports[`generateOverlayTemplate > generates proper template 2`] = `
6767
</div>
6868
</div>"
6969
`;
70+
71+
exports[`generateOverlayTemplate > generates proper template 3`] = `
72+
"<div class=\\"cp-visual-regression-diff-overlay runner\\" style=\\"position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column\\">
73+
<header style=\\"position:static\\">
74+
<nav style=\\"display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;\\">
75+
<h2>some title - screenshot diff</h2>
76+
<form style=\\"display:flex;align-items:center;gap:5px;text-align:right\\">
77+
78+
<button type=\\"button\\" data-type=\\"close\\"><i class=\\"fa fa-times\\"></i> Close</button>
79+
<form>
80+
</nav>
81+
</header>
82+
<div style=\\"padding:15px;overflow:auto\\">
83+
<div style=\\"display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px\\">
84+
<div
85+
style=\\"position:relative;background:#fff;border:solid 15px #fff\\"
86+
onmouseover=\\"this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1\\"
87+
onmouseleave=\\"this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0\\"
88+
>
89+
<h3>New screenshot (hover mouse away too see the old one):</h3>
90+
<img style=\\"min-width:300px;width:100%;opacity:0\\" src=\\"data:image/png;base64,img-new-base64\\" />
91+
<div style=\\"position:absolute;top:0;left:0;background:#fff\\">
92+
<h3>Old screenshot (hover over to see the new one):</h3>
93+
<img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-old-base64\\" />
94+
</div>
95+
</div>
96+
<div style=\\"background:#fff;border:solid 15px #fff\\">
97+
<h3>Diff between new and old screenshot</h3>
98+
<img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-diff-base64\\" />
99+
</div>
100+
</div>
101+
</div>
102+
</div>"
103+
`;

‎src/__snapshots__/task.hook.test.ts.snap

Lines changed: 25 additions & 0 deletions
Large diffs are not rendered by default.

‎src/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@ export const TASK = {
1313
compareImages: `${PLUGIN_NAME}-compareImages`,
1414
approveImage: `${PLUGIN_NAME}-approveImage`,
1515
doesFileExist: `${PLUGIN_NAME}-doesFileExist`,
16+
/* c8 ignore next */
1617
};

‎src/image.utils.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,15 @@ export const fillSizeDifference = (
2222
}
2323
}
2424
return image;
25+
/* c8 ignore next */
2526
};
2627

2728
export const createImageResizer =
2829
(width: number, height: number) => (source: PNG) => {
2930
const resized = new PNG({ width, height, fill: true });
3031
PNG.bitblt(source, resized, 0, 0, source.width, source.height, 0, 0);
3132
return resized;
33+
/* c8 ignore next */
3234
};
3335

3436
export const importAndScaleImage = async (cfg: {

‎src/support.test.ts

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import { it, expect, describe, vi } from "vitest";
2-
import { setGracefulCleanup, withFile } from "tmp-promise";
3-
import { promises as fs } from "fs";
4-
import { cy } from "@mocks/cypress.mock";
5-
import { cachedReadFile, generateOverlayTemplate } from "./support";
2+
import { setGracefulCleanup } from "tmp-promise";
3+
import "@mocks/cypress.mock";
4+
import { generateOverlayTemplate } from "./support";
65

76
setGracefulCleanup();
87

98
vi.mock("./commands.ts", () => ({}));
109

11-
const fileContent = "file content";
12-
1310
describe("generateOverlayTemplate", () => {
1411
it("generates proper template", () => {
1512
expect(
@@ -19,6 +16,7 @@ describe("generateOverlayTemplate", () => {
1916
imgOldBase64: "img-old-base64",
2017
imgDiffBase64: "img-diff-base64",
2118
wasImageNotUpdatedYet: true,
19+
error: true,
2220
})
2321
).toMatchSnapshot();
2422

@@ -29,25 +27,19 @@ describe("generateOverlayTemplate", () => {
2927
imgOldBase64: "img-old-base64",
3028
imgDiffBase64: "img-diff-base64",
3129
wasImageNotUpdatedYet: false,
30+
error: true,
3231
})
3332
).toMatchSnapshot();
34-
});
35-
});
36-
37-
describe("cachedReadFile", () => {
38-
it("reads file and caches the response", async () => {
39-
const imageCache = {};
40-
await withFile(async ({ path }) => {
41-
await fs.writeFile(path, fileContent);
4233

43-
expect(
44-
await (cachedReadFile(imageCache, path, "utf-8") as PromiseLike<string>)
45-
).toBe(fileContent);
46-
expect(
47-
await (cachedReadFile(imageCache, path, "utf-8") as PromiseLike<string>)
48-
).toBe(fileContent);
49-
50-
expect(cy.readFile).toBeCalledTimes(1);
51-
});
34+
expect(
35+
generateOverlayTemplate({
36+
title: "some title",
37+
imgNewBase64: "img-new-base64",
38+
imgOldBase64: "img-old-base64",
39+
imgDiffBase64: "img-diff-base64",
40+
wasImageNotUpdatedYet: false,
41+
error: false,
42+
})
43+
).toMatchSnapshot();
5244
});
5345
});

‎src/task.hook.test.ts

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,9 @@ describe("compareImagesTask", () => {
8585
message:
8686
"Image diff factor (0%) is within boundaries of maximum threshold option 0.5.",
8787
imgDiff: 0,
88+
imgDiffBase64: "",
89+
imgNewBase64: "",
90+
imgOldBase64: "",
8891
maxDiffThreshold: 0.5,
8992
}));
9093
});
@@ -100,25 +103,22 @@ describe("compareImagesTask", () => {
100103
message:
101104
"Image diff factor (0%) is within boundaries of maximum threshold option 0.5.",
102105
imgDiff: 0,
106+
imgDiffBase64: "",
107+
imgNewBase64: "",
108+
imgOldBase64: "",
103109
maxDiffThreshold: 0.5,
104110
});
105111
});
106112
});
107113

108114
describe("when old screenshot exists", () => {
109115
describe("when new image has different resolution", () => {
110-
it("resolves with a error message", async () => {
116+
it("resolves with an error message", async () => {
111117
const cfg = await generateConfig({ updateImages: false });
112118
await writeTmpFixture(cfg.imgOld, "screenshot.png");
113119
await writeTmpFixture(cfg.imgNew, "screenshot.actual.png");
114120

115-
await expect(compareImagesTask(cfg)).resolves.toEqual({
116-
error: true,
117-
message: `Image diff factor (0.685%) is bigger than maximum threshold option 0.5.
118-
Warning: Images size mismatch - new screenshot is 1000px by 725px while old one is 500px by 500 (width x height).`,
119-
imgDiff: 0.6849241379310345,
120-
maxDiffThreshold: 0.5,
121-
});
121+
await expect(compareImagesTask(cfg)).resolves.toMatchSnapshot();
122122
});
123123
});
124124

@@ -128,12 +128,7 @@ Warning: Images size mismatch - new screenshot is 1000px by 725px while old one
128128
await writeTmpFixture(cfg.imgOld, "screenshot.png");
129129
await writeTmpFixture(cfg.imgNew, "screenshot.png");
130130

131-
await expect(compareImagesTask(cfg)).resolves.toEqual({
132-
message:
133-
"Image diff factor (0%) is within boundaries of maximum threshold option 0.5.",
134-
imgDiff: 0,
135-
maxDiffThreshold: 0.5,
136-
});
131+
await expect(compareImagesTask(cfg)).resolves.toMatchSnapshot();
137132
});
138133
});
139134
});

0 commit comments

Comments
 (0)