feat: allow custom threshold (#142)

* feat: allow custom threshold

* docs: update docs

* test: add example test

Author: robwalkerco

docs/api/matchers.md

@@ -4,9 +4,9 @@ sidebar_position: 3
 
 # Matchers
 
-### toMatchBaseline(name: string)
+### toMatchBaseline(options: {threshold?: number} = {threshold: 0.1})
 
-This custom matcher will try to find and compare the baseline screenshot by using the path of the latest screenshot (returned by `takeScreenshot()`). You will have to take a screenshot before using, and pass the path of that screenshot to the expect method.
+This custom Jest matcher will try to find and compare the baseline screenshot by using the path of the latest screenshot (returned by `takeScreenshot()`). You will have to take a screenshot before using, and pass the path of that screenshot to the expect method.
 
 #### Example
 
@@ -19,10 +19,15 @@ describe('App.tsx', () => {
 
     // highlight-next-line
     expect(screen).toMatchBaseline();
+
+    // Or with a custom threshold
+    expect(screen).toMatchBaseline({ threshold: 0.2 });
   });
 });
 ```
 
 The first time this test is run, or when run with the `--update` flag, the `.toMatchBaseline` expectation will always be successful.
 
 On subsequent test runs, the screenshot captured by `takeScreenshot` (and stored in `/current`) will be compared to the baseline screenshot. **_Any_** differences will cause the expectation to fail, and the report to be generated.
+
+The `threshold` option allows you to customise the threshold for [pixelmatch](https://github.com/mapbox/pixelmatch#pixelmatchimg1-img2-output-width-height-options) which Owl uses under the hood.

example/.owl/baseline/android/custom-threshold.png

@@ -60,6 +60,12 @@ describe('App.tsx', () => {
 
       expect(screen).toMatchBaseline();
     });
+
+    it('takes a screenshot with a custom threshold', async () => {
+      const screen = await takeScreenshot('custom-threshold');
+
+      expect(screen).toMatchBaseline({threshold: 0.25});
+    });
   });
 
   describe('Reload example', () => {

example/.owl/baseline/ios/custom-threshold.png

@@ -9,12 +9,19 @@ declare global {
   namespace jest {
     interface Matchers<R> {
       /** Compares the image passed to the baseline one */
-      toMatchBaseline: () => CustomMatcherResult;
+      toMatchBaseline: ({
+        threshold,
+      }?: {
+        threshold?: number;
+      }) => CustomMatcherResult;
     }
   }
 }
 
-export const toMatchBaseline = (latestPath: string) => {
+export const toMatchBaseline = (
+  latestPath: string,
+  options: { threshold?: number } = { threshold: 0.1 }
+) => {
   const platform = process.env.OWL_PLATFORM as Platform;
   const screenshotsDir = path.join(path.dirname(latestPath), '..', '..');
   const baselinePath = path.join(
@@ -56,7 +63,8 @@ export const toMatchBaseline = (latestPath: string) => {
       latestImage.data,
       diffImage.data,
       baselineImage.width,
-      baselineImage.height
+      baselineImage.height,
+      { threshold: options?.threshold }
     );
 
     if (diffPixelsCount === 0) {