add cypress-plugin-snapshots

@types/cypress/index.d.ts

@@ -20,5 +20,6 @@ declare namespace Cypress {
       reqAfterCallback?: (request: any, response: any) => void;
       selectorToCheckUiRenderDone?: any[];
     }): VoidFunction;
+    toMatchSnapshot(): VoidFunction;
   }
 }

cypress.json

@@ -11,7 +11,12 @@
     "logWaitTime": 0
   },
   "defaultCommandTimeout": 10000,
-  "ignoreTestFiles": ["**/examples/*.spec.*", "**/node_modules/**"],
+  "ignoreTestFiles": [
+    "**/examples/*.spec.*",
+    "**/node_modules/**",
+    "**/__snapshots__/*",
+    "**/__image_snapshots__/*"
+  ],
   "integrationFolder": ".",
   "testFiles": ["./cypress/integration/**/*.cspec.*", "./src/**/*.cspec.*"],
   "video": false,

cypress/plugins/index.js

@@ -14,6 +14,7 @@
 
 const coverageTask = require('@cypress/code-coverage/task');
 const wp = require('@cypress/webpack-preprocessor');
+const { initPlugin: snapshot } = require('cypress-plugin-snapshots/plugin');
 
 /**
  * @type {Cypress.PluginConfig}
@@ -52,6 +53,8 @@ module.exports = (on, config) => {
     }
   });
 
+  snapshot(on, config);
+
   // NOTE: IMPORTANT to return the config object
   // with the any changed environment variables
   return config;

cypress/support/commands.js

@@ -1,5 +1,7 @@
 /// <reference types="Cypress" />
 
+import 'cypress-plugin-snapshots/commands';
+
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite

package.json

@@ -54,6 +54,7 @@
     "cors": "^2.8.5",
     "cross-env": "^7.0.2",
     "cypress": "^5.2.0",
+    "cypress-plugin-snapshots": "^1.4.4",
     "eslint": "^7.9.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-cypress": "^2.11.1",

src/components/CurvedLineChart/__snapshots__/index.cspec.tsx.snap

@@ -0,0 +1,90 @@
+exports[`CurvedLineChart > should render correctly #0`] = `
+<svg class="jsx-1328844139" style="overflow: visible;">
+  <g
+    fill="none"
+    font-size="10"
+    font-family="sans-serif"
+    text-anchor="middle"
+    class="x-axis"
+    style="transform: translateY(150px);"
+  >
+    <path class="domain" stroke="currentColor" d="M0.5,6V0.5H300.5V6"></path>
+    <g class="tick" opacity="1" transform="translate(0.5,0)">
+      <line stroke="currentColor" y2="6"></line>
+      <text fill="currentColor" y="9" dy="0.71em">1</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(50.5,0)">
+      <line stroke="currentColor" y2="6"></line>
+      <text fill="currentColor" y="9" dy="0.71em">2</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(100.5,0)">
+      <line stroke="currentColor" y2="6"></line>
+      <text fill="currentColor" y="9" dy="0.71em">3</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(150.5,0)">
+      <line stroke="currentColor" y2="6"></line>
+      <text fill="currentColor" y="9" dy="0.71em">4</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(200.5,0)">
+      <line stroke="currentColor" y2="6"></line>
+      <text fill="currentColor" y="9" dy="0.71em">5</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(250.5,0)">
+      <line stroke="currentColor" y2="6"></line>
+      <text fill="currentColor" y="9" dy="0.71em">6</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(300.5,0)">
+      <line stroke="currentColor" y2="6"></line>
+      <text fill="currentColor" y="9" dy="0.71em">7</text>
+    </g>
+  </g>
+  <g
+    fill="none"
+    font-size="10"
+    font-family="sans-serif"
+    text-anchor="start"
+    class="y-axis"
+    style="transform: translateX(300px);"
+  >
+    <path class="domain" stroke="currentColor" d="M0.5,150.5V0.5"></path>
+    <g class="tick" opacity="1" transform="translate(0,150.5)">
+      <line stroke="currentColor" x2="6"></line>
+      <text fill="currentColor" x="9" dy="0.32em">0</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,130.5)">
+      <line stroke="currentColor" x2="6"></line>
+      <text fill="currentColor" x="9" dy="0.32em">20</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,110.50000000000001)">
+      <line stroke="currentColor" x2="6"></line>
+      <text fill="currentColor" x="9" dy="0.32em">40</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,90.5)">
+      <line stroke="currentColor" x2="6"></line>
+      <text fill="currentColor" x="9" dy="0.32em">60</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,70.5)">
+      <line stroke="currentColor" x2="6"></line>
+      <text fill="currentColor" x="9" dy="0.32em">80</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,50.50000000000001)">
+      <line stroke="currentColor" x2="6"></line>
+      <text fill="currentColor" x="9" dy="0.32em">100</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,30.499999999999993)">
+      <line stroke="currentColor" x2="6"></line>
+      <text fill="currentColor" x="9" dy="0.32em">120</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,10.499999999999998)">
+      <line stroke="currentColor" x2="6"></line>
+      <text fill="currentColor" x="9" dy="0.32em">140</text>
+    </g>
+  </g>
+  <path
+    class="line"
+    d="M0,125C0,125,33.333333333333336,123.33333333333333,50,120C66.66666666666666,116.66666666666667,83.33333333333334,110,100,105C116.66666666666666,100,133.33333333333334,85.83333333333333,150,90C166.66666666666666,94.16666666666667,183.33333333333334,130.83333333333334,200,130C216.66666666666666,129.16666666666666,233.33333333333334,94.16666666666667,250,85C266.6666666666667,75.83333333333333,300,75,300,75"
+    fill="none"
+    stroke="blue"
+  ></path>
+</svg>
+`;

src/components/CurvedLineChart/index.cspec.tsx

@@ -7,6 +7,7 @@ describe('CurvedLineChart', () => {
     });
 
     cy.wait(customConfigs.logWaitTime).get('svg').should('be.visible');
+    cy.get('svg').toMatchSnapshot();
   });
 });