@pega/custom-dx-components 0.25.1 → 0.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.25.1",
+  "version": "0.25.3",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/Constellation/Field/Boolean/demo.test.tsx.mustache

@@ -0,0 +1,19 @@
+// import { expect, test } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  expect(await screen.findByText('Boolean caption')).toBeVisible();
+  expect(await screen.findByText('Boolean label')).toBeVisible();
+  expect(await screen.findByText('Test helper text')).toBeVisible();
+  const checkboxElement = screen.getByRole('checkbox');
+  expect(checkboxElement).toBeChecked();
+  fireEvent.click(checkboxElement);
+  expect(checkboxElement).not.toBeChecked();
+});

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/demo.test.tsx.mustache

@@ -0,0 +1,23 @@
+// import { expect, test } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  expect(await screen.findByText('Currency Sample')).toBeVisible();
+  expect(await screen.findByText('Currency Helper Text')).toBeVisible();
+
+  const currencyElement = screen.getByRole('textbox');
+  // for some odd reason, checking the full string of "USD 0.00" doesn't pass
+  // expect(currencyElement).toHaveValue('USD 0.00');
+  const myTextAreaVal = (screen.getByRole('textbox') as HTMLInputElement).value;
+  expect(myTextAreaVal).toContain('USD');
+  expect(myTextAreaVal).toContain('0.00');
+
+  expect(currencyElement).toHaveAttribute('placeholder', 'Currency Placeholder');
+});

package/src/tasks/create-lib/index.js

@@ -115,7 +115,7 @@ addDebugLog("createLibrary", "", "+");
     const currAnswers = await inquirer.prompt(curOrgQuestion);
     ({ currentOrOriginal } = currAnswers);
   }
-  else {
+  else if (!hasArch && currentOrOriginal === "") {
     currentOrOriginal = 'Original';
   }
 

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,37 @@
+const packagesToTranspile = [
+  '@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 +39,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",
@@ -78,9 +80,9 @@
   "author": "",
   "license": "Enter License",
   "dependencies": {
-    "@pega/cosmos-react-condition-builder": "~8.0.0-build.11.0",
-    "@pega/cosmos-react-core": "~8.0.0-build.11.0",
-    "@pega/cosmos-react-work": "~8.0.0-build.11.0",
+    "@pega/cosmos-react-condition-builder": "^8.0.0-build.13.2",
+    "@pega/cosmos-react-core": "^8.0.0-build.13.2",
+    "@pega/cosmos-react-work": "^8.0.0-build.13.2",
     "@pega/eslint-config": "^0.10.2",
     "@pega/tsconfig": "^0.15.1",
     "babel-loader": "^9.1.3",
@@ -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.1",
-    "@pega/pcore-pconnect-typedefs": "3.2.1",
+    "@pega/custom-dx-components": "~0.25.3",
+    "@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/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
   }
 }