jest-image-snapshot 3.0.1 → 4.0.2

package/.github/workflows/stale.yml

@@ -0,0 +1,23 @@
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+  - cron: "0 0 * * *"
+
+jobs:
+  stale:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/stale@v3
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'This issue is stale because it has been open 30 days with no activity.'
+        stale-pr-message: 'This pull request is stale because it has been open 30 days with no activity.'
+        stale-issue-label: 'stale-issue'
+        exempt-issue-labels: 'enhancement,documentation,good-first-issue,question'
+        stale-pr-label: 'stale-pr'
+        exempt-pr-labels: 'work-in-progress'
+        days-before-stale: 30
+        days-before-close: -1

package/.travis.yml

@@ -1,6 +1,5 @@
 language: node_js
 node_js:
-  - 8
   - 10
   - 12
 before_install:
@@ -20,4 +19,4 @@ jobs:
         provider: script
         skip_cleanup: true
         script:
-          - npx semantic-release
+          - npx semantic-release

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [4.0.2](https://github.com/americanexpress/jest-image-snapshot/compare/v4.0.1...v4.0.2) (2020-05-27)
+
+
+### Bug Fixes
+
+* **options:** auto-detect colors if noColors option is not specified ([d90298c](https://github.com/americanexpress/jest-image-snapshot/commit/d90298c3f102734107a7574ddf0516c19a349c66))
+
+## [4.0.1](https://github.com/americanexpress/jest-image-snapshot/compare/v4.0.0...v4.0.1) (2020-05-27)
+
+
+### Bug Fixes
+
+* **options:** add allowSizeMismatch arg ([6529ff4](https://github.com/americanexpress/jest-image-snapshot/commit/6529ff4b2bd9a20abe33d4b68d9d793198931f18))
+
+# [4.0.0](https://github.com/americanexpress/jest-image-snapshot/compare/v3.1.0...v4.0.0) (2020-05-14)
+
+
+### chore
+
+* upgrade to jest 26 + drop node 8 support ([#205](https://github.com/americanexpress/jest-image-snapshot/issues/205)) ([4834533](https://github.com/americanexpress/jest-image-snapshot/commit/4834533369dae1533c93ad883e3f66617d7d9c3f))
+
+
+### BREAKING CHANGES
+
+* drop node 8 support
+
+# [3.1.0](https://github.com/americanexpress/jest-image-snapshot/compare/v3.0.1...v3.1.0) (2020-04-17)
+
+
+### Features
+
+* **options:** add option to pass on size missmatch ([#174](https://github.com/americanexpress/jest-image-snapshot/issues/174)) ([cee46b1](https://github.com/americanexpress/jest-image-snapshot/commit/cee46b1fc94f962c34900a8b655d22665cea2854)), closes [#83](https://github.com/americanexpress/jest-image-snapshot/issues/83) [#85](https://github.com/americanexpress/jest-image-snapshot/issues/85)
+
 ## [3.0.1](https://github.com/americanexpress/jest-image-snapshot/compare/v3.0.0...v3.0.1) (2020-03-25)
 
 

package/README.md

@@ -22,7 +22,7 @@ Want to get paid for your contributions to `jest-image-snapshot`?
 
 ## ✨ Features
 
-* Take image snapshots of your React components
+* Take image snapshots of your application
 * Ability to compare snapshots from a baseline
 * Update snapshots when you're good with changes
 * Customize a difference threshold
@@ -107,13 +107,14 @@ 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
 * `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.
 * `diffDirection`: (default: `horizontal`) (options `horizontal` or `vertical`) Changes diff image layout direction
-* `noColors`: (default `false`) Removes coloring from console output, useful if storing the results in a file
+* `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.
 * `failureThresholdType`: (default `pixel`) (options `percent` or `pixel`) Sets the type of threshold that would trigger a failure.
 * `updatePassedSnapshot`: (default `false`) Updates a snapshot even if it passed the threshold against the existing one.
-* `blur`: (default `0`) Applies Gaussian Blur on compared images, accepts radius in pixels as value. Useful when you have noise after scaling images per different resolutions on your target website, usually setting it's value to 1-2 should be enough to solve that problem.
+* `blur`: (default `0`) Applies Gaussian Blur on compared images, accepts radius in pixels as value. Useful when you have noise after scaling images per different resolutions on your target website, usually setting its value to 1-2 should be enough to solve that problem.
 * `runInProcess`: (default `false`) Runs the diff in process without spawning a child process.
 * `dumpDiffToConsole`: (default `false`) Will output base64 string of a diff image to console in case of failed tests (in addition to creating a diff image). This string can be copy-pasted to a browser address string to preview the diff for a failed test.
+* `allowSizeMismatch`: (default `false`) If set to true, the build will not fail when the screenshots to compare have different sizes.
 
 ```javascript
 it('should demonstrate this matcher`s usage with a custom pixelmatch config', () => {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "jest-image-snapshot",
-  "version": "3.0.1",
+  "version": "4.0.2",
   "description": "Jest matcher for image comparisons. Most commonly used for visual regression testing.",
   "main": "src/index.js",
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">= 10.14.2"
   },
   "scripts": {
     "lint": "eslint ./ --ignore-path .gitignore --ext .js",
@@ -53,8 +53,8 @@
     "eslint-config-amex": "^7.0.0",
     "husky": "^4.2.1",
     "image-size": "^0.8.3",
-    "jest": "^25.1.0",
-    "jest-snapshot": "^25.1.0",
+    "jest": "^26.0.1",
+    "jest-snapshot": "^26.0.1",
     "semantic-release": "^17.0.4",
     "lockfile-lint": "^4.0.0",
     "mock-spawn": "^0.2.6"
@@ -70,7 +70,7 @@
     "rimraf": "^2.6.2"
   },
   "peerDependencies": {
-    "jest": ">=20 <=25"
+    "jest": ">=20 <=26"
   },
   "husky": {
     "hooks": {
@@ -83,9 +83,9 @@
       "@semantic-release/commit-analyzer",
       "@semantic-release/release-notes-generator",
       "@semantic-release/changelog",
+      "@semantic-release/npm",
       "@semantic-release/git",
-      "@semantic-release/github",
-      "@semantic-release/npm"
+      "@semantic-release/github"
     ],
     "branch": "master"
   }

package/src/diff-snapshot.js

@@ -83,6 +83,38 @@ const shouldUpdate = ({ pass, updateSnapshot, updatePassedSnapshot }) => (
   (!pass && updateSnapshot) || (pass && updatePassedSnapshot)
 );
 
+const shouldFail = ({
+  totalPixels,
+  diffPixelCount,
+  hasSizeMismatch,
+  allowSizeMismatch,
+  failureThresholdType,
+  failureThreshold,
+}) => {
+  let pass = false;
+  let diffSize = false;
+  const diffRatio = diffPixelCount / totalPixels;
+  if (hasSizeMismatch) {
+    // do not fail if allowSizeMismatch is set
+    pass = allowSizeMismatch;
+    diffSize = true;
+  }
+  if (!diffSize || pass === true) {
+    if (failureThresholdType === 'pixel') {
+      pass = diffPixelCount <= failureThreshold;
+    } else if (failureThresholdType === 'percent') {
+      pass = diffRatio <= failureThreshold;
+    } else {
+      throw new Error(`Unknown failureThresholdType: ${failureThresholdType}. Valid options are "pixel" or "percent".`);
+    }
+  }
+  return {
+    pass,
+    diffSize,
+    diffRatio,
+  };
+};
+
 function diffImageToSnapshot(options) {
   const {
     receivedImageBuffer,
@@ -96,6 +128,7 @@ function diffImageToSnapshot(options) {
     failureThreshold,
     failureThresholdType,
     blur,
+    allowSizeMismatch = false,
   } = options;
 
   let result = {};
@@ -140,9 +173,6 @@ function diffImageToSnapshot(options) {
 
     const diffImage = new PNG({ width: imageWidth, height: imageHeight });
 
-    let pass = false;
-    let diffSize = false;
-    let diffRatio = 0;
     let diffPixelCount = 0;
 
     diffPixelCount = pixelmatch(
@@ -155,18 +185,19 @@ function diffImageToSnapshot(options) {
     );
 
     const totalPixels = imageWidth * imageHeight;
-    diffRatio = diffPixelCount / totalPixels;
-    // Always fail test on image size mismatch
-    if (hasSizeMismatch) {
-      pass = false;
-      diffSize = true;
-    } else if (failureThresholdType === 'pixel') {
-      pass = diffPixelCount <= failureThreshold;
-    } else if (failureThresholdType === 'percent') {
-      pass = diffRatio <= failureThreshold;
-    } else {
-      throw new Error(`Unknown failureThresholdType: ${failureThresholdType}. Valid options are "pixel" or "percent".`);
-    }
+
+    const {
+      pass,
+      diffSize,
+      diffRatio,
+    } = shouldFail({
+      totalPixels,
+      diffPixelCount,
+      hasSizeMismatch,
+      allowSizeMismatch,
+      failureThresholdType,
+      failureThreshold,
+    });
 
     if (isFailure({ pass, updateSnapshot })) {
       mkdirp.sync(diffDir);
@@ -213,6 +244,7 @@ function diffImageToSnapshot(options) {
     } else {
       result = {
         pass,
+        diffSize,
         diffRatio,
         diffPixelCount,
         diffOutputPath,

package/src/index.js

@@ -37,6 +37,7 @@ function checkResult({
   snapshotIdentifier,
   chalk,
   dumpDiffToConsole,
+  allowSizeMismatch,
 }) {
   let pass = true;
   /*
@@ -65,7 +66,7 @@ function checkResult({
       const differencePercentage = result.diffRatio * 100;
       message = () => {
         let failure;
-        if (result.diffSize) {
+        if (result.diffSize && !allowSizeMismatch) {
           failure = `Expected image to be the same size as the snapshot (${result.imageDimensions.baselineWidth}x${result.imageDimensions.baselineHeight}), but was different (${result.imageDimensions.receivedWidth}x${result.imageDimensions.receivedHeight}).\n`;
         } else {
           failure = `Expected image to match or be a close match to snapshot but was ${differencePercentage}% different from snapshot (${result.diffPixelCount} differing pixels).\n`;
@@ -127,13 +128,14 @@ function configureToMatchImageSnapshot({
   customSnapshotsDir: commonCustomSnapshotsDir,
   customDiffDir: commonCustomDiffDir,
   diffDirection: commonDiffDirection = 'horizontal',
-  noColors: commonNoColors = false,
+  noColors: commonNoColors,
   failureThreshold: commonFailureThreshold = 0,
   failureThresholdType: commonFailureThresholdType = 'pixel',
   updatePassedSnapshot: commonUpdatePassedSnapshot = false,
   blur: commonBlur = 0,
   runInProcess: commonRunInProcess = false,
   dumpDiffToConsole: commonDumpDiffToConsole = false,
+  allowSizeMismatch: commonAllowSizeMismatch = false,
 } = {}) {
   return function toMatchImageSnapshot(received, {
     customSnapshotIdentifier = commonCustomSnapshotIdentifier,
@@ -148,11 +150,16 @@ function configureToMatchImageSnapshot({
     blur = commonBlur,
     runInProcess = commonRunInProcess,
     dumpDiffToConsole = commonDumpDiffToConsole,
+    allowSizeMismatch = commonAllowSizeMismatch,
   } = {}) {
     const {
       testPath, currentTestName, isNot, snapshotState,
     } = this;
-    const chalk = new Chalk({ enabled: !noColors });
+    const chalkOptions = {};
+    if (typeof noColors !== 'undefined') {
+      chalkOptions.enabled = !noColors;
+    }
+    const chalk = new Chalk(chalkOptions);
 
     const retryTimes = parseInt(global[Symbol.for('RETRY_TIMES')], 10) || 0;
 
@@ -196,6 +203,7 @@ function configureToMatchImageSnapshot({
         failureThresholdType,
         updatePassedSnapshot,
         blur,
+        allowSizeMismatch,
       });
 
     return checkResult({
@@ -205,6 +213,7 @@ function configureToMatchImageSnapshot({
       snapshotIdentifier,
       chalk,
       dumpDiffToConsole,
+      allowSizeMismatch,
     });
   };
 }

package/.github/workflows/greetings.yml

@@ -1,13 +0,0 @@
-name: Greetings
-
-on: [pull_request, issues]
-
-jobs:
-  greeting:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/first-interaction@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-message: 'Thanks for opening your first issue. Pull requests are always welcome!'
-        pr-message: 'Thank you for your contribution to jest-image-snapshot. We will be reviewing your PR. In the meantime, please sign the CLA and make sure all status checks have passed.'