Add unit tests for all the components

.devcontainer/README.md

@@ -1,6 +1,7 @@
 # Known Issues
 
 If you encountered issue with `npm install` exited with the following
+
 ```
 [4949 ms] Start: Run in container: /bin/sh -c npm install
 npm notice
@@ -10,11 +11,14 @@ npm notice Run npm install -g [email protected] to update!
 npm notice
 [121068 ms] postCreateCommand failed with exit code 1. Skipping any further user-provided commands.
 ```
+
 you are most probably behind a proxy / corporate network. To resolve this issue:
+
 1. Open in a new browser tab `https://registry.npmjs.org/`
 2. Follow [here](https://www.howtogeek.com/292076/how-do-you-view-ssl-certificate-details-in-google-chrome/) to get Root CA and click on `Export` to extract certificate content
 3. Copy and paste the content inside `root_ca.crt` that should be created under `.devcontainer/`
 4. add the following env variable to map Root CA into the container
+
 ```json
     [...]
   "remoteEnv": {
@@ -23,9 +27,10 @@ you are most probably behind a proxy / corporate network. To resolve this issue:
   },
     [...]
 ```
-5. In VS Code `cmd/ctrl` + `shift` + `p` and select the **Dev Containers: Rebuild and Reopen in container** command to rebuild and open container.
 
+5. In VS Code `cmd/ctrl` + `shift` + `p` and select the **Dev Containers: Rebuild and Reopen in container** command to rebuild and open container.
 
 References:
+
 - [Issue with self signed certificates when installing extensions](https://github.com/microsoft/vscode-remote-release/issues/2987)
 - [Self signed SSL Certificate support for DevContainers](https://github.com/microsoft/vscode-remote-release/issues/6092)

.prettierignore

@@ -1,6 +1,8 @@
 node_modules
 .storybook/public
 .storybook/static
+storybook-static
+coverage
 .coverage
 lib
 build

jest.config.js

@@ -1,8 +1,10 @@
 const packagesToTranspile = [
   '@pega/cosmos-react-core',
   '@pega/cosmos-react-social',
+  '@pega/cosmos-react-rte',
   '@pega/cosmos-react-work',
-  'shortcuts'
+  'shortcuts',
+  'preact'
 ];
 const packagesToTranspileStr = packagesToTranspile.map(p => `${p}`).join('|');
 

setupTests.ts

@@ -5,6 +5,18 @@ 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: () => {},
@@ -23,6 +35,34 @@ window.IntersectionObserver = jest.fn(() => ({
   disconnect: () => {}
 }));
 
+// 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,

src/components/Pega_Extensions_ActionableButton/demo.test.tsx

@@ -4,7 +4,7 @@ import * as DemoStories from './demo.stories';
 
 const { Default } = composeStories(DemoStories);
 
-test('renders primary button with default args', () => {
+test('renders Actionable button with default args', () => {
   jest.spyOn(window, 'alert').mockImplementation(() => {});
   render(<Default />);
   const buttonElement = screen.getByText('Launch');

src/components/Pega_Extensions_Calendar/demo.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+test('renders Calendar component with default args', async () => {
+  render(<Default />);
+  expect(await screen.findByText('month')).toBeVisible();
+  expect(await screen.findByText('week')).toBeVisible();
+  expect(await screen.findByText('day')).toBeVisible();
+  expect(await screen.findByText('Heading')).toBeVisible();
+  const dayEl = screen.getByText('day');
+  expect(dayEl).not.toBeNull();
+  fireEvent.click(dayEl);
+  const weekEl = await screen.findByText('week');
+  expect(weekEl).not.toBeNull();
+  fireEvent.click(weekEl);
+});

src/components/Pega_Extensions_CaseReference/demo.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+test('renders Case Reference component with default args', async () => {
+  render(<Default />);
+  const linkEl = screen.getByText('C-123');
+  expect(linkEl).not.toBeNull();
+});

src/components/Pega_Extensions_ChatGenAI/demo.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+jest.setTimeout(10000);
+
+test('renders ChatGenAI widget with default args', async () => {
+  jest.spyOn(window, 'alert').mockImplementation(() => {});
+  render(<Default />);
+  const txtEl = screen.getByTestId(':text-area:control');
+  expect(txtEl).not.toBeNull();
+  const BtnEl = screen.getByLabelText('Send');
+  expect(BtnEl).not.toBeNull();
+  // eslint-disable-next-line testing-library/no-unnecessary-act
+  act(() => {
+    fireEvent.click(BtnEl);
+  });
+  expect(await screen.findByLabelText('GenAI Assistant is typing')).toBeVisible();
+  await new Promise(r => {
+    setTimeout(r, 2000);
+  });
+  expect(await screen.findByText(/Thanks for asking/i)).toBeVisible();
+});

src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import PegaExtensionsCompareTableLayout from './index';
+import PegaExtensionsCompareTableLayout, { type TableLayoutProps } from './index';
 import { CurrencyDisplay } from '@pega/cosmos-react-core';
 
 type configInfo = {
@@ -344,52 +344,71 @@ const genResponse = (displayFormat: string, selectionProperty: string) => {
 };
 
 type Story = StoryObj<typeof PegaExtensionsCompareTableLayout>;
-export const Default: Story = {
-  render: args => {
-    (window as any).PCore = {
-      getComponentsRegistry: () => {
-        return {
-          getLazyComponent: (f: string) => f
-        };
-      }
-    };
-    const selProp = args.selectionProperty === 'Select an object' ? '.prop1' : '';
-    const props = {
-      template: 'Pega_Extensions_CompareTableLayout',
-      ...args,
-      selectionProperty: selProp,
-      getPConnect: () => {
-        return {
-          getChildren: () => {
-            return genResponse(args.displayFormat, selProp).children;
-          },
-          getRawMetadata: () => {
-            return genResponse(args.displayFormat, selProp);
-          },
-          getInheritedProps: () => {
-            return genResponse(args.displayFormat, selProp).config.inheritedProps;
-          },
-          createComponent: (config: any) => {
-            return genComponent(config, args.currencyFormat);
-          },
-          setInheritedProp: () => {
-            /* nothing */
-          },
-          setValue: () => {
-            /* nothing */
-          },
-          resolveConfigProps: (f: string) => {
-            return f;
-          }
-        };
-      }
-    };
-    return <PegaExtensionsCompareTableLayout {...props}></PegaExtensionsCompareTableLayout>;
-  },
-  args: {
-    heading: 'Heading',
-    displayFormat: 'spreadsheet',
-    currencyFormat: 'standard',
-    selectionProperty: 'Select an object'
-  }
+
+const CompareTableDemo = (inputs: TableLayoutProps) => {
+  return {
+    render: (args: TableLayoutProps) => {
+      (window as any).PCore = {
+        getComponentsRegistry: () => {
+          return {
+            getLazyComponent: (f: string) => f
+          };
+        }
+      };
+      const selProp = args.selectionProperty === 'Select an object' ? '.prop1' : '';
+      const props = {
+        template: 'Pega_Extensions_CompareTableLayout',
+        ...args,
+        selectionProperty: selProp,
+        getPConnect: () => {
+          return {
+            getChildren: () => {
+              return genResponse(args.displayFormat, selProp).children;
+            },
+            getRawMetadata: () => {
+              return genResponse(args.displayFormat, selProp);
+            },
+            getInheritedProps: () => {
+              return genResponse(args.displayFormat, selProp).config.inheritedProps;
+            },
+            createComponent: (config: any) => {
+              return genComponent(config, args.currencyFormat);
+            },
+            setInheritedProp: () => {
+              /* nothing */
+            },
+            setValue: () => {
+              /* nothing */
+            },
+            resolveConfigProps: (f: string) => {
+              return f;
+            }
+          };
+        }
+      };
+      return <PegaExtensionsCompareTableLayout {...props}></PegaExtensionsCompareTableLayout>;
+    },
+    args: inputs
+  };
 };
+
+export const Default: Story = CompareTableDemo({
+  heading: 'Heading',
+  displayFormat: 'spreadsheet',
+  currencyFormat: 'standard',
+  selectionProperty: 'Select an object'
+});
+
+export const RadioButton: Story = CompareTableDemo({
+  heading: 'Radio-button',
+  displayFormat: 'radio-button-card',
+  currencyFormat: 'standard',
+  selectionProperty: 'Select an object'
+});
+
+export const FinancialReport: Story = CompareTableDemo({
+  heading: 'Financial report',
+  displayFormat: 'financialreport',
+  currencyFormat: 'standard',
+  selectionProperty: 'Select an object'
+});

src/components/Pega_Extensions_CompareTableLayout/demo.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default, FinancialReport, RadioButton } = composeStories(DemoStories);
+
+test('renders CompareTable component with default args', async () => {
+  render(<Default />);
+  expect(await screen.findByText('Heading')).toBeVisible();
+  const linkEl = screen.getByText('MacBook Air');
+  expect(linkEl).not.toBeNull();
+
+  render(<FinancialReport />);
+  expect(await screen.findByText('Financial report')).toBeVisible();
+
+  render(<RadioButton />);
+  expect(await screen.findByText('Radio-button')).toBeVisible();
+});