@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.41

package/src/Message/Message.test.tsx

@@ -3,6 +3,10 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Message from './Message';
 import userEvent from '@testing-library/user-event';
+import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
+import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
+import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+import { AlertActionLink } from '@patternfly/react-core';
 
 const ALL_ACTIONS = [
   { label: /Good response/i },
@@ -53,6 +57,105 @@ spec:
 
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
 
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+
+const HEADING = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+
+const BLOCK_QUOTES = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+const TABLE = `
+
+ | Column 1 | Column 2 |
+ |-|-|
+ | Cell 1 | Cell 2 |
+ | Cell 3 | Cell 4 |
+
+ `;
+
+const ONE_COLUMN_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+ | Cell 2 |
+
+ `;
+
+const ONE_CELL_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+
+ `;
+
+const HEADERLESS_TABLE = `
+
+ | |
+ |-|
+ | Cell 1 | 
+
+ `;
+
+const CHILDLESS_TABLE = `
+
+ | Column 1 |
+ |-|
+ | | 
+
+ `;
+
+const EMPTY_TABLE = `
+
+ | |
+ |-|
+ | | 
+
+ `;
+
+const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
+const ERROR = {
+  title: 'Could not load chat',
+  children: 'Wait a few minutes and check your network settings. If the issue persists: ',
+  actionLinks: (
+    <React.Fragment>
+      <AlertActionLink component="a" href="#">
+        Start a new chat
+      </AlertActionLink>
+      <AlertActionLink component="a" href="#">
+        Contact support
+      </AlertActionLink>
+    </React.Fragment>
+  )
+};
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -63,6 +166,9 @@ const checkListItemsRendered = () => {
 };
 
 describe('Message', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   it('should render user messages correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content="Hi" />);
     expect(screen.getByText('User')).toBeTruthy();
@@ -344,6 +450,12 @@ describe('Message', () => {
     expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
     checkListItemsRendered();
   });
+  it('should render ordered lists correctly if there is interstitial content', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST_WITH_CODE} />);
+    checkListItemsRendered();
+    const list = screen.getAllByRole('list')[1];
+    expect(list).toHaveAttribute('start', '3');
+  });
   it('should render inline code', () => {
     render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
     expect(screen.getByText(/() => void/i)).toBeTruthy();
@@ -353,13 +465,17 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
     expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
     expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-    expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
     expect(screen.getByText(/metadata:/i)).toBeTruthy();
-    expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+    expect(screen.getByText(/name:/i)).toBeTruthy();
+    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
     expect(screen.getByText(/spec/i)).toBeTruthy();
     expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+    expect(screen.getByText(/url:/i)).toBeTruthy();
     expect(
-      screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
+      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
     ).toBeTruthy();
   });
   it('can click copy code button', async () => {
@@ -415,4 +531,288 @@ describe('Message', () => {
     expect(screen.getByRole('img')).toHaveClass('test');
     expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
   });
+  it('should handle QuickStart tile correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => alert(id)
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
+  });
+  it('should handle click on QuickStart tile correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
+  });
+  it('should handle QuickStart tile with image correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStartWithImage,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
+  });
+  it('should handle block quote correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={BLOCK_QUOTES} />);
+    expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+    expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+    expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+  });
+  it('should handle heading correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={HEADING} />);
+    expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+  });
+  it('should render table correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} />);
+    expect(screen.getByRole('row', { name: /Column 1 Column 2/i })).toBeTruthy();
+    expect(screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toBeTruthy();
+    expect(screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 3/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 4/i })).toBeTruthy();
+  });
+  it('should render table data labels correctly for mobile breakpoint', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+    expect(screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 2');
+    expect(screen.getByRole('cell', { name: /Cell 3/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 4/i })).toHaveAttribute('data-label', 'Column 2');
+  });
+  it('should render table data labels correctly for mobile breakpoint for one column table', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ONE_COLUMN_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('row', { name: /Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for one cell table', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ONE_CELL_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for headerless', () => {
+    render(<Message avatar="./img" role="user" name="User" content={HEADERLESS_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', '');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).not.toHaveAttribute('data-label');
+  });
+  it('should render table data labels correctly for mobile breakpoint for childless', () => {
+    render(<Message avatar="./img" role="user" name="User" content={CHILDLESS_TABLE} />);
+    expect(screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for empty', () => {
+    render(<Message avatar="./img" role="user" name="User" content={EMPTY_TABLE} />);
+    expect(screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', '');
+  });
+  it('should render custom table aria label correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
+    expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
+  });
+  it('should render beforeMainContent with main content', () => {
+    const mainContent = 'Main message content';
+    const beforeMainContentText = 'Before main content';
+    const beforeMainContent = <div>{beforeMainContentText}</div>;
+
+    render(
+      <Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ beforeMainContent }} />
+    );
+
+    expect(screen.getByText(beforeMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+  it('should render afterMainContent with main content', () => {
+    const mainContent = 'Main message content';
+    const afterMainContentText = 'After main content';
+    const afterMainContent = <div>{afterMainContentText}</div>;
+
+    render(
+      <Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ afterMainContent }} />
+    );
+
+    expect(screen.getByText(afterMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+
+  it('should render endContent with main content', () => {
+    const mainContent = 'Main message content';
+    const endMainContentText = 'End content';
+    const endContent = <div>{endMainContentText}</div>;
+
+    render(<Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ endContent }} />);
+
+    expect(screen.getByText(endMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+  it('should render all parts of extraContent with main content', () => {
+    const beforeMainContent = <div>Before main content</div>;
+    const afterMainContent = <div>After main content</div>;
+    const endContent = <div>End content</div>;
+
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent, afterMainContent, endContent }}
+      />
+    );
+
+    expect(screen.getByText('Before main content')).toBeTruthy();
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.getByText('After main content')).toBeTruthy();
+    expect(screen.getByText('End content')).toBeTruthy();
+  });
+
+  it('should not render extraContent when not provided', () => {
+    render(<Message avatar="./img" role="user" name="User" content="Main message content" />);
+
+    // Ensure no extraContent is rendered
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.queryByText('Before main content')).toBeFalsy();
+    expect(screen.queryByText('After main content')).toBeFalsy();
+    expect(screen.queryByText('end message content')).toBeFalsy();
+  });
+
+  it('should handle undefined or null values in extraContent gracefully', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent: null, afterMainContent: undefined, endContent: null }}
+      />
+    );
+
+    // Ensure that no extraContent is rendered if they are null or undefined
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.queryByText('Before main content')).toBeFalsy();
+    expect(screen.queryByText('After main content')).toBeFalsy();
+    expect(screen.queryByText('end message content')).toBeFalsy();
+  });
+  it('should render JSX in extraContent correctly', () => {
+    const beforeMainContent = (
+      <div data-testid="before-main-content">
+        <strong>Bold before content</strong>
+      </div>
+    );
+    const afterMainContent = (
+      <div data-testid="after-main-content">
+        <strong>Bold after content</strong>
+      </div>
+    );
+    const endContent = (
+      <div data-testid="end-main-content">
+        <strong>Bold end content</strong>
+      </div>
+    );
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent, afterMainContent, endContent }}
+      />
+    );
+
+    // Check that the JSX is correctly rendered
+    expect(screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
+    expect(screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
+    expect(screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
+  });
+  it('should handle image correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={IMAGE} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+  });
+  it('should handle external links correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={`[PatternFly](https://www.patternfly.org/)`} />);
+    // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
+    expect(rehypeExternalLinks).toHaveBeenCalledTimes(1);
+  });
+  it('should handle external links correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`[PatternFly](https://www.patternfly.org/)`}
+        openLinkInNewTab={false}
+      />
+    );
+    // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
+    expect(rehypeExternalLinks).not.toHaveBeenCalled();
+  });
+  it('should handle extra link props correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`[PatternFly](https://www.patternfly.org/)`}
+        linkProps={{ onClick: spy }}
+      />
+    );
+    await userEvent.click(screen.getByRole('link', { name: /PatternFly/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should handle error correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} />);
+    expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Start a new chat/i })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Contact support/i })).toBeTruthy();
+    expect(screen.getByText('Wait a few minutes and check your network settings. If the issue persists:')).toBeTruthy();
+  });
+  it('should handle error correctly when loading', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} isLoading />);
+    expect(screen.queryByRole('heading', { name: /Could not load chat/i })).toBeFalsy();
+    expect(screen.getByText('Loading message')).toBeTruthy();
+  });
+  it('should handle error correctly when these is content', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} content="Test" />);
+    expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+    expect(screen.queryByText('Test')).toBeFalsy();
+  });
 });