Add tests

mui · Jul 11, 2024 · b19a39c · b19a39c
1 parent 568370b
commit b19a39c
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 12 deletions.
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
@@ -183,21 +183,141 @@ describeTreeView<
       });
     });
 
-    describe('getItemDOMElement api method', () => {
-      it('should return the DOM element of the item', () => {
-        const response = render({
-          items: [{ id: '1' }],
+    describe('API methods', () => {
+      describe('getItem', () => {
+        // This method is only usable with Rich Tree View components
+        if (treeViewComponentName === 'SimpleTreeView') {
+          return;
+        }
+
+        it('should return the tree', () => {
+          const response = render({
+            items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
+          });
+
+          expect(response.apiRef.current.getItem('1')).to.deep.equal({
+            id: '1',
+            children: [{ id: '1.1' }],
+          });
         });
 
-        expect(response.apiRef.current.getItemDOMElement('1')).to.equal(response.getItemRoot('1'));
+        it('should have up to date tree when props.items changes', () => {
+          const response = render({
+            items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
+          });
+
+          response.setItems([{ id: '1' }, { id: '2' }]);
+
+          expect(response.apiRef.current.getItem('1')).to.deep.equal({ id: '1' });
+        });
+
+        it('should contain custom item properties', () => {
+          const response = render({
+            items: [{ id: '1', customProp: 'foo' }],
+          });
+
+          expect(response.apiRef.current.getItem('1')).to.deep.equal({
+            id: '1',
+            customProp: 'foo',
+          });
+        });
       });
 
-      it("should return the null when the item doesn't exist", () => {
-        const response = render({
-          items: [{ id: '1' }],
+      describe('getItemDOMElement', () => {
+        it('should return the DOM element of the item', () => {
+          const response = render({
+            items: [{ id: '1' }],
+          });
+
+          expect(response.apiRef.current.getItemDOMElement('1')).to.equal(
+            response.getItemRoot('1'),
+          );
+        });
+
+        it("should return the null when the item doesn't exist", () => {
+          const response = render({
+            items: [{ id: '1' }],
+          });
+
+          expect(response.apiRef.current.getItemDOMElement('2')).to.equal(null);
+        });
+      });
+
+      describe('getItemTree', () => {
+        // This method is only usable with Rich Tree View components
+        if (treeViewComponentName === 'SimpleTreeView') {
+          return;
+        }
+
+        it('should return the tree', () => {
+          const response = render({
+            items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
+          });
+
+          expect(response.apiRef.current.getItemTree()).to.deep.equal([
+            { id: '1', children: [{ id: '1.1' }] },
+            { id: '2' },
+          ]);
+        });
+
+        it('should have up to date tree when props.items changes', () => {
+          const response = render({
+            items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
+          });
+
+          response.setItems([{ id: '1' }, { id: '2' }]);
+
+          expect(response.apiRef.current.getItemTree()).to.deep.equal([{ id: '1' }, { id: '2' }]);
         });
 
-        expect(response.apiRef.current.getItemDOMElement('2')).to.equal(null);
+        it('should contain custom item properties', () => {
+          const response = render({
+            items: [{ id: '1', customProp: 'foo' }],
+          });
+
+          expect(response.apiRef.current.getItemTree()).to.deep.equal([
+            { id: '1', customProp: 'foo' },
+          ]);
+        });
+      });
+
+      describe('getItemOrderedChildrenIds', () => {
+        // This method is only usable with Rich Tree View components
+        if (treeViewComponentName === 'SimpleTreeView') {
+          return;
+        }
+
+        it('should return the children of an item in their rendering order', () => {
+          const response = render({
+            items: [{ id: '1', children: [{ id: '1.1' }, { id: '1.2' }] }],
+          });
+
+          expect(response.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal([
+            '1.1',
+            '1.2',
+          ]);
+        });
+
+        it('should work for the root items', () => {
+          const response = render({
+            items: [{ id: '1' }, { id: '2' }],
+          });
+
+          expect(response.apiRef.current.getItemOrderedChildrenIds(null)).to.deep.equal(['1', '2']);
+        });
+
+        it('should have up to date children when props.items changes', () => {
+          const response = render({
+            items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
+          });
+
+          response.setItems([{ id: '1', children: [{ id: '1.1' }, { id: '1.2' }] }]);
+
+          expect(response.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal([
+            '1.1',
+            '1.2',
+          ]);
+        });
       });
     });
   },

diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.tsx
@@ -22,7 +22,7 @@ const updateItemsState = ({
   isItemDisabled,
   getItemLabel,
   getItemId,
-}: UpdateNodesStateParameters): UseTreeViewItemsState<any>['items'] => {
+}: UpdateNodesStateParameters): State => {
   const itemMetaMap: State['itemMetaMap'] = {};
   const itemMap: State['itemMap'] = {};
   const itemOrderedChildrenIds: State['itemOrderedChildrenIds'] = {
@@ -76,7 +76,6 @@ const updateItemsState = ({
     };
 
     itemMap[id] = item;
-    itemOrderedChildrenIds[id] = [];
     const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
     if (!itemOrderedChildrenIds[parentIdWithDefault]) {
       itemOrderedChildrenIds[parentIdWithDefault] = [];
@@ -237,7 +236,7 @@ export const useTreeViewItems: TreeViewPlugin<UseTreeViewItemsSignature> = ({
         label: item.label!,
         itemId: item.id,
         id: item.idAttribute,
-        children: state.items.itemOrderedChildrenIds[id].map(getPropsFromItemId),
+        children: state.items.itemOrderedChildrenIds[id]?.map(getPropsFromItemId),
       };
     };
 

diff --git a/test/utils/tree-view/fakeContextValue.ts b/test/utils/tree-view/fakeContextValue.ts
@@ -17,9 +17,11 @@ export const getFakeContextValue = (
   publicAPI: {
     focusItem: () => {},
     getItem: () => ({}),
+    getItemOrderedChildrenIds: () => [],
     setItemExpansion: () => {},
     getItemDOMElement: () => null,
     selectItem: () => {},
+    getItemTree: () => [],
   },
   runItemPlugins: () => ({
     rootRef: null,