chore(TreeView): added and updated unit tests (#11744)

Author: thatblindgeye

packages/react-core/src/components/TreeView/TreeViewListItem.tsx

@@ -50,11 +50,11 @@ export interface TreeViewListItemProps {
   /** Internal content of a tree view item. */
   name: React.ReactNode;
   /** Callback for item checkbox selection. */
-  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Callback for item selection. Note: calling event.preventDefault() will prevent the node
    * from toggling.
    */
-  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  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. */

packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx

@@ -3,10 +3,20 @@ import userEvent from '@testing-library/user-event';
 import { TreeView } from '../TreeView';
 
 jest.mock('../TreeViewList', () => ({
-  TreeViewList: ({ children, isNested, toolbar }) => (
+  TreeViewList: ({
+    children,
+    isNested,
+    toolbar,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    isMultiSelectable
+  }) => (
     <div data-testid="TreeViewList-mock">
       <p>{`TreeViewList isNested: ${isNested}`}</p>
       <p>{`TreeViewList toolbar: ${toolbar}`}</p>
+      <p>{`TreeViewList aria-label: ${ariaLabel}`}</p>
+      <p>{`TreeViewList aria-labelledBy: ${ariaLabelledBy}`}</p>
+      <p>{`TreeViewList isMultiSelectable: ${isMultiSelectable}`}</p>
       <div data-testid="TreeViewList-children">{children}</div>
     </div>
   )
@@ -131,6 +141,21 @@ test('Passes toolbar to TreeViewList', () => {
 
   expect(screen.getByText('TreeViewList toolbar: Toolbar content')).toBeVisible();
 });
+test('Passes aria-label to TreeViewList', () => {
+  render(<TreeView aria-label="Test aria-label" data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewList aria-label: Test aria-label')).toBeVisible();
+});
+test('Passes aria-labelledby to TreeViewList', () => {
+  render(<TreeView aria-labelledby="test-aria-labelledby" data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewList aria-labelledBy: test-aria-labelledby')).toBeVisible();
+});
+test('Passes isMultiSelectable to TreeViewList', () => {
+  render(<TreeView isMultiSelectable={true} data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewList isMultiSelectable: true')).toBeVisible();
+});
 test('Passes data as children TreeViewList', () => {
   render(<TreeView data={[basicData]} />);
 

packages/react-core/src/components/TreeView/__tests__/TreeViewList.test.tsx

@@ -32,9 +32,55 @@ test(`Renders toolbar content when toolbar prop is passed`, () => {
   expect(screen.getByText('Toolbar content')).toBeInTheDocument();
 });
 
+test(`Renders Divider when toolbar prop is passed`, () => {
+  render(<TreeViewList toolbar="Toolbar content">Content</TreeViewList>);
+
+  expect(screen.getByRole('separator')).toBeInTheDocument();
+});
+
+test('Renders with aria-label when passed', () => {
+  render(<TreeViewList aria-label="Test aria-label">Content</TreeViewList>);
+
+  expect(screen.getByRole('tree')).toHaveAccessibleName('Test aria-label');
+});
+
+test('Renders with aria-labelledby when passed', () => {
+  render(
+    <>
+      <div id="label">Labeling content</div>
+      <TreeViewList aria-labelledby="label">Content</TreeViewList>
+    </>
+  );
+
+  expect(screen.getByRole('tree')).toHaveAccessibleName('Labeling content');
+});
+
+test('Renders with aria-multiselectable of false by default', () => {
+  render(<TreeViewList>Content</TreeViewList>);
+
+  expect(screen.getByRole('tree')).toHaveAttribute('aria-multiselectable', 'false');
+});
+
+test('Renders with aria-multiselectable of true when isMultiSelectable is true', () => {
+  render(<TreeViewList isMultiSelectable>Content</TreeViewList>);
+
+  expect(screen.getByRole('tree')).toHaveAttribute('aria-multiselectable', 'true');
+});
+
+test('Does not render with aria-multiselectable when isNested is true', () => {
+  render(
+    <TreeViewList isMultiSelectable isNested>
+      Content
+    </TreeViewList>
+  );
+
+  expect(screen.getByRole('group')).not.toHaveAttribute('aria-multiselectable');
+});
+
 test(`Does not render toolbar content when toolbar prop is not passed`, () => {
   render(<TreeViewList>Content</TreeViewList>);
 
+  expect(screen.queryByRole('tree')?.previousElementSibling).not.toBeInTheDocument();
   expect(screen.queryByRole('separator')).not.toBeInTheDocument();
 });