@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import UserFeedback from './UserFeedback';
+
+const MOCK_RESPONSES = [
+  { id: '1', content: 'Helpful information', onClick: () => alert('Clicked helpful information') },
+  { id: '2', content: 'Easy to understand', onClick: () => alert('Clicked easy to understand') },
+  { id: '3', content: 'Resolved my issue', onClick: () => alert('Clicked resolved my issue') }
+];
+
+describe('UserFeedback', () => {
+  it('should render correctly', () => {
+    render(<UserFeedback onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} timestamp="12/12/12" />);
+    expect(screen.getByRole('heading', { name: /Why did you choose this rating?/i })).toBeTruthy();
+    expect(screen.getByRole('list', { name: 'Quick feedback for message received at 12/12/12' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Helpful information/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Easy to understand/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Resolved my issue/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' })).toBeTruthy();
+    expect(screen.queryByRole('textbox', { name: /Provide optional additional feedback/i })).toBeFalsy();
+  });
+  it('should render different title correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        title="Thanks! Why?"
+      />
+    );
+    expect(screen.getByText('Thanks! Why?')).toBeTruthy();
+  });
+  it('should render different submit button text correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        submitWord="Give feedback"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Give feedback/i })).toBeTruthy();
+  });
+  it('should render text area correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toBeTruthy();
+  });
+  it('should call onTextAreaChange correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        onTextAreaChange={spy}
+      />
+    );
+    const textbox = screen.getByRole('textbox', { name: /Provide optional additional feedback/i });
+    await userEvent.type(textbox, 'test');
+    expect(spy).toHaveBeenCalledTimes(4);
+  });
+  it('should render different placeholder correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaPlaceholder="Provide any other information"
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toHaveAttribute(
+      'placeholder',
+      'Provide any other information'
+    );
+  });
+  it('should render different text area label correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaAriaLabel="Provide more details"
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide more details/i })).toBeTruthy();
+  });
+  it('should handle onClose correctly when close button is clicked', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} onClose={spy} timestamp="12/12/12" />);
+    const closeButton = screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
+    expect(closeButton).toBeTruthy();
+    await userEvent.click(closeButton);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to change close button aria label', () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        onClose={spy}
+        closeButtonAriaLabel="Ima button"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
+  });
+  it('should handle className', async () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        className="test"
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card')).toHaveClass('test');
+  });
+  it('should apply id', async () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        id="test"
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
+  });
+  it('should handle submit correctly when nothing is selected', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} />);
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(undefined, '');
+  });
+  it('should handle submit correctly when item is selected', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} />);
+    await userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('2', '');
+  });
+  it('should handle submit correctly when there is just text input', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} hasTextArea />
+    );
+    await userEvent.type(
+      screen.getByRole('textbox', { name: /Provide optional additional feedback/i }),
+      'What a great experience!'
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(undefined, 'What a great experience!');
+  });
+  it('should handle submit correctly when item is selected and there is text input', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} hasTextArea />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
+    await userEvent.type(
+      screen.getByRole('textbox', { name: /Provide optional additional feedback/i }),
+      'What a great experience!'
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('2', 'What a great experience!');
+  });
+  it('should default title heading level to h1', () => {
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} />);
+    expect(screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i })).toBeTruthy();
+  });
+  it('should be able to change title heading level', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        headingLevel="h6"
+      />
+    );
+    expect(screen.getByRole('heading', { level: 6, name: /Why did you choose this rating?/i })).toBeTruthy();
+  });
+  it('should focus on load by default', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).toHaveFocus();
+  });
+  it('should not focus on load if focusOnLoad = false', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+        focusOnLoad={false}
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
+  });
+});

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -0,0 +1,128 @@
+// ============================================================================
+// Chatbot Main - Messages - Feedback Card
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import {
+  ActionGroup,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  CardProps,
+  Form,
+  LabelGroupProps,
+  OUIAProps,
+  TextArea
+} from '@patternfly/react-core';
+import QuickResponse from '../QuickResponse/QuickResponse';
+import CloseButton from './CloseButton';
+
+export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProps {
+  /** Additional classes for the pagination navigation container. */
+  className?: string;
+  /** Quick responses a user can select */
+  quickResponses?: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Whether form includes text area */
+  hasTextArea?: boolean;
+  /** Placeholder of text area */
+  textAreaPlaceholder?: string;
+  /** Aria label for text area */
+  textAreaAriaLabel?: string;
+  /** Callback function for when text area changes */
+  onTextAreaChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+  /** Callback function for when form is submitted */
+  onSubmit: (selectedResponse?: string, additionalFeedback?: string) => void;
+  /** Callback function for when close button is clicked */
+  onClose: () => void;
+  /** Aria label for close button */
+  closeButtonAriaLabel?: string;
+  /** Label for the English word "Submit." */
+  submitWord?: string;
+  /** @deprecated Cancel button has been deprecated. Use the close button instead. Label for the English word "Cancel." */
+  cancelWord?: string;
+  /** Uniquely identifies the card. */
+  id?: string;
+  /** The heading level to use, default is h1 */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Whether to focus card on load */
+  focusOnLoad?: boolean;
+  /** Timestamp passed in by Message for more context in aria announcements */
+  timestamp?: string;
+}
+
+const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
+  className,
+  timestamp,
+  title = 'Why did you choose this rating?',
+  hasTextArea,
+  textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`,
+  textAreaPlaceholder = 'Provide optional additional feedback',
+  onTextAreaChange,
+  submitWord = 'Submit',
+  quickResponses,
+  quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` },
+  onSubmit,
+  onClose,
+  closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`,
+  id,
+  headingLevel: HeadingLevel = 'h1',
+  focusOnLoad = true,
+  ...props
+}: UserFeedbackProps) => {
+  const [selectedResponse, setSelectedResponse] = React.useState<string>();
+  const [value, setValue] = React.useState('');
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (focusOnLoad) {
+      divRef.current?.focus();
+    }
+  }, []);
+
+  return (
+    /* card does not have ref forwarding; hence wrapper div */
+    <div ref={divRef} id={id} tabIndex={0} aria-label={title}>
+      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+        <CardHeader
+          actions={{
+            actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
+          }}
+        >
+          <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
+        </CardHeader>
+        <CardBody>
+          <Form className="pf-chatbot__feedback-card-form">
+            {quickResponses && (
+              <QuickResponse
+                quickResponses={quickResponses}
+                quickResponseContainerProps={quickResponseContainerProps}
+                onSelect={(id) => setSelectedResponse(id)}
+              />
+            )}
+            {hasTextArea && (
+              <TextArea
+                value={value}
+                onChange={(_event, value) => {
+                  setValue(value);
+                  onTextAreaChange && onTextAreaChange(_event, value);
+                }}
+                placeholder={textAreaPlaceholder}
+                aria-label={textAreaAriaLabel}
+                resizeOrientation="vertical"
+              />
+            )}
+            <ActionGroup>
+              <Button onClick={() => onSubmit(selectedResponse, value)}>{submitWord}</Button>
+            </ActionGroup>
+          </Form>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default UserFeedback;

package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx

@@ -0,0 +1,255 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import UserFeedbackComplete from './UserFeedbackComplete';
+
+describe('UserFeedbackComplete', () => {
+  it('should render correctly', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" />);
+    expect(screen.getByText('Feedback submitted')).toBeTruthy();
+    screen.getByText(/We've received your response. Thank you for sharing your feedback!/i);
+    expect(screen.queryByRole('button', { name: /Close/i })).toBeFalsy();
+  });
+  it('should render different title correctly', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" title="Thanks!" />);
+    expect(screen.getByText('Thanks!')).toBeTruthy();
+    screen.getByText(/We've received your response. Thank you for sharing your feedback!/i);
+  });
+  it('should render different string body correctly', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" body="Thanks!" />);
+    expect(screen.getByText('Feedback submitted')).toBeTruthy();
+    expect(screen.getByText('Thanks!')).toBeTruthy();
+  });
+  it('should render different node body correctly', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" body={<div>Thanks!</div>} />);
+    expect(screen.getByText('Feedback submitted')).toBeTruthy();
+    expect(screen.getByText('Thanks!')).toBeTruthy();
+  });
+  it('should handle onClose correctly', async () => {
+    const spy = jest.fn();
+    render(<UserFeedbackComplete timestamp="12/12/12" onClose={spy} />);
+    const closeButton = screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
+    expect(closeButton).toBeTruthy();
+    await userEvent.click(closeButton);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to change close button aria label', () => {
+    const spy = jest.fn();
+    render(<UserFeedbackComplete timestamp="12/12/12" onClose={spy} closeButtonAriaLabel="Ima button" />);
+    expect(screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
+  });
+  it('should handle className', async () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" className="test" data-testid="card" />);
+    expect(screen.getByTestId('card')).toHaveClass('test');
+  });
+  it('should apply id', async () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" id="test" data-testid="card" />);
+    expect(screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
+  });
+  it('renders with no timeout by default', () => {
+    jest.useFakeTimers();
+    render(<UserFeedbackComplete timestamp="12/12/12" />);
+    act(() => {
+      jest.advanceTimersByTime(8000);
+    });
+    expect(screen.getByText('Feedback submitted')).toBeVisible();
+    jest.useRealTimers();
+  });
+  it('should handle timeout correctly after 8000ms when timeout = true', async () => {
+    jest.useFakeTimers();
+    render(<UserFeedbackComplete timestamp="12/12/12" timeout />);
+    act(() => {
+      jest.advanceTimersByTime(7999);
+    });
+    expect(screen.getByText('Feedback submitted')).toBeVisible();
+    act(() => {
+      jest.advanceTimersByTime(1);
+    });
+    expect(screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+    jest.useRealTimers();
+  });
+  it('should handle timeout correctly when timeout = numeric value', async () => {
+    jest.useFakeTimers();
+    render(<UserFeedbackComplete timestamp="12/12/12" timeout={300} />);
+    act(() => {
+      jest.advanceTimersByTime(299);
+    });
+    expect(screen.getByText('Feedback submitted')).toBeVisible();
+    act(() => {
+      jest.advanceTimersByTime(1);
+    });
+    expect(screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+    jest.useRealTimers();
+  });
+  it('does not get removed on timeout if the user is focused on the card', async () => {
+    const user = userEvent.setup({
+      advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+    });
+    jest.useFakeTimers();
+    render(<UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" />);
+    expect(screen.getByText('Feedback submitted')).toBeTruthy();
+    await user.click(screen.getByTestId('card'));
+    act(() => {
+      jest.advanceTimersByTime(8000);
+    });
+    expect(screen.getByText('Feedback submitted')).toBeTruthy();
+    jest.useRealTimers();
+  });
+  it('does not remove the card on timeout if the user is hovered over it', async () => {
+    const user = userEvent.setup({
+      advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+    });
+    jest.useFakeTimers();
+    render(<UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" />);
+    const card = screen.getByTestId('card');
+    await user.hover(card);
+    act(() => {
+      jest.advanceTimersByTime(8000);
+    });
+    expect(card).toBeVisible();
+    jest.useRealTimers();
+  });
+  it('removes the card after the user removes focus from the card and 3000ms have passed', async () => {
+    const user = userEvent.setup({
+      advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+    });
+    jest.useFakeTimers();
+    render(
+      <div>
+        <input />
+        <UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" />
+      </div>
+    );
+    const card = screen.getByTestId('card');
+    await user.click(card);
+    act(() => {
+      jest.advanceTimersByTime(8000);
+    });
+    await user.click(screen.getByRole('textbox'));
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+    expect(screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+    jest.useRealTimers();
+  });
+
+  it('removes the card after the user removes hover from the card and 3000ms have passed', async () => {
+    const user = userEvent.setup({
+      advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+    });
+    jest.useFakeTimers();
+    render(
+      <div>
+        <input />
+        <UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" />
+      </div>
+    );
+    const card = screen.getByTestId('card');
+    await user.hover(card);
+    act(() => {
+      jest.advanceTimersByTime(8000);
+    });
+    await user.hover(screen.getByRole('textbox'));
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+    expect(screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+    jest.useRealTimers();
+  });
+
+  it('removes the card after the user removes hover from the card and timeoutAnimation time has passed', async () => {
+    const user = userEvent.setup({
+      advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+    });
+    jest.useFakeTimers();
+    render(
+      <div>
+        <input />
+        <UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" timeoutAnimation={1000} />
+      </div>
+    );
+    const card = screen.getByTestId('card');
+    await user.hover(card);
+    act(() => {
+      jest.advanceTimersByTime(8000);
+    });
+    await user.hover(screen.getByRole('textbox'));
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+    jest.useRealTimers();
+  });
+  it('does not call the onTimeout callback before the timeout period has expired', () => {
+    const spy = jest.fn();
+    jest.useFakeTimers();
+    render(<UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" onTimeout={spy} />);
+    act(() => {
+      jest.advanceTimersByTime(7999);
+    });
+    expect(spy).not.toHaveBeenCalled();
+    jest.useRealTimers();
+  });
+  it('calls the onTimeout callback after the timeout period has expired', () => {
+    jest.useFakeTimers();
+    const spy = jest.fn();
+    render(<UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" onTimeout={spy} />);
+    act(() => {
+      jest.advanceTimersByTime(8000);
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
+  });
+
+  it('renders without aria-live and aria-atomic attributes by default', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" />);
+    const card = screen.getByTestId('card').parentElement;
+    expect(card).not.toHaveAttribute('aria-live');
+    expect(card).not.toHaveAttribute('aria-atomic');
+  });
+
+  it('has an aria-live value of polite and aria-atomic value of false when isLiveRegion = true', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" timeout data-testid="card" isLiveRegion />);
+    const card = screen.getByTestId('card').parentElement;
+    expect(card).toHaveAttribute('aria-live', 'polite');
+    expect(card).toHaveAttribute('aria-atomic', 'false');
+  });
+  it('calls onMouseEnter appropriately', async () => {
+    const spy = jest.fn();
+    const user = userEvent.setup();
+    render(
+      <div>
+        <input />
+        <UserFeedbackComplete timestamp="12/12/12" data-testid="card" onMouseEnter={spy} />
+      </div>
+    );
+    const card = screen.getByTestId('card');
+    expect(spy).toHaveBeenCalledTimes(0);
+    await user.hover(card);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('calls onMouseLeave appropriately', async () => {
+    const spy = jest.fn();
+    const user = userEvent.setup();
+    render(
+      <div>
+        <input />
+        <UserFeedbackComplete timestamp="12/12/12" data-testid="card" onMouseLeave={spy} />
+      </div>
+    );
+    const card = screen.getByTestId('card');
+    expect(spy).toHaveBeenCalledTimes(0);
+    await user.hover(card);
+    await user.hover(screen.getByRole('textbox'));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should focus on load by default', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" />);
+    expect(screen.getByTestId('card').parentElement).toHaveFocus();
+  });
+  it('should not focus on load if focusOnLoad = false', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" focusOnLoad={false} />);
+    expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
+  });
+});