@instructure/ui-tree-browser 10.16.1 → 10.16.3

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.16.3](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.3) (2025-04-30)
+
+**Note:** Version bump only for package @instructure/ui-tree-browser
+
+
+
+
+
+## [10.16.2](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.2) (2025-04-22)
+
+**Note:** Version bump only for package @instructure/ui-tree-browser
+
+
+
+
+
 ## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser

package/es/TreeBrowser/TreeButton/__new-tests__/TreeButton.test.js

@@ -0,0 +1,165 @@
+var _TreeButton, _TreeButton2, _TreeButton3, _svg, _TreeButton4, _TreeButton5, _TreeButton6, _div;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { TreeButton } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+describe('<TreeButton />', () => {
+  it('should render', async () => {
+    const _render = render(_TreeButton || (_TreeButton = _jsx(TreeButton, {
+        id: "1"
+      }))),
+      container = _render.container;
+    const treeButton = container.querySelector('button[class$="-treeButton"]');
+    expect(treeButton).toBeInTheDocument();
+  });
+  describe('containerRef', () => {
+    it('should call with parent element', async () => {
+      const containerRef = vi.fn();
+      render(_jsx("div", {
+        "data-testid": "1",
+        children: _jsx(TreeButton, {
+          id: "2",
+          containerRef: containerRef
+        })
+      }));
+      const div = screen.getByTestId('1');
+      expect(containerRef).toHaveBeenCalledWith(div);
+    });
+  });
+  describe('descriptor', () => {
+    it('should not render a descriptor element if no descriptor passed', async () => {
+      const _render2 = render(_TreeButton2 || (_TreeButton2 = _jsx(TreeButton, {
+          id: "1"
+        }))),
+        container = _render2.container;
+      const descriptor = container.querySelector('[class$="-treeButton__textDescriptor"]');
+      expect(descriptor).not.toBeInTheDocument();
+    });
+    it('should render a descriptor element if descriptor passed', async () => {
+      const _render3 = render(_TreeButton3 || (_TreeButton3 = _jsx(TreeButton, {
+          id: "1",
+          descriptor: "Some Descriptor"
+        }))),
+        container = _render3.container;
+      const descriptor = container.querySelector('[class$="-treeButton__textDescriptor"]');
+      expect(descriptor).toBeInTheDocument();
+      expect(descriptor).toHaveTextContent('Some Descriptor');
+    });
+  });
+  describe('icons', () => {
+    const Icon = _svg || (_svg = _jsxs("svg", {
+      height: "100",
+      width: "100",
+      "data-testid": "custom-icon",
+      children: [_jsx("title", {
+        "data-testid": "custom-icon-title",
+        children: "Test icon"
+      }), _jsx("circle", {
+        cx: "50",
+        cy: "50",
+        r: "40"
+      })]
+    }));
+    it('should render a collection icon', async () => {
+      render(_jsx(TreeButton, {
+        id: "1",
+        type: "collection",
+        collectionIcon: () => Icon
+      }));
+      const icon = screen.getByTestId('custom-icon');
+      const iconTitle = screen.getByTestId('custom-icon-title');
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveTextContent('Test icon');
+      expect(iconTitle).toBeInTheDocument();
+    });
+    it('should render an item icon', async () => {
+      render(_jsx(TreeButton, {
+        id: "1",
+        type: "item",
+        itemIcon: () => Icon
+      }));
+      const icon = screen.getByTestId('custom-icon');
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveTextContent('Test icon');
+    });
+    it('should render no icon if no icon prop passed', async () => {
+      const _render4 = render(_TreeButton4 || (_TreeButton4 = _jsx(TreeButton, {
+          id: "1"
+        }))),
+        container = _render4.container;
+      const icon = container.querySelector('svg');
+      expect(icon).not.toBeInTheDocument();
+    });
+    it('should render a thumbnail instead of an icon if a thumbnail URL is passed', async () => {
+      const _render5 = render(_TreeButton5 || (_TreeButton5 = _jsx(TreeButton, {
+          id: "1",
+          type: "item",
+          thumbnail: "data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw=="
+        }))),
+        container = _render5.container;
+      const img = container.querySelector('img');
+      expect(img).toBeInTheDocument();
+    });
+    it('should not render a thumbnail if no thumbnail URL is passed', async () => {
+      const _render6 = render(_TreeButton6 || (_TreeButton6 = _jsx(TreeButton, {
+          id: "1",
+          type: "item"
+        }))),
+        container = _render6.container;
+      const thumbnail = container.querySelector('img');
+      expect(thumbnail).not.toBeInTheDocument();
+    });
+    it('should render a thumbnail if a thumbnail and an icon are passed', async () => {
+      const _render7 = render(_jsx(TreeButton, {
+          id: "1",
+          type: "item",
+          itemIcon: () => Icon,
+          thumbnail: "data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw=="
+        })),
+        container = _render7.container;
+      const thumbnail = container.querySelector('img');
+      const icon = container.querySelector('svg');
+      expect(thumbnail).toBeInTheDocument();
+      expect(icon).not.toBeInTheDocument();
+    });
+  });
+  describe('renderContent', () => {
+    it('should render the content passed to renderContent', async () => {
+      const _render8 = render(_jsx(TreeButton, {
+          id: "1",
+          renderContent: () => _div || (_div = _jsx("div", {
+            className: "test1",
+            children: "abcd"
+          }))
+        })),
+        container = _render8.container;
+      const customElement = container.querySelector('div[class="test1"]');
+      expect(customElement).toBeInTheDocument();
+    });
+  });
+});

package/es/TreeBrowser/TreeCollection/__new-tests__/TreeCollection.test.js

@@ -0,0 +1,454 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { TreeCollection } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const IconFolder = _jsxs("svg", {
+  height: "100",
+  width: "100",
+  children: [_jsx("title", {
+    children: "Folder icon"
+  }), _jsx("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40"
+  })]
+});
+const IconDocument = _jsxs("svg", {
+  height: "100",
+  width: "100",
+  children: [_jsx("title", {
+    children: "Document icon"
+  }), _jsx("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40"
+  })]
+});
+const IconUser = _jsxs("svg", {
+  height: "100",
+  width: "100",
+  children: [_jsx("title", {
+    children: "User icon"
+  }), _jsx("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40"
+  })]
+});
+describe('<TreeCollection />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    const _render = render(_jsx(TreeCollection, {
+        level: 1,
+        id: 1,
+        name: "Coll 1",
+        collections: [{
+          id: 2,
+          name: 'Coll 2',
+          descriptor: 'Another Descriptor'
+        }],
+        items: [{
+          id: 1,
+          name: 'Item 1'
+        }]
+      })),
+      container = _render.container;
+    const collection = container.querySelector('[class$="-treeCollection"]');
+    expect(collection).toBeInTheDocument();
+  });
+  describe('collections', () => {
+    it('should render icons on children', async () => {
+      render(_jsx(TreeCollection, {
+        level: 1,
+        id: 1,
+        name: "Coll 1",
+        collections: [{
+          id: 2,
+          name: 'Coll 2',
+          descriptor: 'Another Descriptor'
+        }],
+        items: [{
+          id: 1,
+          name: 'Item 1'
+        }],
+        collectionIcon: () => IconFolder,
+        collectionIconExpanded: () => IconFolder,
+        itemIcon: () => IconDocument,
+        expanded: true
+      }));
+      const folderIcons = await screen.findAllByTitle('Folder icon');
+      expect(folderIcons.length).toBe(2);
+      const documentIcons = await screen.findAllByTitle('Document icon');
+      expect(documentIcons.length).toBe(1);
+    });
+    it('should support the containerRef prop', async () => {
+      const containerRef = vi.fn();
+      const _render2 = render(_jsx(TreeCollection, {
+          level: 1,
+          id: 1,
+          containerRef: containerRef,
+          name: "Coll 1",
+          collections: [{
+            id: 2,
+            name: 'Coll 2',
+            descriptor: 'Another Descriptor'
+          }],
+          items: [{
+            id: 1,
+            name: 'Item 1'
+          }]
+        })),
+        container = _render2.container;
+      const collection = container.querySelector('[class$="-treeCollection"]');
+      expect(containerRef).toHaveBeenCalledWith(collection);
+    });
+    it('should pass an aria-expanded attribute to its list item', async () => {
+      render(_jsx(TreeCollection, {
+        level: 1,
+        id: 1,
+        name: "Coll 1",
+        collections: [{
+          id: 2,
+          name: 'Coll 2',
+          descriptor: 'Another Descriptor'
+        }],
+        items: [{
+          id: 1,
+          name: 'Item 1'
+        }]
+      }));
+      const item = screen.getByRole('treeitem');
+      expect(item).toHaveAttribute('aria-expanded');
+    });
+    it('should pass an aria-selected attribute to its list item', async () => {
+      render(_jsx(TreeCollection, {
+        level: 1,
+        id: 1,
+        name: "Coll 1",
+        collections: [{
+          id: 2,
+          name: 'Coll 2',
+          descriptor: 'Another Descriptor'
+        }],
+        items: [{
+          id: 1,
+          name: 'Item 1'
+        }],
+        selection: "collection_1"
+      }));
+      const item = screen.getByRole('treeitem');
+      expect(item).toHaveAttribute('aria-selected');
+    });
+    it('should correctly evaluate `getCollectionProps` for each item', async () => {
+      const _render3 = render(_jsx(TreeCollection, {
+          level: 1,
+          id: 1,
+          name: "Coll 1",
+          collections: [{
+            id: 2,
+            name: 'Coll 2',
+            descriptor: 'Another Descriptor'
+          }],
+          items: [{
+            id: 1,
+            name: 'Item 1',
+            icon: () => IconFolder
+          }, {
+            id: 2,
+            name: 'Item 2',
+            icon: () => IconUser
+          }, {
+            id: 2,
+            name: 'Item 3'
+          }],
+          collectionIcon: IconFolder,
+          getCollectionProps: ({
+            ...props
+          }) => {
+            let icon = props.collectionIcon;
+            if (props.name === 'Coll 2') {
+              icon = IconUser;
+            }
+            return {
+              ...props,
+              collectionIcon: icon
+            };
+          },
+          expanded: true
+        })),
+        container = _render3.container;
+      const svgIconUser = screen.getByTitle('User icon');
+      const item1 = container.querySelectorAll('button')[1];
+      expect(svgIconUser).toBeInTheDocument();
+      expect(item1).toContainElement(svgIconUser);
+      expect(item1).toHaveTextContent('Coll 2');
+    });
+    describe('onCollectionClick', () => {
+      it('should return the correct collection params on click', async () => {
+        const onCollectionClick = vi.fn();
+        render(_jsx(TreeCollection, {
+          level: 1,
+          id: 1,
+          name: "Coll 1",
+          collections: [{
+            id: 2,
+            name: 'Coll 2',
+            descriptor: 'Another Descriptor'
+          }],
+          items: [{
+            id: 1,
+            name: 'Item 1'
+          }],
+          onCollectionClick: onCollectionClick
+        }));
+        const item = screen.getByRole('treeitem');
+        await userEvent.click(item);
+        await waitFor(() => {
+          const args = onCollectionClick.mock.calls[0][1];
+          expect(onCollectionClick).toHaveBeenCalledTimes(1);
+          expect(args).toStrictEqual({
+            id: 1,
+            expanded: true,
+            type: 'collection'
+          });
+        });
+      });
+    });
+  });
+  describe('items', () => {
+    it('should not pass an aria-expanded attribute to its button', async () => {
+      render(_jsx(TreeCollection, {
+        level: 1,
+        id: 1,
+        name: "Coll 1",
+        collections: [{
+          id: 2,
+          name: 'Coll 2',
+          descriptor: 'Another Descriptor'
+        }],
+        items: [{
+          id: 1,
+          name: 'Item 1'
+        }],
+        expanded: true
+      }));
+      const item = screen.getAllByLabelText('Coll 1')[0];
+      const button = item.firstChild;
+      expect(item).toHaveAttribute('aria-expanded', 'true');
+      expect(button.tagName).toBe('BUTTON');
+      expect(button).not.toHaveAttribute('aria-expanded');
+    });
+    it('should call custom functions passed by onItemClick', async () => {
+      const onItemClick = vi.fn();
+      render(_jsx(TreeCollection, {
+        level: 1,
+        id: 1,
+        name: "Coll 1",
+        collections: [{
+          id: 2,
+          name: 'Coll 2',
+          descriptor: 'Another Descriptor'
+        }],
+        items: [{
+          id: 1,
+          name: 'Item 1'
+        }],
+        onItemClick: onItemClick,
+        expanded: true
+      }));
+      const item = screen.getByLabelText('Item 1');
+      await userEvent.click(item);
+      await waitFor(() => {
+        const args = onItemClick.mock.calls[0][1];
+        expect(onItemClick).toHaveBeenCalledTimes(1);
+        expect(args).toStrictEqual({
+          id: 1,
+          type: 'item'
+        });
+      });
+    });
+    it('should correctly evaluate `getItemProps` for each item', async () => {
+      render(_jsx(TreeCollection, {
+        level: 1,
+        id: 1,
+        name: "Coll 1",
+        collections: [{
+          id: 2,
+          name: 'Coll 2',
+          descriptor: 'Another Descriptor'
+        }],
+        items: [{
+          id: 1,
+          name: 'Item 1',
+          icon: () => IconFolder
+        }, {
+          id: 2,
+          name: 'Item 2',
+          icon: () => IconUser
+        }, {
+          id: 2,
+          name: 'Item 3'
+        }],
+        getItemProps: ({
+          name,
+          ...props
+        }) => {
+          let itemIcon = IconDocument;
+          if (name === 'Item 1') {
+            itemIcon = IconFolder;
+          }
+          if (name === 'Item 2') {
+            itemIcon = IconUser;
+          }
+          return {
+            ...props,
+            itemIcon,
+            name
+          };
+        },
+        expanded: true
+      }));
+      expect(screen.getByTitle('Folder icon')).toBeInTheDocument();
+      expect(screen.getByTitle('User icon')).toBeInTheDocument();
+      expect(screen.getByTitle('Document icon')).toBeInTheDocument();
+    });
+  });
+  describe('sorting', () => {
+    it('should show the items and subcollections in alphabetical order', async () => {
+      const _render4 = render(_jsx(TreeCollection, {
+          level: 1,
+          id: 1,
+          name: "Root",
+          collections: [{
+            id: 2,
+            name: 'A',
+            descriptor: 'Collection A'
+          }, {
+            id: 3,
+            name: 'B',
+            descriptor: 'Collection B'
+          }, {
+            id: 4,
+            name: 'C',
+            descriptor: 'Collection A'
+          }],
+          items: [{
+            id: 1,
+            name: 'A1'
+          }, {
+            id: 2,
+            name: 'B1'
+          }, {
+            id: 2,
+            name: 'C1'
+          }],
+          getItemProps: ({
+            name,
+            ...props
+          }) => {
+            const itemIcon = IconDocument;
+            return {
+              ...props,
+              itemIcon,
+              name
+            };
+          },
+          expanded: true,
+          compareFunc: (a, b) => {
+            return a.name.localeCompare(b.name);
+          }
+        })),
+        container = _render4.container;
+      const childNames = container.querySelectorAll('span[class$="treeButton__textName"]');
+      const childNameArr = Array.from(childNames).map(element => element.textContent).slice(1);
+      expect(childNameArr).toEqual(['A', 'A1', 'B', 'B1', 'C', 'C1']);
+    });
+    it('should show the items before the collections', async () => {
+      const _render5 = render(_jsx(TreeCollection, {
+          level: 1,
+          id: 1,
+          name: "Root",
+          collections: [{
+            id: 2,
+            name: 'Coll A',
+            descriptor: 'Collection A'
+          }, {
+            id: 3,
+            name: 'Coll B',
+            descriptor: 'Collection B'
+          }, {
+            id: 4,
+            name: 'Coll C',
+            descriptor: 'Collection A'
+          }],
+          items: [{
+            id: 1,
+            name: 'Item A'
+          }, {
+            id: 2,
+            name: 'Item B'
+          }, {
+            id: 2,
+            name: 'Item C'
+          }],
+          getItemProps: ({
+            name,
+            ...props
+          }) => {
+            const itemIcon = IconDocument;
+            return {
+              ...props,
+              itemIcon,
+              name
+            };
+          },
+          expanded: true,
+          compareFunc: (a, b) => {
+            if (a.type === 'item' && b.type === 'collection') return -1;
+            if (a.type === 'collection' && b.type === 'item') return 1;
+            return 0;
+          }
+        })),
+        container = _render5.container;
+      const childNames = container.querySelectorAll('span[class$="treeButton__textName"]');
+      const childNameArr = Array.from(childNames).map(element => element.textContent).slice(1);
+      expect(childNameArr).toEqual(['Item A', 'Item B', 'Item C', 'Coll A', 'Coll B', 'Coll C']);
+    });
+  });
+});

package/es/TreeBrowser/{TreeBrowserLocator.js → TreeNode/__new-tests__/TreeNode.test.js}

@@ -1,7 +1,8 @@
+var _TreeNode, _button;
 /*
  * The MIT License (MIT)
  *
- * Copyright (c) 2015 - present Instructure, Inc.
+ * Copyright (c) 2021 - present Instructure, Inc.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -21,18 +22,34 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { locator } from '@instructure/ui-test-locator';
-import { TreeBrowser } from './index';
 
-// TODO: if we make a TreeBrowserItem component + locator we could use it here.
-const TreeBrowserItemLocator = locator('[role="treeitem"]');
-
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-export const TreeBrowserLocator = locator(TreeBrowser.selector, {
-  findAllItems: (...args) => {
-    return TreeBrowserItemLocator.findAll(...args);
-  },
-  findItem: (...args) => {
-    return TreeBrowserItemLocator.find(...args);
-  }
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { TreeNode } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+describe('<TreeNode />', () => {
+  it('should render children', async () => {
+    render(_TreeNode || (_TreeNode = _jsx(TreeNode, {
+      children: _jsx("button", {
+        children: "Hello World"
+      })
+    })));
+    const item = screen.getByText('Hello World');
+    expect(item).toBeInTheDocument();
+  });
+  it('supports containerRef prop', async () => {
+    const containerRef = vi.fn();
+    render(_jsx("div", {
+      "data-testid": "1",
+      children: _jsx(TreeNode, {
+        containerRef: containerRef,
+        children: _button || (_button = _jsx("button", {
+          children: "Hello World"
+        }))
+      })
+    }));
+    const div = screen.getByTestId('1');
+    expect(containerRef).toHaveBeenCalledWith(div);
+  });
 });