Skip to content

Commit

Permalink
feat: allow configuration of postfix for received screenshots filename (
Browse files Browse the repository at this point in the history
#328)

* docs: fix typo in contributing instructions

* feat: allow configuration of postfix for received screenshots filename

no changes if the option is not used, it defaults to the previously hardcoded string: '-received'
  • Loading branch information
eins78 authored Jul 25, 2023
1 parent 96878dc commit bade294
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 2 deletions.
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Verifies that your code matches the American Express code style defined in [`esl

Runs unit tests **and** verifies the format of all commit messages on the current branch.

- **`npm posttest`**
- **`npm run posttest`**

Runs linting on the current branch, checks that the commits follow [conventional commits](https://www.conventionalcommits.org/) and verifies that the `package-lock.json` file includes public NPM registry URLs.

Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ See [the examples](./examples/README.md) for more detailed usage or read about a
* `customDiffDir`: A custom absolute path of a directory to keep this diff in
* `storeReceivedOnFailure`: (default: `false`) Store the received images seperately from the composed diff images on failure. This can be useful when updating baseline images from CI.
* `customReceivedDir`: A custom absolute path of a directory to keep this received image in
* `customReceivedPostfix`: A custom postfix which is added to the snapshot name of the received image, defaults to `-received`
* `customSnapshotIdentifier`: A custom name to give this snapshot. If not provided one is computed automatically. When a function is provided it is called with an object containing `testPath`, `currentTestName`, `counter` and `defaultIdentifier` as its first argument. The function must return an identifier to use for the snapshot. If a path is given, the path will be created inside the snapshot/diff directories.
* `diffDirection`: (default: `horizontal`) (options `horizontal` or `vertical`) Changes diff image layout direction
* `onlyDiff`: (default: `false`) Either only include the difference between the baseline and the received image in the diff image, or include the 3 images (following the direction set by `diffDirection`).
Expand Down
1 change: 1 addition & 0 deletions __tests__/__snapshots__/index.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ exports[`toMatchImageSnapshot passes diffImageToSnapshot everything it needs to
"onlyDiff": false,
"receivedDir": undefined,
"receivedImageBuffer": "pretendthisisanimagebuffer",
"receivedPostfix": undefined,
"snapshotIdentifier": "test-spec-js-test-1-snap",
"snapshotsDir": "path/to/__image_snapshots__",
"storeReceivedOnFailure": false,
Expand Down
37 changes: 37 additions & 0 deletions __tests__/diff-snapshot.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,43 @@ describe('diff-snapshot', () => {
expect(mockWriteFileSync).toHaveBeenCalledTimes(2);
});

it('should write a received image with custom postfix if customReceivedPostfix is set', () => {
const diffImageToSnapshot = setupTest({
snapshotExists: true,
pixelmatchResult: 5000,
});
const result = diffImageToSnapshot({
receivedImageBuffer: mockFailImageBuffer,
snapshotIdentifier: mockSnapshotIdentifier,
snapshotsDir: mockSnapshotsDir,
storeReceivedOnFailure: true,
receivedDir: mockReceivedDir,
receivedPostfix: '-new',
diffDir: mockDiffDir,
updateSnapshot: false,
failureThreshold: 0,
failureThresholdType: 'pixel',
});

expect(result).toMatchObject({
diffOutputPath: path.join(
mockSnapshotsDir,
'__diff_output__',
'id1-diff.png'
),
receivedSnapshotPath: path.join(
mockSnapshotsDir,
'__received_output__',
'id1-new.png'
),
diffRatio: 0.5,
diffPixelCount: 5000,
pass: false,
});

expect(mockWriteFileSync).toHaveBeenCalledTimes(2);
});

it('should not write a received image if the test fails and storeReceivedOnFailure = false', () => {
const diffImageToSnapshot = setupTest({ snapshotExists: true, pixelmatchResult: 5000 });
const result = diffImageToSnapshot({
Expand Down
3 changes: 2 additions & 1 deletion src/diff-snapshot.js
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ function diffImageToSnapshot(options) {
snapshotIdentifier,
snapshotsDir,
storeReceivedOnFailure,
receivedPostfix = '-received',
receivedDir = path.join(options.snapshotsDir, '__received_output__'),
diffDir = path.join(options.snapshotsDir, '__diff_output__'),
diffDirection,
Expand All @@ -228,7 +229,7 @@ function diffImageToSnapshot(options) {
fs.writeFileSync(baselineSnapshotPath, receivedImageBuffer);
result = { added: true };
} else {
const receivedSnapshotPath = path.join(receivedDir, `${snapshotIdentifier}-received.png`);
const receivedSnapshotPath = path.join(receivedDir, `${snapshotIdentifier}${receivedPostfix}.png`);
rimraf.sync(receivedSnapshotPath);

const diffOutputPath = path.join(diffDir, `${snapshotIdentifier}-diff.png`);
Expand Down
4 changes: 4 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ function configureToMatchImageSnapshot({
customSnapshotsDir: commonCustomSnapshotsDir,
storeReceivedOnFailure: commonStoreReceivedOnFailure = false,
customReceivedDir: commonCustomReceivedDir,
customReceivedPostfix: commonCustomReceivedPostfix,
customDiffDir: commonCustomDiffDir,
onlyDiff: commonOnlyDiff = false,
diffDirection: commonDiffDirection = 'horizontal',
Expand All @@ -156,6 +157,7 @@ function configureToMatchImageSnapshot({
customSnapshotsDir = commonCustomSnapshotsDir,
storeReceivedOnFailure = commonStoreReceivedOnFailure,
customReceivedDir = commonCustomReceivedDir,
customReceivedPostfix = commonCustomReceivedPostfix,
customDiffDir = commonCustomDiffDir,
onlyDiff = commonOnlyDiff,
diffDirection = commonDiffDirection,
Expand Down Expand Up @@ -197,6 +199,7 @@ function configureToMatchImageSnapshot({

const snapshotsDir = customSnapshotsDir || path.join(path.dirname(testPath), SNAPSHOTS_DIR);
const receivedDir = customReceivedDir;
const receivedPostfix = customReceivedPostfix;
const diffDir = customDiffDir;
const baselineSnapshotPath = path.join(snapshotsDir, `${snapshotIdentifier}.png`);
OutdatedSnapshotReporter.markTouchedFile(baselineSnapshotPath);
Expand All @@ -218,6 +221,7 @@ function configureToMatchImageSnapshot({
snapshotsDir,
storeReceivedOnFailure,
receivedDir,
receivedPostfix,
diffDir,
diffDirection,
onlyDiff,
Expand Down

0 comments on commit bade294

Please sign in to comment.