Add diffOnly option to approve command

docs/command-line-arguments.md

@@ -59,10 +59,11 @@ Takes same arguments as `loki test`.
 
 Prunes old and updates reference files with the images generated in the last run.
 
-| Flag              | Description                         | Default             |
-| ----------------- | ----------------------------------- | ------------------- |
-| **`--reference`** | Path to screenshot reference folder | `./.loki/reference` |
-| **`--output`**    | Path to screenshot output folder    | `./.loki/current`   |
+| Flag              | Description                                       | Default             |
+| ----------------- | ------------------------------------------------- | ------------------- |
+| **`--reference`** | Path to screenshot reference folder               | `./.loki/reference` |
+| **`--output`**    | Path to screenshot output folder                  | `./.loki/current`   |
+| **`--diffOnly`**  | Only approve files that failed `loki test` before | false               |
 
 ## `loki init`
 

docs/configuration.md

@@ -127,3 +127,4 @@ module.exports = {
 | **`mobile`**                         | _boolean_ | Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more.                                                                                                                                                   | `chrome.*`   |
 | **`media`**                          | _string_  | Emulates the given media for CSS media queries.                                                                                                                                                                                                                    | _None_       |
 | **`features`**                       | _array_   | Emulates the given features for CSS media queries. See [setEmulatedMedia docs](https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setEmulatedMedia)                                                                                          | `chrome.*`   |
+| **`diffOnly`**                       | boolean   | Changes the mode of `loki approve` if set to `true`, only the images which failed `loki test` beforehand will be updated. This configuration can be overwritten on demand using the cli flag `--diffOnly`.                                                         | All          |

packages/runner/src/commands/approve/index.js

@@ -10,17 +10,40 @@ const isPNG = (file) => file.substr(-4) === '.png';
 
 function approve(args) {
   const config = getConfig();
-  const { outputDir, referenceDir } = parseOptions(args, config);
+  const { outputDir, differenceDir, referenceDir, diffOnly } = parseOptions(
+    args,
+    config
+  );
+
+  // If diff only is active, only copy over the files that were changed
+  const inputDir = diffOnly ? differenceDir : outputDir;
+  const files = fs.readdirSync(inputDir).filter(isPNG);
 
-  const files = fs.readdirSync(outputDir).filter(isPNG);
   if (!files.length) {
     die(
       'No images found to approve',
       'Run update command to generate reference files instead'
     );
   }
+
+  if (diffOnly) {
+    /**
+     * If diff only is active, the reference directory should not be emptied.
+     * Instead only the files that changed will be copied over, overwriting the existing ones.
+     * The files are copied and not moved, so running loki approve without --diffOnly after running it with --diffOnly
+     * would not delete them as they would no longer be present in the current images.
+     */
+    files.forEach((file) =>
+      fs.copySync(path.join(outputDir, file), path.join(referenceDir, file), {
+        overwrite: true,
+      })
+    );
+    return;
+  }
+
   fs.emptyDirSync(referenceDir);
   fs.ensureDirSync(referenceDir);
+
   files.forEach((file) =>
     fs.moveSync(path.join(outputDir, file), path.join(referenceDir, file))
   );

packages/runner/src/commands/approve/parse-options.js

@@ -3,13 +3,16 @@ const minimist = require('minimist');
 const defaults = require('../test/default-options');
 
 function parseOptions(args, config) {
-  const argv = minimist(args);
+  const argv = minimist(args, { boolean: 'diffOnly' });
 
   const $ = (key) => argv[key] || config[key] || defaults[key];
 
   return {
     outputDir: path.resolve($('output')),
+    differenceDir: path.resolve($('difference')),
     referenceDir: path.resolve($('reference')),
+    // If --diffOnly was specified as a cli argument it should be used, otherwise config or default might overwrite it to true
+    diffOnly: args.includes('--diffOnly') ? argv.diffOnly : $('diffOnly'),
   };
 }
 

packages/runner/src/commands/test/default-options.json

@@ -14,6 +14,7 @@
   "output": "./.loki/current",
   "difference": "./.loki/difference",
   "reference": "./.loki/reference",
+  "diffOnly": false,
   "reactPort": "6006",
   "reactNativePort": "7007",
   "pixelmatch": {},