Merge pull request #16 from emerson-eps/users/clion/failOnSnapshotDif…

…fwithHooks

feat: fail on snapshot diff using afterEach hook

README.md

@@ -150,10 +150,6 @@ cy.matchImageSnapshot({
 
 Run Cypress with `--env updateSnapshots=true` in order to update the base image files for all of your tests.
 
-### Preventing failures
-
-Run Cypress with `--env failOnSnapshotDiff=false` in order to prevent test failures when an image diff does not pass.
-
 ### Requiring snapshots to be present
 
 Run Cypress with `--env requireSnapshots=true` in order to fail if snapshots are missing. This is useful in continuous integration where snapshots should be present in advance.

cypress/e2e/matchImageSnapshot.cy.ts

@@ -24,32 +24,3 @@ it('matches with just options', () => {
     blackout: ['.card-v14'],
   })
 })
-
-/**
- * this test actually fails but we ignore it
- * Ensures that:
- * - pipeline still passes
- * - failOnSnapshotDiff `false` works
- * - that images are output to the `__diff_output__` dir
- **/
-describe(
-  'fail when image different',
-  {
-    env: {
-      failOnSnapshotDiff: false,
-    },
-    retries: {
-      openMode: 3,
-      runMode: 3,
-    },
-  },
-  () => {
-    it('logs out the error when image is different', () => {
-      cy.get('.feature-v20').invoke('remove')
-      cy.matchImageSnapshot()
-      cy.readFile(
-        './cypress/snapshots/matchImageSnapshot.cy.ts/__diff_output__/fail when image different -- logs out the error when image is different.diff.png',
-      ).should('exist')
-    })
-  },
-)

package.json

@@ -29,7 +29,7 @@
     "lint:commits": "commitlint --from=HEAD~$(git --no-pager rev-list origin/master..HEAD --count)",
     "docker:build": "docker build -t cypress-image-snapshot .",
     "docker:run": "docker run -it --env CYPRESS_updateSnapshots --env CYPRESS_debugSnapshots -v ./cypress:/home/cypress-image-snapshot/cypress cypress-image-snapshot",
-    "cypress:open": "cypress open --env debugSnapshots=true,failOnSnapshotDiff=false --browser electron --e2e",
+    "cypress:open": "cypress open --env debugSnapshots=true --browser electron --e2e",
     "cypress:run": "cypress run --browser electron",
     "cypress:server": "http-server -s -p 9001 -c-1 ./cypress/server &",
     "doc": "doctoc README.md --github --notitle",

src/command.ts

@@ -52,11 +52,6 @@ const matchImageSnapshot =
     nameOrCommandOptions: CypressImageSnapshotOptions | string,
     commandOptions?: CypressImageSnapshotOptions,
   ) => {
-    // access the env here so that it can be overridden in tests
-    const isFailOnSnapshotDiff: boolean =
-      typeof Cypress.env('failOnSnapshotDiff') === 'undefined' || false
-    const isRequireSnapshots: boolean = Cypress.env('requireSnapshots') || false
-
     const {filename, options} = getNameAndOptions(
       nameOrCommandOptions,
       defaultOptionsOverrides,
@@ -95,15 +90,14 @@ const matchImageSnapshot =
           return
         }
 
-        if (added && isRequireSnapshots) {
-          const message = `New snapshot: '${screenshotName}' was added, but 'requireSnapshots' was set to true.
-            This is likely because this test was run in a CI environment in which snapshots should already be committed.`
-          if (isFailOnSnapshotDiff) {
-            throw new Error(message)
-          } else {
-            Cypress.log({name: COMMAND_NAME, message})
-            return
-          }
+        if (added) {
+          const message = `New snapshot: '${screenshotName}' was added`
+          Cypress.log({name: COMMAND_NAME, message})
+          //An after each hook should check if @matchSnapshot is defined, if yes it should fail the tests
+          cy.wrap(`A new reference Image was created for ${screenshotName}`, {
+            log: false,
+          }).as('matchSnapshot')
+          return
         }
 
         if (!pass && !added && !updated) {
@@ -112,11 +106,15 @@ const matchImageSnapshot =
             : `Image was ${
                 diffRatio * 100
               }% different from saved snapshot with ${diffPixelCount} different pixels.\nSee diff for details: ${diffOutputPath}`
-
-          if (isFailOnSnapshotDiff && hasTimedOut) {
-            throw new Error(message)
-          } else if (hasTimedOut) {
+          if (hasTimedOut) {
             Cypress.log({name: COMMAND_NAME, message})
+            //An after each hook should check if @matchSnapshot is defined, if yes it should fail the tests
+            cy.wrap(
+              `Screenshot comparison failed for ${screenshotName}\n${message}`,
+              {
+                log: false,
+              },
+            ).as('matchSnapshot')
           } else {
             Cypress.log({name: COMMAND_NAME, message})
             Cypress.log({