@patternfly/chatbot 2.2.0-prerelease.15 → 2.2.0-prerelease.17

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -2,25 +2,128 @@ import React from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
+import { Form, FormGroup, Radio } from '@patternfly/react-core';
 
 export const UserMessageExample: React.FunctionComponent = () => {
-  const markdown = `A paragraph with *emphasis* and **strong importance**.
+  const [variant, setVariant] = React.useState('code');
 
-> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+  /* eslint-disable indent */
+  const renderContent = () => {
+    switch (variant) {
+      case 'code':
+        return code;
+      case 'inlineCode':
+        return inlineCode;
+      case 'heading':
+        return heading;
+      case 'emphasis':
+        return emphasis;
+      case 'blockQuotes':
+        return blockQuotes;
+      case 'orderedList':
+        return orderedList;
+      case 'unorderedList':
+        return unorderedList;
+      case 'moreComplexList':
+        return moreComplexList;
+      case 'link':
+        return link;
+      default:
+        return;
+    }
+  };
+  /* eslint-enable indent */
 
-Here is an inline code - \`() => void\`
+  const code = `
+Here is some YAML code:
 
-Here is an ordered list: 
+~~~yaml
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+~~~
 
-1. Item 1
-2. Item 3
-3. Item 4
+Here is some JavaScript code:
 
-Here is an unordered list:
+~~~js
+import React from 'react';
+
+const MessageLoading = () => (
+  <div className="pf-chatbot__message-loading">
+    <span className="pf-chatbot__message-loading-dots">
+      <span className="pf-v6-screen-reader">Loading message</span>
+    </span>
+  </div>
+);
+
+export default MessageLoading;
+
+~~~
+`;
+
+  const heading = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+
+  const emphasis = `
+**Bold text, formatted with double asterisks**
+
+__Bold text, formatted with double underscores__
+
+*Italic text, formatted with single asterisks*
+
+_Italic text, formatted with single underscores_
+
+~~Strikethrough~~
+`;
+
+  const blockQuotes = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+
+  const orderedList = `
+  Here is an ordered list:
+
+  1. Item 1
+  2. Item 2
+  3. Item 3`;
+
+  const unorderedList = `
+  Here is an unordered list:
+
+  * Item 1
+  * Item 2
+  * Item 3`;
+
+  const moreComplexList = `You may be wondering whether you can display more complex lists with formatting. In response to your question, I will explain how to spread butter on toast.
+
+1. **Using a \`toaster\`:**
+
+  - Place \`bread\` in a \`toaster\`
+  - Once \`bread\` is lightly browned, remove from \`toaster\`
+
+2. **Using a \`knife\`:**
+
+  Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appétit!
+`;
+
+  const link = `A paragraph with a URL: https://reactjs.org.`;
 
-* Item 1
-* Item 2
-* Item 3`;
+  const inlineCode = `Here is an inline code - \`() => void\``;
 
   return (
     <>
@@ -31,7 +134,6 @@ Here is an unordered list:
         timestamp="1 hour ago"
         avatar={userAvatar}
       />
-      <Message name="User" role="user" content={markdown} avatar={userAvatar} />
       <Message
         name="User"
         role="user"
@@ -39,6 +141,74 @@ Here is an unordered list:
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />
+      <Form>
+        <FormGroup role="radiogroup" isInline fieldId="user-message-type" label="Message content type">
+          <Radio
+            isChecked={variant === 'code'}
+            onChange={() => setVariant('code')}
+            name="user-message-type"
+            label="Code"
+            id="user-code"
+          />
+          <Radio
+            isChecked={variant === 'inlineCode'}
+            onChange={() => setVariant('inlineCode')}
+            name="user-message-type"
+            label="Inline code"
+            id="user-inline-code"
+          />
+          <Radio
+            isChecked={variant === 'heading'}
+            onChange={() => setVariant('heading')}
+            name="user-message-type"
+            label="Heading"
+            id="user-heading"
+          />
+          <Radio
+            isChecked={variant === 'blockQuotes'}
+            onChange={() => setVariant('blockQuotes')}
+            name="user-message-type"
+            label="Block quote"
+            id="user-block-quotes"
+          />
+          <Radio
+            isChecked={variant === 'emphasis'}
+            onChange={() => setVariant('emphasis')}
+            name="user-message-type"
+            label="Emphasis"
+            id="user-emphasis"
+          />
+          <Radio
+            isChecked={variant === 'link'}
+            onChange={() => setVariant('link')}
+            name="user-message-type"
+            label="Link"
+            id="user-link"
+          />
+          <Radio
+            isChecked={variant === 'unorderedList'}
+            onChange={() => setVariant('unorderedList')}
+            name="user-message-type"
+            label="Unordered list"
+            id="user-unordered-list"
+          />
+          <Radio
+            isChecked={variant === 'orderedList'}
+            onChange={() => setVariant('orderedList')}
+            name="user-message-type"
+            label="Ordered list"
+            id="user-ordered-list"
+          />
+          <Radio
+            isChecked={variant === 'moreComplexList'}
+            onChange={() => setVariant('moreComplexList')}
+            name="user-message-type"
+            label="More complex list"
+            id="user-more-complex-list"
+          />
+        </FormGroup>
+      </Form>
+      <Message name="User" role="user" content={renderContent()} avatar={userAvatar} />
     </>
   );
 };

package/src/AttachmentEdit/AttachmentEdit.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import AttachmentEdit, { AttachmentEditProps } from './AttachmentEdit';
+
+describe('AttachmentEdit', () => {
+  it('should open AttachmentEdit modal', () => {
+    const props: AttachmentEditProps = {
+      code: 'code',
+      fileName: 'fileName',
+      onCancel: jest.fn(),
+      onSave: jest.fn(),
+      isModalOpen: true,
+      handleModalToggle: jest.fn()
+    };
+
+    render(<AttachmentEdit {...props} />);
+    expect(screen.getByText('Edit attachment')).toBeTruthy();
+  });
+
+  it('should call onSave handler when the save button is clicked', () => {
+    const onSaveHandler = jest.fn();
+    const props: AttachmentEditProps = {
+      code: 'code',
+      fileName: 'fileName',
+      onCancel: jest.fn(),
+      onSave: onSaveHandler,
+      isModalOpen: true,
+      handleModalToggle: jest.fn()
+    };
+
+    render(<AttachmentEdit {...props} />);
+
+    // Click on save button
+    fireEvent.click(screen.getByText('Save'));
+    expect(onSaveHandler).toHaveBeenCalledWith(expect.any(Object), 'code');
+  });
+
+  it('should call cancel handler when the cancel button is clicked', () => {
+    const onCancelHandler = jest.fn();
+    const props: AttachmentEditProps = {
+      code: 'code',
+      fileName: 'fileName',
+      onCancel: onCancelHandler,
+      onSave: jest.fn(),
+      isModalOpen: true,
+      handleModalToggle: jest.fn()
+    };
+
+    render(<AttachmentEdit {...props} />);
+
+    // Click on cancel button
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(onCancelHandler).toHaveBeenCalled();
+  });
+});

package/src/Chatbot/Chatbot.test.tsx

@@ -0,0 +1,31 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Chatbot from './Chatbot';
+
+describe('Chatbot', () => {
+  it('should render Chatbot with default display mode', () => {
+    render(<Chatbot>Chatbot Content</Chatbot>);
+    expect(screen.getByText('Chatbot Content')).toBeTruthy();
+  });
+
+  it('should render Chatbot with custom ariaLabel', () => {
+    render(<Chatbot ariaLabel="Chatbot">Chatbot Content</Chatbot>);
+    expect(screen.getByLabelText('Chatbot')).toBeTruthy();
+  });
+
+  it('should render Chatbot with custom className', () => {
+    const { container } = render(
+      <Chatbot ariaLabel="Chatbot" className="custom-class">
+        Chatbot Content
+      </Chatbot>
+    );
+    const chatbotElement = container.querySelector('.custom-class');
+    expect(chatbotElement).toBeInTheDocument();
+  });
+
+  it('should not render Chatbot', () => {
+    render(<Chatbot isVisible={false}>Chatbot Content</Chatbot>);
+    expect(screen.queryByLabelText('Chatbot')).toBeFalsy();
+  });
+});

package/src/ChatbotAlert/ChatbotAlert.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import ChatbotAlert from './ChatbotAlert';
+
+describe('ChatbotAlert', () => {
+  it('should render ChatbotAlert with default variant', () => {
+    render(<ChatbotAlert title="Chatbot Alert" />);
+    expect(screen.getByText('Chatbot Alert')).toBeTruthy();
+  });
+
+  it('should render ChatbotAlert with children', () => {
+    render(<ChatbotAlert title="Chatbot Alert">Chatbot Alert Content</ChatbotAlert>);
+    expect(screen.getByText('Chatbot Alert Content')).toBeTruthy();
+  });
+
+  it('should call onClose handler when onClose button is clicked', () => {
+    const onCloseHandler = jest.fn();
+    render(
+      <ChatbotAlert title="Chatbot Alert" onClose={onCloseHandler}>
+        Chatbot Alert Content
+      </ChatbotAlert>
+    );
+
+    expect(screen.getByText('Chatbot Alert')).toBeTruthy();
+    expect(screen.getByText('Chatbot Alert Content')).toBeTruthy();
+
+    // click on the close button
+    fireEvent.click(screen.getByRole('button'));
+    expect(onCloseHandler).toHaveBeenCalled();
+  });
+});

package/src/ChatbotContent/ChatbotContent.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotContent from './ChatbotContent';
+
+describe('ChatbotContent', () => {
+  it('should render ChatbotContent with children', () => {
+    render(<ChatbotContent>Chatbot Content</ChatbotContent>);
+    expect(screen.getByText('Chatbot Content')).toBeTruthy();
+  });
+
+  it('should render ChatbotContent with custom classname', () => {
+    const { container } = render(<ChatbotContent className="custom-class">Chatbot Content</ChatbotContent>);
+    expect(container.querySelector('.custom-class')).toBeTruthy();
+  });
+});

package/src/ChatbotFooter/ChatbotFooter.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotFooter from './ChatbotFooter';
+
+describe('ChatbotFooter', () => {
+  it('should render ChatbotFooter with children', () => {
+    render(<ChatbotFooter>Chatbot Content</ChatbotFooter>);
+    expect(screen.getByText('Chatbot Content')).toBeTruthy();
+  });
+
+  it('should render ChatbotFooter with custom classname', () => {
+    const { container } = render(<ChatbotFooter className="custom-class">Chatbot Content</ChatbotFooter>);
+    expect(container.querySelector('.custom-class')).toBeTruthy();
+  });
+});

package/src/ChatbotFooter/ChatbotFooternote.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import ChatbotFootnote from './ChatbotFootnote';
+
+describe('ChatbotFooternote', () => {
+  const onClick = jest.fn();
+  const popoverProps = {
+    title: 'Verify accuracy',
+    description: 'description',
+    bannerImage: {
+      src: 'src',
+      alt: 'alt'
+    },
+    cta: {
+      label: 'Got it',
+      onClick
+    },
+    link: {
+      label: 'label',
+      url: 'url'
+    }
+  };
+
+  it('should render ChatbotFooternote', () => {
+    render(<ChatbotFootnote label="Chatbot footer" />);
+    expect(screen.getByText('Chatbot footer')).toBeTruthy();
+  });
+
+  it('should render ChatbotFooternote with popover', async () => {
+    render(<ChatbotFootnote label="Chatbot footer" popover={popoverProps} />);
+
+    // click on the footer button
+    act(() => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    await waitFor(() => {
+      // Check if the popover is visible and click on the cta button
+      screen.getByLabelText('More information');
+      screen.getByText('Verify accuracy');
+      fireEvent.click(screen.getByRole('button', { name: 'Got it' }));
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+  it('should call onClick handler when popover cta button is clicked', async () => {
+    render(<ChatbotFootnote label="Chatbot footer" popover={popoverProps} />);
+
+    // click on the footer button
+    act(() => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    await waitFor(() => {
+      // Check if the popover is visible and click on the cta button
+      screen.getByLabelText('More information');
+      screen.getByText('Verify accuracy');
+      fireEvent.click(screen.getByRole('button', { name: 'Got it' }));
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+  it('should close the popover when escape is pressed', async () => {
+    render(<ChatbotFootnote label="Chatbot footer" popover={popoverProps} />);
+
+    // click on the footer button
+    act(() => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    await waitFor(() => {
+      // Check if the popover is visible and click on the cta button
+      screen.getByLabelText('More information');
+      screen.getByText('Verify accuracy');
+    });
+
+    act(() => {
+      // trigger escape to close the popover
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Verify accuracy')).toBeFalsy();
+    });
+  });
+});

package/src/ChatbotHeader/ChatbotHeader.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeader from './ChatbotHeader';
+
+describe('ChatbotHeader', () => {
+  it('should render ChatbotHeader with children', () => {
+    render(<ChatbotHeader>Chatbot Header</ChatbotHeader>);
+    expect(screen.getByText('Chatbot Header')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeader with custom classname', () => {
+    const { container } = render(<ChatbotHeader className="custom-header-class">Chatbot Content</ChatbotHeader>);
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderActions from './ChatbotHeaderActions';
+
+describe('ChatbotHeaderActions', () => {
+  it('should render ChatbotHeaderActions with children', () => {
+    render(<ChatbotHeaderActions>Chatbot Header</ChatbotHeaderActions>);
+    expect(screen.getByText('Chatbot Header')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderActions with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderActions className="custom-header-action-class">Chatbot Content</ChatbotHeaderActions>
+    );
+    expect(container.querySelector('.custom-header-action-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+
+describe('ChatbotHeaderCloseButton', () => {
+  it('should render ChatbotHeaderCloseButton', () => {
+    const { container } = render(
+      <ChatbotHeaderCloseButton className="custom-header-close-button" onClick={jest.fn()} />
+    );
+
+    expect(container.querySelector('.custom-header-close-button')).toBeTruthy();
+  });
+
+  it('should call onClick handler when close button is pressed', () => {
+    const onClick = jest.fn();
+    render(<ChatbotHeaderCloseButton className="custom-header-close-button" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderMain from './ChatbotHeaderMain';
+
+describe('ChatbotHeaderMain', () => {
+  it('should render ChatbotHeaderMain with children', () => {
+    render(<ChatbotHeaderMain>Chatbot Header Main</ChatbotHeaderMain>);
+    expect(screen.getByText('Chatbot Header Main')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderMain with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderMain className="custom-header-class">Chatbot Content</ChatbotHeaderMain>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderMenu } from './ChatbotHeaderMenu';
+
+describe('ChatbotHeaderMenu', () => {
+  it('should render ChatbotHeaderMenu with custom class', () => {
+    const { container } = render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={jest.fn()} />);
+
+    expect(container.querySelector('.custom-header-menu')).toBeTruthy();
+  });
+
+  it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
+    const onMenuToggle = jest.fn();
+    render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+
+    expect(onMenuToggle).toHaveBeenCalled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+
+describe('ChatbotHeaderOptionsDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderOptionsDropdown', () => {
+    render(<ChatbotHeaderOptionsDropdown>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
+
+    expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderOptionsDropdown className="custom-header-options-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 1'));
+      expect(screen.getByText('Option 2'));
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
+
+describe('ChatbotHeaderSelectorDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderSelectorDropdown', () => {
+    render(<ChatbotHeaderSelectorDropdown value="Option 1">{dropdownItems}</ChatbotHeaderSelectorDropdown>);
+
+    expect(screen.getByRole('button', { name: 'Chatbot selector' })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" className="custom-header-selector-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Chatbot selector' }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+});