(bug) Compare popup doesn't open if Code coverage is switched on

[taninnazar]

Describe the bug As I have debugged, "Compare snapshot" button is not clickable (popup doesn't open after click) if you have code coverage switched on. As soon as I'm removing coverage from cypress\support\index.js - comparing is working as expected. So, probably some problems in configuration. At least this is actual for cypress-react-unit-test.

To Reproduce Steps to reproduce the behavior:

1. Add code coverage
2. Run test(with npx cypress open) and let it fail due to image snapshot comparing
3. Click "Compare snapshot" button in left side bar in UI test runner
4. Compare popup with images is not opening

Expected behavior Compare popup with images should opens

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Cypress Version 4.7.0
• cypress-react-unit-test 4.3.1
• cypress-plugin-snapshots: 1.4.3

[SchDen]

I have a same problem, but in my case "compare snapshot" doesn't work when in a config (cypress.json) I set env.cypress-plugin-snapshots.autoCleanUp to true.

    "cypress": "^4.4.1",
    "cypress-plugin-snapshots": "^1.3.0",

[taninnazar]

Most probably that this issue is only for Windows users. @SchDen Can you confirm ? Because here was added an example where it's working on Mac -https://github.com/bahmutov/cypress-react-unit-test/issues/217

[SchDen]

@taninnazar oh, sorry, I forgot to write about my OS. I work on Ubuntu 18

[archfz]

For me it doesn't open in any case. Anyway I know what the issue is, will open a PR soon with fix.

[archfz]

Here is a patch until this gets merged and released:

diff --git a/node_modules/cypress-plugin-snapshots/assets/script.js b/node_modules/cypress-plugin-snapshots/assets/script.js
index 35c9537..792dd2a 100644
--- a/node_modules/cypress-plugin-snapshots/assets/script.js
+++ b/node_modules/cypress-plugin-snapshots/assets/script.js
@@ -11,30 +11,10 @@ function closeSnapshotModal() {
       : JSON.stringify(subject, undefined, 2);
   }

-  // Bug: `cy.readFile` only works first time, as a fix I wrap it in a cached `Cypress.Promise`.
-  // @TODO: file a bug report about this.
-  function readFile(fullPath, encoding = 'base64', options = { log: false, timeout: 2000 }) {
-    if (!Cypress.__readFileCache__) Cypress.__readFileCache__ = {};
-    if (!Cypress.__readFileCache__[encoding]) {
-      Cypress.__readFileCache__[encoding] = {};
-    }
-
-    const cache = Cypress.__readFileCache__[encoding];
-    if (!cache[fullPath]) {
-      cache[fullPath] = cy.readFile(fullPath, encoding, options).then(result => {
-        cache[fullPath] = Cypress.Promise.resolve(result);
-        return result;
-      });
-    }
-
-    return cache[fullPath];
-  }
-
   function getImageDataUri(url) {
-    return readFile(url, 'base64')
-      .then((image) => {
-        return `data:image/png;base64,${image}`;
-      });
+    return Cypress.backend('read:file', url, {encoding: 'base64'}).then(result => {
+      return `data:image/png;base64,${result.contents}`;
+    });
   }

   function formatPreview(title, content) {
@@ -146,7 +126,7 @@ function closeSnapshotModal() {
           window.saveSnapshot(data);
           closeSnapshotModal();
         });
-      });
+      }).catch(console.error);
     }

     return false;