Skip to content

Commit

Permalink
fix(TreeView): Add more unit tests (#1600)
Browse files Browse the repository at this point in the history
  • Loading branch information
@silvalaura
silvalaura authored Dec 14, 2024
1 parent 0b591e8 commit 4ed9e5c
Show file tree
Hide file tree
Showing 5 changed files with 277 additions and 9 deletions.
5 changes: 5 additions & 0 deletions .changeset/tree-unitTests.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-magma-dom': patch
---

fix(TreeView): Add more unit tests
41 changes: 37 additions & 4 deletions packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1331,12 +1331,29 @@ export const ComplexTreeWithShowAll = (args: Partial<TreeViewProps>) => {
{
id: 'ad-1',
title: 'Animation',
children: [],
children: null,
},
{
id: 'ad-2',
title: 'Photography',
children: [],
children: [
{
id: 'ad-2-child1',
title: 'Wedding',
children: [],
},
{
id: 'ad-2-child2',
title: 'Nature',
children: [
{
id: 'ad-2-child2-child1',
title: 'Pet',
children: [],
}
],
}
],
},
{
id: 'ad-3',
Expand Down Expand Up @@ -1380,7 +1397,7 @@ export const ComplexTreeWithShowAll = (args: Partial<TreeViewProps>) => {
{
id: 'discipline-geography',
title: 'Geography',
children: [],
children: undefined,
},
{
id: 'discipline-his',
Expand Down Expand Up @@ -1436,7 +1453,23 @@ export const ComplexTreeWithShowAll = (args: Partial<TreeViewProps>) => {
{
id: 'nutr-2',
title: 'Sports Nutrition',
children: [],
children: [
{
id: 'nutr-2-child1',
title: 'Protein',
children: [],
},
{
id: 'nutr-2-child2',
title: 'Supplements',
children: [
{
id: 'nutr-2-child2-child1',
title: 'Creatine'
}
],
}
],
},
],
},
Expand Down
234 changes: 233 additions & 1 deletion packages/react-magma-dom/src/components/TreeView/TreeView.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,25 @@ const TreeItemsMultiLevelControlledOutside = props => {
);
};

const renderTreeItemsRecursively = (treeItems, depth) => {
return treeItems.map(item => {
return (
<TreeItem
key={item.id}
itemId={item.id}
testId={item.id}
label={item.title}
>
{item.children?.length ? (
renderTreeItemsRecursively(item.children, depth + 1)
) : (
<></>
)}
</TreeItem>
);
});
};

describe('TreeView', () => {
it('should find element by testId', () => {
const { getByTestId } = render(
Expand Down Expand Up @@ -2058,7 +2077,7 @@ describe('TreeView', () => {

it('parent should have checked checkbox state when all disabled children are selected and all enabled children are selected. parent should have indeterminate checkbox state when all disabled children are selected and enabled children are partially selected. parent should have indeterminate checkbox state when all disabled children are selected and all enabled children are not selected. and toggle children selection', () => {
const onSelectedItemChange = jest.fn();
const { getByTestId, debug } = render(
const { getByTestId } = render(
getTreeItemsWithDisabledChildren({
selectable: TreeViewSelectable.multi,
preselectedItems: [
Expand Down Expand Up @@ -2598,6 +2617,219 @@ describe('TreeView', () => {
});
});

describe('recursive children', () => {
const recursiveTreeItems = [
{
id: 'discipline-arts-design',
title: 'Arts and Design',
children: [
{
id: 'ad-1',
title: 'Animation',
children: [],
},
{
id: 'ad-2',
title: 'Photography',
children: [
{
id: 'ad-2-child1',
title: 'Wedding',
children: [],
},
{
id: 'ad-2-child2',
title: 'Nature',
children: [
{
id: 'ad-2-child2-child1',
title: 'Pet',
children: [],
},
],
},
],
},
{
id: 'ad-3',
title: 'Web Design',
children: [],
},
],
},
{
id: 'discipline-geography',
title: 'Geography',
children: [],
},
{
id: 'discipline-nutr',
title: 'Nutrition',
children: [
{
id: 'nutr-1',
title: 'Community Nutrition',
children: [],
},
{
id: 'nutr-2',
title: 'Sports Nutrition',
children: [
{
id: 'nutr-2-child1',
title: 'Protein',
children: [],
},
{
id: 'nutr-2-child2',
title: 'Supplements',
children: [
{
id: 'nutr-2-child2-child1',
title: 'Creatine',
children: [
{
id: 'nutr-2-child2-child1-child1',
title: 'Is it safe?',
},
],
},
],
},
],
},
],
},
];

it('can render recursively created children', () => {
const { getByTestId } = render(
<TreeView>{renderTreeItemsRecursively(recursiveTreeItems, 0)}</TreeView>
);

expect(getByTestId('discipline-arts-design')).toBeInTheDocument();
expect(getByTestId('discipline-geography')).toBeInTheDocument();
expect(getByTestId('discipline-nutr')).toBeInTheDocument();

userEvent.click(getByTestId('discipline-arts-design-expand'));
expect(getByTestId('ad-1')).toBeInTheDocument();
expect(getByTestId('ad-2')).toBeInTheDocument();
expect(getByTestId('ad-3')).toBeInTheDocument();
userEvent.click(getByTestId('ad-2-expand'));
expect(getByTestId('ad-2-child1')).toBeInTheDocument();
expect(getByTestId('ad-2-child2')).toBeInTheDocument();
userEvent.click(getByTestId('ad-2-child2-expand'));
expect(getByTestId('ad-2-child2-child1')).toBeInTheDocument();

userEvent.click(getByTestId('discipline-nutr-expand'));
expect(getByTestId('nutr-1')).toBeInTheDocument();
expect(getByTestId('nutr-2')).toBeInTheDocument();
userEvent.click(getByTestId('nutr-2-expand'));
expect(getByTestId('nutr-2-child1')).toBeInTheDocument();
expect(getByTestId('nutr-2-child2')).toBeInTheDocument();
userEvent.click(getByTestId('nutr-2-child2-expand'));
expect(getByTestId('nutr-2-child2-child1')).toBeInTheDocument();
userEvent.click(getByTestId('nutr-2-child2-child1-expand'));
expect(getByTestId('nutr-2-child2-child1-child1')).toBeInTheDocument();
});

it('can render recursively created children with preselected items', () => {
const { getByTestId } = render(
<TreeView
selectable={TreeViewSelectable.multi}
preselectedItems={[
{
itemId: 'ad-1',
checkedStatus: IndeterminateCheckboxStatus.checked,
},
{
itemId: 'discipline-geography',
checkedStatus: IndeterminateCheckboxStatus.checked,
},
]}
>
{renderTreeItemsRecursively(recursiveTreeItems, 0)}
</TreeView>
);

expect(getByTestId('discipline-arts-design')).toBeInTheDocument();
expect(getByTestId('discipline-geography')).toBeInTheDocument();
expect(getByTestId('discipline-nutr')).toBeInTheDocument();
expect(getByTestId('discipline-geography')).toHaveAttribute(
'aria-checked',
'true'
);

userEvent.click(getByTestId('discipline-arts-design-expand'));
expect(getByTestId('ad-1')).toBeInTheDocument();
expect(getByTestId('ad-2')).toBeInTheDocument();
expect(getByTestId('ad-3')).toBeInTheDocument();
userEvent.click(getByTestId('ad-2-expand'));
expect(getByTestId('ad-2-child1')).toBeInTheDocument();
expect(getByTestId('ad-2-child2')).toBeInTheDocument();
userEvent.click(getByTestId('ad-2-child2-expand'));
expect(getByTestId('ad-2-child2-child1')).toBeInTheDocument();
expect(getByTestId('discipline-arts-design')).toHaveAttribute(
'aria-checked',
'mixed'
);
expect(getByTestId('ad-1')).toHaveAttribute('aria-checked', 'true');
});

it('can select and deselect recursively created children', () => {
const { getByTestId } = render(
<TreeView selectable={TreeViewSelectable.multi} preselectedItems={[]}>
{renderTreeItemsRecursively(recursiveTreeItems, 0)}
</TreeView>
);

expect(getByTestId('discipline-arts-design')).toBeInTheDocument();
expect(getByTestId('discipline-geography')).toBeInTheDocument();
expect(getByTestId('discipline-nutr')).toBeInTheDocument();

userEvent.click(getByTestId('discipline-nutr-expand'));
expect(getByTestId('nutr-1')).toHaveAttribute('aria-checked', 'false');
expect(getByTestId('nutr-2')).toHaveAttribute('aria-checked', 'false');

userEvent.click(getByTestId('nutr-2-expand'));
expect(getByTestId('nutr-2-child1')).toBeInTheDocument();
expect(getByTestId('nutr-2-child2')).toBeInTheDocument();

userEvent.click(getByTestId('nutr-2-child2-expand'));
userEvent.click(getByTestId('nutr-2-child2-checkbox'));
expect(getByTestId('nutr-2-child2')).toHaveAttribute(
'aria-checked',
'true'
);
expect(getByTestId('nutr-2-child2-child1')).toHaveAttribute(
'aria-checked',
'true'
);
userEvent.click(getByTestId('nutr-2-child2-child1-expand'));
expect(getByTestId('nutr-2-child2-child1-child1')).toHaveAttribute(
'aria-checked',
'true'
);

expect(getByTestId('nutr-2')).toHaveAttribute('aria-checked', 'mixed');
expect(getByTestId('discipline-nutr')).toHaveAttribute(
'aria-checked',
'mixed'
);
userEvent.click(getByTestId('nutr-2-child1-checkbox'));
expect(getByTestId('nutr-2')).toHaveAttribute('aria-checked', 'true');
userEvent.click(getByTestId('nutr-2-child2-child1-child1-checkbox'));
expect(getByTestId('nutr-2-child1')).toHaveAttribute(
'aria-checked',
'true'
);
expect(getByTestId('nutr-2-child2')).toHaveAttribute(
'aria-checked',
'false'
);
});
});

describe('tree with hidden items', () => {
const propsFlatTree = {
title: 'Chapter/Subchapter',
Expand Down
4 changes: 1 addition & 3 deletions packages/react-magma-dom/src/components/TreeView/useTreeView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,6 @@ export function useTreeView(props: UseTreeViewProps) {
});

const selectedItems = React.useMemo(() => {
console.log(items);

return items.filter(
item => item.checkedStatus === IndeterminateCheckboxStatus.checked
);
Expand All @@ -167,7 +165,7 @@ export function useTreeView(props: UseTreeViewProps) {
}, [items, rawInitialExpandedItems]);

const itemToFocus = React.useMemo(() => {
const enabledItems = items.filter(item => !item?.isDisabled);
const enabledItems = items.filter(item => !item.isDisabled);
const [firstItem] = enabledItems;

if (selectable === TreeViewSelectable.off) {
Expand Down
2 changes: 1 addition & 1 deletion website/react-magma-docs/src/pages/api/tree-view.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -880,7 +880,7 @@ export function Example() {
}
```

## Show All / Show Less Button
## Show More / Show Less Button

Use the `apiRef.showMore()` prop when using a Show All button inside a tree, and `apiRef.showLess()` when using a Show Less button.

Expand Down

2 comments on commit 4ed9e5c

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://next--upbeat-sinoussi-f675aa.netlify.app

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app

Please sign in to comment.