diff --git a/README.md b/README.md index 29bdd0b..5d2b96d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Cypress Image Snapshot +# Goalkeeper Image Snapshot -Cypress Image Snapshot binds [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)'s image diffing logic to [Cypress.io](https://cypress.io) commands. **The goal is to catch visual regressions during integration tests.** +Goalkeeper Image Snapshot binds [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)'s image diffing logic to [Cypress.io](https://cypress.io) commands. **The goal is to catch visual regressions during integration tests.**
See it in action! @@ -19,40 +19,12 @@ When an image diff fails, a composite image is constructed. ### Test Reporter -When using `cypress run` and `--reporter cypress-image-snapshot/reporter`, diffs are output to your terminal. +When using `cypress run` and `--reporter @kfe/goalkeeper-image-snapshot/reporter`, diffs are output to your terminal. Cypress Image Snapshot reporter
-## Installation - -Install from npm - -```bash -npm install --save-dev cypress-image-snapshot -``` - -then add the following in your project's `/cypress/plugins/index.js`: - -```js -const { - addMatchImageSnapshotPlugin, -} = require('cypress-image-snapshot/plugin'); - -module.exports = (on, config) => { - addMatchImageSnapshotPlugin(on, config); -}; -``` - -and in `/cypress/support/commands.js` add: - -```js -import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'; - -addMatchImageSnapshotCommand(); -``` - ## Syntax ```js @@ -113,7 +85,7 @@ Run Cypress with `--env failOnSnapshotDiff=false` in order to prevent test failu ### Reporter -Run Cypress with `--reporter cypress-image-snapshot/reporter` in order to report snapshot diffs in your test results. This can be helpful to use with `--env failOnSnapshotDiff=false` in order to quickly view all failing snapshots and their diffs. +Run Cypress with `--reporter @kfe/goalkeeper-image-snapshot/reporter` in order to report snapshot diffs in your test results. This can be helpful to use with `--env failOnSnapshotDiff=false` in order to quickly view all failing snapshots and their diffs. If you using [iTerm2](https://www.iterm2.com/version3.html), the reporter will output any image diffs right in your terminal 😎. @@ -131,7 +103,7 @@ You'll then want to set up a `cypress-reporters.json` which may look a little li ```json { - "reporterEnabled": "spec, mocha-junit-reporter, cypress-image-snapshot/reporter", + "reporterEnabled": "spec, mocha-junit-reporter, @kfe/goalkeeper-image-snapshot/reporter", "mochaJunitReporterReporterOptions": { "mochaFile": "cypress/results/results-[hash].xml" } @@ -188,5 +160,5 @@ The workflow of `cy.matchImageSnapshot()` when running Cypress is: Cypress's screenshot functionality has changed significantly across `3.x.x` versions. In order to avoid buggy behavior, please use the following version ranges: -- `cypress-image-snapshot@>=1.0.0 <2.0.0` for `cypress@>=3.0.0 <3.0.2` -- `cypress-image-snapshot@>2.0.0` for `cypress@>3.0.2`. +- `@kfe/goalkeeper-image-snapshot@>=1.0.0 <2.0.0` for `cypress@>=3.0.0 <3.0.2` +- `@kfe/goalkeeper-image-snapshot@>2.0.0` for `cypress@>3.0.2`. diff --git a/package.json b/package.json index dd66e24..5509962 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { - "name": "cypress-image-snapshot", - "version": "3.1.1", - "description": "Cypress bindings for jest-image-snapshot.", - "repository": "https://github.com/palmerhq/cypress-image-snapshot", - "author": "Jack Cross ", + "name": "@kfe/goalkeeper-image-snapshot", + "version": "0.0.1", + "description": "Goalkeeper bindings for jest-image-snapshot.", + "repository": "https://github.com/HOUCe/goalkeeper-image-snapshot", + "author": "houce", "license": "MIT", "files": [ "*.js" diff --git a/src/command.js b/src/command.js index 86f4501..51c7d20 100644 --- a/src/command.js +++ b/src/command.js @@ -15,6 +15,7 @@ const failOnSnapshotDiff = export function matchImageSnapshotCommand(defaultOptions) { return function matchImageSnapshot(subject, maybeName, commandOptions) { const options = { + resolveDiffOutputPath: diffOutputPath => diffOutputPath, ...defaultOptions, ...((typeof maybeName === 'string' ? commandOptions : maybeName) || {}), }; @@ -50,9 +51,13 @@ export function matchImageSnapshotCommand(defaultOptions) { imageDimensions.receivedWidth }x${ imageDimensions.receivedHeight - }).\nSee diff for details: ${diffOutputPath}` + }).\nSee diff for details: ${options.resolveDiffOutputPath( + diffOutputPath + )}` : `Image was ${diffRatio * - 100}% different from saved snapshot with ${diffPixelCount} different pixels.\nSee diff for details: ${diffOutputPath}`; + 100}% different from saved snapshot with ${diffPixelCount} different pixels.\nSee diff for details: ${options.resolveDiffOutputPath( + diffOutputPath + )}`; if (failOnSnapshotDiff) { throw new Error(message);