feat: add jest snapshot tests

Author: hxtree

clients/design-system/.storybook/test-runner.ts

@@ -0,0 +1,32 @@
+import { TestRunnerConfig, waitForPageReady } from '@storybook/test-runner';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
+
+const config: TestRunnerConfig = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+
+  async postVisit(page, context) {
+    await waitForPageReady(page);
+
+    await page.evaluate(() => {
+      const spinners = document.querySelectorAll(
+        '.spinner-border',
+      ) as unknown as HTMLElement[];
+      spinners.forEach(spinner => {
+        spinner.style.display = 'none';
+      });
+    });
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot({
+      customSnapshotsDir,
+      customSnapshotIdentifier: context.id,
+    });
+  },
+};
+
+export default config;

clients/design-system/__snapshots__/__diff_output__/web-assets-molecules-chart--line-chart-diff.png

@@ -22,6 +22,7 @@
     "artifact": "create-artifact @galaxyops/design-system",
     "test": "jest --runInBand",
     "test:cov": "jest --coverage --runInBand",
+    "test:ui": "test-storybook --url http://127.0.0.1:3000",
     "watch": "tsc -w",
     "lint": "eslint --format visualstudio \"./src/**/*.tsx\" --fix && stylelint \"./src/**/*.scss\" --fix",
     "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\" --fix-dry-run && stylelint \"./src/**/*.scss\" ",
@@ -38,9 +39,9 @@
   },
   "peerDependencies": {
     "@emotion/react": "~11.11.1",
+    "luxon": "3.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "luxon": "3.3.0"
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -56,7 +57,6 @@
     "xss": "~1.0.14"
   },
   "devDependencies": {
-    "@types/luxon": "~3.2.0",
     "@babel/core": "7.23.5",
     "@babel/preset-env": "7.23.5",
     "@babel/preset-react": "7.23.3",
@@ -70,6 +70,7 @@
     "@mui/lab": "~5.0.0-alpha.134",
     "@mui/material": "~5.12.2",
     "@mui/system": "~5.12.1",
+    "@playwright/test": "^1.50.1",
     "@rollup/plugin-multi-entry": "~6.0.1",
     "@storybook/addon-a11y": "7.6.3",
     "@storybook/addon-actions": "7.6.3",
@@ -84,6 +85,7 @@
     "@storybook/node-logger": "7.6.3",
     "@storybook/react": "7.6.3",
     "@storybook/react-vite": "7.6.3",
+    "@storybook/test-runner": "0.16.0",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "7.6.3",
     "@testing-library/dom": "9.3.3",
@@ -93,6 +95,7 @@
     "@testing-library/user-event": "14.5.1",
     "@types/jest": "29.5.12",
     "@types/lodash": "4.17.6",
+    "@types/luxon": "~3.2.0",
     "@types/node": "20.11.25",
     "@types/react": "18.2.59",
     "@types/react-dom": "18.2.19",
@@ -114,6 +117,7 @@
     "glob": "^10.3.10",
     "identity-obj-proxy": "~3.0.0",
     "jest": "29.7.0",
+    "jest-image-snapshot": "^6.4.0",
     "react": "18.2.0",
     "react-day-picker": "8.9.1",
     "react-dom": "18.2.0",
@@ -146,4 +150,4 @@
   },
   "author": "hxtree",
   "license": "MIT"
-}
+}