Merge pull request #539 from rebeccaalpert/click-jump

fix(JumpLinks): Add onClick handlers

Author: nicolethoen

packages/module/src/MessageBox/MessageBox.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { MessageBox } from './MessageBox';
+import userEvent from '@testing-library/user-event';
 
 describe('MessageBox', () => {
   it('should render Message box', () => {
@@ -23,4 +24,47 @@ describe('MessageBox', () => {
     expect(ref.current).not.toBeNull();
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
+  it('should call onScrollToBottomClick when scroll to top button is clicked', async () => {
+    const spy = jest.fn();
+    render(
+      <MessageBox onScrollToBottomClick={spy}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    // this forces button to show
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0 });
+    region.dispatchEvent(new Event('scroll'));
+
+    await waitFor(() => {
+      userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+  it('should call onScrollToTopClick when scroll to top button is clicked', async () => {
+    const spy = jest.fn();
+    render(
+      <MessageBox onScrollToTopClick={spy}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    // this forces button to show
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+    Object.defineProperty(region, 'scrollTop', {
+      configurable: true,
+      value: 500
+    });
+    region.dispatchEvent(new Event('scroll'));
+
+    await waitFor(() => {
+      userEvent.click(screen.getByRole('button', { name: /Jump top button/i }));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
 });

packages/module/src/MessageBox/MessageBox.tsx

@@ -17,6 +17,10 @@ export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
   innerRef?: React.Ref<HTMLDivElement>;
   /** Modifier that controls how content in MessageBox is positioned within the container */
   position?: 'top' | 'bottom';
+  /** Click handler for additional logic for when scroll to top jump button is clicked */
+  onScrollToTopClick?: () => void;
+  /** Click handler for additional logic for when scroll to bottom jump button is clicked */
+  onScrollToBottomClick?: () => void;
 }
 
 const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
@@ -26,6 +30,8 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
   innerRef,
   className,
   position = 'top',
+  onScrollToTopClick,
+  onScrollToBottomClick,
   ...props
 }: MessageBoxProps) => {
   const [atTop, setAtTop] = React.useState(false);
@@ -62,13 +68,15 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
     if (element) {
       element.scrollTo({ top: 0, behavior: 'smooth' });
     }
+    onScrollToTopClick && onScrollToTopClick();
   }, [messageBoxRef]);
 
   const scrollToBottom = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
     }
+    onScrollToBottomClick && onScrollToBottomClick();
   }, [messageBoxRef]);
 
   // Detect scroll position