From eee260fe8ef6462295791e5572ad5ad79bbeedba Mon Sep 17 00:00:00 2001 From: Richard Marsot Date: Mon, 19 Feb 2024 19:51:31 -0500 Subject: [PATCH] Add unit tests for all the components --- .devcontainer/README.md | 7 +- .prettierignore | 2 + jest.config.js | 4 +- setupTests.ts | 40 ++++++ .../demo.test.tsx | 2 +- .../Pega_Extensions_Calendar/demo.test.tsx | 19 +++ .../demo.test.tsx | 11 ++ .../Pega_Extensions_ChatGenAI/demo.test.tsx | 25 ++++ .../demo.stories.tsx | 117 ++++++++++-------- .../demo.test.tsx | 18 +++ .../index.tsx | 26 ++-- .../demo.stories.tsx | 68 ++++++---- .../demo.test.tsx | 31 +++++ .../index.tsx | 4 +- .../demo.test.tsx | 13 ++ .../demo.test.tsx | 13 ++ .../Pega_Extensions_GanttChart/demo.test.tsx | 13 ++ .../Pega_Extensions_GanttChart/index.tsx | 1 + .../Pega_Extensions_KanbanBoard/demo.test.tsx | 12 ++ .../demo.stories.tsx | 2 +- .../Pega_Extensions_MaskedInput/demo.test.tsx | 12 ++ .../demo.test.tsx | 16 +++ .../demo.stories.tsx | 2 +- .../demo.test.tsx | 14 +++ .../Pega_Extensions_QRCode/demo.test.tsx | 14 +++ .../Pega_Extensions_Scheduler/demo.test.tsx | 14 +++ .../demo.test.tsx | 17 +++ .../Pega_Extensions_UtilityList/demo.test.tsx | 20 +++ 28 files changed, 444 insertions(+), 93 deletions(-) create mode 100644 src/components/Pega_Extensions_Calendar/demo.test.tsx create mode 100644 src/components/Pega_Extensions_CaseReference/demo.test.tsx create mode 100644 src/components/Pega_Extensions_ChatGenAI/demo.test.tsx create mode 100644 src/components/Pega_Extensions_CompareTableLayout/demo.test.tsx create mode 100644 src/components/Pega_Extensions_DisplayAttachments/demo.test.tsx create mode 100644 src/components/Pega_Extensions_FieldGroupAsRow/demo.test.tsx create mode 100644 src/components/Pega_Extensions_FormFullWidth/demo.test.tsx create mode 100644 src/components/Pega_Extensions_GanttChart/demo.test.tsx create mode 100644 src/components/Pega_Extensions_KanbanBoard/demo.test.tsx create mode 100644 src/components/Pega_Extensions_MaskedInput/demo.test.tsx create mode 100644 src/components/Pega_Extensions_NetworkDiagram/demo.test.tsx create mode 100644 src/components/Pega_Extensions_PasswordInput/demo.test.tsx create mode 100644 src/components/Pega_Extensions_QRCode/demo.test.tsx create mode 100644 src/components/Pega_Extensions_Scheduler/demo.test.tsx create mode 100644 src/components/Pega_Extensions_SignatureCapture/demo.test.tsx create mode 100644 src/components/Pega_Extensions_UtilityList/demo.test.tsx diff --git a/.devcontainer/README.md b/.devcontainer/README.md index 31fa2d5..7164dea 100644 --- a/.devcontainer/README.md +++ b/.devcontainer/README.md @@ -1,6 +1,7 @@ # Known Issues If you encountered issue with `npm install` exited with the following + ``` [4949 ms] Start: Run in container: /bin/sh -c npm install npm notice @@ -10,11 +11,14 @@ npm notice Run npm install -g npm@10.4.0 to update! npm notice [121068 ms] postCreateCommand failed with exit code 1. Skipping any further user-provided commands. ``` + you are most probably behind a proxy / corporate network. To resolve this issue: + 1. Open in a new browser tab `https://registry.npmjs.org/` 2. Follow [here](https://www.howtogeek.com/292076/how-do-you-view-ssl-certificate-details-in-google-chrome/) to get Root CA and click on `Export` to extract certificate content 3. Copy and paste the content inside `root_ca.crt` that should be created under `.devcontainer/` 4. add the following env variable to map Root CA into the container + ```json [...] "remoteEnv": { @@ -23,9 +27,10 @@ you are most probably behind a proxy / corporate network. To resolve this issue: }, [...] ``` -5. In VS Code `cmd/ctrl` + `shift` + `p` and select the **Dev Containers: Rebuild and Reopen in container** command to rebuild and open container. +5. In VS Code `cmd/ctrl` + `shift` + `p` and select the **Dev Containers: Rebuild and Reopen in container** command to rebuild and open container. References: + - [Issue with self signed certificates when installing extensions](https://github.com/microsoft/vscode-remote-release/issues/2987) - [Self signed SSL Certificate support for DevContainers](https://github.com/microsoft/vscode-remote-release/issues/6092) diff --git a/.prettierignore b/.prettierignore index bb0cfff..cc2f73a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,8 @@ node_modules .storybook/public .storybook/static +storybook-static +coverage .coverage lib build diff --git a/jest.config.js b/jest.config.js index 90784fd..0673f3b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,8 +1,10 @@ const packagesToTranspile = [ '@pega/cosmos-react-core', '@pega/cosmos-react-social', + '@pega/cosmos-react-rte', '@pega/cosmos-react-work', - 'shortcuts' + 'shortcuts', + 'preact' ]; const packagesToTranspileStr = packagesToTranspile.map(p => `${p}`).join('|'); diff --git a/setupTests.ts b/setupTests.ts index 3cf2dd6..6c3af8a 100644 --- a/setupTests.ts +++ b/setupTests.ts @@ -5,6 +5,18 @@ import 'jest-canvas-mock'; // Wait time needed const TIMEOUT = 300000; +// mocks open +global.open = jest.fn(); + +global.fetch = jest.fn(() => + Promise.resolve({ + json: () => Promise.resolve(() => 'xxx'), + arrayBuffer: () => Promise.resolve(() => 'yyy') + }) +) as jest.Mock; + +window.URL.createObjectURL = jest.fn(); + // mocks ResizeObserver window.ResizeObserver = jest.fn(() => ({ observe: () => {}, @@ -23,6 +35,34 @@ window.IntersectionObserver = jest.fn(() => ({ disconnect: () => {} })); +// mocks createSVGPoint +Object.defineProperty(global.SVGSVGElement.prototype, 'createSVGPoint', { + writable: true, + value: jest.fn().mockImplementation(() => ({ + x: 0, + y: 0, + matrixTransform: jest.fn().mockImplementation(() => ({ + x: 0, + y: 0 + })) + })) +}); + +// mocks getBBox on SVGTextElement +(global.SVGElement.prototype as any).getBBox = () => { + return { + x: 0, + y: 0, + width: 30, + height: 15, + bottom: 0, + left: 0, + right: 0, + top: 0, + toJSON: () => '' + }; +}; + // Mocks the window.matchMedia function used in useBreakpoint hook Object.defineProperty(window, 'matchMedia', { writable: true, diff --git a/src/components/Pega_Extensions_ActionableButton/demo.test.tsx b/src/components/Pega_Extensions_ActionableButton/demo.test.tsx index 64ace57..01824f8 100644 --- a/src/components/Pega_Extensions_ActionableButton/demo.test.tsx +++ b/src/components/Pega_Extensions_ActionableButton/demo.test.tsx @@ -4,7 +4,7 @@ import * as DemoStories from './demo.stories'; const { Default } = composeStories(DemoStories); -test('renders primary button with default args', () => { +test('renders Actionable button with default args', () => { jest.spyOn(window, 'alert').mockImplementation(() => {}); render(); const buttonElement = screen.getByText('Launch'); diff --git a/src/components/Pega_Extensions_Calendar/demo.test.tsx b/src/components/Pega_Extensions_Calendar/demo.test.tsx new file mode 100644 index 0000000..30b7a7a --- /dev/null +++ b/src/components/Pega_Extensions_Calendar/demo.test.tsx @@ -0,0 +1,19 @@ +import { render, screen, fireEvent } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Calendar component with default args', async () => { + render(); + expect(await screen.findByText('month')).toBeVisible(); + expect(await screen.findByText('week')).toBeVisible(); + expect(await screen.findByText('day')).toBeVisible(); + expect(await screen.findByText('Heading')).toBeVisible(); + const dayEl = screen.getByText('day'); + expect(dayEl).not.toBeNull(); + fireEvent.click(dayEl); + const weekEl = await screen.findByText('week'); + expect(weekEl).not.toBeNull(); + fireEvent.click(weekEl); +}); diff --git a/src/components/Pega_Extensions_CaseReference/demo.test.tsx b/src/components/Pega_Extensions_CaseReference/demo.test.tsx new file mode 100644 index 0000000..e1e8256 --- /dev/null +++ b/src/components/Pega_Extensions_CaseReference/demo.test.tsx @@ -0,0 +1,11 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Case Reference component with default args', async () => { + render(); + const linkEl = screen.getByText('C-123'); + expect(linkEl).not.toBeNull(); +}); diff --git a/src/components/Pega_Extensions_ChatGenAI/demo.test.tsx b/src/components/Pega_Extensions_ChatGenAI/demo.test.tsx new file mode 100644 index 0000000..0fde509 --- /dev/null +++ b/src/components/Pega_Extensions_ChatGenAI/demo.test.tsx @@ -0,0 +1,25 @@ +import { render, screen, fireEvent, act } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +jest.setTimeout(10000); + +test('renders ChatGenAI widget with default args', async () => { + jest.spyOn(window, 'alert').mockImplementation(() => {}); + render(); + const txtEl = screen.getByTestId(':text-area:control'); + expect(txtEl).not.toBeNull(); + const BtnEl = screen.getByLabelText('Send'); + expect(BtnEl).not.toBeNull(); + // eslint-disable-next-line testing-library/no-unnecessary-act + act(() => { + fireEvent.click(BtnEl); + }); + expect(await screen.findByLabelText('GenAI Assistant is typing')).toBeVisible(); + await new Promise(r => { + setTimeout(r, 2000); + }); + expect(await screen.findByText(/Thanks for asking/i)).toBeVisible(); +}); diff --git a/src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx b/src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx index 8861e61..2ab6d92 100644 --- a/src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx +++ b/src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx @@ -1,5 +1,5 @@ import type { StoryObj } from '@storybook/react'; -import PegaExtensionsCompareTableLayout from './index'; +import PegaExtensionsCompareTableLayout, { type TableLayoutProps } from './index'; import { CurrencyDisplay } from '@pega/cosmos-react-core'; type configInfo = { @@ -344,52 +344,71 @@ const genResponse = (displayFormat: string, selectionProperty: string) => { }; type Story = StoryObj; -export const Default: Story = { - render: args => { - (window as any).PCore = { - getComponentsRegistry: () => { - return { - getLazyComponent: (f: string) => f - }; - } - }; - const selProp = args.selectionProperty === 'Select an object' ? '.prop1' : ''; - const props = { - template: 'Pega_Extensions_CompareTableLayout', - ...args, - selectionProperty: selProp, - getPConnect: () => { - return { - getChildren: () => { - return genResponse(args.displayFormat, selProp).children; - }, - getRawMetadata: () => { - return genResponse(args.displayFormat, selProp); - }, - getInheritedProps: () => { - return genResponse(args.displayFormat, selProp).config.inheritedProps; - }, - createComponent: (config: any) => { - return genComponent(config, args.currencyFormat); - }, - setInheritedProp: () => { - /* nothing */ - }, - setValue: () => { - /* nothing */ - }, - resolveConfigProps: (f: string) => { - return f; - } - }; - } - }; - return ; - }, - args: { - heading: 'Heading', - displayFormat: 'spreadsheet', - currencyFormat: 'standard', - selectionProperty: 'Select an object' - } + +const CompareTableDemo = (inputs: TableLayoutProps) => { + return { + render: (args: TableLayoutProps) => { + (window as any).PCore = { + getComponentsRegistry: () => { + return { + getLazyComponent: (f: string) => f + }; + } + }; + const selProp = args.selectionProperty === 'Select an object' ? '.prop1' : ''; + const props = { + template: 'Pega_Extensions_CompareTableLayout', + ...args, + selectionProperty: selProp, + getPConnect: () => { + return { + getChildren: () => { + return genResponse(args.displayFormat, selProp).children; + }, + getRawMetadata: () => { + return genResponse(args.displayFormat, selProp); + }, + getInheritedProps: () => { + return genResponse(args.displayFormat, selProp).config.inheritedProps; + }, + createComponent: (config: any) => { + return genComponent(config, args.currencyFormat); + }, + setInheritedProp: () => { + /* nothing */ + }, + setValue: () => { + /* nothing */ + }, + resolveConfigProps: (f: string) => { + return f; + } + }; + } + }; + return ; + }, + args: inputs + }; }; + +export const Default: Story = CompareTableDemo({ + heading: 'Heading', + displayFormat: 'spreadsheet', + currencyFormat: 'standard', + selectionProperty: 'Select an object' +}); + +export const RadioButton: Story = CompareTableDemo({ + heading: 'Radio-button', + displayFormat: 'radio-button-card', + currencyFormat: 'standard', + selectionProperty: 'Select an object' +}); + +export const FinancialReport: Story = CompareTableDemo({ + heading: 'Financial report', + displayFormat: 'financialreport', + currencyFormat: 'standard', + selectionProperty: 'Select an object' +}); diff --git a/src/components/Pega_Extensions_CompareTableLayout/demo.test.tsx b/src/components/Pega_Extensions_CompareTableLayout/demo.test.tsx new file mode 100644 index 0000000..f55c8a2 --- /dev/null +++ b/src/components/Pega_Extensions_CompareTableLayout/demo.test.tsx @@ -0,0 +1,18 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default, FinancialReport, RadioButton } = composeStories(DemoStories); + +test('renders CompareTable component with default args', async () => { + render(); + expect(await screen.findByText('Heading')).toBeVisible(); + const linkEl = screen.getByText('MacBook Air'); + expect(linkEl).not.toBeNull(); + + render(); + expect(await screen.findByText('Financial report')).toBeVisible(); + + render(); + expect(await screen.findByText('Radio-button')).toBeVisible(); +}); diff --git a/src/components/Pega_Extensions_CompareTableLayout/index.tsx b/src/components/Pega_Extensions_CompareTableLayout/index.tsx index 0b4103d..de926ac 100644 --- a/src/components/Pega_Extensions_CompareTableLayout/index.tsx +++ b/src/components/Pega_Extensions_CompareTableLayout/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/no-array-index-key */ import { useState, useEffect } from 'react'; import { FieldGroup, @@ -15,12 +16,12 @@ import StyledPegaExtensionsCompareTableLayoutWrapper from './styles'; // includes in bundle import getAllFields from './utils'; -type TableLayoutProps = { +export type TableLayoutProps = { heading: string; displayFormat: 'spreadsheet' | 'financialreport' | 'radio-button-card'; selectionProperty?: string; currencyFormat: 'standard' | 'compact' | 'parentheses'; - getPConnect: any; + getPConnect?: any; }; type FieldObj = { @@ -58,7 +59,7 @@ export default function PegaExtensionsCompareTableLayout(props: TableLayoutProps setSelection(sel); }; - const genField = (componentType: string, val: any) => { + const genField = (componentType: string, val: any, key: string) => { const field: FieldObj = { type: componentType, config: { @@ -78,7 +79,7 @@ export default function PegaExtensionsCompareTableLayout(props: TableLayoutProps field.config.notation = currencyFormat; } } - return {getPConnect().createComponent(field)}; + return {getPConnect().createComponent(field)}; }; useEffect(() => { @@ -142,7 +143,7 @@ export default function PegaExtensionsCompareTableLayout(props: TableLayoutProps name: child.label, value: child.value && child.value.length >= i - ? genField(child.componentType, child.value[i]) + ? genField(child.componentType, child.value[i], `card-${i}-${j}`) : '' }); } @@ -155,6 +156,7 @@ export default function PegaExtensionsCompareTableLayout(props: TableLayoutProps } + key={`rb-${i}`} id={val} onChange={() => selectObject(objectId, i)} checked={selection.length >= i ? selection[i] : false} @@ -187,7 +189,7 @@ export default function PegaExtensionsCompareTableLayout(props: TableLayoutProps } }; return ( - + {getPConnect().createComponent(field)} ); @@ -199,7 +201,7 @@ export default function PegaExtensionsCompareTableLayout(props: TableLayoutProps if (i > 0) { if (child.heading) { return ( - + {child.heading} ); @@ -211,12 +213,12 @@ export default function PegaExtensionsCompareTableLayout(props: TableLayoutProps metadata.config.selectionProperty ) return ( - + Selection {child.value && child.value.map((val: any, j: number) => { return ( - + ); return ( - + {child.label} {child.value && - child.value.map((val: any) => { - return genField(child.componentType, val); + child.value.map((val: any, j: number) => { + return genField(child.componentType, val, `${tableId}-row-${i}-${j}`); })} ); diff --git a/src/components/Pega_Extensions_DisplayAttachments/demo.stories.tsx b/src/components/Pega_Extensions_DisplayAttachments/demo.stories.tsx index 84202cd..abd02eb 100644 --- a/src/components/Pega_Extensions_DisplayAttachments/demo.stories.tsx +++ b/src/components/Pega_Extensions_DisplayAttachments/demo.stories.tsx @@ -1,5 +1,5 @@ import type { StoryObj } from '@storybook/react'; -import PegaExtensionsDisplayAttachments from './index'; +import PegaExtensionsDisplayAttachments, { type UtilityListProps } from './index'; export default { title: 'Widgets/Display Attachments', @@ -112,6 +112,8 @@ const setPCore = () => { return getFile('./SampleWord.docx'); } else if (ID === 'LINK-ATTACHMENT DEMOPDF') { return getFile('./SamplePDF.pdf'); + } else { + return Promise.resolve({ data: 'https://www.pega.com' }); } }, getCaseAttachments: () => { @@ -265,28 +267,44 @@ const setPCore = () => { }; type Story = StoryObj; -export const Default: Story = { - render: args => { - setPCore(); - const props = { - ...args, - getPConnect: () => { - return { - getContextName: () => '', - getValue: () => 'C-123' - }; - } - }; - return ; - }, - args: { - heading: 'Display attachments', - categories: '', - useLightBox: false, - useAttachmentEndpoint: true, - enableDownloadAll: false, - dataPage: 'D_AttachmentListRO', - displayFormat: 'list', - icon: 'clipboard' - } + +const DisplayAttachmentsDemo = (inputs: UtilityListProps) => { + return { + render: (args: UtilityListProps) => { + setPCore(); + const props = { + ...args, + getPConnect: () => { + return { + getContextName: () => '', + getValue: () => 'C-123' + }; + } + }; + return ; + }, + args: inputs + }; }; + +export const Default: Story = DisplayAttachmentsDemo({ + heading: 'Display attachments', + categories: '', + useLightBox: false, + useAttachmentEndpoint: true, + enableDownloadAll: false, + dataPage: 'D_AttachmentListRO', + displayFormat: 'list', + icon: 'clipboard' +}); + +export const Tiles: Story = DisplayAttachmentsDemo({ + heading: 'Display attachments', + categories: '', + useLightBox: true, + useAttachmentEndpoint: true, + enableDownloadAll: true, + dataPage: 'D_AttachmentListRO', + displayFormat: 'tiles', + icon: 'clipboard' +}); diff --git a/src/components/Pega_Extensions_DisplayAttachments/demo.test.tsx b/src/components/Pega_Extensions_DisplayAttachments/demo.test.tsx new file mode 100644 index 0000000..7836fec --- /dev/null +++ b/src/components/Pega_Extensions_DisplayAttachments/demo.test.tsx @@ -0,0 +1,31 @@ +import { fireEvent, render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default, Tiles } = composeStories(DemoStories); + +test('renders DisplayAttachments component with default args', async () => { + render(); + expect(await screen.findByText('Display attachments')).toBeVisible(); + expect(await screen.findByText('6')).toBeVisible(); + expect(await screen.findByText('pega.com')).toBeVisible(); + const BtnEl = await screen.findByText('View all'); + expect(BtnEl).toBeVisible(); + fireEvent.click(BtnEl); + expect(await screen.findByRole('dialog')).toBeVisible(); + const CloseEl = await screen.findByLabelText('Close modal'); + expect(CloseEl).toBeVisible(); + fireEvent.click(CloseEl); +}); + +test('renders DisplayAttachments component with tiles args', async () => { + render(); + expect(await screen.findByText('Display attachments')).toBeVisible(); + expect(await screen.findByText('pega.com')).toBeVisible(); + expect(await screen.findByText('DemoFile')).toBeVisible(); + expect(await screen.findByText('SampleWord')).toBeVisible(); + expect(await screen.findByText('demoPDF')).toBeVisible(); + const BtnEl = await screen.findByLabelText('Download all'); + expect(BtnEl).toBeVisible(); + fireEvent.click(BtnEl); +}); diff --git a/src/components/Pega_Extensions_DisplayAttachments/index.tsx b/src/components/Pega_Extensions_DisplayAttachments/index.tsx index 17b204a..01a33de 100644 --- a/src/components/Pega_Extensions_DisplayAttachments/index.tsx +++ b/src/components/Pega_Extensions_DisplayAttachments/index.tsx @@ -64,7 +64,7 @@ registerIcon( paperClipIcon ); -type UtilityListProps = { +export type UtilityListProps = { heading: string; useAttachmentEndpoint: boolean; categories?: string; @@ -73,7 +73,7 @@ type UtilityListProps = { displayFormat?: 'list' | 'tiles'; useLightBox?: boolean; enableDownloadAll?: boolean; - getPConnect: any; + getPConnect?: any; }; export default function PegaExtensionsDisplayAttachments(props: UtilityListProps) { diff --git a/src/components/Pega_Extensions_FieldGroupAsRow/demo.test.tsx b/src/components/Pega_Extensions_FieldGroupAsRow/demo.test.tsx new file mode 100644 index 0000000..b658bbc --- /dev/null +++ b/src/components/Pega_Extensions_FieldGroupAsRow/demo.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders FieldGroupAsRow component with default args', async () => { + render(); + expect(await screen.findByText('Heading')).toBeVisible(); + expect(await screen.findByText('SLA Deadline')).toBeVisible(); + expect(await screen.findByText('SLA Goal')).toBeVisible(); + expect(await screen.findByText('SLA Start Time')).toBeVisible(); +}); diff --git a/src/components/Pega_Extensions_FormFullWidth/demo.test.tsx b/src/components/Pega_Extensions_FormFullWidth/demo.test.tsx new file mode 100644 index 0000000..807e548 --- /dev/null +++ b/src/components/Pega_Extensions_FormFullWidth/demo.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders FormFullWidth component with default args', async () => { + render(); + expect(await screen.findByText('Heading')).toBeVisible(); + expect(await screen.findByText('SLA Deadline')).toBeVisible(); + expect(await screen.findByText('SLA Goal')).toBeVisible(); + expect(await screen.findByText('SLA Start Time')).toBeVisible(); +}); diff --git a/src/components/Pega_Extensions_GanttChart/demo.test.tsx b/src/components/Pega_Extensions_GanttChart/demo.test.tsx new file mode 100644 index 0000000..4a29a65 --- /dev/null +++ b/src/components/Pega_Extensions_GanttChart/demo.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Gantt Chart component with default args', async () => { + render(); + expect(await screen.findByText('Gantt chart')).toBeVisible(); + expect(await screen.findByText('Show task list')).toBeVisible(); + expect(await screen.findByText('Hourly')).toBeVisible(); + expect(await screen.findByText('Daily')).toBeVisible(); +}); diff --git a/src/components/Pega_Extensions_GanttChart/index.tsx b/src/components/Pega_Extensions_GanttChart/index.tsx index cb9e0f2..2c27ad8 100644 --- a/src/components/Pega_Extensions_GanttChart/index.tsx +++ b/src/components/Pega_Extensions_GanttChart/index.tsx @@ -327,6 +327,7 @@ export default function PegaExtensionsGanttChart(props: GanttChartProps) { {viewModeOptions.map(tab => ( { + render(); + expect(await screen.findByText('Kanban board')).toBeVisible(); + expect(await screen.findByText('Complete the assessment')).toBeVisible(); + expect(await screen.findByText('A-1001')).toBeVisible(); +}); diff --git a/src/components/Pega_Extensions_MaskedInput/demo.stories.tsx b/src/components/Pega_Extensions_MaskedInput/demo.stories.tsx index 03bcd7d..9ea04e0 100644 --- a/src/components/Pega_Extensions_MaskedInput/demo.stories.tsx +++ b/src/components/Pega_Extensions_MaskedInput/demo.stories.tsx @@ -111,7 +111,7 @@ export const Default: Story = MaskedInputDemo({ mask: '00000-0000', value: '', helperText: '#####-####', - testId: '', + testId: 'maskedinput', placeholder: '', validatemessage: '', disabled: false, diff --git a/src/components/Pega_Extensions_MaskedInput/demo.test.tsx b/src/components/Pega_Extensions_MaskedInput/demo.test.tsx new file mode 100644 index 0000000..ff5a26b --- /dev/null +++ b/src/components/Pega_Extensions_MaskedInput/demo.test.tsx @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Masked Input component with default args', async () => { + render(); + expect(await screen.findByText('Zip Code')).toBeVisible(); + expect(await screen.findByText('#####-####')).toBeVisible(); + expect(await screen.findByTestId('maskedinput')).toBeVisible(); +}); diff --git a/src/components/Pega_Extensions_NetworkDiagram/demo.test.tsx b/src/components/Pega_Extensions_NetworkDiagram/demo.test.tsx new file mode 100644 index 0000000..88c1ab2 --- /dev/null +++ b/src/components/Pega_Extensions_NetworkDiagram/demo.test.tsx @@ -0,0 +1,16 @@ +/* eslint-disable testing-library/no-container */ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Network Diagram with default args', async () => { + const { container } = render(); + expect(await screen.findByText('Heading')).toBeVisible(); + expect(await screen.findByLabelText('Reload diagram')).toBeVisible(); + // eslint-disable-next-line testing-library/no-node-access + const svgEl = container.querySelector('.react-flow__container') as SVGSVGElement; + expect(svgEl).not.toBeNull(); + expect(svgEl.textContent).toContain('New Wave Energy Solutions'); +}); diff --git a/src/components/Pega_Extensions_PasswordInput/demo.stories.tsx b/src/components/Pega_Extensions_PasswordInput/demo.stories.tsx index 07a76f6..6a66b09 100644 --- a/src/components/Pega_Extensions_PasswordInput/demo.stories.tsx +++ b/src/components/Pega_Extensions_PasswordInput/demo.stories.tsx @@ -102,7 +102,7 @@ export const Default: Story = { label: 'Password', value: 'demo', helperText: 'Enter a password with one uppercase letter and one special character', - testId: '', + testId: 'PasswordID', placeholder: '', validatemessage: '', disabled: false, diff --git a/src/components/Pega_Extensions_PasswordInput/demo.test.tsx b/src/components/Pega_Extensions_PasswordInput/demo.test.tsx new file mode 100644 index 0000000..8640289 --- /dev/null +++ b/src/components/Pega_Extensions_PasswordInput/demo.test.tsx @@ -0,0 +1,14 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Password Input component with default args', async () => { + render(); + expect(await screen.findByText('Password')).toBeVisible(); + expect( + await screen.findByText('Enter a password with one uppercase letter and one special character') + ).toBeVisible(); + expect(await screen.findByTestId('PasswordID')).toBeVisible(); +}); diff --git a/src/components/Pega_Extensions_QRCode/demo.test.tsx b/src/components/Pega_Extensions_QRCode/demo.test.tsx new file mode 100644 index 0000000..7e9b539 --- /dev/null +++ b/src/components/Pega_Extensions_QRCode/demo.test.tsx @@ -0,0 +1,14 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders QR Code with default args', async () => { + render(); + expect(await screen.findByText('QRCode')).toBeVisible(); + expect(await screen.findByText('Scan with your phone')).toBeVisible(); + const imgEl = (await screen.findByAltText('QRCode')) as HTMLImageElement; + expect(imgEl).not.toBeNull(); + expect(imgEl.src).toContain('data:image/png;base64,iVBORw0KGgoAAAANSUh'); +}); diff --git a/src/components/Pega_Extensions_Scheduler/demo.test.tsx b/src/components/Pega_Extensions_Scheduler/demo.test.tsx new file mode 100644 index 0000000..20c3baa --- /dev/null +++ b/src/components/Pega_Extensions_Scheduler/demo.test.tsx @@ -0,0 +1,14 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Scheduler component with default args', async () => { + render(); + expect(await screen.findByText('Scheduler')).toBeVisible(); + expect(await screen.findByText('My new event')).not.toBeNull(); + expect(await screen.findByText('Meeting #1 - John Doe')).not.toBeNull(); + expect(await screen.findByText('Meeting #2 - Frank Smith')).not.toBeNull(); + expect(await screen.findByText('Meeting #3 - John Doe')).not.toBeNull(); +}); diff --git a/src/components/Pega_Extensions_SignatureCapture/demo.test.tsx b/src/components/Pega_Extensions_SignatureCapture/demo.test.tsx new file mode 100644 index 0000000..7bc0565 --- /dev/null +++ b/src/components/Pega_Extensions_SignatureCapture/demo.test.tsx @@ -0,0 +1,17 @@ +import { render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Signature Capture with default args', async () => { + const { container } = render(); + expect(await screen.findByText('Signature')).toBeVisible(); + expect(await screen.findByText('Sign the document')).toBeVisible(); + expect(await screen.findByText('Accept')).toBeVisible(); + expect(await screen.findByText('Clear')).toBeVisible(); + + // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container + const canvasEl = container.querySelector('canvas'); + expect(canvasEl).not.toBeNull(); +}); diff --git a/src/components/Pega_Extensions_UtilityList/demo.test.tsx b/src/components/Pega_Extensions_UtilityList/demo.test.tsx new file mode 100644 index 0000000..4042acc --- /dev/null +++ b/src/components/Pega_Extensions_UtilityList/demo.test.tsx @@ -0,0 +1,20 @@ +import { fireEvent, render, screen } from '@testing-library/react'; +import { composeStories } from '@storybook/react'; +import * as DemoStories from './demo.stories'; + +const { Default } = composeStories(DemoStories); + +test('renders Utility List component with default args', async () => { + render(); + expect(await screen.findByText('List of objects')).toBeVisible(); + expect(await screen.findByText('6')).toBeVisible(); + expect(await screen.findByText('Appointment for John smith')).toBeVisible(); + expect(await screen.findByText('Appointment for Sue Lee')).toBeVisible(); + const BtnEl = await screen.findByText('View all'); + expect(BtnEl).toBeVisible(); + fireEvent.click(BtnEl); + expect(await screen.findByRole('dialog')).toBeVisible(); + const CloseEl = await screen.findByLabelText('Close modal'); + expect(CloseEl).toBeVisible(); + fireEvent.click(CloseEl); +});