@eeacms/volto-eea-chatbot 1.0.9

package/src/ChatBlock/tests/AIMessage.test.jsx

@@ -0,0 +1,95 @@
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import { AIMessage } from '../chat/AIMessage';
+
+const mockStore = configureStore();
+
+describe('AIMessage', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      userSession: { token: '1234' },
+      intl: { locale: 'en', messages: {} },
+    });
+  });
+
+  const renderComponent = (props) =>
+    renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <AIMessage {...props} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+  it('renders AI message with content', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: 'Hello, I am an AI assistant',
+        type: 'assistant',
+      },
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders AI message with sources', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: 'Here is some information',
+        type: 'assistant',
+        documents: [
+          {
+            document_id: 'doc1',
+            semantic_identifier: 'Source 1',
+            link: 'https://example.com/1',
+            source_type: 'web',
+          },
+        ],
+      },
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders AI message with feedback options', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: 'This is a response',
+        type: 'assistant',
+      },
+      onFeedback: jest.fn(),
+      enableFeedback: true,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders empty AI message', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: '',
+        type: 'assistant',
+      },
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/ChatBlock/tests/AutoResizeTextarea.test.jsx

@@ -0,0 +1,49 @@
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import AutoResizeTextarea from '../components/AutoResizeTextarea';
+
+jest.mock('@eeacms/volto-matomo/utils', () => ({
+  trackEvent: jest.fn(),
+}));
+
+describe('AutoResizeTextarea', () => {
+  it('renders textarea and button', () => {
+    const { getByRole, getByLabelText } = render(
+      <AutoResizeTextarea onSubmit={jest.fn()} />,
+    );
+
+    expect(getByRole('textbox')).toBeInTheDocument();
+    expect(getByLabelText('Send')).toBeInTheDocument();
+  });
+
+  it('calls onSubmit with input text on Enter key press', () => {
+    const mockSubmit = jest.fn();
+    const { getByRole } = render(<AutoResizeTextarea onSubmit={mockSubmit} />);
+    const textarea = getByRole('textbox');
+
+    fireEvent.change(textarea, { target: { value: 'Hello' } });
+    fireEvent.keyDown(textarea, { key: 'Enter', code: 'Enter' });
+
+    expect(mockSubmit).toHaveBeenCalledWith({ message: 'Hello' });
+  });
+
+  it('does not call onSubmit if input is empty', () => {
+    const mockSubmit = jest.fn();
+    const { getByRole } = render(<AutoResizeTextarea onSubmit={mockSubmit} />);
+    const textarea = getByRole('textbox');
+
+    fireEvent.keyDown(textarea, { key: 'Enter', code: 'Enter' });
+
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+
+  it('adds newline on Shift+Enter', () => {
+    const { getByRole } = render(<AutoResizeTextarea onSubmit={jest.fn()} />);
+    const textarea = getByRole('textbox');
+
+    fireEvent.change(textarea, { target: { value: 'Line 1' } });
+    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true });
+
+    expect(textarea.value).toBe('Line 1\n');
+  });
+});

package/src/ChatBlock/tests/BlinkingDot.test.jsx

@@ -0,0 +1,71 @@
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import { BlinkingDot } from '../components/BlinkingDot';
+
+const mockStore = configureStore();
+
+describe('BlinkingDot', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      userSession: { token: '1234' },
+      intl: { locale: 'en', messages: {} },
+    });
+  });
+
+  const renderComponent = (props) =>
+    renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <BlinkingDot {...props} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+  it('renders blinking dot when active', () => {
+    const props = {
+      isActive: true,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders inactive dot when not active', () => {
+    const props = {
+      isActive: false,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('applies custom className', () => {
+    const props = {
+      isActive: true,
+      className: 'custom-class',
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('applies custom size', () => {
+    const props = {
+      isActive: true,
+      size: 20,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/ChatBlock/tests/ChatMessageFeedback.test.jsx

@@ -0,0 +1,73 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ChatMessageFeedback from '../components/ChatMessageFeedback';
+
+jest.mock('../components/FeedbackModal', () => (props) => {
+  const { modalOpen, onClose, onToast } = props;
+
+  return modalOpen ? (
+    <div data-testid="feedback-modal">
+      Modal Open
+      <button
+        onClick={() => {
+          onToast('Thank you for your feedback!', 'success');
+          onClose();
+        }}
+      >
+        Submit Feedback
+      </button>
+    </div>
+  ) : null;
+});
+
+jest.mock('../components/Icon', () => ({ name }) => (
+  <img src={name} alt="icon" />
+));
+
+jest.mock('../components/markdown', () => ({
+  SVGIcon: ({ name }) => <img src={name} alt="icon" />,
+}));
+
+jest.mock('../../icons/thumbs-up.svg', () => 'thumbs-up.svg');
+jest.mock('../../icons/thumbs-down.svg', () => 'thumbs-down.svg');
+
+describe('ChatMessageFeedback', () => {
+  const defaultProps = {
+    message: {
+      messageId: 1,
+      message: 'Test message',
+      type: 'assistant',
+    },
+    feedbackReasons: ['Reason 1', 'Reason 2'],
+  };
+
+  it('renders Like and Dislike buttons', () => {
+    render(<ChatMessageFeedback {...defaultProps} />);
+    expect(screen.getByLabelText('Like')).toBeInTheDocument();
+    expect(screen.getByLabelText('Dislike')).toBeInTheDocument();
+  });
+
+  it('opens modal when Like is clicked', () => {
+    render(<ChatMessageFeedback {...defaultProps} />);
+    fireEvent.click(screen.getByLabelText('Like'));
+    expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
+  });
+
+  it('opens modal when Dislike is clicked', () => {
+    render(<ChatMessageFeedback {...defaultProps} />);
+    fireEvent.click(screen.getByLabelText('Dislike'));
+    expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
+  });
+
+  it('shows toast after submitting feedback in modal', () => {
+    render(<ChatMessageFeedback {...defaultProps} />);
+    fireEvent.click(screen.getByLabelText('Like'));
+
+    const submitButton = screen.getByText('Submit Feedback');
+    fireEvent.click(submitButton);
+
+    expect(
+      screen.getByText('Thank you for your feedback!'),
+    ).toBeInTheDocument();
+  });
+});

package/src/ChatBlock/tests/Citation.test.jsx

@@ -0,0 +1,107 @@
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import { Citation } from '../components/markdown/Citation';
+
+const mockStore = configureStore();
+
+describe('Citation', () => {
+  it('should render the component with link', () => {
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Citation
+            message={{
+              messageId: 6428,
+              message: 'Donec quam felis ultricies nec',
+              type: 'assistant',
+              query: 'Pellentesque libero tortor tincidunt et?',
+              documents: [
+                {
+                  document_id: 'https://www.example.com',
+                  semantic_identifier: 'Nam ipsum risus rutrum vitae',
+                  link: 'https://www.example.com',
+                  blurb:
+                    'Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. ',
+                  source_type: 'web',
+                  match_highlights: ['', 'Praesent ac sem eget est', ''],
+                  updated_at: null,
+                  db_doc_id: 99186,
+                },
+              ],
+              citations: {
+                1: 99186,
+              },
+              parentMessageId: 6427,
+              alternateAssistantID: null,
+            }}
+            value={['[1]']}
+            link="https://www.example.com"
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});
+
+describe('Citation', () => {
+  it('should render the component without link', () => {
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Citation
+            message={{
+              messageId: 6428,
+              message: 'Donec quam felis ultricies nec',
+              type: 'assistant',
+              query: 'Pellentesque libero tortor tincidunt et?',
+              documents: [
+                {
+                  document_id: 'https://www.example.com',
+                  semantic_identifier: 'Nam ipsum risus rutrum vitae',
+                  link: 'https://www.example.com',
+                  blurb:
+                    'Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. ',
+                  source_type: 'web',
+                  match_highlights: ['', 'Praesent ac sem eget est', ''],
+                  updated_at: null,
+                  db_doc_id: 99186,
+                },
+              ],
+              citations: {
+                1: 99186,
+              },
+              parentMessageId: 6427,
+              alternateAssistantID: null,
+            }}
+            value={['[1]']}
+            link=""
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/ChatBlock/tests/EmptyState.test.jsx

@@ -0,0 +1,137 @@
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import EmptyState from '../components/EmptyState';
+
+const mockStore = configureStore();
+
+describe('EmptyState', () => {
+  let store;
+  let onChoiceMock;
+
+  beforeEach(() => {
+    store = mockStore({
+      userSession: { token: '1234' },
+      intl: { locale: 'en', messages: {} },
+    });
+    onChoiceMock = jest.fn();
+  });
+
+  function renderComponent(props) {
+    return renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <EmptyState {...props} />
+        </MemoryRouter>
+      </Provider>,
+    );
+  }
+
+  it('renders with showAssistantPrompts and persona starter messages', () => {
+    const props = {
+      onChoice: onChoiceMock,
+      showAssistantPrompts: true,
+      enableStarterPrompts: false,
+      starterPromptsHeading: 'Starter Prompts',
+      persona: {
+        starter_messages: [
+          {
+            name: 'Starter 1',
+            description: 'Desc 1',
+            message: 'Message 1',
+          },
+        ],
+      },
+    };
+
+    const component = renderComponent(props);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders with enableStarterPrompts and starterPrompts', () => {
+    const props = {
+      onChoice: onChoiceMock,
+      showAssistantPrompts: false,
+      enableStarterPrompts: true,
+      starterPromptsHeading: 'Starter Prompts',
+      starterPrompts: [
+        {
+          name: 'Prompt 1',
+          description: 'Prompt Desc 1',
+          message: 'Prompt Message 1',
+        },
+      ],
+    };
+
+    const component = renderComponent(props);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders nothing when no starter messages and no starter prompts', () => {
+    const props = {
+      onChoice: onChoiceMock,
+      showAssistantPrompts: true,
+      enableStarterPrompts: false,
+      persona: {
+        starter_messages: [],
+      },
+    };
+
+    const component = renderComponent(props);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders without starterPromptsHeading', () => {
+    const props = {
+      onChoice: onChoiceMock,
+      showAssistantPrompts: true,
+      enableStarterPrompts: true,
+      starterPrompts: [
+        {
+          name: 'Prompt X',
+          description: 'Desc X',
+          message: 'Message X',
+        },
+      ],
+    };
+
+    const component = renderComponent(props);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('calls onChoice when starter message button is clicked', () => {
+    const props = {
+      '@type': 'eeaChatbot',
+      assistant: '17',
+      chatTitle: 'Online public chat',
+      height: '500px',
+      onChoice: onChoiceMock,
+      showAssistantDescription: true,
+      showAssistantPrompts: true,
+      showAssistantTitle: true,
+      enableStarterPrompts: false,
+      persona: {
+        name: 'In enim justo rhoncus ut',
+        description: 'Nullam dictum felis eu pede',
+        starter_messages: [
+          {
+            description: 'Vestibulum purus quam scelerisque ut ',
+            message: 'Nam at tortor in tellus',
+            name: 'Curabitur at lacus ac velit',
+          },
+        ],
+      },
+    };
+
+    const component = renderComponent(props);
+
+    const button = component.root.findByProps({ className: 'starter-message' });
+
+    button.props.onClick();
+
+    expect(onChoiceMock).toHaveBeenCalledWith('Nam at tortor in tellus');
+  });
+});

package/src/ChatBlock/tests/FeedbackModal.test.jsx

@@ -0,0 +1,138 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import FeedbackModal from '../components/FeedbackModal';
+import * as lib from '../utils';
+
+jest.mock('../utils');
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('FeedbackModal', () => {
+  const baseProps = {
+    modalOpen: true,
+    onClose: jest.fn(),
+    setToast: jest.fn(),
+    onToast: jest.fn(),
+    setIsToastActive: jest.fn(),
+    message: { messageId: '1234' },
+    feedbackReasons: ['Reason 1', 'Reason 2'],
+  };
+
+  it('submits positive feedback successfully', async () => {
+    lib.createChatMessageFeedback.mockResolvedValue({});
+
+    render(<FeedbackModal {...baseProps} isPositive={true} />);
+
+    fireEvent.change(
+      screen.getByPlaceholderText(/What did you like about this response/i),
+      { target: { value: 'Great response!' } },
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Submit Feedback'));
+    });
+
+    expect(lib.createChatMessageFeedback).toHaveBeenCalledWith({
+      chat_message_id: '1234',
+      feedback_text: 'Great response!',
+      is_positive: true,
+      predefined_feedback: '',
+    });
+    expect(baseProps.onToast).toHaveBeenCalledWith(
+      'Thanks for your feedback!',
+      'success',
+    );
+    expect(baseProps.setIsToastActive).toHaveBeenCalledWith(true);
+    expect(baseProps.onClose).toHaveBeenCalled();
+  });
+
+  it('submits negative feedback with selected reason', async () => {
+    lib.createChatMessageFeedback.mockResolvedValue({});
+
+    render(<FeedbackModal {...baseProps} isPositive={false} />);
+
+    const reasonBtn = screen.getByRole('button', { name: 'Reason 1' });
+    fireEvent.click(reasonBtn);
+    expect(reasonBtn.classList.contains('primary')).toBe(true);
+
+    fireEvent.change(screen.getByPlaceholderText(/What could be improved/i), {
+      target: { value: 'Needs more details' },
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Submit Feedback'));
+    });
+
+    expect(lib.createChatMessageFeedback).toHaveBeenCalledWith({
+      chat_message_id: '1234',
+      feedback_text: 'Needs more details',
+      is_positive: false,
+      predefined_feedback: 'Reason 1',
+    });
+    expect(baseProps.onToast).toHaveBeenCalledWith(
+      'Thanks for your feedback!',
+      'success',
+    );
+    expect(baseProps.onClose).toHaveBeenCalled();
+  });
+
+  it('handles submission failure', async () => {
+    lib.createChatMessageFeedback.mockRejectedValue(new Error('fail'));
+
+    render(<FeedbackModal {...baseProps} isPositive={true} />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Submit Feedback'));
+    });
+
+    expect(baseProps.onToast).toHaveBeenCalledWith(
+      'Failed to submit feedback.',
+      'error',
+    );
+    expect(baseProps.setIsToastActive).toHaveBeenCalledWith(true);
+    expect(baseProps.onClose).toHaveBeenCalled();
+  });
+
+  it('resets and closes modal on Cancel click', () => {
+    render(<FeedbackModal {...baseProps} isPositive={true} />);
+
+    const textarea = screen.getByPlaceholderText(
+      /What did you like about this response/i,
+    );
+    fireEvent.change(textarea, { target: { value: 'Some feedback' } });
+    expect(textarea.value).toBe('Some feedback');
+
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(baseProps.onClose).toHaveBeenCalled();
+  });
+
+  it('toggles reason button selected state on click', () => {
+    render(<FeedbackModal {...baseProps} isPositive={false} />);
+
+    const reason1 = screen.getByRole('button', { name: 'Reason 1' });
+    const reason2 = screen.getByRole('button', { name: 'Reason 2' });
+
+    expect(reason1.classList.contains('inverted')).toBe(true);
+    expect(reason2.classList.contains('inverted')).toBe(true);
+
+    fireEvent.click(reason1);
+    expect(reason1.classList.contains('inverted')).toBe(false);
+    expect(reason2.classList.contains('inverted')).toBe(true);
+
+    fireEvent.click(reason2);
+    expect(reason1.classList.contains('inverted')).toBe(true);
+    expect(reason2.classList.contains('inverted')).toBe(false);
+  });
+
+  it('updates textarea value on user input', () => {
+    render(<FeedbackModal {...baseProps} isPositive={true} />);
+
+    const textarea = screen.getByPlaceholderText(
+      /What did you like about this response/i,
+    );
+    fireEvent.change(textarea, { target: { value: 'Awesome!' } });
+    expect(textarea.value).toBe('Awesome!');
+  });
+});