@pega/custom-dx-components 0.25.2 → 0.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.25.2",
+  "version": "0.25.4",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/Constellation/Field/Boolean/demo.test.tsx.mustache

@@ -0,0 +1,19 @@
+// 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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  expect(await screen.findByText('Boolean caption')).toBeVisible();
+  expect(await screen.findByText('Boolean label')).toBeVisible();
+  expect(await screen.findByText('Test helper text')).toBeVisible();
+  const checkboxElement = screen.getByRole('checkbox');
+  expect(checkboxElement).toBeChecked();
+  fireEvent.click(checkboxElement);
+  expect(checkboxElement).not.toBeChecked();
+});

package/src/tasks/create/templates/Constellation/Field/Date/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}}/>);
+  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/src/tasks/create/templates/Constellation/Field/DateTime/demo.stories.tsx.mustache

@@ -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 {{COMPONENT_CLASS_NAME}} from './index';

package/src/tasks/create/templates/Constellation/Field/DateTime/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}}/>);
+  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/src/tasks/create/templates/Constellation/Field/Decimal/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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/src/tasks/create/templates/Constellation/Field/Decimal-Currency/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  expect(await screen.findByText('Percentage Sample')).toBeVisible();
+  expect(await screen.findByText('Percentage Helper Text')).toBeVisible();
+
+  const percentElement = (screen.getByTestId('percentage-12345678') as HTMLInputElement);
+  expect(percentElement.value).toContain('%');
+
+});

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

@@ -15,6 +15,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 if (!window.PCore) {
+  // @ts-ignore
   window.PCore = {};
 }
 
@@ -37,6 +38,7 @@ const statelistData = {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
+  // @ts-ignore
   window.PCore.getDataPageUtils = () => {
     return {
       getData: () => {

package/src/tasks/create/templates/Constellation/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('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/src/tasks/create/templates/Constellation/Field/Integer/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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/src/tasks/create/templates/Constellation/Field/Picklist/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/demo.test.tsx.mustache

@@ -0,0 +1,32 @@
+// 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('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('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/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/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('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/src/tasks/create/templates/Constellation/Field/Text/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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/src/tasks/create/templates/Constellation/Field/Text-Email/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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/src/tasks/create/templates/Constellation/Field/Text-Input/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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/src/tasks/create/templates/Constellation/Field/Text-Paragraph/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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');
+});

package/src/tasks/create/templates/Constellation/Field/Text-Phone/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  expect(await screen.findByText('Phone Sample')).toBeVisible();
+  expect(await screen.findByText('Phone Helper Text')).toBeVisible();
+
+
+  const phoneElement = (await screen.getByTestId('phone-12345678') as HTMLInputElement);
+  expect(phoneElement.value).toBe('');
+
+  expect(phoneElement).toHaveAttribute('placeholder', 'Phone Placeholder');
+
+  const countryElement = (screen.getByTestId(":phone-input:country-code") as HTMLSelectElement);
+  expect(countryElement.value).toContain("+1");
+});

package/src/tasks/create/templates/Constellation/Field/Text-URL/demo.test.tsx.mustache

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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');
+});

package/src/tasks/create/templates/Constellation/Field/TimeofDay/demo.test.tsx.mustache

@@ -0,0 +1,33 @@
+// 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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}}/>);
+  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/src/tasks/create/templates/Constellation/Template/DETAILS/demo.stories.tsx.mustache

@@ -21,9 +21,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) => {
@@ -32,6 +34,7 @@ window.PCore.getLocaleUtils = () => {
   };
 };
 
+// @ts-ignore
 window.PCore.getUserApi = () => {
   return {
     getOperatorDetails: () => {

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

@@ -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 { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  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/src/tasks/create/templates/Constellation/Template/DETAILS-region/demo.stories.tsx.mustache

@@ -20,9 +20,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) => {
@@ -31,6 +33,7 @@ window.PCore.getLocaleUtils = () => {
   };
 };
 
+// @ts-ignore
 window.PCore.getUserApi = () => {
   return {
     getOperatorDetails: () => {