@eeacms/volto-eea-chatbot 1.0.9 → 1.0.11

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { SourceChip } from '../components/SourceChip';
+
+describe('SourceChip', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('renders with title only', () => {
+    const component = renderer.create(<SourceChip title="Test Source" />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with icon', () => {
+    const MockIcon = () => <span data-testid="mock-icon">Icon</span>;
+    const component = renderer.create(
+      <SourceChip title="Test Source" icon={<MockIcon />} />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with remove button when onRemove is provided', () => {
+    const onRemove = jest.fn();
+    const component = renderer.create(
+      <SourceChip title="Test Source" onRemove={onRemove} />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('calls onClick when clicked', () => {
+    const onClick = jest.fn();
+    render(<SourceChip title="Test Source" onClick={onClick} />);
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onRemove when remove button is clicked', () => {
+    const onRemove = jest.fn();
+    const onClick = jest.fn();
+    render(
+      <SourceChip title="Test Source" onRemove={onRemove} onClick={onClick} />,
+    );
+
+    const removeButton = screen.getByRole('button', { name: /Remove/i });
+    fireEvent.click(removeButton);
+
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onClick).not.toHaveBeenCalled(); // stopPropagation should prevent this
+  });
+
+  it('calls onRemove when Enter key is pressed on remove button', () => {
+    const onRemove = jest.fn();
+    render(<SourceChip title="Test Source" onRemove={onRemove} />);
+
+    const removeButton = screen.getByRole('button', { name: /Remove/i });
+    fireEvent.keyDown(removeButton, { key: 'Enter' });
+
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onRemove when other keys are pressed', () => {
+    const onRemove = jest.fn();
+    render(<SourceChip title="Test Source" onRemove={onRemove} />);
+
+    const removeButton = screen.getByRole('button', { name: /Remove/i });
+    fireEvent.keyDown(removeButton, { key: 'Escape' });
+
+    expect(onRemove).not.toHaveBeenCalled();
+  });
+
+  it('applies animation class when includeAnimation is true', () => {
+    render(<SourceChip title="Test Source" includeAnimation={true} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('animate-in');
+  });
+
+  it('removes animation class after timeout', () => {
+    render(<SourceChip title="Test Source" includeAnimation={true} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('animate-in');
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    expect(button).not.toHaveClass('animate-in');
+  });
+
+  it('does not apply animation class when includeAnimation is false', () => {
+    render(<SourceChip title="Test Source" includeAnimation={false} />);
+
+    const button = screen.getByRole('button');
+    expect(button).not.toHaveClass('animate-in');
+  });
+});

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import UserActionsToolbar from '../components/UserActionsToolbar';
+
+const mockStore = configureStore();
+
+// Mock clipboard API
+Object.assign(navigator, {
+  clipboard: {
+    writeText: jest.fn().mockResolvedValue(undefined),
+  },
+});
+
+describe('UserActionsToolbar', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      userSession: { token: '1234' },
+      intl: { locale: 'en', messages: {} },
+    });
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (props) =>
+    renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UserActionsToolbar {...props} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+  const renderWithRTL = (props) =>
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UserActionsToolbar {...props} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+  it('renders toolbar with copy button', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: 'Test message content',
+      },
+      enableFeedback: false,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders toolbar with feedback when enabled', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: 'Test message content',
+      },
+      enableFeedback: true,
+      feedbackReasons: ['Incorrect', 'Unhelpful'],
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with custom className', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: 'Test message content',
+      },
+      className: 'custom-toolbar',
+      enableFeedback: false,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('copies message to clipboard when copy button is clicked', async () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: 'Test message to copy',
+      },
+      enableFeedback: false,
+    };
+
+    renderWithRTL(props);
+
+    const copyButton = screen.getByRole('button', { name: /copy/i });
+    fireEvent.click(copyButton);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      'Test message to copy',
+    );
+  });
+
+  it('handles empty message gracefully', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: '',
+      },
+      enableFeedback: false,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('handles undefined message gracefully', () => {
+    const props = {
+      message: null,
+      enableFeedback: false,
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,83 @@
+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 { UserMessage } from '../chat/UserMessage';
+
+const mockStore = configureStore();
+
+// Mock loadable components
+jest.mock('@loadable/component', () => {
+  return () => {
+    const MockComponent = ({ children }) => <div>{children}</div>;
+    return MockComponent;
+  };
+});
+
+describe('UserMessage', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      userSession: { token: '1234' },
+      intl: { locale: 'en', messages: {} },
+    });
+  });
+
+  const renderComponent = (props) =>
+    renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UserMessage {...props} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+  it('renders user message with basic text', () => {
+    const props = {
+      message: {
+        messageId: 1,
+        message: 'Hello, this is my question',
+        type: 'user',
+      },
+      libs: { remarkGfm: { default: [] } },
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders user message with custom className', () => {
+    const props = {
+      message: {
+        messageId: 2,
+        message: 'Another question',
+        type: 'user',
+      },
+      libs: { remarkGfm: { default: [] } },
+      className: 'most-recent',
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders user message without className', () => {
+    const props = {
+      message: {
+        messageId: 4,
+        message: 'Test message',
+        type: 'user',
+      },
+      libs: { remarkGfm: { default: [] } },
+    };
+
+    const component = renderComponent(props);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { WebResultIcon } from '../components/WebResultIcon';
+
+describe('WebResultIcon', () => {
+  it('renders favicon for valid URL', () => {
+    const component = renderer.create(
+      <WebResultIcon url="https://example.com" size={16} />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with default size', () => {
+    const component = renderer.create(
+      <WebResultIcon url="https://example.com" />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders FileIcon for invalid URL', () => {
+    const component = renderer.create(
+      <WebResultIcon url="invalid-url" size={16} />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders GlobeIcon when favicon fails to load', () => {
+    render(<WebResultIcon url="https://example.com" size={16} />);
+
+    const img = screen.getByRole('img');
+    fireEvent.error(img);
+
+    // After error, the component should re-render with GlobeIcon
+    // The img should no longer be present
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('generates correct favicon URL', () => {
+    render(<WebResultIcon url="https://www.google.com/search" size={20} />);
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute(
+      'src',
+      'https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.google.com&size=128',
+    );
+  });
+
+  it('applies correct size styles', () => {
+    render(<WebResultIcon url="https://example.com" size={24} />);
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('height', '24');
+    expect(img).toHaveAttribute('width', '24');
+    expect(img).toHaveStyle({ height: '24px', width: '24px' });
+  });
+});

package/src/ChatBlock/tests/citations.test.js

@@ -0,0 +1,114 @@
+import { addCitations } from '../utils/citations';
+
+describe('addCitations', () => {
+  it('transforms single citation marker into markdown link', () => {
+    const message = {
+      citations: {
+        1: 'https://example.com/doc1',
+      },
+    };
+    const text = 'This is a fact [1].';
+    const result = addCitations(text, message);
+    expect(result).toBe('This is a fact [[1]](https://example.com/doc1).');
+  });
+
+  it('transforms multiple citation markers', () => {
+    const message = {
+      citations: {
+        1: 'https://example.com/doc1',
+        2: 'https://example.com/doc2',
+        3: 'https://example.com/doc3',
+      },
+    };
+    const text = 'Fact one [1], fact two [2], and fact three [3].';
+    const result = addCitations(text, message);
+    expect(result).toBe(
+      'Fact one [[1]](https://example.com/doc1), fact two [[2]](https://example.com/doc2), and fact three [[3]](https://example.com/doc3).',
+    );
+  });
+
+  it('does not transform already formatted citations [1](url)', () => {
+    const message = {
+      citations: {
+        1: 'https://example.com/doc1',
+      },
+    };
+    const text = 'Already formatted [[1]](https://example.com/doc1).';
+    const result = addCitations(text, message);
+    expect(result).toBe('Already formatted [[1]](https://example.com/doc1).');
+  });
+
+  it('does not transform citations in brackets like [1][', () => {
+    const message = {
+      citations: {
+        1: 'https://example.com/doc1',
+      },
+    };
+    const text = 'Text with [1][';
+    const result = addCitations(text, message);
+    expect(result).toBe('Text with [1][');
+  });
+
+  it('does not transform citations followed by ]', () => {
+    const message = {
+      citations: {
+        1: 'https://example.com/doc1',
+      },
+    };
+    const text = 'Text with [1]]';
+    const result = addCitations(text, message);
+    expect(result).toBe('Text with [1]]');
+  });
+
+  it('returns original text when no citations in message', () => {
+    const message = {};
+    const text = 'This is a fact [1].';
+    const result = addCitations(text, message);
+    expect(result).toBe('This is a fact [1].');
+  });
+
+  it('returns original text when citations is undefined', () => {
+    const message = { citations: undefined };
+    const text = 'This is a fact [1].';
+    const result = addCitations(text, message);
+    expect(result).toBe('This is a fact [1].');
+  });
+
+  it('handles text with no citation markers', () => {
+    const message = {
+      citations: {
+        1: 'https://example.com/doc1',
+      },
+    };
+    const text = 'This is plain text without citations.';
+    const result = addCitations(text, message);
+    expect(result).toBe('This is plain text without citations.');
+  });
+
+  it('handles double-digit citation numbers', () => {
+    const message = {
+      citations: {
+        10: 'https://example.com/doc10',
+        11: 'https://example.com/doc11',
+      },
+    };
+    const text = 'References [10] and [11].';
+    const result = addCitations(text, message);
+    expect(result).toBe(
+      'References [[10]](https://example.com/doc10) and [[11]](https://example.com/doc11).',
+    );
+  });
+
+  it('handles citation number not in citations object', () => {
+    const message = {
+      citations: {
+        1: 'https://example.com/doc1',
+      },
+    };
+    const text = 'Citation [2] not found.';
+    const result = addCitations(text, message);
+    // When citation number exists but is not in citations object,
+    // the function returns the citation with undefined URL
+    expect(result).toBe('Citation [[2]](undefined) not found.');
+  });
+});