@pega/custom-dx-components 0.25.2 → 0.25.4

package/src/tasks/init/template/babel.config.cjs

@@ -1,13 +1,22 @@
-module.exports = {
-  presets: [
+module.exports = function (api) {
+  api.cache(true);
+  const presets = [
     [
-      '@babel/preset-typescript',
+      '@babel/preset-env',
       {
-        onlyRemoveTypeImports: true,
-        allExtensions: true,
-        isTSX: true
+        targets: {
+          esmodules: true,
+          node: true
+        }
       }
-    ]
-  ],
-  sourceType: 'unambiguous'
+    ],
+    '@babel/preset-typescript',
+    ['@babel/preset-react', { runtime: 'automatic' }]
+  ];
+  const plugins = [];
+
+  return {
+    presets,
+    plugins
+  };
 };

package/src/tasks/init/template/jest.config.cjs

@@ -1,15 +1,38 @@
+const packagesToTranspile = [
+  '@pega/cosmos-react-condition-builder',
+  '@pega/cosmos-react-core',
+  '@pega/cosmos-react-social',
+  '@pega/cosmos-react-rte',
+  '@pega/cosmos-react-work',
+  'shortcuts',
+  'preact'
+];
+const packagesToTranspileStr = packagesToTranspile.map(p => `${p}`).join('|');
+
 module.exports = {
   verbose: true,
+  // preset: 'ts-jest/presets/default-esm',
+  preset: 'ts-jest',
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   transform: {
-    '^.+\\.[t|j]sx?$': 'babel-jest'
+    '^.+\\.(js|jsx|ts|tsx)?$': ['ts-jest', { useESM: true }]
   },
+  moduleNameMapper: {
+    shortcuts: '<rootDir>/node_modules/shortcuts/dist/index.js'
+  },
+  moduleDirectories: ['node_modules', 'src'],
   collectCoverage: true,
-  testPathIgnorePatterns: [],
+  testPathIgnorePatterns: ['./dist'],
   transformIgnorePatterns: [],
   modulePathIgnorePatterns: [],
   coveragePathIgnorePatterns: [],
-  collectCoverageFrom: ['./node_modules/@pega/custom-dx-components/src/*.js'],
+  setupFiles: ['./setupFiles.ts'],
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  collectCoverageFrom: [
+    './node_modules/@pega/custom-dx-components/src/*.js',
+    '!**/*.(test|stories).{ts,tsx,js,jsx}'
+  ],
   coverageThreshold: {
     global: {
       statements: 79,
@@ -17,5 +40,7 @@ module.exports = {
       functions: 81,
       lines: 80
     }
-  }
+  },
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: [`node_modules/(?!(${packagesToTranspileStr}))`]
 };

package/src/tasks/init/template/package.json.mustache

@@ -7,6 +7,8 @@
   "type": "module",
   "scripts": {
     "_***Component_and_Library_mode***": "Component and library mode commands",
+    "test": "jest",
+    "coverage": "jest --coverage --coverageReporters=html",
     "startStorybook": "storybook dev --port 6040 --quiet",
     "lint": "eslint .",
     "authenticate": "custom-dx-components authenticate",
@@ -100,17 +102,26 @@
     "ts-loader": "^9.5.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
     "@pega/configs": "^0.15.1",
-    "@pega/custom-dx-components": "~0.25.2",
+    "@pega/custom-dx-components": "~0.25.4",
     "@pega/pcore-pconnect-typedefs": "^4.1.0-alpha.1",
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
     "@storybook/addon-storysource": "^7.6.19",
+    "@storybook/manager-api": "^7.6.19",
     "@storybook/react": "^7.6.19",
     "@storybook/react-webpack5": "^7.6.19",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/theming": "^7.6.19",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^12.1.5",
     "@types/emoji-mart": "^3.0.14",
+    "@types/jest": "^29.5.14",
     "@types/lodash.get": "^4.4.9",
     "@types/react": "^17.0.80",
     "@types/react-color": "^3.0.12",
@@ -118,6 +129,7 @@
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "babel-loader": "^9.1.3",
+    "core-js": "^3.25.5",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.8.3",
@@ -128,7 +140,9 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-sonarjs": "^0.23.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "esm": "^3.2.25",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jwt-decode": "^4.0.0",
@@ -136,6 +150,7 @@
     "prettier": "3.3.3",
     "storybook": "^7.6.19",
     "stylelint": "^16.10.0",
+    "ts-jest": "^29.2.5",
     "typescript": "~5.3.3"
   }
 }

package/src/tasks/init/template/setupFiles.ts

@@ -0,0 +1,5 @@
+// setup.js (for jest)
+// import { setProjectAnnotations } from '@storybook/react';
+// import projectAnnotations from './.storybook/preview';
+
+// setProjectAnnotations(projectAnnotations);

package/src/tasks/init/template/setupTests.ts

@@ -0,0 +1,99 @@
+import { configure } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+
+// Wait time needed
+const TIMEOUT = 300000;
+
+// mocks open
+global.open = jest.fn();
+
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve(() => 'xxx'),
+    arrayBuffer: () => Promise.resolve(() => 'yyy')
+  })
+) as jest.Mock;
+
+window.URL.createObjectURL = jest.fn();
+
+// mocks ResizeObserver
+window.ResizeObserver = jest.fn(() => ({
+  observe: () => {},
+  unobserve: () => {},
+  disconnect: () => {}
+}));
+
+// mocks IntersectionObserver
+window.IntersectionObserver = jest.fn(() => ({
+  root: null,
+  rootMargin: '0',
+  thresholds: [],
+  takeRecords: () => [],
+  observe: () => {},
+  unobserve: () => {},
+  disconnect: () => {}
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }))
+});
+
+// // mocks createSVGPoint
+// Object.defineProperty(global.SVGSVGElement.prototype, 'createSVGPoint', {
+//   writable: true,
+//   value: jest.fn().mockImplementation(() => ({
+//     x: 0,
+//     y: 0,
+//     matrixTransform: jest.fn().mockImplementation(() => ({
+//       x: 0,
+//       y: 0
+//     }))
+//   }))
+// });
+
+// // mocks getBBox on SVGTextElement
+// (global.SVGElement.prototype as any).getBBox = () => {
+//   return {
+//     x: 0,
+//     y: 0,
+//     width: 30,
+//     height: 15,
+//     bottom: 0,
+//     left: 0,
+//     right: 0,
+//     top: 0,
+//     toJSON: () => ''
+//   };
+// };
+
+// // Mocks the window.matchMedia function used in useBreakpoint hook
+// Object.defineProperty(window, 'matchMedia', {
+//   writable: true,
+//   value: jest.fn().mockImplementation(query => ({
+//     matches: false,
+//     media: query,
+//     onchange: null,
+//     addListener: jest.fn(),
+//     removeListener: jest.fn(),
+//     addEventListener: jest.fn(),
+//     removeEventListener: jest.fn(),
+//     dispatchEvent: jest.fn()
+//   }))
+// });
+
+// jest.setTimeout(TIMEOUT);
+
+// // speeds up *ByRole queries a bit
+// // https://github.com/testing-library/dom-testing-library/issues/552
+// configure({ defaultHidden: true });

package/src/tasks/init/template/tsconfig.json

@@ -9,6 +9,9 @@
     "baseUrl": "./",
     "paths": {
       "@pega/pcore-pconnect-typedefs/*": ["node_modules/@pega/pcore-pconnect-typedefs/*"]
-    }
+    },
+    "esModuleInterop": true,
+    "types": ["jest", "node", "@types/jest"],
+    "verbatimModuleSyntax": false
   }
 }