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

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyPicklist/demo.test.tsx

@@ -0,0 +1,25 @@
+// 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 { BasePegaDxilMyPicklist } = composeStories(DemoStories);
+
+test('renders PegaDxilMyPicklist', async () => {
+  render(<BasePegaDxilMyPicklist />);
+  expect(await screen.findByText('Picklist Sample')).toBeVisible();
+  expect(await screen.findByText('Picklist Helper Text')).toBeVisible();
+
+  const picklistElement = (screen.getByTestId('picklist-12345678') as HTMLSelectElement);
+  expect(picklistElement).toHaveAttribute('label', 'Picklist Sample');
+  expect(picklistElement.value).toContain('');
+
+  fireEvent.click(picklistElement);
+
+  fireEvent.change(picklistElement, { target: { value: 'Option 1' } });
+
+  expect(picklistElement.value).toContain('Option 1');
+
+});

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyRadiobuttons/config.json

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MyRadiobuttons",
   "type": "Field",
   "subtype": "Picklist",
+  "subtypeLabel": "Radio buttons",
   "icon": "images/pz-dropdown-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/original/components/createAll/Constellation/Pega_DXIL_MyRadiobuttons/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyRadiobuttons/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 { BasePegaDxilMyRadiobuttons } = composeStories(DemoStories);
+
+test('renders PegaDxilMyRadiobuttons', async () => {
+  render(<BasePegaDxilMyRadiobuttons />);
+  expect(await screen.findByText('Picklist Sample')).toBeVisible();
+  expect(await screen.findByText('Picklist Helper Text')).toBeVisible();
+
+  const radioElement = (screen.getByTestId('picklist-12345678') as HTMLSelectElement);
+  expect(radioElement.value).toBeUndefined();
+
+  const optionRadios = screen.getAllByRole('radio');
+  const option1 = optionRadios[1] as HTMLInputElement;
+  const option2 = optionRadios[2] as HTMLInputElement;
+
+  fireEvent.click(option1);
+  expect(option1).toBeChecked();
+
+  fireEvent.click(option2);
+  expect(option2).toBeChecked();
+  expect(option1).not.toBeChecked();
+
+});

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/config.json

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MySearchbox",
   "type": "Field",
   "subtype": "Picklist",
+  "subtypeLabel": "Search box",
   "icon": "images/pz-dropdown-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/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/demo.test.tsx

@@ -0,0 +1,33 @@
+// 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 { BasePegaDxilMySearchbox } = composeStories(DemoStories);
+
+test('renders PegaDxilMySearchbox', async () => {
+  render(<BasePegaDxilMySearchbox />);
+  expect(await screen.findByText('Picklist Sample')).toBeVisible();
+  expect(await screen.findByText('Picklist Helper Text')).toBeVisible();
+
+  const searchboxElement = screen.getByTestId(
+    'picklist-12345678:combo-box:control'
+  ) as HTMLInputElement;
+  // expect(searchboxElement).toHaveAttribute('role', 'searchbox');
+  expect(searchboxElement).toHaveAttribute('role', 'combobox');
+  expect(searchboxElement).toHaveAttribute('autocomplete', 'off');
+  expect(searchboxElement).toHaveAttribute('placeholder', 'Select...');
+  expect(searchboxElement.value).toContain('');
+
+  fireEvent.click(searchboxElement);
+
+  // 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(':menu:');
+  expect(dataPickerPopUp).not.toBeNull();
+
+
+
+});

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/index.tsx

@@ -179,7 +179,9 @@ export const doSearch = (
           const selectedItem = menuHelpers.getSelected(updatedItems)[0];
           let listIndex = -1;
           const findSelectedItem = progressivePaginatedRecords.find(
+            // @ts-ignore
             (record: { id: string }, index: number) => {
+              // @ts-ignore
               if (record.id === selectedItem?.id) {
                 listIndex = index;
                 return true;
@@ -830,8 +832,10 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   const clearSelections = () => {
     // @ts-ignore
     setItems(cur =>
+      // @ts-ignore
       menuHelpers.mapTree(cur, item => {
         return {
+          // @ts-ignore
           ...item,
           selected: false
         };
@@ -1112,8 +1116,11 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
       onChange={onChangeHandler}
       onBlur={onBlurHandler}
       menu={{
+        // @ts-ignore
         items: menuHelpers.mapTree(items, (item) => ({
+          // @ts-ignore
           ...item,
+          // @ts-ignore
           testId: item.id ?? undefined,
           // @ts-ignore
           selected: item.items ? undefined : !!item.selected || item.id === selected?.id

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/localizations.json

@@ -0,0 +1,5 @@
+{
+  "fields": {
+    "No items": "No items"
+  }
+}

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/repeat-utils.ts

@@ -165,10 +165,6 @@ export function updateWithTimeZone(stateFromTable, meta) {
   return stateFromTable;
 }
 
-export function isHybrid() {
-  return typeof pega !== 'undefined' && typeof pega.desktop !== 'undefined';
-}
-
 export const isPageListInPath = (propertyName, currentClassID) => {
   if (!propertyName.includes('.')) {
     return false;

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyText/config.json

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MyText",
   "type": "Field",
   "subtype": "Text",
+  "subtypeLabel": "Text",
   "properties": [
     {
       "name": "label",

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyText/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyText/demo.test.tsx

@@ -0,0 +1,19 @@
+// 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 { BasePegaDxilMyText } = composeStories(DemoStories);
+
+test('renders PegaDxilMyText', async () => {
+  render(<BasePegaDxilMyText />);
+  expect(await screen.findByText('Text Sample')).toBeVisible();
+
+
+  const textElement = (screen.getByTestId('Text-12345678:input:control') as HTMLInputElement);
+  expect(textElement.value).toBe('');
+
+  expect(textElement).toHaveAttribute('placeholder', 'Text Placeholder');
+});

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTextInput/config.json

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MyTextInput",
   "type": "Field",
   "subtype": "Text",
+  "subtypeLabel": "Text",
   "icon": "images/pz-text-input-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/original/components/createAll/Constellation/Pega_DXIL_MyTextInput/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTextInput/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 { BasePegaDxilMyTextInput } = composeStories(DemoStories);
+
+test('renders PegaDxilMyTextInput', async () => {
+  render(<BasePegaDxilMyTextInput />);
+  expect(await screen.findByText('TextInput Sample')).toBeVisible();
+  expect(await screen.findByText('TextInput Helper Text')).toBeVisible();
+
+
+  const textInputElement = (screen.getByTestId('TextInput-12345678') as HTMLInputElement);
+  expect(textInputElement.value).toBe('');
+
+  expect(textInputElement).toHaveAttribute('placeholder', 'TextInput Placeholder');
+});

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/config.json

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MyTimeOfDay",
   "type": "Field",
   "subtype": "TimeOfDay",
+  "subtypeLabel": "TimeOfDay",
   "icon": "images/pz-date-time-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/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/demo.test.tsx

@@ -0,0 +1,33 @@
+// 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 { BasePegaDxilMyTimeOfDay } = composeStories(DemoStories);
+
+test('renders PegaDxilMyTimeOfDay', async () => {
+  render(<BasePegaDxilMyTimeOfDay/>);
+  expect(await screen.findByText('TimeOfDay Label')).toBeVisible();
+  expect(await screen.findByText('TimeOfDay 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 myHour = (screen.getByTestId(':time-input:control-hour') as HTMLInputElement);
+  expect(myHour.value).toContain('01');
+  expect(myHour).toHaveAttribute('placeholder', 'hh');
+
+  const myMinute = (screen.getByTestId(':time-input:control-minute') as HTMLInputElement);
+  expect(myMinute.value).toContain('30');
+  expect(myMinute).toHaveAttribute('placeholder', 'mm');
+
+  const myPeriod = (screen.getByTestId(':time-input:control-period') as HTMLSelectElement).value;
+  expect(myPeriod).toContain('PM');
+
+  // no clear button
+
+  // pressing time button, reveals a <div> that has no ID, so can't test for it.
+});

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/config.json

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MyTwoColumnDetails",
   "type": "Template",
   "subtype": "DETAILS",
+  "subtypeLabel": "DETAILS region",
   "icon": "TwoColumnDetails.svg",
   "properties": [
     {

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/demo.test.tsx

@@ -0,0 +1,58 @@
+// 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 { BasePegaDxilMyTwoColumnDetails } = composeStories(DemoStories);
+
+test('renders PegaDxilMyTwoColumnDetails', async () => {
+  render(<BasePegaDxilMyTwoColumnDetails />);
+  expect(await screen.findByText('Details Region 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();
+
+  // 2 columns of same
+  const SLADeadline = await screen.findAllByText('SLA Deadline');
+  expect(SLADeadline).toHaveLength(2);
+
+  const SLAGoal = await screen.findAllByText('SLA Goal');
+  expect(SLAGoal).toHaveLength(2);
+
+  const SLAStartTime = await screen.findAllByText('SLA Start Time');
+  expect(SLAStartTime).toHaveLength(2);
+
+  const Deadline = await screen.findAllByText('Deadline');
+  expect(Deadline).toHaveLength(2);
+
+  const Goal = await screen.findAllByText('Goal');
+  expect(Goal).toHaveLength(2);
+
+  const StartTime = await screen.findAllByText('Start Time');
+  expect(StartTime).toHaveLength(2);
+
+  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/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/config.json

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MyTwoColumnForm",
   "type": "Template",
   "subtype": "FORM",
+  "subtypeLabel": "FORM region",
   "icon": "TwoColumn.svg",
   "properties": [
     {

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/demo.test.tsx

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

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MyURL",
   "type": "Field",
   "subtype": "Text-URL",
+  "subtypeLabel": "URL",
   "icon": "images/pz-url-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/original/components/createAll/Constellation/Pega_DXIL_MyURL/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyURL/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 { BasePegaDxilMyUrl } = composeStories(DemoStories);
+
+test('renders PegaDxilMyUrl', async () => {
+  render(<BasePegaDxilMyUrl />);
+  expect(await screen.findByText('URL Sample')).toBeVisible();
+  expect(await screen.findByText('URL Helper Text')).toBeVisible();
+
+
+  const urlElement = (screen.getByTestId('url-12345678') as HTMLInputElement);
+  expect(urlElement.value).toBe('');
+
+  expect(urlElement).toHaveAttribute('placeholder', 'URL Placeholder');
+});