Updates

lowcoder/client/config/test/jest.config.js

@@ -0,0 +1,45 @@
+import path, { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { buildVars } from "../../scripts/buildVars.js";
+
+export function currentDirName(importMetaUrl) {
+  return dirname(fileURLToPath(importMetaUrl));
+}
+
+const globals = {};
+buildVars.forEach(({ name, defaultValue }) => {
+  globals[name] = process.env[name] || defaultValue;
+});
+const currentDir = currentDirName(import.meta.url);
+
+export default {
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "react-markdown": path.resolve(currentDir, "./mocks/react-markdown.js"),
+    "\\.md\\?url$": path.resolve(currentDir, "./mocks/markdown-url-module.js"),
+    "^@lowcoder-ee(.*)$": path.resolve(
+      currentDir, "../../packages/lowcoder/src/$1"
+    ),
+    "lowcoder-sdk": path.resolve(currentDir, "../../packages/lowcoder/src/index.sdk"),
+  },
+  globals,
+  // roots: ["<rootDir>/src"],
+  modulePaths: [
+    "<rootDir>/src",
+    path.resolve(currentDir, "../../packages/lowcoder/src"),
+    path.resolve(currentDir, "../../packages/lowcoder-comps/src"),
+    path.resolve(currentDir, "../../packages/lowcoder-design/src"),
+  ],
+  setupFiles: [path.resolve(currentDir, "./jest.setup.js")],
+  setupFilesAfterEnv: [path.resolve(currentDir, "./jest.setup-after-env.js"), 'jest-canvas-mock'],
+  transform: {
+    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": path.resolve(currentDir, "./transform/babelTransform.js"),
+    "^.+\\.css$": path.resolve(currentDir, "./transform/cssTransform.js"),
+    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": path.resolve(
+      currentDir,
+      "./transform/fileTransform.js"
+    ),
+  },
+  transformIgnorePatterns: [],
+  resetMocks: true,
+};

lowcoder/client/config/test/jest.setup-after-env.js

@@ -0,0 +1,59 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";
+import { URL } from 'url';
+
+// implementation of window.resizeTo for dispatching event
+window.resizeTo = function resizeTo(width, height) {
+  Object.assign(this, {
+    innerWidth: width,
+    innerHeight: height,
+    outerWidth: width,
+    outerHeight: height,
+  }).dispatchEvent(new this.Event("resize"));
+};
+
+window.ResizeObserver = function () {
+  return {
+    observe: () => {},
+    unobserve: () => {},
+    disconnect: () => {},
+  };
+};
+
+Object.defineProperty(window, 'ImageData', { value: 'yourValue' });
+Object.defineProperty(window, 'MediaStreamTrack', { value: 'yourValue' });
+Object.defineProperty(window, 'URL', {
+  writable: true,
+  value: {
+    createObjectURL: jest.fn(),
+  }
+});
+Object.defineProperty(window, "navigator", {
+  writable: true,
+  value: {
+    mediaDevices: {
+      enumerateDevices: jest.fn(),
+    },
+    userAgent: '',
+    language: '',
+    browserLanguage: '',
+  },
+});
+
+class Worker {
+  constructor(stringUrl) {
+    this.url = stringUrl;
+    this.onmessage = () => {};
+  }
+
+  postMessage(msg) {
+    this.onmessage(msg);
+  }
+}
+
+window.Worker = Worker;
+
+global.URL = URL;

lowcoder/client/config/test/jest.setup.js

@@ -0,0 +1,3 @@
+if (typeof window !== "undefined") {
+  require("whatwg-fetch");
+}

lowcoder/client/config/test/mocks/markdown-url-module.js

@@ -0,0 +1 @@
+export default "";

lowcoder/client/config/test/mocks/react-markdown.js

@@ -0,0 +1,5 @@
+function ReactMarkdown({ children }) {
+  return <>{children}</>;
+}
+
+export default ReactMarkdown;

lowcoder/client/config/test/setup.ts

@@ -0,0 +1,18 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";
+
+// import matchMediaPolyfill from "mq-polyfill";
+
+// matchMediaPolyfill(window);
+// // implementation of window.resizeTo for dispatching event
+// window.resizeTo = function resizeTo(width, height) {
+//   Object.assign(this, {
+//     innerWidth: width,
+//     innerHeight: height,
+//     outerWidth: width,
+//     outerHeight: height,
+//   }).dispatchEvent(new this.Event("resize"));
+// };

lowcoder/client/config/test/transform/babelTransform.js

@@ -0,0 +1,21 @@
+import babelJest from "babel-jest";
+
+export default babelJest.createTransformer({
+  presets: [
+    [
+      "babel-preset-react-app",
+      {
+        runtime: "automatic",
+      },
+    ],
+    [
+      "babel-preset-vite",
+      {
+        "env": true,
+        "glob": false
+      }
+    ]
+  ],
+  babelrc: false,
+  configFile: false,
+});

lowcoder/client/config/test/transform/cssTransform.js

@@ -0,0 +1,16 @@
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+export default {
+  process() {
+    return {
+      code: "module.exports = {};",
+    };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return {
+      code: "cssTransform",
+    };
+  },
+};

lowcoder/client/config/test/transform/fileTransform.js

@@ -0,0 +1,43 @@
+import path from "node:path";
+import camelcase from "camelcase";
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+export default {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return {
+        code: `
+          const React = require('react');
+          module.exports = {
+            __esModule: true,
+            default: ${assetFilename},
+            ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+              return {
+                $$typeof: Symbol.for('react.element'),
+                type: 'svg',
+                ref: ref,
+                key: null,
+                props: Object.assign({}, props, {
+                  children: ${assetFilename}
+                })
+              };
+            }),
+          };`,
+      };
+    }
+
+    return {
+      code: `module.exports = ${assetFilename};`,
+    };
+  },
+};