@pega/custom-dx-components 24.2.16 → 25.1.10-alpha-0.1

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyDetails/demo.test.tsx

@@ -0,0 +1,47 @@
+// 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 { BasePegaDxilMyDetails } = composeStories(DemoStories);
+
+test('renders PegaDxilMyDetails', async () => {
+  render(<BasePegaDxilMyDetails />);
+  expect(await screen.findByText('Details template')).toBeVisible();
+  expect(await screen.findByText('Work Status')).toBeVisible();
+  expect(await screen.findByText('Case ID')).toBeVisible();
+  expect(await screen.findByText('Create date/time')).toBeVisible();
+  expect(await screen.findByText('Create Operator')).toBeVisible();
+
+  // expect(await screen.findByText('New')).toBeVisible();
+
+  expect(await screen.findByText('M-1002')).toBeVisible();
+  expect(await screen.findByText('December 11, 2022 at 8:06:27 PM')).toBeVisible();
+
+  expect(await screen.findByText('SLA Deadline')).toBeVisible();
+  expect(await screen.findByText('SLA Goal')).toBeVisible();
+  expect(await screen.findByText('SLA Start Time')).toBeVisible();
+
+  expect(await screen.findByText('Deadline')).toBeVisible();
+  expect(await screen.findByText('Goal')).toBeVisible();
+  expect(await screen.findByText('Start Time')).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/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyEmail/config.json

@@ -3,12 +3,13 @@
   "label": "My Email",
   "description": "My Email",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyEmail",
   "type": "Field",
   "subtype": "Text-Email",
+  "subtypeLabel": "Email",
   "icon": "images/pz-email-active.svg",
    "properties": [
     {
@@ -17,6 +18,31 @@
       "format": "TEXT",
       "required": true
     },
+    {
+      "name": "labelOption",
+      "label": "Field label",
+      "format": "SELECT",
+      "defaultValue": "custom",
+      "visibility": "@PLATFORMNAME != 'launchpad'",
+      "source": [
+        {
+          "key": "default",
+          "value": "Default"
+        },
+        {
+          "key": "custom",
+          "value": "Custom"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "label": "Custom field label",
+      "format": "VALUEINPUT",
+      "required": true,
+      "ruleType": "Paragraph",
+      "visibility": "@PLATFORMNAME != 'launchpad'"
+    },
     {
       "name": "readOnly",
       "label": "Edit mode",

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyEmail/demo.test.tsx

@@ -0,0 +1,20 @@
+// 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 { BasePegaDxilMyEmail } = composeStories(DemoStories);
+
+test('renders PegaDxilMyEmail', async () => {
+  render(<BasePegaDxilMyEmail />);
+  expect(await screen.findByText('Email Sample')).toBeVisible();
+  expect(await screen.findByText('Email Helper Text')).toBeVisible();
+
+
+  const emailElement = (screen.getByTestId('email-12345678') as HTMLInputElement);
+  expect(emailElement.value).toBe('');
+
+  expect(emailElement).toHaveAttribute('placeholder', 'Email Placeholder');
+});

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyForm/config.json

@@ -3,12 +3,13 @@
   "label": "My Form",
   "description": "My Form",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyForm",
   "type": "Template",
   "subtype": "FORM",
+  "subtypeLabel": "FORM",
   "icon": "DefaultForm.svg",
     "properties": [
     {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyForm/demo.test.tsx

@@ -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 { BasePegaDxilMyForm } = composeStories(DemoStories);
+
+test('renders PegaDxilMyForm', async () => {
+  render(<BasePegaDxilMyForm />);
+  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/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyIconButtonURL/config.json

@@ -3,12 +3,13 @@
   "label": "My Icon Button URL",
   "description": "My Icon Button URL",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyIconButtonURL",
   "type": "Field",
   "subtype": "Text-URL",
+  "subtypeLabel": "Icon Button URL",
   "icon": "images/pz-url-active.svg",
   "properties": [
     {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyIconButtonURL/demo.test.tsx

@@ -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 { BasePegaDxilMyIconButtonUrl } = composeStories(DemoStories);
+
+test('renders PegaDxilMyIconButtonUrl', async () => {
+  render(<BasePegaDxilMyIconButtonUrl />);
+  expect(await screen.findByText('State list for USA')).toBeVisible();
+
+  expect(screen.queryByText('Massachusetts')).not.toBeInTheDocument();
+  expect(screen.queryByText('Rhode Island')).not.toBeInTheDocument();
+  expect(screen.queryByText('Connecticut')).not.toBeInTheDocument();
+
+  const iconButton = screen.getByRole('button');
+  fireEvent.click(iconButton);
+
+  expect(await screen.findByText('Massachusetts')).toBeVisible();
+  expect(await screen.findByText('Rhode Island')).toBeVisible();
+  expect(await screen.findByText('Connecticut')).toBeVisible();
+
+  const iconLink = screen.getByRole('link');
+  expect(iconLink).toHaveAttribute('href', 'about:blank');
+});

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyIconButtonURL/localizations.json

@@ -0,0 +1,10 @@
+{
+  "fields": {
+    "State name" : "State name",
+    "State code" : "State code",
+    "State list for": "State list for",
+    "Click to show/hide state list": "Click to show/hide state list",
+    "State list": "State list",
+    "Loading state list": "Loading state list"
+  }
+}

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyInteger/config.json

@@ -3,12 +3,13 @@
   "label": "My Integer",
   "description": "My Integer",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyInteger",
   "type": "Field",
   "subtype": "Integer",
+  "subtypeLabel": "Integer",
   "properties": [
     {
       "name": "label",
@@ -16,6 +17,31 @@
       "format": "TEXT",
       "required": true
     },
+    {
+      "name": "labelOption",
+      "label": "Field label",
+      "format": "SELECT",
+      "defaultValue": "custom",
+      "visibility": "@PLATFORMNAME != 'launchpad'",
+      "source": [
+        {
+          "key": "default",
+          "value": "Default"
+        },
+        {
+          "key": "custom",
+          "value": "Custom"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "label": "Custom field label",
+      "format": "VALUEINPUT",
+      "required": true,
+      "ruleType": "Paragraph",
+      "visibility": "@PLATFORMNAME != 'launchpad'"
+    },
     {
       "name": "readOnly",
       "label": "Edit mode",

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyInteger/demo.test.tsx

@@ -0,0 +1,18 @@
+// 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 { BasePegaDxilMyInteger } = composeStories(DemoStories);
+
+test('renders PegaDxilMyInteger', async () => {
+  render(<BasePegaDxilMyInteger />);
+  expect(await screen.findByText('Integer Sample')).toBeVisible();
+  expect(await screen.findByText('Integer Helper Text')).toBeVisible();
+
+  const integerElement = (screen.getByTestId('integer-12345678') as HTMLInputElement);
+  expect(integerElement.value).toBe('');
+
+});

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPage/config.json

@@ -3,12 +3,13 @@
   "label": "My Page",
   "description": "My Page",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyPage",
   "type": "Template",
   "subtype": "PAGE",
+  "subtypeLabel": "PAGE",
   "icon": "OneColumnPage.svg",
   "properties": [
     {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPage/demo.stories.tsx

@@ -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 PegaDxilMyPage from './index';
 import { pyHome1Resolved, pyHome1Raw } from './mock';
@@ -32,6 +33,8 @@ export const BasePegaDxilMyPage: 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 +85,7 @@ export const BasePegaDxilMyPage: Story = (args: any) => {
                     }
                   };
                 }}
+                ref={myRef}
               />
             );
           }

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPage/demo.test.tsx

@@ -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 { BasePegaDxilMyPage } = composeStories(DemoStories);
+
+test('renders PegaDxilMyPage', async () => {
+  render(<BasePegaDxilMyPage />);
+  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/tests/assets/library/components/createAll/Constellation/{shared → Pega_DXIL_MyPageCaseWidget}/Avatar.tsx

@@ -2,18 +2,18 @@
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from './PConnProps';
+import type { PConnFieldProps } from '../shared/PConnProps';
 
 
 // interface for props
-interface PegaDxilMyDetailsAvatarProps extends PConnFieldProps {
+interface PegaDxilMyPageCaseWidgetAvatarProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   metaObj: any;
   showStatus: boolean;
 
 }
 
-function Avatar(props: PegaDxilMyDetailsAvatarProps) {
+function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
   const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
   let userName: string;
@@ -59,7 +59,6 @@ function Avatar(props: PegaDxilMyDetailsAvatarProps) {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
     }, [userIdentifier, handleUserStateChange]);
-
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/tests/assets/library/components/{create/shared → createAll/Constellation/Pega_DXIL_MyPageCaseWidget}/Operator.tsx

@@ -14,13 +14,13 @@ import {
 import { Glimpse } from '@pega/cosmos-react-work';
 import { EmailDisplay } from '@pega/cosmos-react-core';
 
-import type { PConnFieldProps } from './PConnProps';
+import type { PConnFieldProps } from '../shared/PConnProps';
 
 import Avatar from './Avatar';
 
 
 // interface for props
-interface PegaDxilMyDetailsOperatorProps extends PConnFieldProps {
+interface PegaDxilMyPageCaseWidgetOperatorProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   name: string;
   id: string;
@@ -31,7 +31,7 @@ interface PegaDxilMyDetailsOperatorProps extends PConnFieldProps {
 
 let pTarget = null;
 
-function Operator(props: PegaDxilMyDetailsOperatorProps) {
+function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
   const { id, name, label, testId, helperText, externalUser, metaObj } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/config.json

@@ -3,12 +3,13 @@
   "label": "My PageCase Widget",
   "description": "My PageCase Widget",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyPageCaseWidget",
   "type": "Widget",
   "subtype": ["PAGE","CASE"],
+  "subtypeLabel": "PAGE and CASE",
   "icon": "OneColumnPage.svg",
    "properties": [
     {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx

@@ -30,6 +30,7 @@ window.PCore.getUserApi = () => {
   return {
     getOperatorDetails: () => {
       return new Promise(resolve => {
+        // @ts-ignore
         resolve(operatorDetails);
       });
     }

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/demo.test.tsx

@@ -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 { BasePegaDxilMyPageCaseWidget } = composeStories(DemoStories);
+
+test('renders PegaDxilMyPageCaseWidget', async () => {
+  render(<BasePegaDxilMyPageCaseWidget />);
+  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/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -6,7 +6,7 @@ import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration
 import type { PConnFieldProps } from '../shared/PConnProps';
 
 // includes in bundle
-import Operator from '../shared/Operator';
+import Operator from './Operator';
 
 import StyledPegaDxilMyPageCaseWidgetWrapper from './styles';
 

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageWidget/config.json

@@ -3,12 +3,13 @@
   "label": "My Page Widget",
   "description": "My Page Widget",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyPageWidget",
   "type": "Widget",
   "subtype": "PAGE",
+  "subtypeLabel": "PAGE",
   "icon": "OneColumnPage.svg",
   "properties": [
       {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -51,11 +51,13 @@ export const BasePegaDxilMyPageWidget: Story = (args: any) => {
     return {
       getData: () => {
         return new Promise(resolve => {
+          // @ts-ignore
           resolve(worklistData);
         });
       },
       getDataAsync: () => {
         return new Promise(resolve => {
+          // @ts-ignore
           resolve(worklistData);
         });
       }

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.test.tsx

@@ -0,0 +1,36 @@
+// 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 { BasePegaDxilMyPageWidget } = composeStories(DemoStories);
+
+test('renders PegaDxilMyPageWidget', async () => {
+  render(<BasePegaDxilMyPageWidget />);
+  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/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageWidget/index.tsx

@@ -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 '../shared/PConnProps';
@@ -42,6 +42,8 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
     { 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 PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       details={details}
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
+      ref={myRef}
     />
     <br />
     <Table

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyPageWidget/localizations.json

@@ -0,0 +1,10 @@
+{
+  "fields": {
+    "Case type": "Case type",
+    "Key" : "Key",
+    "Status" : "Status",
+    "Stage" : "Stage",
+    "Work list" : "Work list",
+    "Loading Work list" : "Loading Work list"
+  }
+}

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyParagraph/config.json

@@ -3,12 +3,13 @@
   "label": "My Paragraph",
   "description": "My Paragraph",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyParagraph",
   "type": "Field",
   "subtype": "Text-Paragraph",
+  "subtypeLabel": "Paragraph",
   "icon": "images/pz-text-area-active.svg",
   "properties": [
     {
@@ -17,6 +18,31 @@
       "format": "TEXT",
       "required": true
     },
+    {
+      "name": "labelOption",
+      "label": "Field label",
+      "format": "SELECT",
+      "defaultValue": "custom",
+      "visibility": "@PLATFORMNAME != 'launchpad'",
+      "source": [
+        {
+          "key": "default",
+          "value": "Default"
+        },
+        {
+          "key": "custom",
+          "value": "Custom"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "label": "Custom field label",
+      "format": "VALUEINPUT",
+      "required": true,
+      "ruleType": "Paragraph",
+      "visibility": "@PLATFORMNAME != 'launchpad'"
+    },
     {
       "name": "readOnly",
       "label": "Edit mode",

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyParagraph/demo.test.tsx

@@ -0,0 +1,21 @@
+// 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 { BasePegaDxilMyParagraph } = composeStories(DemoStories);
+
+test('renders PegaDxilMyParagraph', async () => {
+  render(<BasePegaDxilMyParagraph />);
+  expect(await screen.findByText('Paragraph Sample')).toBeVisible();
+  expect(await screen.findByText('Paragraph Helper Text')).toBeVisible();
+
+
+  const paragraphElement = (screen.getByTestId('paragraph-12345678') as HTMLTextAreaElement);
+  expect(paragraphElement.value).toBe('');
+
+
+  expect(paragraphElement).toHaveAttribute('placeholder', 'Paragraph Placeholder');
+});