Skip to content

Commit b26beb3

Browse files
committed
feat: make library cypress 10 compatible
Signed-off-by: Jakub Freisler <[email protected]>
1 parent 596b937 commit b26beb3

File tree

4 files changed

+41
-21
lines changed

4 files changed

+41
-21
lines changed

README.md

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,24 @@ import '@frsource/cypress-plugin-visual-regression-diff/dist/support';
6868
require('@frsource/cypress-plugin-visual-regression-diff/dist/support');
6969
```
7070

71-
- secondly, in your plugins file (located by default in `cypress/plugins/index.js`):
71+
- secondly:
72+
- (for Cypress 10.0+) in `cypress.config.js` (or `cypress.config.ts`):
73+
```ts
74+
// typescript
75+
import { defineConfig } from 'cypress';
76+
import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/dist/plugins';
77+
78+
export default defineConfig({
79+
// setupNodeEvents can be defined in either
80+
// the e2e or component configuration
81+
e2e: {
82+
setupNodeEvents(on, config) {
83+
initPlugin(on, config);
84+
}
85+
}
86+
});
87+
```
88+
- (for Cypress >10.0) in your plugins file (located by default in `cypress/plugins/index.js`):
7289
```ts
7390
// typescript
7491
import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/dist/plugins';
@@ -148,13 +165,18 @@ cy.matchImage({
148165
npx cypress run --env "pluginVisualRegressionUpdateImages=true" --env 'pluginVisualRegressionDiffConfig={"threshold":0.01}'
149166
```
150167

151-
```json
152-
// cypress.json
153-
{
154-
"env": {
155-
"pluginVisualRegressionUpdateImages": true,
156-
"pluginVisualRegressionDiffConfig": { "threshold": 0.01 }
168+
```ts
169+
// cypress.config.ts
170+
import { defineConfig } from 'cypress';
171+
172+
export default defineConfig({
173+
env: {
174+
pluginVisualRegressionUpdateImages: true,
175+
pluginVisualRegressionDiffConfig: { threshold: 0.01 }
157176
}
177+
})
178+
{
179+
158180
}
159181
```
160182

src/commands.ts

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,15 @@ declare global {
1212
maxDiffThreshold?: number;
1313
};
1414

15-
interface Chainable {
15+
interface Chainable<Subject> {
1616
/**
1717
* Command to create and compare image snapshots.
1818
* @memberof Cypress.Chainable
1919
* @example cy.get('.my-element').matchImage();
2020
*/
21-
matchImage<T extends Chainable<unknown>>(
22-
this: T,
21+
matchImage(
2322
options?: Cypress.MatchImageOptions
24-
): T;
23+
): Chainable<Subject>;
2524
}
2625
}
2726
}
@@ -30,8 +29,9 @@ const nameCacheCounter: Record<string, number> = {};
3029

3130
Cypress.Commands.add(
3231
"matchImage",
33-
{ prevSubject: "optional" },
34-
(subject?: JQuery<HTMLElement>, options: Cypress.MatchImageOptions = {}) => {
32+
{ prevSubject: 'optional' },
33+
(subject, options = {}) => {
34+
const $el = subject as JQuery<HTMLElement> | undefined;
3535
let title = Cypress.currentTest.titlePath.join(" ");
3636
if (typeof nameCacheCounter[title] === "undefined")
3737
nameCacheCounter[title] = -1;
@@ -41,7 +41,6 @@ Cypress.Commands.add(
4141
Cypress.env("pluginVisualRegressionForceDeviceScaleFactor") === false
4242
? 1
4343
: 1 / window.devicePixelRatio;
44-
4544
const updateImages =
4645
options.updateImages ||
4746
(Cypress.env("pluginVisualRegressionUpdateImages") as
@@ -52,7 +51,6 @@ Cypress.Commands.add(
5251
options.imagesDir ||
5352
(Cypress.env("pluginVisualRegressionImagesDir") as string | undefined) ||
5453
"__image_snapshots__";
55-
5654
const maxDiffThreshold =
5755
options.maxDiffThreshold ||
5856
(Cypress.env("pluginVisualRegressionMaxDiffThreshold") as
@@ -86,7 +84,7 @@ Cypress.Commands.add(
8684
)
8785
.then((screenshotPath) => {
8886
let imgPath: string;
89-
return (subject ? cy.wrap(subject) : cy)
87+
return ($el ? cy.wrap($el) : cy)
9088
.screenshot(screenshotPath as string, {
9189
...screenshotConfig,
9290
onAfterScreenshot(el, props) {
@@ -125,7 +123,7 @@ Cypress.Commands.add(
125123
const log = Cypress.log({
126124
name: "log",
127125
displayName: "Match image",
128-
$el: subject,
126+
$el,
129127
});
130128

131129
if (!res) {

src/plugins.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import pixelmatch from "pixelmatch";
33
import fs from "fs";
44
import { PNG, PNGWithMetadata } from "pngjs";
55
import { FILE_SUFFIX, IMAGE_SNAPSHOT_PREFIX, TASK } from "./constants";
6-
import moveFile from "move-file";
6+
import { moveFileSync, moveFile } from "move-file";
77
import sharp from "sharp";
88
import sanitize from "sanitize-filename";
99

@@ -117,7 +117,7 @@ export const initPlugin = (
117117
const diffImg = img.replace(FILE_SUFFIX.actual, FILE_SUFFIX.diff);
118118
if (fs.existsSync(diffImg)) fs.unlinkSync(diffImg);
119119

120-
if (fs.existsSync(img)) moveFile.sync(img, oldImg);
120+
if (fs.existsSync(img)) moveFileSync(img, oldImg);
121121

122122
return null;
123123
},
@@ -188,7 +188,7 @@ export const initPlugin = (
188188
} else {
189189
// there is no "old screenshot" or screenshots should be immediately updated
190190
imgDiff = 0;
191-
moveFile.sync(cfg.imgNew, cfg.imgOld);
191+
moveFileSync(cfg.imgNew, cfg.imgOld);
192192
}
193193

194194
if (typeof imgDiff !== "undefined") {

tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66
"strict": true,
77
"esModuleInterop": true
88
},
9-
"include": ["**/*.ts"]
9+
"include": ["src/*.ts"]
1010
}

0 commit comments

Comments
 (0)