From 2bbb64c7ab54b81943d327bc26e928f75fa6fb3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B3=8A=E6=B7=9E?= <zhaoyuliang.zyl@alibaba-inc.com>
Date: Wed, 4 Dec 2024 22:29:42 +0800
Subject: [PATCH] fix(Collapse): Internal elements need to apply the radius
 configuration of external elements, close #3277

---
 .gitignore                                    |   3 +
 .../collapse/__docs__/adaptor/index.tsx       |   3 +-
 components/collapse/__tests__/index-spec.tsx  |  13 +
 ...border-radius and overflow hidden.snap.png | Bin 0 -> 5659 bytes
 components/collapse/main.scss                 |   1 +
 components/util/__tests__/common/snapshot.ts  |  27 +
 cypress.config.ts                             |   8 +-
 cypress/support/component.ts                  |   6 +-
 package-lock.json                             | 822 +++++++++++++++++-
 package.json                                  |   2 +
 10 files changed, 877 insertions(+), 8 deletions(-)
 create mode 100644 components/collapse/__tests__/snapshots/__base__/index-spec.tsx/Collapse -- render -- should render with proper border-radius and overflow hidden.snap.png
 create mode 100644 components/util/__tests__/common/snapshot.ts

diff --git a/.gitignore b/.gitignore
index e5db750be6..fbcac157cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -87,3 +87,6 @@ gemini-report/
 *.log
 .DS_Store
 src/core-temp
+
+# tests snapshots diff
+components/**/__tests__/snapshots/__diff__/**
diff --git a/components/collapse/__docs__/adaptor/index.tsx b/components/collapse/__docs__/adaptor/index.tsx
index d9389d6c26..f1b861ff51 100644
--- a/components/collapse/__docs__/adaptor/index.tsx
+++ b/components/collapse/__docs__/adaptor/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Collapse } from '@alifd/next';
 import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import type { INode } from '@alifd/adaptor-helper/types/parse-data';
 
 interface AdaptorProps {
     state: string;
@@ -34,7 +35,7 @@ export default {
         },
     }),
     adaptor: ({ state, width, data, style = {}, ...others }: AdaptorProps) => {
-        const list = parseData(data).filter(node => NodeType.node === node.type);
+        const list = (parseData(data) as INode[]).filter(node => NodeType.node === node.type);
         const expandedKeys = [] as string[];
         const children = list.map(({ state, value, children }, index) => {
             if (state === 'active') {
diff --git a/components/collapse/__tests__/index-spec.tsx b/components/collapse/__tests__/index-spec.tsx
index 808879f655..73cc7a4c03 100644
--- a/components/collapse/__tests__/index-spec.tsx
+++ b/components/collapse/__tests__/index-spec.tsx
@@ -1,9 +1,12 @@
 import React, { type ReactElement } from 'react';
+import { CompareSnapshot } from '../../util/__tests__/common/snapshot';
 import Collapse from '../index';
 import '../style';
 
 const Panel = Collapse.Panel;
 
+const collapseCompareSnapshot = new CompareSnapshot({ componentName: 'collapse' });
+
 describe('Collapse', () => {
     describe('render', () => {
         it('[normal] Should render null', () => {
@@ -60,6 +63,16 @@ describe('Collapse', () => {
             cy.get('.next-collapse').should('have.length', 1);
             cy.get('.next-collapse-panel').should('have.length', 2);
         });
+
+        it('should render with proper border-radius and overflow hidden', () => {
+            cy.mount(
+                <Collapse style={{ borderRadius: '50px' }}>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                </Collapse>
+            );
+            collapseCompareSnapshot.compare(cy.get('.next-collapse'));
+        });
     });
 
     describe('defaultExpandedKeys', () => {
diff --git a/components/collapse/__tests__/snapshots/__base__/index-spec.tsx/Collapse -- render -- should render with proper border-radius and overflow hidden.snap.png b/components/collapse/__tests__/snapshots/__base__/index-spec.tsx/Collapse -- render -- should render with proper border-radius and overflow hidden.snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c37c2a6224f50cc081def37e94134efcb02d9b2
GIT binary patch
literal 5659
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
F{{i<n({%s<

literal 0
HcmV?d00001

diff --git a/components/collapse/main.scss b/components/collapse/main.scss
index 4eb1e7ebdf..349023239e 100644
--- a/components/collapse/main.scss
+++ b/components/collapse/main.scss
@@ -10,6 +10,7 @@
 
     border: $collapse-border-width solid $collapse-border-color;
     border-radius: $collapse-border-corner;
+    overflow: hidden;
     &:focus,
     & *:focus {
         outline: 0;
diff --git a/components/util/__tests__/common/snapshot.ts b/components/util/__tests__/common/snapshot.ts
new file mode 100644
index 0000000000..9939021ed1
--- /dev/null
+++ b/components/util/__tests__/common/snapshot.ts
@@ -0,0 +1,27 @@
+import type { Options } from 'cypress-image-snapshot';
+
+export class CompareSnapshot {
+    customSnapshotsDir: string;
+    customDiffDir: string;
+    constructor(options: { componentName: string }) {
+        const { componentName } = options;
+        this.customSnapshotsDir = `/components/${componentName}/__tests__/snapshots/__base__`;
+        this.customDiffDir = `/components/${componentName}/__tests__/snapshots/__diff__`;
+    }
+    compare(
+        subject: Cypress.Chainable<JQuery<HTMLElement>>,
+        nameOrOptions?: string | Options,
+        options?: Options
+    ) {
+        const commandOptions = typeof nameOrOptions === 'string' ? options : nameOrOptions;
+        const targetOptions = Object.assign(
+            {
+                customSnapshotsDir: this.customSnapshotsDir,
+                customDiffDir: this.customDiffDir,
+            },
+            commandOptions
+        );
+        const target = subject ? subject : cy;
+        return target.matchImageSnapshot(targetOptions);
+    }
+}
diff --git a/cypress.config.ts b/cypress.config.ts
index d12c7a7e0d..1d08bfdc74 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,15 +1,17 @@
 import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 
 export default defineConfig({
     component: {
-        setupNodeEvents(on) {
+        setupNodeEvents(on, config) {
             on('task', {
-                'log': (message: string) => {
+                log: (message: string) => {
                     // eslint-disable-next-line no-console
                     console.log(message);
                     return null;
                 },
-            })
+            });
+            addMatchImageSnapshotPlugin(on, config);
         },
         devServer: {
             framework: 'react',
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
index 41271444ac..8b9fd9a9a9 100644
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@@ -1,5 +1,6 @@
 import { cloneElement, type ReactElement } from 'react';
 import { mount, type MountReturn } from 'cypress/react';
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 import './commands';
 
 function rerender<Props extends object>(tag: string, nextProps: Props) {
@@ -14,7 +15,7 @@ function triggerInputChange(subject: JQuery<HTMLElement>, value: string) {
         window.HTMLInputElement.prototype,
         'value'
     )?.set;
-    nativeInputValueSetter?.call(element, value)
+    nativeInputValueSetter?.call(element, value);
     element.dispatchEvent(new Event('input', { bubbles: true }));
 }
 
@@ -29,6 +30,7 @@ declare global {
     }
 }
 
+addMatchImageSnapshotCommand();
 Cypress.Commands.add('mount', mount);
 Cypress.Commands.add('rerender', rerender);
-Cypress.Commands.add('triggerInputChange', { prevSubject: 'element' }, triggerInputChange)
+Cypress.Commands.add('triggerInputChange', { prevSubject: 'element' }, triggerInputChange);
diff --git a/package-lock.json b/package-lock.json
index f57023d3e0..912e2c1e31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@alifd/next",
-  "version": "1.27.23",
+  "version": "1.27.29",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@alifd/next",
-      "version": "1.27.23",
+      "version": "1.27.29",
       "license": "MIT",
       "dependencies": {
         "@alifd/field": "~2.0.3",
@@ -50,6 +50,7 @@
         "@types/chai": "^4.3.11",
         "@types/classnames": "^2.3.1",
         "@types/co": "^4.6.6",
+        "@types/cypress-image-snapshot": "^3.1.9",
         "@types/enzyme": "^3.10.14",
         "@types/fs-extra": "^5.1.0",
         "@types/glob": "^7.2.0",
@@ -104,6 +105,7 @@
         "css-loader": "^0.28.7",
         "css-split-webpack-plugin": "^0.2.5",
         "cypress": "^13.6.1",
+        "cypress-image-snapshot": "^4.0.1",
         "ejs": "^2.5.9",
         "enzyme": "^3.3.0",
         "enzyme-adapter-react-16": "~1.10.0",
@@ -3500,6 +3502,12 @@
       "integrity": "sha512-m46q2/3TSimTBeA710v73YosbYlEHbuF1mdIg0SGFtqb/lk1bgqF05dhg0KHUyhUQV2Z9vMnSa3MCw/utYHqPg==",
       "dev": true
     },
+    "node_modules/@types/cypress-image-snapshot": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/@types/cypress-image-snapshot/-/cypress-image-snapshot-3.1.9.tgz",
+      "integrity": "sha512-vcFgB8AfuM0dtupCHAGgapUbjRNWmMDtpzzpXz5gexWOHW4y/n10XRi5/y5Xpi0Ztku+X4dnRVMqQa5IDcy3Ig==",
+      "dev": true
+    },
     "node_modules/@types/enzyme": {
       "version": "3.10.18",
       "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.18.tgz",
@@ -4160,6 +4168,15 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -4472,6 +4489,139 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/app-path": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/app-path/-/app-path-3.3.0.tgz",
+      "integrity": "sha512-EAgEXkdcxH1cgEePOSsmUtw9ItPl0KTxnh/pj9ZbhvbKbij9x0oX6PWpGnorDr0DS5AosLgoa5n3T/hZmKQpYA==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/app-path/node_modules/cross-spawn": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
+      "dev": true,
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "engines": {
+        "node": ">=4.8"
+      }
+    },
+    "node_modules/app-path/node_modules/execa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^6.0.0",
+        "get-stream": "^4.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/app-path/node_modules/get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/app-path/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/app-path/node_modules/npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/app-path/node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/app-path/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/app-path/node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/app-path/node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/app-path/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/append-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz",
@@ -10743,6 +10893,113 @@
         "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
       }
     },
+    "node_modules/cypress-image-snapshot": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cypress-image-snapshot/-/cypress-image-snapshot-4.0.1.tgz",
+      "integrity": "sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "fs-extra": "^7.0.1",
+        "glob": "^7.1.3",
+        "jest-image-snapshot": "4.2.0",
+        "pkg-dir": "^3.0.0",
+        "term-img": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "cypress": "^4.5.0"
+      }
+    },
+    "node_modules/cypress-image-snapshot/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cypress-image-snapshot/node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/cypress-image-snapshot/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cypress-image-snapshot/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cypress-image-snapshot/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cypress-image-snapshot/node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cypress-image-snapshot/node_modules/pkg-dir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cypress/node_modules/@types/node": {
       "version": "18.19.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.3.tgz",
@@ -15165,6 +15422,12 @@
       "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
       "dev": true
     },
+    "node_modules/glur": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
+      "integrity": "sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA==",
+      "dev": true
+    },
     "node_modules/gonzales-pe": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
@@ -17619,6 +17882,19 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "node_modules/iterm2-version": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/iterm2-version/-/iterm2-version-4.2.0.tgz",
+      "integrity": "sha512-IoiNVk4SMPu6uTcK+1nA5QaHNok2BMDLjSl5UomrOixe5g4GkylhPwuiGdw00ysSCrXAKNMfFTu+u/Lk5f6OLQ==",
+      "dev": true,
+      "dependencies": {
+        "app-path": "^3.2.0",
+        "plist": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/jest-diff": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
@@ -17751,6 +18027,93 @@
       "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
       "dev": true
     },
+    "node_modules/jest-image-snapshot": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/jest-image-snapshot/-/jest-image-snapshot-4.2.0.tgz",
+      "integrity": "sha512-6aAqv2wtfOgxiJeBayBCqHo1zX+A12SUNNzo7rIxiXh6W6xYVu8QyHWkada8HeRi+QUTHddp0O0Xa6kmQr+xbQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.1.3",
+        "get-stdin": "^5.0.1",
+        "glur": "^1.1.2",
+        "lodash": "^4.17.4",
+        "mkdirp": "^0.5.1",
+        "pixelmatch": "^5.1.0",
+        "pngjs": "^3.4.0",
+        "rimraf": "^2.6.2",
+        "ssim.js": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 10.14.2"
+      },
+      "peerDependencies": {
+        "jest": ">=20 <=26"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/get-stdin": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
+      "integrity": "sha512-jZV7n6jGE3Gt7fgSTJoz91Ak5MuTLwMwkoYdjxuJ/AmjIsE1UC03y/IWkZCQGEvVNS9qoRNwy5BCqxImv0FVeA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/jest-validate": {
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.6.0.tgz",
@@ -21166,6 +21529,12 @@
       "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
       "dev": true
     },
+    "node_modules/nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
     "node_modules/nise": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/nise/-/nise-1.5.3.tgz",
@@ -22558,6 +22927,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pixelmatch": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz",
+      "integrity": "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==",
+      "dev": true,
+      "dependencies": {
+        "pngjs": "^6.0.0"
+      },
+      "bin": {
+        "pixelmatch": "bin/pixelmatch"
+      }
+    },
+    "node_modules/pixelmatch/node_modules/pngjs": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz",
+      "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.13.0"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -22579,6 +22969,29 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "node_modules/plist": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
+      "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
+      "dev": true,
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.8",
+        "base64-js": "^1.5.1",
+        "xmlbuilder": "^15.1.1"
+      },
+      "engines": {
+        "node": ">=10.4.0"
+      }
+    },
+    "node_modules/pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -29854,6 +30267,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssim.js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/ssim.js/-/ssim.js-3.5.0.tgz",
+      "integrity": "sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==",
+      "dev": true
+    },
     "node_modules/ssr-window": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
@@ -31252,6 +31671,46 @@
         "tcomb": "^3.0.0"
       }
     },
+    "node_modules/term-img": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/term-img/-/term-img-4.1.0.tgz",
+      "integrity": "sha512-DFpBhaF5j+2f7kheKFc1ajsAUUDGOaNPpKPtiIMxlbfud6mvfFZuWGnTRpaujUa5J7yl6cIw/h6nyr4mSsENPg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^4.1.0",
+        "iterm2-version": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/term-img/node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/term-img/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/term-size": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
@@ -35672,6 +36131,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/xmlbuilder": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
+      "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/xmlhttprequest-ssl": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
@@ -38341,6 +38809,12 @@
       "integrity": "sha512-m46q2/3TSimTBeA710v73YosbYlEHbuF1mdIg0SGFtqb/lk1bgqF05dhg0KHUyhUQV2Z9vMnSa3MCw/utYHqPg==",
       "dev": true
     },
+    "@types/cypress-image-snapshot": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/@types/cypress-image-snapshot/-/cypress-image-snapshot-3.1.9.tgz",
+      "integrity": "sha512-vcFgB8AfuM0dtupCHAGgapUbjRNWmMDtpzzpXz5gexWOHW4y/n10XRi5/y5Xpi0Ztku+X4dnRVMqQa5IDcy3Ig==",
+      "dev": true
+    },
     "@types/enzyme": {
       "version": "3.10.18",
       "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.18.tgz",
@@ -38906,6 +39380,12 @@
         "react-refresh": "^0.14.0"
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "dev": true
+    },
     "a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -39147,6 +39627,105 @@
         }
       }
     },
+    "app-path": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/app-path/-/app-path-3.3.0.tgz",
+      "integrity": "sha512-EAgEXkdcxH1cgEePOSsmUtw9ItPl0KTxnh/pj9ZbhvbKbij9x0oX6PWpGnorDr0DS5AosLgoa5n3T/hZmKQpYA==",
+      "dev": true,
+      "requires": {
+        "execa": "^1.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "6.0.6",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+          "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
+          "dev": true,
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^6.0.0",
+            "get-stream": "^4.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+          "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+          "dev": true,
+          "requires": {
+            "path-key": "^2.0.0"
+          }
+        },
+        "path-key": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+          "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+          "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^1.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+          "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+          "dev": true
+        },
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "append-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz",
@@ -44479,6 +45058,85 @@
         }
       }
     },
+    "cypress-image-snapshot": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cypress-image-snapshot/-/cypress-image-snapshot-4.0.1.tgz",
+      "integrity": "sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "fs-extra": "^7.0.1",
+        "glob": "^7.1.3",
+        "jest-image-snapshot": "4.2.0",
+        "pkg-dir": "^3.0.0",
+        "term-img": "^4.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+          "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+          "dev": true,
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        }
+      }
+    },
     "d": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
@@ -48023,6 +48681,12 @@
       "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
       "dev": true
     },
+    "glur": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
+      "integrity": "sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA==",
+      "dev": true
+    },
     "gonzales-pe": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
@@ -49895,6 +50559,16 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "iterm2-version": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/iterm2-version/-/iterm2-version-4.2.0.tgz",
+      "integrity": "sha512-IoiNVk4SMPu6uTcK+1nA5QaHNok2BMDLjSl5UomrOixe5g4GkylhPwuiGdw00ysSCrXAKNMfFTu+u/Lk5f6OLQ==",
+      "dev": true,
+      "requires": {
+        "app-path": "^3.2.0",
+        "plist": "^3.0.1"
+      }
+    },
     "jest-diff": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
@@ -49995,6 +50669,71 @@
       "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
       "dev": true
     },
+    "jest-image-snapshot": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/jest-image-snapshot/-/jest-image-snapshot-4.2.0.tgz",
+      "integrity": "sha512-6aAqv2wtfOgxiJeBayBCqHo1zX+A12SUNNzo7rIxiXh6W6xYVu8QyHWkada8HeRi+QUTHddp0O0Xa6kmQr+xbQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "get-stdin": "^5.0.1",
+        "glur": "^1.1.2",
+        "lodash": "^4.17.4",
+        "mkdirp": "^0.5.1",
+        "pixelmatch": "^5.1.0",
+        "pngjs": "^3.4.0",
+        "rimraf": "^2.6.2",
+        "ssim.js": "^3.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "get-stdin": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
+          "integrity": "sha512-jZV7n6jGE3Gt7fgSTJoz91Ak5MuTLwMwkoYdjxuJ/AmjIsE1UC03y/IWkZCQGEvVNS9qoRNwy5BCqxImv0FVeA==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+          "dev": true
+        }
+      }
+    },
     "jest-validate": {
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.6.0.tgz",
@@ -52819,6 +53558,12 @@
       "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
       "dev": true
     },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
     "nise": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/nise/-/nise-1.5.3.tgz",
@@ -53922,6 +54667,23 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pixelmatch": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz",
+      "integrity": "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==",
+      "dev": true,
+      "requires": {
+        "pngjs": "^6.0.0"
+      },
+      "dependencies": {
+        "pngjs": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz",
+          "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==",
+          "dev": true
+        }
+      }
+    },
     "pkg-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -53940,6 +54702,23 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "plist": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
+      "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
+      "dev": true,
+      "requires": {
+        "@xmldom/xmldom": "^0.8.8",
+        "base64-js": "^1.5.1",
+        "xmlbuilder": "^15.1.1"
+      }
+    },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
+      "dev": true
+    },
     "portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -59941,6 +60720,12 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssim.js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/ssim.js/-/ssim.js-3.5.0.tgz",
+      "integrity": "sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==",
+      "dev": true
+    },
     "ssr-window": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
@@ -61056,6 +61841,33 @@
         "tcomb": "^3.0.0"
       }
     },
+    "term-img": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/term-img/-/term-img-4.1.0.tgz",
+      "integrity": "sha512-DFpBhaF5j+2f7kheKFc1ajsAUUDGOaNPpKPtiIMxlbfud6mvfFZuWGnTRpaujUa5J7yl6cIw/h6nyr4mSsENPg==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.1.0",
+        "iterm2-version": "^4.1.0"
+      },
+      "dependencies": {
+        "ansi-escapes": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+          "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.21.3"
+          }
+        },
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+          "dev": true
+        }
+      }
+    },
     "term-size": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
@@ -64570,6 +65382,12 @@
       "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
       "dev": true
     },
+    "xmlbuilder": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
+      "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
+      "dev": true
+    },
     "xmlhttprequest-ssl": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
diff --git a/package.json b/package.json
index c6414b7de1..7f3fcffc52 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,7 @@
     "@types/chai": "^4.3.11",
     "@types/classnames": "^2.3.1",
     "@types/co": "^4.6.6",
+    "@types/cypress-image-snapshot": "^3.1.9",
     "@types/enzyme": "^3.10.14",
     "@types/fs-extra": "^5.1.0",
     "@types/glob": "^7.2.0",
@@ -199,6 +200,7 @@
     "css-loader": "^0.28.7",
     "css-split-webpack-plugin": "^0.2.5",
     "cypress": "^13.6.1",
+    "cypress-image-snapshot": "^4.0.1",
     "ejs": "^2.5.9",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "~1.10.0",