MessageBar.test.tsx

import '@testing-library/jest-dom';
import {
  DropdownGroup,
  DropdownItem,
  DropdownList,
  MenuSearchInputProps,
  MenuSearchProps
} from '@patternfly/react-core';
import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { createRef } from 'react';
import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
import { MessageBar } from './MessageBar';

const ATTACH_MENU_ITEMS = [
  <DropdownList key="list-1">
    <DropdownItem className="pf-chatbot-source-details-dropdown-item" value="auth-operator Pod" id="0">
      <SourceDetailsMenuItem
        icon={
          <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z"
              fill="currentColor"
            />
            <g clipPath="url(#clip0_3280_27488)">
              <path
                d="M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z"
                fill="white"
              />
            </g>
            <defs>
              <clipPath id="clip0_3280_27488">
                <rect width="7.5" height="12" fill="white" transform="translate(8.25 6.5)" />
              </clipPath>
            </defs>
          </svg>
        }
        name="auth-operator"
        type="Pod"
      />
    </DropdownItem>
  </DropdownList>,
  <DropdownGroup key="group2">
    <DropdownList>
      <DropdownItem value="Alerts" id="1" icon={<BellIcon />}>
        Alerts
      </DropdownItem>
      <DropdownItem value="Events" id="2" icon={<CalendarAltIcon />}>
        Events
      </DropdownItem>
      <DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
        Logs
      </DropdownItem>
      <DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
        YAML - Status
      </DropdownItem>
      <DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
        YAML - All contents
      </DropdownItem>
    </DropdownList>
  </DropdownGroup>
];

const originalSpeechRecognition = window.SpeechRecognition;

const mockSpeechRecognition = () => {
  const MockSpeechRecognition = jest.fn().mockImplementation(() => ({
    start: jest.fn(),
    stop: jest.fn()
  }));
  (MockSpeechRecognition as any).prototype = {};
  window.SpeechRecognition = MockSpeechRecognition as any;
};

describe('Message bar', () => {
  afterAll(() => {
    window.SpeechRecognition = originalSpeechRecognition;
  });
  it('should render correctly', () => {
    render(<MessageBar onSendMessage={jest.fn} />);
    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
    expect(screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
  });
  it('can send via enter key', async () => {
    const spy = jest.fn();
    render(<MessageBar onSendMessage={spy} />);
    const input = screen.getByRole('textbox', { name: /Send a message.../i });
    await userEvent.type(input, 'Hello world');
    expect(input).toHaveTextContent('Hello world');
    await userEvent.type(input, '[Enter]');
    expect(spy).toHaveBeenCalledTimes(1);
  });
  it('calls onChange callback appropriately', async () => {
    const spy = jest.fn();
    render(<MessageBar onSendMessage={jest.fn} onChange={spy} />);
    const input = screen.getByRole('textbox', { name: /Send a message.../i });
    await userEvent.type(input, 'A');
    expect(input).toHaveTextContent('A');
    expect(spy).toHaveBeenCalledTimes(1);
    expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
  });
  it('can use specified placeholder text', async () => {
    render(<MessageBar onSendMessage={jest.fn} placeholder="test placeholder" />);
    const input = screen.getByRole('textbox', { name: /test placeholder/i });
    await userEvent.type(input, 'Hello world');
    expect(input).toHaveTextContent('Hello world');
  });

  // Send button
  // --------------------------------------------------------------------------
  it('shows send button when text is input', async () => {
    render(<MessageBar onSendMessage={jest.fn} />);
    const input = screen.getByRole('textbox', { name: /Send a message.../i });
    await userEvent.type(input, 'Hello world');
    expect(input).toHaveTextContent('Hello world');
    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
  });
  it('can disable send button shown when text is input', async () => {
    render(<MessageBar onSendMessage={jest.fn} isSendButtonDisabled />);
    const input = screen.getByRole('textbox', { name: /Send a message.../i });
    await userEvent.type(input, 'Hello world');
    expect(input).toHaveTextContent('Hello world');
    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
  });
  it('can click send button', async () => {
    const spy = jest.fn();
    render(<MessageBar onSendMessage={spy} />);
    const input = screen.getByRole('textbox', { name: /Send a message.../i });
    await userEvent.type(input, 'Hello world');
    expect(input).toHaveTextContent('Hello world');
    const sendButton = screen.getByRole('button', { name: 'Send' });
    expect(sendButton).toBeTruthy();
    await userEvent.click(sendButton);
    expect(spy).toHaveBeenCalledTimes(1);
  });
  it('can always show send button', () => {
    render(<MessageBar onSendMessage={jest.fn} alwayShowSendButton />);
    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
    expect(screen.getByRole('button', { name: 'Send' })).toBeEnabled();
  });
  it('can disable send button if always showing', () => {
    render(<MessageBar onSendMessage={jest.fn} alwayShowSendButton isSendButtonDisabled />);
    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
  });
  it('can handle buttonProps tooltipContent  appropriately for send', async () => {
    render(
      <MessageBar onSendMessage={jest.fn} alwayShowSendButton buttonProps={{ send: { tooltipContent: 'Test' } }} />
    );
    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
  });
  it('can handle buttonProps tooltipProps  appropriately for send', () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        alwayShowSendButton
        buttonProps={{ send: { tooltipProps: { isVisible: true } } }}
      />
    );
    // isVisible, so no need for click
    expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
  });
  it('can handle buttonProps props appropriately for send', async () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        alwayShowSendButton
        buttonProps={{ send: { props: { 'aria-label': 'Test' } } }}
      />
    );
    await userEvent.click(screen.getByRole('button', { name: 'Test' }));
  });

  // Attach button
  // --------------------------------------------------------------------------
  it('can show attach menu', async () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        attachMenuProps={{
          isAttachMenuOpen: true,
          setIsAttachMenuOpen: jest.fn(),
          onAttachMenuToggleClick: jest.fn(),
          onAttachMenuInputChange: jest.fn(),
          attachMenuItems: ATTACH_MENU_ITEMS
        }}
      />
    );
    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
    expect(screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy();
    expect(screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy();
    expect(screen.getByRole('menuitem', { name: /Events/i })).toBeTruthy();
    expect(screen.getByRole('menuitem', { name: /Logs/i })).toBeTruthy();
    expect(screen.getByRole('menuitem', { name: /YAML - Status/i })).toBeTruthy();
    expect(screen.getByRole('menuitem', { name: /YAML - All contents/i })).toBeTruthy();
  });
  it('can toggle attach menu', async () => {
    const attachToggleClickSpy = jest.fn();
    render(
      <MessageBar
        onSendMessage={jest.fn}
        attachMenuProps={{
          isAttachMenuOpen: false,
          setIsAttachMenuOpen: jest.fn(),
          onAttachMenuToggleClick: attachToggleClickSpy,
          onAttachMenuInputChange: jest.fn(),
          attachMenuItems: ATTACH_MENU_ITEMS
        }}
      />
    );
    expect(screen.queryByRole('textbox', { name: /Filter menu items/i })).toBeFalsy();
    expect(screen.queryByRole('menuitem', { name: /auth-operator/i })).toBeFalsy();
    expect(screen.queryByRole('menuitem', { name: /Alerts/i })).toBeFalsy();
    expect(screen.queryByRole('menuitem', { name: /Events/i })).toBeFalsy();
    expect(screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
    expect(screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
    expect(screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
    const attachButton = screen.getByRole('button', { name: 'Attach' });
    await userEvent.click(attachButton);
    expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
  });
  it('can pass searchInputProps to search input in AttachMenu', () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        value="test"
        attachMenuProps={{
          isAttachMenuOpen: true,
          setIsAttachMenuOpen: jest.fn(),
          onAttachMenuToggleClick: jest.fn(),
          onAttachMenuInputChange: jest.fn(),
          attachMenuItems: ATTACH_MENU_ITEMS,
          searchInputProps: { isDisabled: true }
        }}
      />
    );
    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeDisabled();
  });
  it('can pass menuSearchProps to search input in AttachMenu', () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        value="test"
        attachMenuProps={{
          isAttachMenuOpen: true,
          setIsAttachMenuOpen: jest.fn(),
          onAttachMenuToggleClick: jest.fn(),
          onAttachMenuInputChange: jest.fn(),
          attachMenuItems: ATTACH_MENU_ITEMS,
          menuSearchProps: { 'data-testid': 'menu-search' } as MenuSearchProps
        }}
      />
    );
    expect(screen.getByTestId('menu-search')).toBeTruthy();
  });
  it('can pass menuSearchInputProps to search input in AttachMenu', () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        value="test"
        attachMenuProps={{
          isAttachMenuOpen: true,
          setIsAttachMenuOpen: jest.fn(),
          onAttachMenuToggleClick: jest.fn(),
          onAttachMenuInputChange: jest.fn(),
          attachMenuItems: ATTACH_MENU_ITEMS,
          menuSearchInputProps: { 'data-testid': 'menu-search-input' } as MenuSearchInputProps
        }}
      />
    );
    expect(screen.getByTestId('menu-search-input')).toBeTruthy();
  });
  it('can remove input from attach menu', async () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        attachMenuProps={{
          isAttachMenuOpen: true,
          setIsAttachMenuOpen: jest.fn(),
          onAttachMenuToggleClick: jest.fn(),
          attachMenuItems: ATTACH_MENU_ITEMS
        }}
      />
    );
    expect(screen.queryByRole('textbox', { name: /Filter menu items/i })).not.toBeInTheDocument();
  });
  it('can hide attach button', () => {
    render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
    expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
  });
  // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
  // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
  it('can handle handleAttach', async () => {
    const spy = jest.fn();
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasAttachButton
        handleAttach={spy}
        buttonProps={{ attach: { inputTestId: 'input' } }}
      />
    );
    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
    const file = new File(['test'], 'test.json');
    const input = screen.getByTestId('input') as HTMLInputElement;
    await userEvent.upload(input, file);
    expect(input.files).toHaveLength(1);
    expect(spy).toHaveBeenCalledTimes(1);
  });
  it('can handle buttonProps tooltipContent appropriately for attach', async () => {
    render(<MessageBar onSendMessage={jest.fn} hasAttachButton buttonProps={{ attach: { tooltipContent: 'Test' } }} />);
    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
  });
  it('can handle buttonProps tooltipProps  appropriately for attach', () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        alwayShowSendButton
        buttonProps={{ attach: { tooltipProps: { isVisible: true } } }}
      />
    );
    // isVisible, so no need for click
    expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
  });
  it('can handle buttonProps props appropriately for attach', async () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasAttachButton
        buttonProps={{ attach: { props: { 'aria-label': 'Test' } } }}
      />
    );
    await userEvent.click(screen.getByRole('button', { name: 'Test' }));
  });
  it('can change attach button icon', () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasAttachButton
        buttonProps={{
          attach: {
            icon: <img alt="" src="" />
          }
        }}
      />
    );
    expect(screen.getByRole('img')).toBeVisible();
  });

  // Stop button
  // --------------------------------------------------------------------------
  it('can show stop button', () => {
    render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={jest.fn} />);
    expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
  });
  it('can call handleStopButton', async () => {
    const spy = jest.fn();
    render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={spy} />);
    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
    expect(spy).toHaveBeenCalledTimes(1);
  });
  it('can handle buttonProps tooltipContent appropriately for stop', async () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasStopButton
        handleStopButton={jest.fn}
        buttonProps={{ stop: { tooltipContent: 'Test' } }}
      />
    );
    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
  });
  it('can handle buttonProps tooltipProps  appropriately for stop', () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasStopButton
        handleStopButton={jest.fn}
        buttonProps={{ stop: { tooltipProps: { isVisible: true } } }}
      />
    );
    // isVisible, so no need for click
    expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
  });
  it('can handle buttonProps props appropriately for stop', async () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasStopButton
        handleStopButton={jest.fn}
        buttonProps={{ stop: { props: { 'aria-label': 'Test' } } }}
      />
    );
    await userEvent.click(screen.getByRole('button', { name: 'Test' }));
  });

  // Microphone button
  // --------------------------------------------------------------------------
  it('can hide microphone button when window.SpeechRecognition is not there', () => {
    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
  });
  it('can show microphone button', () => {
    mockSpeechRecognition();
    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
    expect(screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
  });
  it('can handle buttonProps appropriately for microphone', async () => {
    mockSpeechRecognition();
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasMicrophoneButton
        buttonProps={{
          microphone: { tooltipContent: { active: 'Currently listening', inactive: 'Not currently listening' } }
        }}
      />
    );
    await userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
    expect(screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
    await userEvent.click(screen.getByRole('button', { name: 'Stop listening' }));
    expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
  });
  it('can customize the listening placeholder', async () => {
    mockSpeechRecognition();
    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton listeningText="I am listening" />);
    await userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
    const input = screen.getByRole('textbox', { name: /I am listening/i });
    expect(input).toBeTruthy();
  });
  it('can handle buttonProps tooltipProps  appropriately for microphone', () => {
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasMicrophoneButton
        buttonProps={{ microphone: { tooltipProps: { isVisible: true } } }}
      />
    );
    // isVisible, so no need for click
    expect(screen.getByRole('tooltip', { name: 'Use microphone' })).toBeTruthy();
  });
  it('can handle buttonProps props appropriately for microphone', async () => {
    mockSpeechRecognition();
    render(
      <MessageBar
        onSendMessage={jest.fn}
        hasMicrophoneButton
        buttonProps={{ microphone: { props: { 'aria-label': 'Test' } } }}
      />
    );
    await userEvent.click(screen.getByRole('button', { name: 'Test' }));
  });
  it('can be controlled', () => {
    render(<MessageBar onSendMessage={jest.fn} value="test" />);
    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
  });
  it('should focus textarea when using a custom ref', () => {
    const ref = createRef<HTMLTextAreaElement>();
    render(<MessageBar onSendMessage={jest.fn} innerRef={ref} />);
    ref.current?.focus();
    expect(document.activeElement).toBe(screen.getByRole('textbox'));
  });
  it('should handle isPrimary', () => {
    const { container } = render(<MessageBar isPrimary onSendMessage={jest.fn} />);
    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
  });

  it('Renders with flex-basis of auto by default', () => {
    render(<MessageBar onSendMessage={jest.fn} />);

    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
      'style',
      'flex-basis: auto;'
    );
  });

  it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
    render(<MessageBar forceMultilineLayout onSendMessage={jest.fn} />);

    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
      'style',
      'flex-basis: 100%;'
    );
  });

  it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
    render(<MessageBar additionalActions="actions" onSendMessage={jest.fn} />);

    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
      'style',
      'flex-basis: 100%;'
    );
  });
});