From 7fb8410025204216ef9ff37f88828916d7beaa3d Mon Sep 17 00:00:00 2001
From: John Housser <john.housser@arcteryx.com>
Date: Wed, 6 Jun 2018 19:56:56 -0700
Subject: [PATCH] docs(README) Add some notes about capturing diff images (#82)

---
 README.md                  | 12 ++++++++++
 examples/image-reporter.js | 46 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 examples/image-reporter.js

diff --git a/README.md b/README.md
index 7fe913f..7275b5d 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,18 @@ const toMatchImageSnapshot = configureToMatchImageSnapshot({
 expect.extend({ toMatchImageSnapshot });
 ```
 
+### Recipes
+
+#### Upload diff images from failed tests
+
+[Example Image Upload Test Reporter](examples/image-reporter.js)
+
+If you are using jest-image-snapshot in an ephemeral environment (like a Continuous Integration server) where the file system does not persist, you might want a way to retrieve those images for diagnostics or historical reference. This example shows how to use a custom [Jest Reporter](https://facebook.github.io/jest/docs/en/configuration.html#reporters-array-modulename-modulename-options) that will run after every test, and if there were any images created because they failed the diff test, upload those images to an [AWS S3](https://aws.amazon.com/s3/) bucket.
+
+To enable this image reporter, add it to your `jest.config.js` "reporters" definition:
+
+    "reporters": [ "default", "<rootDir>/image-reporter.js" ]
+
 ## How it works
   Given an image (Buffer instance with PNG image data) the `toMatchImageSnapshot()` matcher will create a `__image_snapshots__` directory in the directory the test is in and will store the baseline snapshot image there on the first run. Note that if `customSnapshotsDir` option is given then it will store baseline snapshot there instead.
 
diff --git a/examples/image-reporter.js b/examples/image-reporter.js
new file mode 100644
index 0000000..7ea0a45
--- /dev/null
+++ b/examples/image-reporter.js
@@ -0,0 +1,46 @@
+/* eslint-disable */
+
+/*
+ * To enable this image reporter, add it to your `jest.config.js` "reporters" definition:
+    "reporters": [ "default", "<rootDir>/image-reporter.js" ]
+ */
+
+const chalk = require('chalk');
+const fs = require('fs');
+const AWS = require('aws-sdk/global');
+const S3 = require('aws-sdk/clients/s3');
+
+const UPLOAD_BUCKET = 'YOUR_S3_BUCKET_NAME';
+
+const s3 = new AWS.S3({ apiVersion: '2006-03-01' });
+
+class ImageReporter {
+  constructor(globalConfig, options) {
+    this._globalConfig = globalConfig;
+    this._options = options;
+  }
+
+  onTestResult(test, testResult, aggregateResults) {
+    if (testResult.numFailingTests && testResult.failureMessage.match(/different from snapshot/)) {
+      const files = fs.readdirSync('./__tests__/__image_snapshots__/__diff_output__/');
+      files.forEach((value) => {
+        const path = `diff_output/${value}`;
+        const params = {
+          Body: fs.readFileSync(`./__tests__/__image_snapshots__/__diff_output__/${value}`),
+          Bucket: UPLOAD_BUCKET,
+          Key: path,
+          ContentType: 'image/png',
+        };
+        s3.putObject(params, (err) => {
+          if (err) {
+            console.log(err, err.stack);
+          } else {
+            console.log(chalk.red.bold(`Uploaded image diff file to https://${UPLOAD_BUCKET}.s3.amazonaws.com/${path}`));
+          }
+        });
+      });
+    }
+  }
+}
+
+module.exports = ImageReporter;