chore: replacing percy with cypress-image-snapshots

SourikAdhikary · Mar 31, 2022 · 3c0a2f0 · 3c0a2f0
1 parent b380d46
commit 3c0a2f0
Show file tree

Hide file tree

Showing 15 changed files with 279 additions and 22 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,4 @@ Gemfile.lock
 /.vs
 
 cypress/screenshots/
-cypress/snaphots/
+cypress/snapshots/
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
+# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 
 English | [简体中文](./README.zh-CN.md)
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -1,4 +1,4 @@
-# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
+# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 
 [English](./README.md) | 简体中文
 

diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js
@@ -47,7 +47,11 @@ export const imgSnapshotTest = (graphStr, _options, api) => {
 
   cy.visit(url);
   cy.get('svg');
-  cy.percySnapshot();
+  // cy.percySnapshot();
+  // Default name to test title
+  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+
+  cy.matchImageSnapshot(name);
 };
 
 export const renderGraph = (graphStr, options, api) => {

diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
@@ -4,7 +4,7 @@ describe('Pie Chart', () => {
   it('should render a simple pie diagram', () => {
     imgSnapshotTest(
       `
-    pie title Sports in Sweden
+    pie title Sports in Sweden!
        "Bandy" : 40
        "Ice-Hockey" : 80
        "Football" : 90

diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -158,7 +158,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('v2 should render a simple state diagrams', () => {
+  it('v2 should render a simple state diagrams 2', () => {
     imgSnapshotTest(
       `
     stateDiagram-v2

diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -16,7 +16,8 @@
 //   // `config` is the resolved Cypress config
 // }
 
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+
 module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+  addMatchImageSnapshotPlugin(on, config);
 };
diff --git a/...size -- should render a sequence diagram when useMaxWidth is false (failed).png b/...size -- should render a sequence diagram when useMaxWidth is false (failed).png
diff --git a/...hould render a sequence diagram when useMaxWidth is true (default) (failed).png b/...hould render a sequence diagram when useMaxWidth is true (default) (failed).png
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -24,4 +24,8 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-import '@percy/cypress';
+// import '@percy/cypress';
+
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+addMatchImageSnapshotCommand();
diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -15,7 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
-import '@percy/cypress';
+// import '@percy/cypress';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/docs/README.md b/docs/README.md
@@ -11,7 +11,7 @@ It is a Javascript based diagramming and charting tool that renders Markdown-ins
 
 <!-- **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) -->
 
-[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
+[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 
 <!-- Mermaidn book banner -->
 [![banner](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)

diff --git a/docs/Setup.md b/docs/Setup.md
@@ -926,7 +926,7 @@ Default value: true
 **Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
 to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
 will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
-function \*Default value: At default, will mirror Global Config\*\*
+function _Default value: At default, will mirror Global Config_
 
 ### Parameters
 

diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "lint": "eslint ./ --ext js,html",
     "lint:fix": "yarn lint --fix",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
-    "cypress": "percy exec -- cypress run",
+    "cypress": "cypress run",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
     "dev": "webpack serve --config ./.webpack/webpack.config.e2e.babel.js",
@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
+    "cypress-image-snapshot": "^4.0.1",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
@@ -74,9 +75,6 @@
     "@babel/register": "^7.14.5",
     "@commitlint/cli": "^16.0.0",
     "@commitlint/config-conventional": "^16.0.0",
-    "@percy/cli": "^1.0.0-beta.58",
-    "@percy/cypress": "^3.1.0",
-    "@percy/migrate": "^0.11.0",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",