feat: allow configuration of postfix for received screenshots filename (#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'

Author: eins78

CONTRIBUTING.md

@@ -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.
 

README.md

@@ -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`).

__tests__/__snapshots__/index.spec.js.snap

@@ -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,

__tests__/diff-snapshot.spec.js

@@ -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({

src/diff-snapshot.js

@@ -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,
@@ -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`);

src/index.js

@@ -137,6 +137,7 @@ function configureToMatchImageSnapshot({
   customSnapshotsDir: commonCustomSnapshotsDir,
   storeReceivedOnFailure: commonStoreReceivedOnFailure = false,
   customReceivedDir: commonCustomReceivedDir,
+  customReceivedPostfix: commonCustomReceivedPostfix,
   customDiffDir: commonCustomDiffDir,
   onlyDiff: commonOnlyDiff = false,
   diffDirection: commonDiffDirection = 'horizontal',
@@ -156,6 +157,7 @@ function configureToMatchImageSnapshot({
     customSnapshotsDir = commonCustomSnapshotsDir,
     storeReceivedOnFailure = commonStoreReceivedOnFailure,
     customReceivedDir = commonCustomReceivedDir,
+    customReceivedPostfix = commonCustomReceivedPostfix,
     customDiffDir = commonCustomDiffDir,
     onlyDiff = commonOnlyDiff,
     diffDirection = commonDiffDirection,
@@ -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);
@@ -218,6 +221,7 @@ function configureToMatchImageSnapshot({
         snapshotsDir,
         storeReceivedOnFailure,
         receivedDir,
+        receivedPostfix,
         diffDir,
         diffDirection,
         onlyDiff,