jest-image-snapshot 4.5.1 → 5.1.1

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [5.1.1](https://github.com/americanexpress/jest-image-snapshot/compare/v5.1.0...v5.1.1) (2022-08-25)
+
+
+### Bug Fixes
+
+* **diff-snapshot:** make recievedDir optional ([#306](https://github.com/americanexpress/jest-image-snapshot/issues/306)) ([cd4fa73](https://github.com/americanexpress/jest-image-snapshot/commit/cd4fa734dd72f8e590e8b672c3081468a5842a20)), closes [#300](https://github.com/americanexpress/jest-image-snapshot/issues/300)
+
+# [5.1.0](https://github.com/americanexpress/jest-image-snapshot/compare/v5.0.0...v5.1.0) (2022-05-30)
+
+
+### Features
+
+* allow storing received screenshot on failure ([#298](https://github.com/americanexpress/jest-image-snapshot/issues/298)) ([cfb81c9](https://github.com/americanexpress/jest-image-snapshot/commit/cfb81c99e1465420f007e180a59559c5d62d1c67))
+
+# [5.0.0](https://github.com/americanexpress/jest-image-snapshot/compare/v4.5.1...v5.0.0) (2022-05-30)
+
+
+### chore
+
+* **jest:** upgrade v28 ([a902a5b](https://github.com/americanexpress/jest-image-snapshot/commit/a902a5baa87d0925b3ff241d7f592f6e1fc0c8fd)), closes [#296](https://github.com/americanexpress/jest-image-snapshot/issues/296)
+
+
+### BREAKING CHANGES
+
+* **jest:** drop support for Node 10 due
+to jest use of globalThis in Node 12
+
 ## [4.5.1](https://github.com/americanexpress/jest-image-snapshot/compare/v4.5.0...v4.5.1) (2021-06-25)
 
 

package/README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img src='https://github.com/americanexpress/jest-image-snapshot/raw/main/jest-image-snapshot.png' alt="Jest Image Snapshot - One Amex" width='50%'/>
+  <img src='https://github.com/americanexpress/jest-image-snapshot/raw/main/images/jest-image-snapshot.png' alt="Jest Image Snapshot - One Amex" width='50%'/>
 </h1>
 
 [![npm](https://img.shields.io/npm/v/jest-image-snapshot)](https://www.npmjs.com/package/jest-image-snapshot)
@@ -53,15 +53,15 @@ it('renders correctly', async () => {
 ...
 ```
 
-<img title="Adding an image snapshot" src="./images/create-snapshot.gif" width="50%">
+<img title="Adding an image snapshot" src="https://raw.githubusercontent.com/americanexpress/jest-image-snapshot/main/images/create-snapshot.gif" width="50%">
 
 Then after a few days as I finish adding another feature to my component I notice one of my tests failing!
 
-<img title="A failing image snapshot test" src="./images/fail-snapshot.gif" width="50%">
+<img title="A failing image snapshot test" src="https://raw.githubusercontent.com/americanexpress/jest-image-snapshot/main/images/fail-snapshot.gif" width="50%">
 
 Oh no! I must have introduced a regression! Let's see what the diff looks like to identify what I need to fix:
 
-<img title="Image diff" src="./images/image-diff.png" width="50%">
+<img title="Image diff" src="https://raw.githubusercontent.com/americanexpress/jest-image-snapshot/main/images/image-diff.png" width="50%">
 
 And now that I know that I broke the card art I can fix it!
 
@@ -109,6 +109,8 @@ 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
+* `storeReceivedOnFailure`: (default: `false`) Store the received images seperately from the composed diff images on failure. This can be useful when updating baseline images from CI.
+* `customReceivedDir`: A custom absolute path of a directory to keep this received image 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. 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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "jest-image-snapshot",
-  "version": "4.5.1",
+  "version": "5.1.1",
   "description": "Jest matcher for image comparisons. Most commonly used for visual regression testing.",
   "main": "src/index.js",
   "engines": {
-    "node": ">= 10.14.2"
+    "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
   },
   "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": "^27.0.4",
-    "jest-snapshot": "^27.0.4",
+    "jest": "^28.0.3",
+    "jest-snapshot": "^28.0.3",
     "lockfile-lint": "^4.0.0",
     "mock-spawn": "^0.2.6",
     "semantic-release": "^17.0.4"
@@ -71,7 +71,7 @@
     "ssim.js": "^3.1.1"
   },
   "peerDependencies": {
-    "jest": ">=20 <=27"
+    "jest": ">=20 <=28"
   },
   "husky": {
     "hooks": {

package/src/diff-snapshot.js

@@ -189,7 +189,9 @@ function diffImageToSnapshot(options) {
     receivedImageBuffer,
     snapshotIdentifier,
     snapshotsDir,
-    diffDir,
+    storeReceivedOnFailure,
+    receivedDir = path.join(options.snapshotsDir, '__received_output__'),
+    diffDir = path.join(options.snapshotsDir, '__diff_output__'),
     diffDirection,
     updateSnapshot = false,
     updatePassedSnapshot = false,
@@ -209,6 +211,9 @@ function diffImageToSnapshot(options) {
     fs.writeFileSync(baselineSnapshotPath, receivedImageBuffer);
     result = { added: true };
   } else {
+    const receivedSnapshotPath = path.join(receivedDir, `${snapshotIdentifier}-received.png`);
+    rimraf.sync(receivedSnapshotPath);
+
     const diffOutputPath = path.join(diffDir, `${snapshotIdentifier}-diff.png`);
     rimraf.sync(diffOutputPath);
 
@@ -269,6 +274,12 @@ function diffImageToSnapshot(options) {
     });
 
     if (isFailure({ pass, updateSnapshot })) {
+      if (storeReceivedOnFailure) {
+        mkdirp.sync(path.dirname(receivedSnapshotPath));
+        fs.writeFileSync(receivedSnapshotPath, receivedImageBuffer);
+        result = { receivedSnapshotPath };
+      }
+
       mkdirp.sync(path.dirname(diffOutputPath));
       const composer = new ImageComposer({
         direction: diffDirection,
@@ -298,6 +309,7 @@ function diffImageToSnapshot(options) {
       fs.writeFileSync(diffOutputPath, pngBuffer);
 
       result = {
+        ...result,
         pass: false,
         diffSize,
         imageDimensions,

package/src/index.js

@@ -135,6 +135,8 @@ function configureToMatchImageSnapshot({
   customDiffConfig: commonCustomDiffConfig = {},
   customSnapshotIdentifier: commonCustomSnapshotIdentifier,
   customSnapshotsDir: commonCustomSnapshotsDir,
+  storeReceivedOnFailure: commonStoreReceivedOnFailure = false,
+  customReceivedDir: commonCustomReceivedDir,
   customDiffDir: commonCustomDiffDir,
   diffDirection: commonDiffDirection = 'horizontal',
   noColors: commonNoColors,
@@ -151,6 +153,8 @@ function configureToMatchImageSnapshot({
   return function toMatchImageSnapshot(received, {
     customSnapshotIdentifier = commonCustomSnapshotIdentifier,
     customSnapshotsDir = commonCustomSnapshotsDir,
+    storeReceivedOnFailure = commonStoreReceivedOnFailure,
+    customReceivedDir = commonCustomReceivedDir,
     customDiffDir = commonCustomDiffDir,
     diffDirection = commonDiffDirection,
     customDiffConfig = {},
@@ -189,7 +193,8 @@ function configureToMatchImageSnapshot({
     });
 
     const snapshotsDir = customSnapshotsDir || path.join(path.dirname(testPath), SNAPSHOTS_DIR);
-    const diffDir = customDiffDir || path.join(snapshotsDir, '__diff_output__');
+    const receivedDir = customReceivedDir;
+    const diffDir = customDiffDir;
     const baselineSnapshotPath = path.join(snapshotsDir, `${snapshotIdentifier}-snap.png`);
     OutdatedSnapshotReporter.markTouchedFile(baselineSnapshotPath);
 
@@ -208,6 +213,8 @@ function configureToMatchImageSnapshot({
       imageToSnapshot({
         receivedImageBuffer: received,
         snapshotsDir,
+        storeReceivedOnFailure,
+        receivedDir,
         diffDir,
         diffDirection,
         snapshotIdentifier,

package/.github/pull_request_template.md

@@ -1,33 +0,0 @@
-<!--- Provide a general summary of your changes in the Title above -->
-
-## Description
-<!--- Describe your changes in detail -->
-
-## Motivation and Context
-<!--- Why is this change required? What problem does it solve? -->
-<!--- If it fixes an open issue, please link to the issue here. -->
-
-## How Has This Been Tested?
-<!--- Please describe in detail how you tested your changes. -->
-<!--- Include details of your testing environment, tests ran to see how -->
-<!--- your change affects other areas of the code, etc. -->
-
-## Types of Changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] Documentation (adding or updating documentation)
-- [ ] Dependency update
-
-## Checklist:
-<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
-<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
-- [ ] My change requires a change to the documentation and I have updated the documentation accordingly.
-- [ ] My changes are in sync with the code style of this project.
-- [ ] There aren't any other open Pull Requests for the same issue/update.
-- [ ] These changes should be applied to a maintenance branch.
-- [ ] I have added the Apache 2.0 license header to any new files created.
-
-## What is the Impact to Developers Using Jest-Image-Snapshot?
-<!--- Please describe how your changes impacts developers using Jest-Image-Snapshot. -->

package/.github/workflows/health-check.yml

@@ -1,31 +0,0 @@
-name: Health Check
-
-on:
-  schedule:
-    # At minute 0 past hour 0800 and 2000.
-    - cron:  '0 8,20 * * *'
-
-jobs:
-  tests:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [ '10.x', '12.x', '14.x', '16.x' ]
-    name: Node ${{ matrix.node }}
-    steps:
-    - uses: actions/checkout@v2
-    - run: |
-        git remote set-branches --add origin main
-        git fetch
-    - name: Setup Node
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node }}
-    - name: Install Dependencies
-      run: npm ci
-      env:
-        NODE_ENV: development
-    - name: Run Test Script
-      run: npm run test
-      env:
-        NODE_ENV: production

package/.github/workflows/release.yml

@@ -1,37 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  prepare:
-    runs-on: ubuntu-latest
-    if: "! contains(github.event.head_commit.message, '[skip ci]')"
-    steps:
-      - run: echo "${{ github.event.head_commit.message }}"
-  release:
-    needs: prepare
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          persist-credentials: false
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12
-      - name: Install dependencies
-        run: npm ci
-      - name: Release
-        env:
-          GIT_AUTHOR_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
-          GIT_AUTHOR_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
-          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_COMMITTER_EMAIL }}
-          GIT_COMMITTER_NAME: ${{ secrets.GIT_COMMITTER_NAME }}
-          GITHUB_TOKEN: ${{ secrets.PA_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release

package/.github/workflows/stale.yml

@@ -1,23 +0,0 @@
-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,bug'
-        stale-pr-label: 'stale-pr'
-        exempt-pr-labels: 'work-in-progress'
-        days-before-stale: 30
-        days-before-close: -1

package/.github/workflows/tests.yml

@@ -1,43 +0,0 @@
-name: Tests
-
-on:
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  tests:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [ '10.x','12.x', '14.x', '16.x' ]
-    name: Node ${{ matrix.node }}
-    steps:
-    - uses: actions/checkout@v2
-    - run: |
-        git remote set-branches --add origin main
-        git fetch
-    - name: Setup Node
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node }}
-    - name: Install Dependencies
-      run: npm ci
-      env:
-        NODE_ENV: development
-    - name: Unit Tests
-      run: npm run test
-      env:
-        NODE_ENV: production
-    - name: Lockfile Lint Test
-      run: npm run test:lockfile
-      env:
-        NODE_ENV: production
-    - name: Git History Test
-      run: npm run test:git-history
-      env:
-        NODE_ENV: production
-    - name: Lint
-      run: npm run lint
-      env:
-        NODE_ENV: production