Ag grid theme - add cypress tests (#2614)

cypress.config.ts

@@ -9,6 +9,7 @@ import { version as reactVersion } from "react";
 // @ts-ignore
 import installCoverageTask from "@cypress/code-coverage/task";
 import { cssInline } from "css-inline-plugin";
+import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
 
 let viteConfig: UserConfig = {
   plugins: [react(), tsconfigPaths(), IstanbulPlugin(), cssInline()],
@@ -59,8 +60,13 @@ export default defineConfig({
   viewportWidth: 1280,
   viewportHeight: 1024,
   video: false,
+  env: {
+    pluginVisualRegressionMaxDiffConfig: { threshold: 0.1 },
+    pluginVisualRegressionDiffConfig: { threshold: 0.1 },
+  },
   component: {
     setupNodeEvents(on, config) {
+      initPlugin(on, config);
       installCoverageTask(on, config);
       //Setting up a log task to allow logging to the console during an axe test because console.log() does not work directly in a test
       on("task", {
@@ -70,6 +76,7 @@ export default defineConfig({
           return null;
         },
       });
+
       return config;
     },
     devServer: {

cypress/support/commands.tsx

@@ -7,6 +7,7 @@ import { PerformanceResult, PerformanceTester } from "./PerformanceTester";
 import { ReactNode } from "react";
 import { SaltProvider } from "@salt-ds/core";
 import { AnnouncementListener } from "./AnnouncementListener";
+import "@frsource/cypress-plugin-visual-regression-diff";
 
 const SupportedThemeModeValues = ["light", "dark"] as const;
 type SupportedThemeMode = (typeof SupportedThemeModeValues)[number];

package.json

@@ -50,6 +50,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@faker-js/faker": "^8.0.0",
     "@fontsource/open-sans": "^4.5.13",
+    "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
     "@mswjs/data": "^0.14.0",
     "@storybook/addon-a11y": "^7.4.5",
     "@storybook/addon-actions": "^7.4.5",