@onewelcome/react-lib-components 0.1.0-alpha → 0.1.3-alpha

package/src/Tabs/Tabs.test.tsx

@@ -0,0 +1,268 @@
+import React from 'react';
+import { Tabs, Props } from './Tabs';
+import { render } from '@testing-library/react';
+import { TabButton as Tab } from './TabButton';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  'aria-label': 'Entertainment',
+  children: [
+    <Tab title="Tab1">Tabpanel1 content</Tab>,
+    <Tab title="Tab2">Tabpanel2 content</Tab>,
+    <Tab title="Tab3">Tabpanel3 content</Tab>,
+  ],
+};
+
+const createTabs = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Tabs {...parameters} data-testid="tabs"></Tabs>);
+  const tabs = queries.getByTestId('tabs');
+
+  return {
+    ...queries,
+    tabs,
+  };
+};
+
+describe('Tabs should render', () => {
+  it('renders without crashing', () => {
+    const { tabs } = createTabs();
+
+    expect(tabs).toBeDefined();
+  });
+
+  it('renders with properties passed', () => {
+    const { tabs } = createTabs((defaultParams) => ({
+      ...defaultParams,
+      className: 'testclass',
+    }));
+
+    expect(tabs).toHaveClass('testclass');
+  });
+
+  it('switches to tab and tabpanel when selected property is changed', () => {
+    const { tabs } = createTabs((defaultParams) => ({
+      ...defaultParams,
+      selected: 2,
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    const tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    const tab1 = tabButtons[0] as HTMLButtonElement;
+    const tab3 = tabButtons[2] as HTMLButtonElement;
+
+    const tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    const tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).not.toHaveClass('selected');
+    expect(tab3).toHaveClass('selected');
+
+    expect(tabpanel1).not.toHaveClass('selected');
+    expect(tabpanel3).toHaveClass('selected');
+  });
+
+  it('switches to tab and tabpanel when tab is clicked', () => {
+    const { tabs } = createTabs((defaultParams) => ({
+      ...defaultParams,
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    let tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    let tab1 = tabButtons[0] as HTMLButtonElement;
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('selected');
+
+    expect(tabpanel1).toHaveClass('selected');
+    expect(tabpanel3).not.toHaveClass('selected');
+
+    userEvent.click(tab3);
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).not.toHaveClass('selected');
+    expect(tab3).toHaveClass('selected');
+
+    expect(tabpanel1).not.toHaveClass('selected');
+    expect(tabpanel3).toHaveClass('selected');
+  });
+
+  it('triggers the onTabChange when switching tabs', () => {
+    const onTabChangeHandler = jest.fn();
+
+    const { tabs } = createTabs((defaultParams) => ({
+      ...defaultParams,
+      onTabChange: onTabChangeHandler,
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    userEvent.click(tab3);
+
+    expect(onTabChangeHandler).toHaveBeenCalled();
+  });
+});
+
+describe('Tabs should not render other children then tab components', () => {
+  it('renders no tabs', () => {
+    const queries = render(
+      <Tabs data-testid="tabs">
+        <div>wrong component 1</div>
+        <div>wrong component 2</div>
+      </Tabs>
+    );
+
+    const tabs = queries.getByTestId('tabs');
+
+    expect(tabs).toBeDefined();
+    expect(tabs).toBeEmptyDOMElement;
+  });
+});
+
+describe('Tabs should comply with accessibility rules', () => {
+  it('traverse through tabs with keyboard', async () => {
+    const { tabs } = createTabs();
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    let tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    let tab1 = tabButtons[0] as HTMLButtonElement;
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    tab1.focus();
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab1).not.toHaveClass('focussed');
+    expect(tab3).not.toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+    expect(tabpanel1).toHaveClass('selected');
+    expect(tabpanel3).not.toHaveClass('selected');
+
+    userEvent.keyboard('[ArrowLeft]');
+    userEvent.keyboard('[Space]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab3).toHaveFocus();
+    expect(tab3).toHaveClass('selected');
+    expect(tab1).not.toHaveClass('selected');
+    expect(tab1).not.toHaveClass('focussed');
+    expect(tabpanel3).toHaveClass('selected');
+    expect(tabpanel1).not.toHaveClass('selected');
+
+    userEvent.keyboard('[ArrowRight]');
+    userEvent.keyboard('[Enter]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+    expect(tabpanel1).toHaveClass('selected');
+    expect(tabpanel3).not.toHaveClass('selected');
+
+    userEvent.keyboard('[End]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab3).toHaveFocus();
+    expect(tab3).toHaveClass('focussed');
+    expect(tab1).not.toHaveClass('focussed');
+
+    userEvent.keyboard('[Home]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+
+    // should have no effect
+    userEvent.keyboard('a');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+
+    userEvent.keyboard('[ArrowRight]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).not.toHaveFocus();
+    expect(tab3).not.toHaveFocus();
+    expect(tab1).not.toHaveClass('focussed');
+    expect(tab3).not.toHaveClass('focussed');
+
+    userEvent.keyboard('[ArrowLeft]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+
+    userEvent.keyboard('[ArrowLeft]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    tab3.blur();
+
+    expect(tab1).not.toHaveFocus();
+    expect(tab3).not.toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+  });
+});

package/src/Tabs/Tabs.tsx

@@ -0,0 +1,149 @@
+import React, {
+  ComponentPropsWithRef,
+  createRef,
+  MutableRefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { generateID } from '../util/helper';
+import { Props as TabProps } from './Tab';
+import { TabButton } from './TabButton';
+import { TabPanel } from './TabPanel';
+import classes from './Tabs.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+  selected?: number;
+  'aria-label'?: string;
+  onTabChange?: (index: number) => void;
+}
+
+export const Tabs = ({
+  children,
+  selected = 0,
+  'aria-label': ariaLabel,
+  onTabChange,
+  className,
+  ...rest
+}: Props) => {
+  const indicatorRef = useRef<HTMLDivElement>(null);
+  const [indicatorPosition, setIndicatorPosition] = useState({ left: 0, top: 0 });
+  const [indicatorWidth, setIndicatorWidth] = useState(0);
+
+  const [max] = useState(React.Children.count(children) - 1);
+  const min = 0;
+
+  const [selectedTab, setSelectedTab] = useState(Math.min(max, Math.max(min, selected)));
+  const [focussedTab, setFocussedTab] = useState(-1);
+  const [tabIds] = useState([...Array(max)].map(() => generateID()));
+  const [tabPanelIds] = useState([...Array(max)].map(() => generateID()));
+
+  useEffect(() => {
+    setSelectedTab(Math.min(max, Math.max(min, selected)));
+    setFocussedTab(-1);
+  }, [selected]);
+
+  useEffect(() => {
+    calculateIndicatorPosition();
+  }, [selectedTab]);
+
+  const calculateIndicatorPosition = () => {
+    const selectedTabButton = (
+      tabButtons[selectedTab].ref as MutableRefObject<HTMLButtonElement | null>
+    ).current as HTMLButtonElement;
+
+    setIndicatorPosition({
+      left: selectedTabButton.offsetLeft,
+      top:
+        selectedTabButton.offsetTop +
+        selectedTabButton.offsetHeight -
+        indicatorRef.current!.offsetHeight,
+    });
+    setIndicatorWidth(selectedTabButton.offsetWidth);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    // do not show focus unless we came here before
+    let currentFocussedTab = focussedTab === -1 ? selectedTab : focussedTab;
+
+    switch (e.code) {
+      case 'ArrowLeft':
+        setFocussedTab(currentFocussedTab === min ? max : currentFocussedTab - 1);
+        break;
+      case 'ArrowRight':
+        setFocussedTab(currentFocussedTab === max ? min : currentFocussedTab + 1);
+        break;
+      case 'Home':
+        setFocussedTab(min);
+        break;
+      case 'End':
+        setFocussedTab(max);
+        break;
+      case 'Space':
+      case 'Enter':
+        activateTab(currentFocussedTab);
+        break;
+    }
+  };
+
+  const handleBlur = () => {
+    setFocussedTab(selectedTab);
+  };
+
+  const activateTab = (index: number) => {
+    setSelectedTab(index);
+    setFocussedTab(index);
+    onTabChange && onTabChange(index);
+  };
+
+  const tabButtons = React.Children.map(children, (child, index) =>
+    React.createElement(TabButton, {
+      ref: child.props.buttonRef || createRef<HTMLButtonElement>(),
+      key: generateID(),
+      tabId: tabIds[index],
+      tabPanelId: tabPanelIds[index],
+      selected: selectedTab === index,
+      focussed: focussedTab === index,
+      onTabButtonClick: () => activateTab(index),
+      children: child.props.title,
+    })
+  );
+
+  const tabPanels = React.Children.map(children, (child, index) =>
+    React.createElement(TabPanel, {
+      ref: child.props.panelRef || createRef<HTMLDivElement>(),
+      key: generateID(),
+      selected: selectedTab === index,
+      tabId: tabIds[index],
+      tabPanelId: tabPanelIds[index],
+      children: child.props.children,
+    })
+  );
+
+  return (
+    <div {...rest} className={`${classes['tabs']} ${className ?? ''}`}>
+      <div
+        role="tablist"
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        aria-label={ariaLabel}
+        className={classes['tablist']}
+      >
+        <div className={classes['tabdivider']} />
+        {tabButtons}
+        <div
+          className={classes['indicator']}
+          ref={indicatorRef}
+          aria-hidden="true"
+          tabIndex={-1}
+          style={{
+            width: indicatorWidth,
+            ...indicatorPosition,
+          }}
+        />
+      </div>
+      <div className={classes['tabpanels']}>{tabPanels}</div>
+    </div>
+  );
+};

package/src/TextEllipsis/TextEllipsis.module.scss

@@ -0,0 +1,18 @@
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.popover {
+  max-width: min(75ch, 90%);
+  padding: 0.6875rem 0.6875rem 0.6875rem 0.875rem;
+  border-radius: 0.25rem;
+
+  box-shadow: 0rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
+  white-space: pre-wrap;
+
+  transition-property: opacity;
+  transform: scale(1);
+  z-index: 1;
+}

package/src/TextEllipsis/TextEllipsis.test.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from 'react';
+import { render } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { Props, TextEllipsis } from './TextEllipsis';
+
+const defaultParams: Props = {};
+
+const createTextEllipsis = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <TextEllipsis {...parameters} data-testid="TextEllipsis">
+      content
+    </TextEllipsis>
+  );
+  const textEllipsis = queries.getByTestId('TextEllipsis');
+
+  return {
+    ...queries,
+    textEllipsis,
+  };
+};
+
+describe('TextEllipsis should render', () => {
+  it('renders without crashing', () => {
+    const { textEllipsis, getAllByText } = createTextEllipsis();
+
+    expect(textEllipsis).toBeDefined();
+    expect(getAllByText('content')).toHaveLength(2);
+  });
+
+  it('does not show popover when full text is visible', () => {
+    const { textEllipsis, getByRole } = createTextEllipsis();
+
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+    user.hover(textEllipsis);
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+  });
+
+  it('shows popover with full text when base text has ellipsis', () => {
+    const { textEllipsis, getByRole } = createTextEllipsis();
+
+    Object.defineProperty(textEllipsis, 'offsetWidth', { configurable: true, value: 1 });
+    Object.defineProperty(textEllipsis, 'scrollWidth', { configurable: true, value: 2 });
+
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+    user.hover(textEllipsis);
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'false');
+    user.unhover(textEllipsis);
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <TextEllipsis data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/TextEllipsis/TextEllipsis.tsx

@@ -0,0 +1,55 @@
+import React, { useRef, MouseEventHandler, useState, ComponentPropsWithRef } from 'react';
+import { Popover } from '../Popover/Popover';
+import classes from './TextEllipsis.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  children?: string;
+  popoverClassName?: string;
+}
+
+export const TextEllipsis = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, popoverClassName, className, ...rest }: Props, ref) => {
+    const [showPopover, setShowPopover] = useState(false);
+    const textContainer = useRef<HTMLDivElement>(null);
+
+    const ellipsisVisible = () => {
+      if (
+        textContainer.current &&
+        textContainer.current.offsetWidth < textContainer.current.scrollWidth
+      ) {
+        return true;
+      }
+      return false;
+    };
+
+    const onMouseEnter: MouseEventHandler<HTMLDivElement> = () => {
+      ellipsisVisible() && setShowPopover(true);
+    };
+
+    const onMouseLeave: MouseEventHandler<HTMLDivElement> = () => {
+      ellipsisVisible() && setShowPopover(false);
+    };
+
+    return (
+      <div
+        {...rest}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className={`${classes['text-ellipsis']} ${className ?? ''}`}
+        ref={ref || textContainer}
+      >
+        {children}
+        <Popover
+          aria-hidden={true}
+          data-hidden={!showPopover}
+          show={showPopover}
+          role="tooltip"
+          anchorEl={textContainer}
+          className={`${classes.popover} ${popoverClassName ?? ''}`}
+        >
+          {children}
+        </Popover>
+      </div>
+    );
+  }
+);

package/src/Tiles/Tile.module.scss

@@ -7,6 +7,7 @@
   padding: 0 0 2rem;
   background-color: #fff;
   transition: box-shadow 0.2s ease-in-out;
+  font-family: var(--font-family);
 
   &:hover {
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
@@ -14,7 +15,6 @@
 
   header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
 
     .icon {

package/src/Tiles/Tile.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Tile, Props } from './Tile';
 import { render, getByRole } from '@testing-library/react';
 import { Icon, Icons } from '../Icon/Icon';
@@ -10,7 +10,6 @@ import userEvent from '@testing-library/user-event';
 const onShow = jest.fn();
 const onClose = jest.fn();
 const contextMenuItemOnClick = jest.fn();
-const iconClick = jest.fn();
 
 const contextMenu = (
   <ContextMenu
@@ -38,8 +37,8 @@ const contextMenu = (
 
 const defaultParams: Props = {
   title: 'tile',
-  iconProps: { icon: Icons.Bell, onClick: iconClick, 'data-testid': 'icon' },
-  menu: contextMenu,
+  enabled: true,
+  tileAction: contextMenu,
 };
 
 const createTile = (params?: (defaultParams: Props) => Props) => {
@@ -54,25 +53,36 @@ const createTile = (params?: (defaultParams: Props) => Props) => {
   );
   const tile = queries.getByTestId('tile');
   const menutrigger = queries.getByTestId('contextmenu-trigger');
-  const icon = queries.getByTestId('icon');
 
   return {
     ...queries,
     tile,
     menutrigger,
-    icon,
   };
 };
 
 describe('Tile should render', () => {
-  it('renders without crashing', () => {
-    const { tile, icon } = createTile();
+  it('renders without crashing and enabled', () => {
+    const { tile } = createTile();
 
-    userEvent.click(icon);
-
-    expect(iconClick).toHaveBeenCalled();
+    expect(tile.querySelector('.icon-checkmark')).toBeTruthy();
+    expect(tile.querySelector('.icon-forbidden')).toBeFalsy();
     expect(tile).toBeDefined();
   });
+
+  it('renders disabled', () => {
+    const { tile } = createTile((defaultParams) => ({ ...defaultParams, enabled: false }));
+
+    expect(tile.querySelector('.icon-checkmark')).toBeFalsy();
+    expect(tile.querySelector('.icon-forbidden')).toBeTruthy();
+  });
+
+  it('renders no status', () => {
+    const { tile } = createTile((defaultParams) => ({ ...defaultParams, enabled: undefined }));
+
+    expect(tile.querySelector('.icon-checkmark')).toBeFalsy();
+    expect(tile.querySelector('.icon-forbidden')).toBeFalsy();
+  });
 });
 
 describe("should throw errors since we don't pass props", () => {
@@ -85,7 +95,7 @@ describe("should throw errors since we don't pass props", () => {
 
     try {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
-      render(<Tile imageProps={{ src: 'test', alt: 'test' }} />);
+      render(<Tile imageProps={{ src: 'test' }} />);
     } catch (e: any) {
       actual = e.message;
     }
@@ -127,3 +137,29 @@ describe('contextmenu', () => {
     expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Tile {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});