first pass at unit testing

.eslintignore

@@ -1,4 +1,6 @@
 webpack.config.js
+babel.config.js
+jest.config.js
 src/helpers/config_access.js
 *.html
 *.css

.github/workflows/validatepr.yaml

@@ -27,6 +27,8 @@ jobs:
         run: npx playwright install --with-deps
       - name: Build Storybook
         run: npm run build-storybook
+      - name: Run unit test
+        run: npm run test
       - uses: Eun/http-server-action@v1
         with:
           directory: ${{ github.workspace }}/storybook-static

.storybook/preview.tsx

@@ -15,8 +15,7 @@ import {
   Aries2023Theme,
   Aries2023DarkTheme,
   ThemeMachine,
-  BaseThemeMachine,
-  ShortcutManager
+  BaseThemeMachine
 } from '@pega/cosmos-react-core';
 import type { DefaultSettableTheme, DefaultThemeDefinition } from '@pega/cosmos-react-core';
 import * as MantisTheme from './MantisTheme.json';
@@ -75,17 +74,15 @@ const preview: Preview = {
           disableDefaultFontLoading
           id='Preview'
         >
-          <ShortcutManager>
-            <LiveLog maxLength={context.args.liveLogMaxLength || 50}>
-              <PopoverManager>
-                <Toaster dismissAfter={5000}>
-                  <ModalManager>
-                    <Story {...context} />
-                  </ModalManager>
-                </Toaster>
-              </PopoverManager>
-            </LiveLog>
-          </ShortcutManager>
+          <LiveLog maxLength={context.args.liveLogMaxLength || 50}>
+            <PopoverManager>
+              <Toaster dismissAfter={5000}>
+                <ModalManager>
+                  <Story {...context} />
+                </ModalManager>
+              </Toaster>
+            </PopoverManager>
+          </LiveLog>
         </Configuration>
       );
     },

babel.config.js

@@ -0,0 +1,27 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          esmodules: true,
+          node: true
+        }
+      }
+    ],
+    '@babel/preset-typescript',
+    ['@babel/preset-react', { runtime: 'automatic' }]
+  ];
+  const plugins = [
+    ['@babel/plugin-transform-modules-commonjs'],
+    ['@babel/plugin-transform-destructuring'],
+    ['@babel/plugin-transform-template-literals'],
+    ['@babel/plugin-transform-classes']
+  ];
+
+  return {
+    presets,
+    plugins
+  };
+};

jest.config.js

@@ -0,0 +1,29 @@
+const packagesToTranspile = [
+  '@pega/cosmos-react-core',
+  '@pega/cosmos-react-social',
+  '@pega/cosmos-react-work',
+  'shortcuts'
+];
+const packagesToTranspileStr = packagesToTranspile.map(p => `${p}`).join('|');
+
+module.exports = {
+  preset: 'ts-jest',
+  verbose: true,
+  moduleNameMapper: {
+    shortcuts: '<rootDir>/node_modules/shortcuts/dist/index.js'
+  },
+  collectCoverageFrom: [
+    'src/components/**/*.{ts,tsx,js,jsx}',
+    '!**/*.(test|stories).{ts,tsx,js,jsx}'
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  moduleDirectories: ['node_modules', 'src'],
+  setupFiles: ['./setupFiles.ts'],
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  transformIgnorePatterns: [`node_modules/(?!(${packagesToTranspileStr}))`],
+  testEnvironment: 'jsdom',
+  transform: {
+    '\\.[jt]sx?$': 'babel-jest',
+    '^.+\\.(ts|tsx)?$': 'ts-jest'
+  }
+};