@pega/custom-dx-components 0.25.7 → 0.25.9

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

@@ -0,0 +1,28 @@
+// 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 { BasePegaDxilMyCaseWidget } = composeStories(DemoStories);
+
+test('renders PegaDxilMyCaseWidget', async () => {
+  render(<BasePegaDxilMyCaseWidget />);
+
+  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/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCurrency/config.json

@@ -17,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_MyCurrency/demo.test.tsx

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

@@ -17,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_MyDate/demo.stories.tsx

@@ -15,7 +15,7 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyDate>;
 
 if (!window.PCore) {
-  window.PCore = {};
+  window.PCore = {} as any;
 }
 
 window.PCore.getEnvironmentInfo = () => {
@@ -26,7 +26,7 @@ window.PCore.getEnvironmentInfo = () => {
     getLocale: () => {
       return 'en-GB';
     }
-  };
+  } as any;
 };
 
 export const BasePegaDxilMyDate: Story = args => {

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

@@ -0,0 +1,52 @@
+// import { expect, test } from '@jest/globals';
+// @ts-nocheck
+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 { BasePegaDxilMyDate } = composeStories(DemoStories);
+
+test('renders PegaDxilMyDate', async () => {
+  render(<BasePegaDxilMyDate/>);
+  expect(await screen.findByText('Date Label')).toBeVisible();
+  expect(await screen.findByText('Date helper text')).toBeVisible();
+
+  // const dateElement = 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 myMonth = (screen.getByTestId(':date-input:control-month') as HTMLInputElement);
+  expect(myMonth.value).toContain('01');
+  expect(myMonth).toHaveAttribute('placeholder', 'MM');
+
+  const myDay = (screen.getByTestId(':date-input:control-day') as HTMLInputElement);
+  expect(myDay.value).toContain('31');
+  expect(myDay).toHaveAttribute('placeholder', 'DD');
+
+  const myYear = (screen.getByTestId(':date-input:control-year') as HTMLInputElement);
+  expect(myYear.value).toContain('2023');
+  expect(myYear).toHaveAttribute('placeholder', 'YYYY');
+
+  // press clear button
+  const clearX = screen.getByTestId(':date-input:clear-current-date') as HTMLButtonElement;
+  fireEvent.click(clearX);
+
+  const myClearMonth = (screen.getByTestId(':date-input:control-month') as HTMLInputElement).value;
+  expect(myClearMonth).toContain('');
+
+  const myClearDay = (screen.getByTestId(':date-input:control-day') as HTMLInputElement).value;
+  expect(myClearDay).toContain('');
+
+  const myClearYear = (screen.getByTestId(':date-input:control-year') as HTMLInputElement).value;
+  expect(myClearYear).toContain('');
+
+  // press date picker
+  const pickerButton = screen.getByTestId(':date-input:open-close-picker') as HTMLButtonElement;
+  fireEvent.click(pickerButton);
+
+  // because need to wait after button pressed before finding the data picker pop up, need to do this
+  // via "await" and "findByTestId" (as opposed to getByTestId)
+  const dataPickerPopUp = await screen.findByTestId(':date-input:clear-current-date');
+  expect(dataPickerPopUp).not.toBeNull();
+});

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

@@ -17,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_MyDateTime/demo.stories.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import PegaDxilMyDateTime from './index';
@@ -14,7 +15,7 @@ type Story = StoryObj<typeof PegaDxilMyDateTime>;
 
 
 if (!window.PCore) {
-  window.PCore = {};
+  window.PCore = {} as any;
 }
 
 window.PCore.getEnvironmentInfo = () => {
@@ -25,7 +26,7 @@ window.PCore.getEnvironmentInfo = () => {
     getLocale: () => {
       return 'en-GB';
     }
-  };
+  } as any;
 };
 
 export const BasePegaDxilMyDateTime: Story = (args: any) => {

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

@@ -0,0 +1,72 @@
+// 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 { BasePegaDxilMyDateTime } = composeStories(DemoStories);
+
+test('renders PegaDxilMyDateTime', async () => {
+  render(<BasePegaDxilMyDateTime/>);
+  expect(await screen.findByText('DateTime Label')).toBeVisible();
+  expect(await screen.findByText('DateTime helper text')).toBeVisible();
+
+  // const dateElement = 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 myMonth = (screen.getByTestId(':date-time-input:control-month') as HTMLInputElement);
+  expect(myMonth.value).toContain('01');
+  expect(myMonth).toHaveAttribute('placeholder', 'MM');
+
+  const myDay = (screen.getByTestId(':date-time-input:control-day') as HTMLInputElement);
+  expect(myDay.value).toContain('24');
+  expect(myDay).toHaveAttribute('placeholder', 'DD');
+
+  const myYear = (screen.getByTestId(':date-time-input:control-year') as HTMLInputElement);
+  expect(myYear.value).toContain('2023');
+  expect(myYear).toHaveAttribute('placeholder', 'YYYY');
+
+  const myHour = (screen.getByTestId(':date-time-input:control-hour') as HTMLInputElement);
+  expect(myHour.value).toContain('04');
+  expect(myHour).toHaveAttribute('placeholder', 'hh');
+
+  const myMinute = (screen.getByTestId(':date-time-input:control-minute') as HTMLInputElement);
+  expect(myMinute.value).toContain('45');
+  expect(myMinute).toHaveAttribute('placeholder', 'mm');
+
+  const myPeriod = (screen.getByTestId(':date-time-input:control-period') as HTMLSelectElement).value;
+  expect(myPeriod).toContain('PM');
+
+
+  // press clear button
+  const clearX = screen.getByTestId(':date-time-input:clear-current-date-and-time') as HTMLButtonElement;
+  fireEvent.click(clearX);
+
+  const myClearMonth = (screen.getByTestId(':date-time-input:control-month') as HTMLInputElement).value;
+  expect(myClearMonth).toContain('');
+
+  const myClearDay = (screen.getByTestId(':date-time-input:control-day') as HTMLInputElement).value;
+  expect(myClearDay).toContain('');
+
+  const myClearYear = (screen.getByTestId(':date-time-input:control-year') as HTMLInputElement).value;
+  expect(myClearYear).toContain('');
+
+  const myClearHour = (screen.getByTestId(':date-time-input:control-hour') as HTMLInputElement).value;
+  expect(myClearHour).toContain('');
+
+  const myClearMinute = (screen.getByTestId(':date-time-input:control-minute') as HTMLInputElement).value;
+  expect(myClearMinute).toContain('');
+
+  const myClearPeriod = (screen.getByTestId(':date-time-input:control-period') as HTMLSelectElement).value;
+  expect(myClearPeriod).toContain('AM');
+
+  // press date picker
+  const pickerButton = screen.getByTestId(':date-time-input:open-close-picker') as HTMLButtonElement;
+  fireEvent.click(pickerButton);
+
+  // because need to wait after button pressed before finding the data picker pop up, need to do this
+  // via "await" and "findByTestId" (as opposed to getByTestId)
+  const dataPickerPopUp = await screen.findByTestId(':date-time-input:picker:date-picker:');
+  expect(dataPickerPopUp).not.toBeNull();
+});

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

@@ -17,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_MyDecimal/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 { BasePegaDxilMyDecimal } = composeStories(DemoStories);
+
+test('renders PegaDxilMyDecimal', async () => {
+  render(<BasePegaDxilMyDecimal />);
+  expect(await screen.findByText('Decimal Sample')).toBeVisible();
+  expect(await screen.findByText('Decimal Helper Text')).toBeVisible();
+
+  const decimalElement = screen.getByRole('textbox');
+
+  const myTextAreaVal = (screen.getByRole('textbox') as HTMLInputElement).value;
+  expect(myTextAreaVal).toContain('');
+
+  expect(decimalElement).toHaveAttribute('placeholder', 'Decimal Placeholder');
+});

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

@@ -21,15 +21,16 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyDetails>;
 
 if (!window.PCore) {
-  window.PCore = {};
+  window.PCore = {} as any;
 }
 
+
 window.PCore.getLocaleUtils = () => {
   return {
     getLocaleValue: (value: any) => {
       return value;
     }
-  };
+  } as any;
 };
 
 window.PCore.getUserApi = () => {
@@ -39,7 +40,7 @@ window.PCore.getUserApi = () => {
         resolve(operatorDetails);
       });
     }
-  };
+  } as any;
 };
 
 const Region = (props: any) => {

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

@@ -17,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_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/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/demo.stories.tsx

@@ -15,7 +15,7 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyIconButtonUrl>;
 
 if (!window.PCore) {
-  window.PCore = {};
+  window.PCore = {} as any;
 }
 
 const statelistData = {
@@ -49,7 +49,7 @@ export const BasePegaDxilMyIconButtonUrl: Story = (args: any) => {
           resolve(statelistData);
         });
       }
-    };
+    } as any;
   };
 
   const props = {

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_MyInteger/config.json

@@ -16,6 +16,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('');
+
+});