Skip to content
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.

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

Enable configuration overrides via matcher #84

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
19 changes: 19 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,25 @@ describe("My fancy image", () => {
});
```

It is possible to specify the image comparison configuration at the matcher level.
Configuration set at this level will be merged into the main configuration, with keys
defined at this level taking precedence.

```typescript
describe("My quite flaky image", () => {
const myFlakyImage = readFileSync("../my-flaky-image.png");

it("is a bit flaky", () => {
expect(myFlakyImage).toMatchImageSnapshot({
detectAntialiasing: true,
colorThreshold: 0.1,
pixelThresholdAbsolute: 25,
pixelThresholdRelative: 0.1
});
});
});
```

It is possible to import ```toMatchImageSnapshot()``` for custom assertions.
As it requires configuration as second argument, ```config()``` function
(_which is responsible for reading configuration from jest-screenshot.json/package.json_) is also exposed.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 41 additions & 12 deletions src/__tests__/__snapshots__/test-to-match-image-snapshot.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -23,57 +23,86 @@ exports[`toMatchImageSnapshot when called outside of a jest unit test context fa

exports[`toMatchImageSnapshot with \`.not\` specified fails always 1`] = `"Jest: \`.not\` cannot be used with \`.toMatchImageSnapshot()\`."`;

exports[`toMatchImageSnapshot with a custom path provided fails with a non-matching screenshot 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 45.44% of the pixels changed."
`;

exports[`toMatchImageSnapshot with a custom path provided fails with a non-matching screenshot and writes the report 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 45.44% of the pixels changed."
`;

exports[`toMatchImageSnapshot with an absolute threshold provided fails with an absolute threshold of 204 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 204 pixels to have changed, but 205 pixels changed."
`;

exports[`toMatchImageSnapshot with an absolute threshold provided fails with an absolute threshold of 204 passed through matcher params 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 204 pixels to have changed, but 205 pixels changed."
`;

exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0 detects the snapshot as not matching 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 53.24% of the pixels changed."
`;

exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0 provided through matcher params detects the snapshot as not matching 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 53.24% of the pixels changed."
`;

exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0.1 detects the snapshot as not matching 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 45.44% of the pixels changed."
`;

exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0.1 provided through matcher params detects the snapshot as not matching 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 45.44% of the pixels changed."
`;

exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0.5 detects the snapshot as not matching 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 12.52% of the pixels changed."
`;

exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0.6 detects the snapshot as not matching 2`] = `
exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0.5 provided through matcher params detects the snapshot as not matching 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 4.10% of the pixels changed."
Expected less than 0.00% of the pixels to have changed, but 12.52% of the pixels changed."
`;

exports[`toMatchImageSnapshot with the snapshot not existing fails when updating is disabled 2`] = `
"New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.
exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0.6 detects the snapshot as not matching 2`] = `
"Received value does not match stored snapshot 1.

This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default."
Expected less than 0.00% of the pixels to have changed, but 4.10% of the pixels changed."
`;

exports[`toMatchImageSnapshot with the snapshot not matching fails when updating is disabled 2`] = `
exports[`toMatchImageSnapshot with no threshold provided with a color threshold of 0.6 provided through matcher params detects the snapshot as not matching 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 45.44% of the pixels changed."
Expected less than 0.00% of the pixels to have changed, but 4.10% of the pixels changed."
`;

exports[`toMatchImageSnapshot with a custom path provided fails with a non-matching screenshot 2`] = `
"Received value does not match stored snapshot 1.
exports[`toMatchImageSnapshot with the snapshot not existing fails when updating is disabled 2`] = `
"New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.

Expected less than 0.00% of the pixels to have changed, but 45.44% of the pixels changed."
This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default."
`;

exports[`toMatchImageSnapshot with a custom path provided fails with a non-matching screenshot and writes the report 2`] = `
exports[`toMatchImageSnapshot with the snapshot not matching fails when updating is disabled 2`] = `
"Received value does not match stored snapshot 1.

Expected less than 0.00% of the pixels to have changed, but 45.44% of the pixels changed."
`;

44 changes: 44 additions & 0 deletions src/__tests__/test-to-match-image-snapshot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,15 @@ describe("toMatchImageSnapshot", () => {
expect(readFileSync(`${__dirname}/fixtures/red-rectangle-example-red.png`)).toMatchImageSnapshot();
}).toThrowErrorMatchingSnapshot();
});

it(`with a color threshold of ${colorThreshold} provided through matcher params detects the snapshot as not matching`, () => {
writeFileSync(`${process.cwd()}/jest-screenshot.json`, JSON.stringify({}));
setupJestScreenshot();
expect(() => {
expect(readFileSync(`${__dirname}/fixtures/red-rectangle-example-red.png`))
.toMatchImageSnapshot({colorThreshold});
}).toThrowErrorMatchingSnapshot();
});
});

[
Expand All @@ -74,6 +83,15 @@ describe("toMatchImageSnapshot", () => {
expect(readFileSync(`${__dirname}/fixtures/red-rectangle-example-red.png`)).toMatchImageSnapshot();
}).not.toThrowError();
});

it(`with a color threshold of ${colorThreshold} provided through matcher params detects the snapshot as matching`, () => {
writeFileSync(`${process.cwd()}/jest-screenshot.json`, JSON.stringify({ }));
setupJestScreenshot();
expect(() => {
expect(readFileSync(`${__dirname}/fixtures/red-rectangle-example-red.png`))
.toMatchImageSnapshot({colorThreshold});
}).not.toThrowError();
});
});
});

Expand All @@ -92,6 +110,18 @@ describe("toMatchImageSnapshot", () => {
}).toThrowErrorMatchingSnapshot();
});

it("fails with an absolute threshold of 204 passed through matcher params", () => {
const pixelThresholdAbsolute = 204;
writeFileSync(`${process.cwd()}/jest-screenshot.json`, JSON.stringify({
colorThreshold,
}));
setupJestScreenshot();
expect(() => {
expect(readFileSync(`${__dirname}/fixtures/red-rectangle-example-red.png`))
.toMatchImageSnapshot({pixelThresholdAbsolute});
}).toThrowErrorMatchingSnapshot();
});

it("passes with an absolute threshold of 205", () => {
const pixelThresholdAbsolute = 205;
writeFileSync(`${process.cwd()}/jest-screenshot.json`, JSON.stringify({
Expand All @@ -103,6 +133,20 @@ describe("toMatchImageSnapshot", () => {
expect(readFileSync(`${__dirname}/fixtures/red-rectangle-example-red.png`)).toMatchImageSnapshot();
}).not.toThrowError();
});

it("passes with an absolute threshold of 205 passed through matcher params", () => {
const pixelThresholdAbsolute = 205;
writeFileSync(`${process.cwd()}/jest-screenshot.json`, JSON.stringify({
colorThreshold,
}));
setupJestScreenshot();
expect(() => {
expect(readFileSync(`${__dirname}/fixtures/red-rectangle-example-red.png`))
.toMatchImageSnapshot({
pixelThresholdAbsolute,
});
}).not.toThrowError();
});
});

describe("with `.not` specified", () => {
Expand Down
4 changes: 2 additions & 2 deletions src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,10 @@ function getPackageConfig() {
}
}

export function config(customConfig?: JestScreenshotConfiguration): JestScreenshotConfiguration {
export function config(...customConfigs: JestScreenshotConfiguration[]): JestScreenshotConfiguration {
const fileConfig = getFileConfig();
const packageConfig = getPackageConfig();
const configuration = Object.assign({}, packageConfig, fileConfig, customConfig);
const configuration = Object.assign({}, packageConfig, fileConfig, ...customConfigs);
const { pixelThresholdAbsolute, pixelThresholdRelative } = configuration;
if (typeof pixelThresholdAbsolute === "undefined" && typeof pixelThresholdRelative === "undefined") {
configuration.pixelThresholdRelative = 0;
Expand Down
2 changes: 1 addition & 1 deletion src/jest-screenshot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function setupJestScreenshot(customConfig?: JestScreenshotConfiguration)
}
expect.extend({
toMatchImageSnapshot(received: Buffer, parameters: ToMatchImageSnapshotParameters) {
return toMatchImageSnapshot.call(this, received, config(customConfig), parameters);
return toMatchImageSnapshot.call(this, received, config(customConfig, parameters), parameters);
},
});
}
9 changes: 8 additions & 1 deletion src/to-match-image-snapshot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,14 @@ export interface ImageMatcherResult extends MatcherResult {
snapshotNumber?: number;
}

export interface ToMatchImageSnapshotParameters {
export interface ToMatchImageSnapshotParameters extends
Pick<
JestScreenshotConfiguration,
| "detectAntialiasing"
| "colorThreshold"
| "pixelThresholdAbsolute"
| "pixelThresholdRelative"
> {
/**
* Can be used to override the path to which the snapshot image
* will be written.
Expand Down