@pega/custom-dx-components 0.25.3 → 0.25.4

package/src/tasks/create/templates/Constellation/Template/FORM/demo.test.tsx.mustache

@@ -0,0 +1,40 @@
+// 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('Form template')).toBeVisible();
+
+  // labels
+  expect(await screen.findByText('First Name')).toBeVisible();
+  expect(await screen.findByText('Middle Name')).toBeVisible();
+  expect(await screen.findByText('Last Name')).toBeVisible();
+  expect(await screen.findByText('Email')).toBeVisible();
+  expect(await screen.findByText('Phone Number')).toBeVisible();
+  expect(await screen.findByText('Service Date')).toBeVisible();
+
+  const inputElements = screen.getAllByTestId(':input:control');
+  expect((inputElements[0] as HTMLInputElement).value).toBe('John');
+  expect((inputElements[1] as HTMLInputElement).value).toBe('');
+  expect((inputElements[2] as HTMLInputElement).value).toBe('Doe');
+  expect((inputElements[3] as HTMLInputElement).value).toBe('John@doe.com');
+
+  const myPhone = (screen.getByTestId(':phone-input:control') as HTMLInputElement).value;
+  expect(myPhone).toContain('(639) 797-5093');
+
+  const myClearMonth = (screen.getByTestId(':date-input:control-month') as HTMLInputElement).value;
+  expect(myClearMonth).toContain('01');
+
+  const myClearDay = (screen.getByTestId(':date-input:control-day') as HTMLInputElement).value;
+  expect(myClearDay).toContain('25');
+
+  const myClearYear = (screen.getByTestId(':date-input:control-year') as HTMLInputElement).value;
+  expect(myClearYear).toContain('2023');
+
+});

package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.test.tsx.mustache

@@ -0,0 +1,56 @@
+// 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('Form Region template')).toBeVisible();
+
+  // labels
+  expect(await screen.findByText('First Name')).toBeVisible();
+  expect(await screen.findByText('Middle Name')).toBeVisible();
+  expect(await screen.findByText('Last Name')).toBeVisible();
+  expect(await screen.findByText('Email')).toBeVisible();
+  expect(await screen.findByText('Phone Number')).toBeVisible();
+  expect(await screen.findByText('Service Date')).toBeVisible();
+
+  const inputElements = screen.getAllByTestId(':input:control');
+  expect((inputElements[0] as HTMLInputElement).value).toBe('John');
+  expect((inputElements[1] as HTMLInputElement).value).toBe('');
+  expect((inputElements[2] as HTMLInputElement).value).toBe('Doe');
+  expect((inputElements[3] as HTMLInputElement).value).toBe('John@doe.com');
+
+  const myPhone = (screen.getByTestId(':phone-input:control') as HTMLInputElement).value;
+  expect(myPhone).toContain('(639) 797-5093');
+
+  const myClearMonth = (screen.getByTestId(':date-input:control-month') as HTMLInputElement).value;
+  expect(myClearMonth).toContain('01');
+
+  const myClearDay = (screen.getByTestId(':date-input:control-day') as HTMLInputElement).value;
+  expect(myClearDay).toContain('25');
+
+  const myClearYear = (screen.getByTestId(':date-input:control-year') as HTMLInputElement).value;
+  expect(myClearYear).toContain('2023');
+
+  // verify 2 columns
+  const fieldSet = screen.getByRole('group');
+
+  // <fieldset>
+  // <legend></legend>
+  // <div>
+  //  <div>
+  //    <div> 2 divs (columns) </div>
+  //  </div>
+  // </div>
+  // </fieldset>
+
+  // eslint-disable-next-line testing-library/no-node-access
+  expect(fieldSet.children[1].children[0].children[0].children).toHaveLength(2);
+
+
+});

package/src/tasks/create/templates/Constellation/Template/PAGE/demo.stories.tsx.mustache

@@ -4,6 +4,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
+import { useRef } from 'react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { pyHome1Resolved, pyHome1Raw } from './mock';
@@ -19,9 +20,11 @@ type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
   if (!window.PCore) {
+    // @ts-ignore
     window.PCore = {};
   }
 
+  // @ts-ignore
   window.PCore.getLocaleUtils = () => {
     return {
       getLocaleValue: (val: any) => {
@@ -32,6 +35,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const configProps = pyHome1Resolved.children[0].children[0].config;
 
+  const myRef = useRef(null);
+
   const props = {
     useConfigurableLayout: false,
     icon: pyHome1Raw.config.icon,
@@ -82,6 +87,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
                     }
                   };
                 }}
+                ref={myRef}
               />
             );
           }

package/src/tasks/create/templates/Constellation/Template/PAGE/demo.test.tsx.mustache

@@ -0,0 +1,24 @@
+// 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('Page Template')).toBeVisible();
+  expect(await screen.findByText('Announcements')).toBeVisible();
+  expect(await screen.findByText('Get next work')).toBeVisible();
+  expect(await screen.findByText("We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos.")).toBeVisible();
+
+
+
+
+
+
+});

package/src/tasks/create/templates/Constellation/Widget/CASE/demo.stories.tsx.mustache

@@ -15,11 +15,13 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 if (!window.PCore) {
+  // @ts-ignore
   window.PCore = {};
 }
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
+  // @ts-ignore
   window.PCore.getConstants = () => {
     return {
       CASE_INFO: {
@@ -28,6 +30,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
     };
   };
 
+  // @ts-ignore
   window.PCore.getLocaleUtils = () => {
     return {
       getLocaleValue: (value: any) => {
@@ -36,10 +39,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
     };
   };
 
+  // @ts-ignore
   window.PCore.getDataApiUtils = () => {
     return {
       getData: () => {
         return new Promise(resolve => {
+          // @ts-ignore
           resolve(historyData);
         });
       }

package/src/tasks/create/templates/Constellation/Widget/CASE/demo.test.tsx.mustache

@@ -0,0 +1,28 @@
+// import { expect, test } from '@jest/globals';
+import { fireEvent, 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}} />);
+
+  const caseHistoryArr = await screen.findAllByText('Case history');
+  expect(caseHistoryArr[0]).toBeVisible();
+  expect(caseHistoryArr[1]).toBeVisible();
+
+  expect(await screen.findByText('Date')).toBeVisible();
+  expect(await screen.findByText('Description')).toBeVisible();
+  expect(await screen.findByText('Performed by')).toBeVisible();
+
+  const peformedArr = await screen.findAllByText('User DigV2');
+  expect(peformedArr[0]).toBeVisible();
+  expect(peformedArr[1]).toBeVisible();
+
+
+});

package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.tsx.mustache

@@ -17,6 +17,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 if (!window.PCore) {
+  // @ts-ignore
   window.PCore = {};
 }
 
@@ -47,15 +48,18 @@ const worklistData = {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
+  // @ts-ignore
   window.PCore.getDataApiUtils = () => {
     return {
       getData: () => {
         return new Promise(resolve => {
+          // @ts-ignore
           resolve(worklistData);
         });
       },
       getDataAsync: () => {
         return new Promise(resolve => {
+          // @ts-ignore
           resolve(worklistData);
         });
       }

package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.test.tsx.mustache

@@ -0,0 +1,36 @@
+// import { expect, test } from '@jest/globals';
+import { fireEvent, 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('Announcements')).toBeVisible();
+  expect(await screen.findByText("See what's new")).toBeVisible();
+  expect(
+    await screen.findByText('Welcome to MediaCo Application for testing SDK frameworks.')
+  ).toBeVisible();
+
+  const workListArr = screen.getAllByText('Work list');
+  expect(workListArr[0]).toBeVisible();
+  expect(workListArr[1]).toBeInTheDocument();
+
+  expect(await screen.findByText('Case type')).toBeVisible();
+  expect(await screen.findByText('Key')).toBeVisible();
+  expect(await screen.findByText('Status')).toBeVisible();
+  expect(await screen.findByText('Stage')).toBeVisible();
+
+  expect(await screen.findByText('A-8002')).toBeVisible();
+  expect(await screen.findByText('A-7001')).toBeVisible();
+  expect(await screen.findByText('A-9000')).toBeVisible();
+
+
+
+
+});

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { withConfiguration, Table } from '@pega/cosmos-react-core';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';
@@ -42,6 +42,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     { renderer: 'stage', label: PConnect.getLocalizedValue('Stage', '', '') }
   ];
 
+  const myRef = useRef(null);
+
   // going to get data for worklist to put into a table
   // data comes from calling a PCore function to get
   // get data from a data page and a PConnect function
@@ -90,6 +92,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       details={details}
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
+      ref={myRef}
     />
     <br />
     <Table

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -15,9 +15,11 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 if (!window.PCore) {
+  // @ts-ignore
   window.PCore = {};
 }
 
+// @ts-ignore
 window.PCore.getLocaleUtils = () => {
   return {
     getLocaleValue: (value: any) => {
@@ -26,10 +28,12 @@ window.PCore.getLocaleUtils = () => {
   };
 };
 
+// @ts-ignore
 window.PCore.getUserApi = () => {
   return {
     getOperatorDetails: () => {
       return new Promise(resolve => {
+        // @ts-ignore
         resolve(operatorDetails);
       });
     }

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/demo.test.tsx.mustache

@@ -0,0 +1,29 @@
+// import { expect, test } from '@jest/globals';
+import { fireEvent, 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('Create operator')).toBeVisible();
+  // expect(await screen.findByText('last year')).toBeVisible();
+
+  const frenchBefore = screen.queryByText('french DigV2');
+  expect(frenchBefore).not.toBeInTheDocument();
+
+  // admin button
+  const adminButton = screen.getByRole('button');
+  fireEvent.click(adminButton);
+
+  const frenchArr = await screen.findAllByText('french DigV2');
+  expect(frenchArr[0]).toBeVisible();
+  expect(frenchArr[1]).toBeVisible();
+
+
+});

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -14,7 +14,9 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
+
 if (!window.PCore) {
+  // @ts-ignore
   window.PCore = {};
 }
 
@@ -35,6 +37,7 @@ const countrylistData = {
   ]
 };
 
+// @ts-ignore
 window.PCore.getDataPageUtils = () => {
   return {
     getData: () => {

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/demo.test.tsx.mustache

@@ -0,0 +1,27 @@
+// import { expect, test } from '@jest/globals';
+import { fireEvent, 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('List of countries')).toBeVisible();
+
+  expect(screen.queryByText('United States of America')).not.toBeInTheDocument();
+  expect(screen.queryByText('Canada')).not.toBeInTheDocument();
+  expect(screen.queryByText('Mexico')).not.toBeInTheDocument();
+
+  const iconButton = screen.getByRole('button');
+  fireEvent.click(iconButton);
+
+  expect(await screen.findByText('United States of America')).toBeVisible();
+  expect(await screen.findByText('Canada')).toBeVisible();
+  expect(await screen.findByText('Mexico')).toBeVisible();
+
+  const iconLink = screen.getByRole('link');
+  expect(iconLink).toHaveAttribute('href', 'about:blank');
+});

package/src/tasks/create/templates/Launchpad/Widget/CASE/demo.stories.tsx.mustache

@@ -15,9 +15,11 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 if (!window.PCore) {
+  // @ts-ignore
   window.PCore = {};
 }
 
+// @ts-ignore
 window.PCore.getConstants = () => {
   return {
     CASE_INFO: {
@@ -26,6 +28,7 @@ window.PCore.getConstants = () => {
   };
 };
 
+// @ts-ignore
 window.PCore.getLocaleUtils = () => {
   return {
     getLocaleValue: (value: any) => {
@@ -34,10 +37,12 @@ window.PCore.getLocaleUtils = () => {
   };
 };
 
+// @ts-ignore
 window.PCore.getDataApiUtils = () => {
   return {
     getData: () => {
       return new Promise(resolve => {
+        // @ts-ignore
         resolve(historyData);
       });
     }

package/src/tasks/create/templates/Launchpad/Widget/CASE/demo.test.tsx.mustache

@@ -0,0 +1,28 @@
+// import { expect, test } from '@jest/globals';
+import { fireEvent, 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}} />);
+
+  const caseHistoryArr = await screen.findAllByText('Case history');
+  expect(caseHistoryArr[0]).toBeVisible();
+  expect(caseHistoryArr[1]).toBeVisible();
+
+  expect(await screen.findByText('Date')).toBeVisible();
+  expect(await screen.findByText('Description')).toBeVisible();
+  expect(await screen.findByText('Performed by')).toBeVisible();
+
+  const peformedArr = await screen.findAllByText('User DigV2');
+  expect(peformedArr[0]).toBeVisible();
+  expect(peformedArr[1]).toBeVisible();
+
+
+});

package/src/tasks/create/templates/Launchpad/Widget/PAGE/demo.stories.tsx.mustache

@@ -16,6 +16,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 if (!window.PCore) {
+  // @ts-ignore
   window.PCore = {};
 }
 
@@ -45,15 +46,18 @@ const worklistData = {
 
 };
 
+// @ts-ignore
 window.PCore.getDataApiUtils = () => {
   return {
     getData: () => {
       return new Promise(resolve => {
+        // @ts-ignore
         resolve(worklistData);
       });
     },
     getDataAsync: () => {
       return new Promise(resolve => {
+        // @ts-ignore
         resolve(worklistData);
       });
     }

package/src/tasks/create/templates/Launchpad/Widget/PAGE/demo.test.tsx.mustache

@@ -0,0 +1,36 @@
+// import { expect, test } from '@jest/globals';
+import { fireEvent, 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('Announcements')).toBeVisible();
+  expect(await screen.findByText("See what's new")).toBeVisible();
+  expect(
+    await screen.findByText('Welcome to MediaCo Application for testing SDK frameworks.')
+  ).toBeVisible();
+
+  const workListArr = screen.getAllByText('Work list');
+  expect(workListArr[0]).toBeVisible();
+  expect(workListArr[1]).toBeInTheDocument();
+
+  expect(await screen.findByText('Case type')).toBeVisible();
+  expect(await screen.findByText('Key')).toBeVisible();
+  expect(await screen.findByText('Status')).toBeVisible();
+  expect(await screen.findByText('Stage')).toBeVisible();
+
+  expect(await screen.findByText('A-8002')).toBeVisible();
+  expect(await screen.findByText('A-7001')).toBeVisible();
+  expect(await screen.findByText('A-9000')).toBeVisible();
+
+
+
+
+});

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -15,9 +15,11 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 if (!window.PCore) {
+  // @ts-ignore
   window.PCore = {};
 }
 
+// @ts-ignore
 window.PCore.getLocaleUtils = () => {
   return {
     getLocaleValue: (value: any) => {
@@ -26,10 +28,12 @@ window.PCore.getLocaleUtils = () => {
   };
 };
 
+// @ts-ignore
 window.PCore.getUserApi = () => {
   return {
     getOperatorDetails: () => {
       return new Promise(resolve => {
+        // @ts-ignore
         resolve(operatorDetails);
       });
     }

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/demo.test.tsx.mustache

@@ -0,0 +1,19 @@
+// import { expect, test } from '@jest/globals';
+import { fireEvent, 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('Create operator')).toBeVisible();
+  expect(await screen.findByText('Created')).toBeVisible();
+
+
+
+});

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

@@ -1,4 +1,5 @@
 const packagesToTranspile = [
+  '@pega/cosmos-react-condition-builder',
   '@pega/cosmos-react-core',
   '@pega/cosmos-react-social',
   '@pega/cosmos-react-rte',
@@ -26,8 +27,8 @@ module.exports = {
   transformIgnorePatterns: [],
   modulePathIgnorePatterns: [],
   coveragePathIgnorePatterns: [],
-  // setupFiles: ['./setupFiles.ts'],
-  // setupFilesAfterEnv: ['./setupTests.ts'],
+  setupFiles: ['./setupFiles.ts'],
+  setupFilesAfterEnv: ['./setupTests.ts'],
   collectCoverageFrom: [
     './node_modules/@pega/custom-dx-components/src/*.js',
     '!**/*.(test|stories).{ts,tsx,js,jsx}'

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

@@ -106,7 +106,7 @@
     "@babel/preset-react": "^7.25.7",
     "@babel/preset-typescript": "^7.25.7",
     "@pega/configs": "^0.15.1",
-    "@pega/custom-dx-components": "~0.25.3",
+    "@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",

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);