@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,43 +1,206 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Tooltip } from '../Tooltip';
+import userEvent from '@testing-library/user-event';
+import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 
-test('tooltip renders', () => {
-  const ref = React.createRef<HTMLDivElement>();
-  const { asFragment } = render(
-    <Tooltip
-      position="top"
-      triggerRef={ref}
-      content={
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-        </div>
-      }
-    >
-      <div ref={ref}>Toggle tooltip</div>
+jest.mock('../../../helpers/Popper/Popper');
+
+test('Renders with class name pf-v5-c-tooltip by default', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveClass(styles.tooltip);
+});
+
+test('Renders with custom class names provided via prop', async () => {
+  render(<Tooltip isVisible className="test-class" content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveClass('test-class');
+});
+
+test('Renders with aria-live of off by default when triggerRef is not passed', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveAttribute('aria-live', 'off');
+});
+
+test('Renders with aria-live of polite by default when triggerRef is passed', async () => {
+  const triggerRef = React.createRef();
+  render(<Tooltip triggerRef={triggerRef} isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveAttribute('aria-live', 'polite');
+});
+
+test('Renders with value passed to aria-live prop', async () => {
+  render(<Tooltip aria-live="polite" isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveAttribute('aria-live', 'polite');
+});
+
+test('Renders with value passed to id prop', async () => {
+  render(<Tooltip id="custom-id" isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveAttribute('id', 'custom-id');
+});
+
+test('Renders with maxWidth styling applied when maxWidth is passed', async () => {
+  render(<Tooltip isVisible maxWidth="100px" content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveStyle('max-width: 100px');
+});
+
+test('Renders with aria-describedby on trigger by default', async () => {
+  render(
+    <Tooltip id="trigger-with-aria" isVisible content="Test content">
+      <button>Toggle</button>
+    </Tooltip>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(screen.getByRole('button')).toHaveAccessibleDescription('Test content');
+});
+
+test('Renders with aria-labelledby on trigger when aria="labelledby" is passed', async () => {
+  render(
+    <Tooltip id="trigger-with-aria" aria="labelledby" isVisible content="Test content">
+      <button>Toggle</button>
     </Tooltip>
   );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('tooltip renders in strict mode', () => {
-  const consoleError = jest.spyOn(console, 'error');
-  const ref = React.createRef<HTMLDivElement>();
-  const { asFragment } = render(
-    <React.StrictMode>
-      <Tooltip
-        position="top"
-        triggerRef={ref}
-        content={
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-          </div>
-        }
-      >
-        <div ref={ref}>Toggle tooltip</div>
+
+  await screen.findByRole('tooltip');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test content');
+});
+
+test('Renders without aria-labelledby or aria-describedby on trigger when aria="none" is passed', async () => {
+  render(
+    <Tooltip id="trigger-with-aria" aria="none" isVisible content="Test content">
+      <button>Toggle</button>
+    </Tooltip>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(screen.getByRole('button')).not.toHaveAccessibleName('Test content');
+  expect(screen.getByRole('button')).not.toHaveAccessibleDescription('Test content');
+});
+
+test('Does not call onTooltipHidden before tooltip is hidden', async () => {
+  const onTooltipHiddenMock = jest.fn();
+  const user = userEvent.setup();
+
+  const TooltipCallback = () => {
+    const [isVisible, setIsVisible] = React.useState(false);
+
+    return (
+      <Tooltip trigger="manual" isVisible={isVisible} onTooltipHidden={onTooltipHiddenMock} content="Test content">
+        <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
       </Tooltip>
-    </React.StrictMode>
+    );
+  };
+  render(<TooltipCallback />);
+
+  await user.click(screen.getByRole('button'));
+  await screen.findByRole('tooltip');
+  expect(onTooltipHiddenMock).not.toHaveBeenCalled();
+});
+
+test.skip('Calls onTooltipHidden when tooltip is hidden', async () => {
+  const onTooltipHiddenMock = jest.fn();
+  const user = userEvent.setup();
+
+  const TooltipCallback = () => {
+    const [isVisible, setIsVisible] = React.useState(true);
+
+    return (
+      <Tooltip trigger="manual" isVisible={isVisible} onTooltipHidden={onTooltipHiddenMock} content="Test content">
+        <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
+      </Tooltip>
+    );
+  };
+  render(<TooltipCallback />);
+
+  await screen.findByRole('tooltip');
+  await user.click(screen.getByRole('button'));
+  await screen.findByText('isVisible: false');
+  expect(onTooltipHiddenMock).toHaveBeenCalled();
+});
+
+test('Does not pass isVisible to Popper by default', async () => {
+  render(<Tooltip content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('isVisible: false');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes isVisible to Popper', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('isVisible: true');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes zIndex to Popper', async () => {
+  render(<Tooltip zIndex={10} content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('zIndex: 10');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes enableFlip to Popper', async () => {
+  render(<Tooltip enableFlip content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('enableFlip: true');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes position as placement to Popper', async () => {
+  render(<Tooltip position="left-start" content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('placement: left-start');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes appendTo to Popper', async () => {
+  render(<Tooltip appendTo={() => document.body} content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('appendTo: () => document.body');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes distance to Popper', async () => {
+  render(<Tooltip distance={5} content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('distance: 5');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes flipBehavior to Popper', async () => {
+  render(<Tooltip flipBehavior="flip" content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('flipBehavior: flip');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes minWidth to Popper', async () => {
+  render(<Tooltip minWidth="100px" content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('minWidth: 100px');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Matches snapshot', async () => {
+  render(
+    <Tooltip id="custom-id" isVisible isContentLeftAligned content="Test content">
+      <button>Trigger</button>
+    </Tooltip>
   );
-  expect(consoleError).not.toHaveBeenCalled();
-  expect(asFragment()).toMatchSnapshot();
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toMatchSnapshot();
 });

package/src/components/Tooltip/__tests__/TooltipArrow.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TooltipArrow } from '../TooltipArrow';
+import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
+
+test('Renders without children', () => {
+  render(<TooltipArrow data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-tooltip__arrow by default', () => {
+  render(<TooltipArrow data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toHaveClass(styles.tooltipArrow);
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<TooltipArrow className="test-class" data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toHaveClass('test-class');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TooltipArrow data-testid="tooltipArrow" />);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Tooltip/__tests__/TooltipContent.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TooltipContent } from '../TooltipContent';
+import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
+
+test('Renders with children', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-tooltip__content by default', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass(styles.tooltipContent);
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<TooltipContent className="test-class">Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass('test-class');
+});
+
+test('Does not render with class pf-m-text-align-left when isLeftAligned is not passed', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).not.toHaveClass('pf-m-text-align-left');
+});
+
+test('Renders with class pf-m-text-align-left when isLeftAligned is passed', () => {
+  render(<TooltipContent isLeftAligned>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass('pf-m-text-align-left');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TooltipContent>Test content</TooltipContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -1,17 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tooltip renders 1`] = `
-<DocumentFragment>
-  <div>
-    Toggle tooltip
+exports[`Matches snapshot 1`] = `
+<div
+  aria-live="off"
+  class="pf-v5-c-tooltip"
+  id="custom-id"
+  role="tooltip"
+>
+  <div
+    class="pf-v5-c-tooltip__arrow"
+  />
+  <div
+    class="pf-v5-c-tooltip__content pf-m-text-align-left"
+  >
+    Test content
   </div>
-</DocumentFragment>
-`;
-
-exports[`tooltip renders in strict mode 1`] = `
-<DocumentFragment>
-  <div>
-    Toggle tooltip
-  </div>
-</DocumentFragment>
+</div>
 `;

package/src/components/Tooltip/__tests__/__snapshots__/TooltipArrow.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tooltip__arrow"
+    data-testid="tooltipArrow"
+  />
+</DocumentFragment>
+`;

package/src/components/Tooltip/__tests__/__snapshots__/TooltipContent.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tooltip__content"
+  >
+    Test content
+  </div>
+</DocumentFragment>
+`;

package/src/components/TreeView/TreeView.tsx

@@ -76,6 +76,10 @@ export interface TreeViewProps {
   onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Callback for item selection. */
   onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
+  /** Callback for expanding a node with children. */
+  onExpand?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
+  /** Callback for collapsing a node with children. */
+  onCollapse?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Internal. Parent item of a tree view list item. */
   parentItem?: TreeViewDataItem;
   /** Toolbar to display above the tree view. */
@@ -104,6 +108,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   parentItem,
   onSelect,
   onCheck,
+  onExpand,
+  onCollapse,
   toolbar,
   activeItems,
   compareItems = (item, itemToCheck) => item.id === itemToCheck.id,
@@ -113,7 +119,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
 }: TreeViewProps) => {
   const treeViewList = (
     <TreeViewList isNested={isNested} toolbar={toolbar}>
-      {data.map(item => (
+      {data.map((item) => (
         <TreeViewListItem
           key={item.id?.toString() || item.name?.toString()}
           name={item.name}
@@ -124,6 +130,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
           defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
           onSelect={onSelect}
           onCheck={onCheck}
+          onExpand={onExpand}
+          onCollapse={onCollapse}
           hasCheckbox={item.hasCheckbox !== undefined ? item.hasCheckbox : hasCheckboxes}
           checkProps={item.checkProps}
           hasBadge={item.hasBadge !== undefined ? item.hasBadge : hasBadges}
@@ -153,6 +161,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
                 defaultAllExpanded={defaultAllExpanded}
                 onSelect={onSelect}
                 onCheck={onCheck}
+                onExpand={onExpand}
+                onCollapse={onCollapse}
                 activeItems={activeItems}
                 icon={icon}
                 expandedIcon={expandedIcon}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -55,6 +55,10 @@ export interface TreeViewListItemProps {
    * from toggling.
    */
   onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  /** Callback for expanding a node with children. */
+  onExpand?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
+  /** Callback for collapsing a node with children. */
+  onCollapse?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Parent item of tree view item. */
   parentItem?: TreeViewDataItem;
   /** Title of a tree view item. */
@@ -74,6 +78,8 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   defaultExpanded = false,
   children = null,
   onSelect,
+  onExpand,
+  onCollapse,
   onCheck,
   hasCheckbox = false,
   checkProps = {
@@ -117,6 +123,11 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       className={css(styles.treeViewNodeToggle)}
       onClick={(evt: React.MouseEvent) => {
         if (isSelectable || hasCheckbox) {
+          if (internalIsExpanded) {
+            onCollapse && onCollapse(evt, itemData, parentItem);
+          } else {
+            onExpand && onExpand(evt, itemData, parentItem);
+          }
           setIsExpanded(!internalIsExpanded);
         }
         if (isSelectable) {
@@ -135,9 +146,9 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     <span className={css(styles.treeViewNodeCheck)}>
       <input
         type="checkbox"
-        onChange={evt => onCheck && onCheck(evt, itemData, parentItem)}
-        onClick={evt => evt.stopPropagation()}
-        ref={elem => elem && (elem.indeterminate = checkProps.checked === null)}
+        onChange={(evt) => onCheck && onCheck(evt, itemData, parentItem)}
+        onClick={(evt) => evt.stopPropagation()}
+        ref={(elem) => elem && (elem.indeterminate = checkProps.checked === null)}
         {...checkProps}
         checked={checkProps.checked === null ? false : checkProps.checked}
         id={randomId}
@@ -192,7 +203,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     >
       <div className={css(styles.treeViewContent)}>
         <GenerateId prefix={isSelectable ? 'selectable-id' : 'checkbox-id'}>
-          {randomId => (
+          {(randomId) => (
             <Component
               className={css(
                 styles.treeViewNode,
@@ -200,7 +211,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
                 (!children || isSelectable) &&
                   activeItems &&
                   activeItems.length > 0 &&
-                  activeItems.some(item => compareItems && item && compareItems(item, itemData))
+                  activeItems.some((item) => compareItems && item && compareItems(item, itemData))
                   ? styles.modifiers.current
                   : ''
               )}
@@ -208,6 +219,11 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
                 if (!hasCheckbox) {
                   onSelect && onSelect(evt, itemData, parentItem);
                   if (!isSelectable && children && evt.isDefaultPrevented() !== true) {
+                    if (internalIsExpanded) {
+                      onCollapse && onCollapse(evt, itemData, parentItem);
+                    } else {
+                      onExpand && onExpand(evt, itemData, parentItem);
+                    }
                     setIsExpanded(!internalIsExpanded);
                   }
                 }
@@ -241,13 +257,13 @@ export const TreeViewListItem = React.memo(TreeViewListItemBase, (prevProps, nex
     prevProps.activeItems &&
     prevProps.activeItems.length > 0 &&
     prevProps.activeItems.some(
-      item => prevProps.compareItems && item && prevProps.compareItems(item, prevProps.itemData)
+      (item) => prevProps.compareItems && item && prevProps.compareItems(item, prevProps.itemData)
     );
   const nextIncludes =
     nextProps.activeItems &&
     nextProps.activeItems.length > 0 &&
     nextProps.activeItems.some(
-      item => nextProps.compareItems && item && nextProps.compareItems(item, nextProps.itemData)
+      (item) => nextProps.compareItems && item && nextProps.compareItems(item, nextProps.itemData)
     );
 
   if (prevIncludes || nextIncludes) {
@@ -262,6 +278,8 @@ export const TreeViewListItem = React.memo(TreeViewListItemBase, (prevProps, nex
     prevProps.defaultExpanded !== nextProps.defaultExpanded ||
     prevProps.onSelect !== nextProps.onSelect ||
     prevProps.onCheck !== nextProps.onCheck ||
+    prevProps.onExpand !== nextProps.onExpand ||
+    prevProps.onCollapse !== nextProps.onCollapse ||
     prevProps.hasCheckbox !== nextProps.hasCheckbox ||
     prevProps.checkProps !== nextProps.checkProps ||
     prevProps.hasBadge !== nextProps.hasBadge ||

package/src/components/TreeView/TreeViewRoot.tsx

@@ -20,7 +20,7 @@ export interface TreeViewRootProps {
   hasSelectableNodes?: boolean;
 }
 
-export class TreeViewRoot extends React.Component<TreeViewRootProps> {
+class TreeViewRoot extends React.Component<TreeViewRootProps> {
   displayName = 'TreeViewRoot';
   private treeRef = React.createRef<HTMLDivElement>();
 
@@ -67,8 +67,10 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
   }
 
   handleKeys = (event: KeyboardEvent) => {
-    if (!this.treeRef.current.contains(event.target as HTMLElement) ||
-      !(event.target as HTMLElement).classList.contains('pf-v5-c-tree-view__node')) {
+    if (
+      !this.treeRef.current.contains(event.target as HTMLElement) ||
+      !(event.target as HTMLElement).classList.contains('pf-v5-c-tree-view__node')
+    ) {
       return;
     }
     const activeElement = document.activeElement;
@@ -94,8 +96,9 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     );
 
     if (['ArrowLeft', 'ArrowRight'].includes(key)) {
-      const isExpandable =
-        activeElement?.firstElementChild?.firstElementChild?.classList.contains('pf-v5-c-tree-view__node-toggle');
+      const isExpandable = activeElement?.firstElementChild?.firstElementChild?.classList.contains(
+        'pf-v5-c-tree-view__node-toggle'
+      );
       const isExpanded = activeElement?.closest('li')?.classList.contains('pf-m-expanded');
       if (key === 'ArrowLeft') {
         if (isExpandable && isExpanded) {
@@ -204,3 +207,5 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     );
   }
 }
+
+export { TreeViewRoot };

package/src/components/TreeView/__tests__/TreeView.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { TreeView } from '../TreeView';
 import { Button } from '@patternfly/react-core';
 import { FolderIcon, FolderOpenIcon } from '@patternfly/react-icons';
@@ -148,6 +148,37 @@ describe('tree view', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('calls onExpand and onCollapse appropriately', () => {
+    const onExpand = jest.fn();
+    const onCollapse = jest.fn();
+    const { asFragment } = render(
+      <TreeView data={options} onSelect={jest.fn()} onExpand={onExpand} onCollapse={onCollapse} />
+    );
+    expect(onExpand).not.toHaveBeenCalled();
+    expect(onCollapse).not.toHaveBeenCalled();
+    expect(screen.queryByText('Application 3')).toBeNull();
+    expect(screen.getByText('Cost Management')).toBeInTheDocument();
+    fireEvent(
+      screen.getByText('Cost Management'),
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(onExpand).toHaveBeenCalled();
+    expect(onCollapse).not.toHaveBeenCalled();
+    expect(screen.getByText('Application 3')).toBeInTheDocument();
+    fireEvent(
+      screen.getByText('Cost Management'),
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(onCollapse).toHaveBeenCalled();
+    expect(screen.queryByText('Application 3')).toBeNull();
+  });
+
   test('renders active successfully', () => {
     const { asFragment } = render(<TreeView data={options} activeItems={active} onSelect={jest.fn()} />);
     expect(asFragment()).toMatchSnapshot();