feat: allow folders on snapshot identifier (#267)

* feat: allow folders on snapshot identifier

* docs(readme): added path support to identifier option

Co-authored-by: Jonny Adshead <JAdshead@users.noreply.github.com>

Author: Álvaro Ferreira

README.md

@@ -109,7 +109,7 @@ See [the examples](./examples/README.md) for more detailed usage or read about a
 * `comparisonMethod`: (default: `pixelmatch`) (options `pixelmatch` or `ssim`) The method by which images are compared.  `pixelmatch` does a pixel by pixel comparison, whereas `ssim` does a structural similarity comparison.  `ssim` is a new experimental feature for jest-image-snapshot, but may become the default comparison method in the future.  For a better understanding of how to use SSIM, see [Recommendations when using SSIM Comparison](#recommendations-when-using-ssim-comparison).
 * `customSnapshotsDir`: A custom absolute path of a directory to keep this snapshot in
 * `customDiffDir`: A custom absolute path of a directory to keep this diff in
-* `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.
+* `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
 * `noColors`: Removes coloring from console output, useful if storing the results in a file
 * `failureThreshold`: (default `0`) Sets the threshold that would trigger a test failure based on the `failureThresholdType` selected. This is different to the `customDiffConfig.threshold` above, that is the per pixel failure threshold, this is the failure threshold for the entire comparison.

__tests__/diff-snapshot.spec.js

@@ -458,6 +458,25 @@ describe('diff-snapshot', () => {
       expect(mockMkdirpSync).toHaveBeenCalledWith(path.join(mockSnapshotsDir, '__diff_output__'));
     });
 
+    it('should create diff output sub-directory if there is not one already and test is failing', () => {
+      const diffImageToSnapshot = setupTest({
+        snapshotExists: true,
+        outputDirExists: false,
+        pixelmatchResult: 100,
+      });
+
+      diffImageToSnapshot({
+        receivedImageBuffer: mockFailImageBuffer,
+        snapshotIdentifier: path.join('parent', mockSnapshotIdentifier),
+        snapshotsDir: mockSnapshotsDir,
+        diffDir: mockDiffDir,
+        failureThreshold: 0,
+        failureThresholdType: 'pixel',
+      });
+
+      expect(mockMkdirpSync).toHaveBeenCalledWith(path.join(mockSnapshotsDir, '__diff_output__', 'parent'));
+    });
+
     it('should not create diff output directory if test passed', () => {
       const diffImageToSnapshot = setupTest({ snapshotExists: true, outputDirExists: false });
       diffImageToSnapshot({
@@ -504,6 +523,22 @@ describe('diff-snapshot', () => {
       expect(mockMkdirpSync).toHaveBeenCalledWith(mockSnapshotsDir);
     });
 
+    it('should create snapshots sub-directory if there is not one already', () => {
+      const diffImageToSnapshot = setupTest({ snapshotExists: true, snapshotDirExists: false });
+      diffImageToSnapshot({
+        receivedImageBuffer: mockImageBuffer,
+        snapshotIdentifier: path.join('parent', mockSnapshotIdentifier),
+        snapshotsDir: mockSnapshotsDir,
+        diffDir: mockDiffDir,
+        updateSnapshot: true,
+        updatePassedSnapshot: true,
+        failureThreshold: 0,
+        failureThresholdType: 'pixel',
+      });
+
+      expect(mockMkdirpSync).toHaveBeenCalledWith(path.join(mockSnapshotsDir, 'parent'));
+    });
+
     it('should not create snapshots directory if there already is one', () => {
       const diffImageToSnapshot = setupTest({ snapshotExists: true, snapshotDirExists: true });
       diffImageToSnapshot({

src/diff-snapshot.js

@@ -205,7 +205,7 @@ function diffImageToSnapshot(options) {
   let result = {};
   const baselineSnapshotPath = path.join(snapshotsDir, `${snapshotIdentifier}-snap.png`);
   if (!fs.existsSync(baselineSnapshotPath)) {
-    mkdirp.sync(snapshotsDir);
+    mkdirp.sync(path.dirname(baselineSnapshotPath));
     fs.writeFileSync(baselineSnapshotPath, receivedImageBuffer);
     result = { added: true };
   } else {
@@ -269,7 +269,7 @@ function diffImageToSnapshot(options) {
     });
 
     if (isFailure({ pass, updateSnapshot })) {
-      mkdirp.sync(diffDir);
+      mkdirp.sync(path.dirname(diffOutputPath));
       const composer = new ImageComposer({
         direction: diffDirection,
       });
@@ -307,7 +307,7 @@ function diffImageToSnapshot(options) {
         imgSrcString: `data:image/png;base64,${pngBuffer.toString('base64')}`,
       };
     } else if (shouldUpdate({ pass, updateSnapshot, updatePassedSnapshot })) {
-      mkdirp.sync(snapshotsDir);
+      mkdirp.sync(path.dirname(baselineSnapshotPath));
       fs.writeFileSync(baselineSnapshotPath, receivedImageBuffer);
       result = { updated: true };
     } else {