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

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();
+    });
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ChatbotHeaderTitle from './ChatbotHeaderTitle';
+
+describe('ChatbotHeaderTitle', () => {
+  it('should render ChatbotHeaderTitle with children', () => {
+    render(<ChatbotHeaderTitle>Chatbot Header Title</ChatbotHeaderTitle>);
+    expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderTitle with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderTitle className="custom-header-class">Chatbot Header Title</ChatbotHeaderTitle>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+
+  it('should render title for default display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.default} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for docked display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDocked={'Docked header title'} />);
+    expect(screen.getByText('Docked header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when docked display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for embedded display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnEmbedded={'Embedded header title'} />);
+    expect(screen.getByText('Embedded header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when embedded display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for fullscreen display mode', () => {
+    render(
+      <ChatbotHeaderTitle
+        displayMode={ChatbotDisplayMode.fullscreen}
+        showOnFullScreen={'Fullscreen header title'}
+        className="custom-header-class"
+      />
+    );
+    expect(screen.getByText('Fullscreen header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when fullscreen display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.fullscreen} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+});

package/src/MessageBar/MessageBar.test.tsx

@@ -1,11 +1,11 @@
+import '@testing-library/jest-dom';
 import React from 'react';
+import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
-import { MessageBar } from './MessageBar';
-import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
+import { MessageBar } from './MessageBar';
 
 const ATTACH_MENU_ITEMS = [
   <DropdownList key="list-1">

package/src/MessageBox/MessageBox.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MessageBox } from './MessageBox';
+
+describe('MessageBox', () => {
+  it('should render Message box', () => {
+    render(
+      <MessageBox>
+        <>Chatbot Messages</>
+      </MessageBox>
+    );
+    expect(screen.getByText('Chatbot Messages')).toBeTruthy();
+  });
+
+  it('should assign ref to Message box', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <MessageBox ref={ref}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+});

package/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { PreviewAttachment } from './PreviewAttachment';
+
+describe('PreviewAttachment', () => {
+  it('should render PreviewAttachment', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    expect(screen.getByText('Preview attachment')).toBeTruthy();
+    expect(screen.getByText('greetings')).toBeTruthy();
+    expect(screen.getAllByText('TEXT')).toBeTruthy();
+  });
+
+  it('should call onEdit handler when edit button is pressed', () => {
+    const onEdit = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={onEdit}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    fireEvent.click(screen.getByText('Edit'));
+
+    expect(onEdit).toHaveBeenCalled();
+  });
+  it('should call onDismiss handler when dismiss button is pressed', () => {
+    const onDismiss = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={onDismiss}
+      />
+    );
+    fireEvent.click(screen.getByText('Dismiss'));
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});

package/src/Settings/SettingsForm.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { render, screen } from '@testing-library/react';
+import { SettingsForm } from './SettingsForm';
+
+describe('SettingsForm', () => {
+  it('should render settingsForm with custom classname', () => {
+    const { container } = render(<SettingsForm className="custom-settings" />);
+    expect(container.querySelector('.custom-settings')).toBeTruthy();
+  });
+
+  it('should render settingsForm with fields', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm fields={fields} />);
+
+    expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+  });
+});