@instructure/ui-tree-browser 10.16.1 → 10.16.3

package/lib/TreeBrowser/__new-tests__/TreeBrowser.test.js

@@ -0,0 +1,527 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _vitest = require("vitest");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _TreeNode3 = require("../TreeNode");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _TreeBrowser, _TreeBrowser2, _TreeBrowser3, _TreeBrowser4, _TreeBrowser5, _TreeBrowser6, _TreeBrowser7, _TreeBrowser8, _TreeBrowser9, _TreeBrowser10, _TreeBrowser11, _svg, _TreeBrowser12, _TreeNode, _TreeNode2, _svg2, _TreeBrowser13, _TreeBrowser14, _TreeBrowser15, _TreeBrowser16, _TreeBrowser17;
+/*
+ * 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.
+ */
+const COLLECTIONS_DATA = {
+  2: {
+    id: 2,
+    name: 'Root Directory',
+    collections: [3, 4],
+    items: [1]
+  },
+  3: {
+    id: 3,
+    name: 'Sub Root 1',
+    collections: [5]
+  },
+  4: {
+    id: 4,
+    name: 'Sub Root 2'
+  },
+  5: {
+    id: 5,
+    name: 'Nested Sub Collection'
+  }
+};
+const COLLECTIONS_DATA_WITH_ZERO = {
+  0: {
+    id: 0,
+    name: 'Root Directory',
+    collections: [3, 4],
+    items: [1]
+  },
+  3: {
+    id: 3,
+    name: 'Sub Root 1',
+    collections: [5]
+  },
+  4: {
+    id: 4,
+    name: 'Sub Root 2'
+  },
+  5: {
+    id: 5,
+    name: 'Nested Sub Collection'
+  }
+};
+const COLLECTIONS_DATA_WITH_STRING_IDS = {
+  '2': {
+    id: '2',
+    name: 'Root Directory',
+    collections: ['3', '4'],
+    items: [1]
+  },
+  '3': {
+    id: '3',
+    name: 'Sub Root 1',
+    collections: ['5']
+  },
+  '4': {
+    id: '4',
+    name: 'Sub Root 2'
+  },
+  '5': {
+    id: '5',
+    name: 'Nested Sub Collection'
+  }
+};
+const ITEMS_DATA = {
+  1: {
+    id: 1,
+    name: 'Item 1'
+  }
+};
+describe('<TreeBrowser />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render a tree', async () => {
+    const _render = (0, _react.render)(_TreeBrowser || (_TreeBrowser = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      }))),
+      container = _render.container;
+    const tree = container.querySelector('[class$="-treeBrowser"]');
+    expect(tree).toBeInTheDocument();
+  });
+  it('should render subcollections', async () => {
+    (0, _react.render)(_TreeBrowser2 || (_TreeBrowser2 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+      collections: COLLECTIONS_DATA,
+      items: ITEMS_DATA,
+      rootId: 2
+    })));
+    const items = _react.screen.getAllByRole('treeitem');
+    expect(items.length).toEqual(1);
+    await _userEvent.default.click(items[0]);
+    await (0, _react.waitFor)(() => {
+      const itemsAfterClick = _react.screen.getAllByRole('treeitem');
+      expect(itemsAfterClick.length).toEqual(4);
+    });
+  });
+  it('should render all collections at top level if showRootCollection is true and rootId is undefined', async () => {
+    (0, _react.render)(_TreeBrowser3 || (_TreeBrowser3 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+      collections: COLLECTIONS_DATA,
+      items: ITEMS_DATA,
+      rootId: void 0
+    })));
+    const items = _react.screen.getAllByRole('treeitem');
+    expect(items.length).toEqual(4);
+  });
+  describe('expanded', () => {
+    it('should not expand collections or items without defaultExpanded prop', async () => {
+      (0, _react.render)(_TreeBrowser4 || (_TreeBrowser4 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      })));
+      const items = _react.screen.getAllByRole('treeitem');
+      expect(items.length).toEqual(1);
+      expect(items[0]).toHaveTextContent('Root Directory');
+    });
+    it('should accept an array of default expanded collections', async () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        defaultExpanded: [2, 3]
+      }));
+      const items = _react.screen.getAllByRole('treeitem');
+      const subRoot2 = _react.screen.getByLabelText('Sub Root 2');
+      const nestedSub = _react.screen.getByLabelText('Nested Sub Collection');
+      expect(items.length).toEqual(5);
+      expect(subRoot2).toHaveAttribute('aria-label', 'Sub Root 2');
+      expect(subRoot2).toHaveTextContent('Sub Root 2');
+      expect(nestedSub).toHaveAttribute('aria-label', 'Nested Sub Collection');
+      expect(nestedSub).toHaveTextContent('Nested Sub Collection');
+    });
+  });
+  describe('selected', () => {
+    it('should not show the selection if selectionType is none', async () => {
+      (0, _react.render)(_TreeBrowser5 || (_TreeBrowser5 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      })));
+      const item = _react.screen.getByRole('treeitem');
+      await _userEvent.default.click(item);
+      await (0, _react.waitFor)(() => {
+        expect(item).not.toHaveAttribute('aria-selected');
+      });
+    });
+    it('should show the selection indicator on last clicked collection or item', async () => {
+      (0, _react.render)(_TreeBrowser6 || (_TreeBrowser6 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        selectionType: "single"
+      })));
+      const item = _react.screen.getByLabelText('Root Directory');
+      await _userEvent.default.click(item);
+      await (0, _react.waitFor)(() => {
+        expect(item).toHaveAttribute('aria-selected');
+      });
+      const nestedItem = _react.screen.getByLabelText('Item 1');
+      await _userEvent.default.click(nestedItem);
+      await (0, _react.waitFor)(() => {
+        expect(nestedItem).toHaveAttribute('aria-selected');
+      });
+    });
+  });
+  describe('collections', () => {
+    it('should render collections with string-keyed ids', async () => {
+      (0, _react.render)(_TreeBrowser7 || (_TreeBrowser7 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA_WITH_STRING_IDS,
+        items: ITEMS_DATA,
+        rootId: '2',
+        showRootCollection: true
+      })));
+      const item = _react.screen.getByLabelText('Root Directory');
+      expect(item).toBeInTheDocument();
+    });
+    it('should not show the first keyed collection if showRootCollection is false', async () => {
+      (0, _react.render)(_TreeBrowser8 || (_TreeBrowser8 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        showRootCollection: false
+      })));
+      const items = _react.screen.getAllByRole('treeitem');
+      expect(items.length).toEqual(3);
+    });
+    it('should render first keyed collection if showRootCollection is true and rootId specified', async () => {
+      (0, _react.render)(_TreeBrowser9 || (_TreeBrowser9 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      })));
+      const item = _react.screen.getByLabelText('Root Directory');
+      expect(item).toBeInTheDocument();
+    });
+    it('should not show the first keyed collection if showRootCollection is false and rootId is 0', async () => {
+      (0, _react.render)(_TreeBrowser10 || (_TreeBrowser10 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA_WITH_ZERO,
+        items: ITEMS_DATA,
+        rootId: 0,
+        showRootCollection: false
+      })));
+      const items = _react.screen.getAllByRole('treeitem');
+      expect(items.length).toEqual(3);
+    });
+    it('should render a folder icon by default', async () => {
+      const _render2 = (0, _react.render)(_TreeBrowser11 || (_TreeBrowser11 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+          collections: COLLECTIONS_DATA,
+          items: ITEMS_DATA,
+          rootId: 2
+        }))),
+        container = _render2.container;
+      const iconFolder = container.querySelectorAll('svg[name="IconFolder"]');
+      expect(iconFolder.length).toEqual(1);
+    });
+    it('should render a custom icon', async () => {
+      const IconCustom = _svg || (_svg = (0, _jsxRuntime.jsxs)("svg", {
+        height: "100",
+        width: "100",
+        "data-testid": "icon-custom",
+        children: [(0, _jsxRuntime.jsx)("title", {
+          "data-testid": "icon-custom-title",
+          children: "Custom icon"
+        }), (0, _jsxRuntime.jsx)("circle", {
+          cx: "50",
+          cy: "50",
+          r: "40"
+        })]
+      }));
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        collectionIcon: () => IconCustom
+      }));
+      const iconCustom = _react.screen.getByTestId('icon-custom');
+      const title = _react.screen.getByTestId('icon-custom-title');
+      expect(iconCustom).toBeInTheDocument();
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveTextContent('Custom icon');
+    });
+    it('should render without icon if set to null', async () => {
+      const _render3 = (0, _react.render)(_TreeBrowser12 || (_TreeBrowser12 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+          collections: COLLECTIONS_DATA,
+          items: ITEMS_DATA,
+          rootId: 2,
+          collectionIcon: null
+        }))),
+        container = _render3.container;
+      const icon = container.querySelector('svg');
+      expect(icon).not.toBeInTheDocument();
+    });
+    it('should call onCollectionToggle when expanding and collapsing with mouse', async () => {
+      const onCollectionToggle = _vitest.vi.fn();
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        onCollectionToggle: onCollectionToggle
+      }));
+      const item = _react.screen.getByRole('treeitem');
+      await _userEvent.default.click(item);
+      await (0, _react.waitFor)(() => {
+        expect(onCollectionToggle).toHaveBeenCalled();
+      });
+    });
+    it('should call onCollectionClick on button activation (space/enter or click)', async () => {
+      const onCollectionClick = _vitest.vi.fn();
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        onCollectionClick: onCollectionClick
+      }));
+      const item = _react.screen.getByLabelText('Root Directory');
+      await _userEvent.default.click(item);
+      await _userEvent.default.type(item, '{space}');
+      await _userEvent.default.type(item, '{enter}');
+      await (0, _react.waitFor)(() => {
+        expect(onCollectionClick).toHaveBeenCalledTimes(3);
+      });
+    });
+    it('should render before, after nodes of the provided collection', async () => {
+      const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+          collections: {
+            2: {
+              id: 2,
+              name: 'Root Directory',
+              collections: [],
+              items: [],
+              renderBeforeItems: _TreeNode || (_TreeNode = (0, _jsxRuntime.jsx)(_TreeNode3.TreeNode, {
+                children: (0, _jsxRuntime.jsx)("input", {
+                  id: "input-before"
+                })
+              })),
+              renderAfterItems: _TreeNode2 || (_TreeNode2 = (0, _jsxRuntime.jsx)(_TreeNode3.TreeNode, {
+                children: (0, _jsxRuntime.jsx)("input", {
+                  id: "input-after"
+                })
+              }))
+            }
+          },
+          items: {},
+          expanded: [2],
+          rootId: 2
+        })),
+        container = _render4.container;
+      const contentBefore = container.querySelector('#input-before');
+      const contentAfter = container.querySelector('#input-after');
+      expect(contentBefore).toBeInTheDocument();
+      expect(contentAfter).toBeInTheDocument();
+    });
+  });
+  describe('items', () => {
+    it('should render a document icon by default', async () => {
+      const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+          collections: COLLECTIONS_DATA,
+          items: ITEMS_DATA,
+          rootId: 2,
+          defaultExpanded: [2]
+        })),
+        container = _render5.container;
+      const iconDocument = container.querySelectorAll('svg[name="IconDocument"]');
+      expect(iconDocument.length).toEqual(1);
+    });
+    it('should render a custom icon', async () => {
+      const IconCustom = _svg2 || (_svg2 = (0, _jsxRuntime.jsxs)("svg", {
+        height: "100",
+        width: "100",
+        "data-testid": "icon-custom",
+        children: [(0, _jsxRuntime.jsx)("title", {
+          "data-testid": "icon-custom-title",
+          children: "Custom icon"
+        }), (0, _jsxRuntime.jsx)("circle", {
+          cx: "50",
+          cy: "50",
+          r: "40"
+        })]
+      }));
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        defaultExpanded: [2],
+        itemIcon: () => IconCustom
+      }));
+      const iconCustom = _react.screen.getByTestId('icon-custom');
+      const title = _react.screen.getByTestId('icon-custom-title');
+      expect(iconCustom).toBeInTheDocument();
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveTextContent('Custom icon');
+    });
+    it('should render without icon if set to null', async () => {
+      const _render6 = (0, _react.render)(_TreeBrowser13 || (_TreeBrowser13 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+          collections: COLLECTIONS_DATA,
+          items: ITEMS_DATA,
+          rootId: 2
+        }))),
+        container = _render6.container;
+      const iconDocument = container.querySelector('svg[name="IconDocument"]');
+      expect(iconDocument).not.toBeInTheDocument();
+    });
+  });
+  describe('for a11y', () => {
+    it('should meet a11y standards', async () => {
+      const _render7 = (0, _react.render)(_TreeBrowser14 || (_TreeBrowser14 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+          collections: COLLECTIONS_DATA,
+          items: ITEMS_DATA,
+          rootId: 2
+        }))),
+        container = _render7.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should accept a treeLabel prop', async () => {
+      (0, _react.render)(_TreeBrowser15 || (_TreeBrowser15 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        treeLabel: "Test treeLabel"
+      })));
+      const tree = _react.screen.getByLabelText('Test treeLabel');
+      expect(tree).toBeInTheDocument();
+    });
+    it('should toggle aria-expanded', async () => {
+      (0, _react.render)(_TreeBrowser16 || (_TreeBrowser16 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      })));
+      const item = _react.screen.getByRole('treeitem');
+      expect(item).toHaveAttribute('aria-expanded', 'false');
+      await _userEvent.default.click(item);
+      await (0, _react.waitFor)(() => {
+        expect(item).toHaveAttribute('aria-expanded', 'true');
+      });
+    });
+    it('should use aria-selected when selectionType is not none', async () => {
+      (0, _react.render)(_TreeBrowser17 || (_TreeBrowser17 = (0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        selectionType: "single"
+      })));
+      const item = _react.screen.getByRole('treeitem');
+      expect(item).not.toHaveAttribute('aria-selected');
+      await _userEvent.default.click(item);
+      await (0, _react.waitFor)(() => {
+        expect(item).toHaveAttribute('aria-selected', 'true');
+      });
+      const nestedItem = _react.screen.getByLabelText('Sub Root 1');
+      expect(nestedItem).toHaveAttribute('aria-selected', 'false');
+    });
+  });
+  describe('sorting', () => {
+    it("should present collections and items in alphabetical order, in spite of the order of 'collections' and 'items' arrays", async () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeBrowser, {
+        collections: {
+          1: {
+            id: 1,
+            name: 'Assignments',
+            collections: [5, 3, 2, 4],
+            items: [3, 5, 2, 1, 4]
+          },
+          2: {
+            id: 2,
+            name: 'English Assignments',
+            collections: [],
+            items: []
+          },
+          3: {
+            id: 3,
+            name: 'Math Assignments',
+            collections: [],
+            items: []
+          },
+          4: {
+            id: 4,
+            name: 'Reading Assignments',
+            collections: [],
+            items: []
+          },
+          5: {
+            id: 5,
+            name: 'Advanced Math Assignments',
+            items: []
+          }
+        },
+        items: {
+          1: {
+            id: 1,
+            name: 'Addition Worksheet'
+          },
+          2: {
+            id: 2,
+            name: 'Subtraction Worksheet'
+          },
+          3: {
+            id: 3,
+            name: 'General Questions'
+          },
+          4: {
+            id: 4,
+            name: 'Vogon Poetry'
+          },
+          5: {
+            id: 5,
+            name: 'Bistromath'
+          }
+        },
+        rootId: 1,
+        defaultExpanded: [1],
+        sortOrder: (a, b) => {
+          return a.name.localeCompare(b.name);
+        }
+      }));
+      const items = _react.screen.getAllByRole('treeitem');
+      const arr = items.map(item => item.textContent);
+      expect(arr.slice(1, 5)).toStrictEqual(['Advanced Math Assignments', 'English Assignments', 'Math Assignments', 'Reading Assignments']);
+      expect(arr.slice(5)).toStrictEqual(['Addition Worksheet', 'Bistromath', 'General Questions', 'Subtraction Worksheet', 'Vogon Poetry']);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "10.16.1",
+  "version": "10.16.3",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,22 +23,25 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.16.1",
-    "@instructure/ui-color-utils": "10.16.1",
-    "@instructure/ui-test-locator": "10.16.1",
-    "@instructure/ui-test-utils": "10.16.1",
-    "@instructure/ui-themes": "10.16.1"
+    "@instructure/ui-axe-check": "10.16.3",
+    "@instructure/ui-babel-preset": "10.16.3",
+    "@instructure/ui-color-utils": "10.16.3",
+    "@instructure/ui-test-utils": "10.16.3",
+    "@instructure/ui-themes": "10.16.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.16.1",
-    "@instructure/shared-types": "10.16.1",
-    "@instructure/ui-icons": "10.16.1",
-    "@instructure/ui-img": "10.16.1",
-    "@instructure/ui-prop-types": "10.16.1",
-    "@instructure/ui-react-utils": "10.16.1",
-    "@instructure/ui-testable": "10.16.1",
-    "@instructure/ui-utils": "10.16.1",
+    "@instructure/emotion": "10.16.3",
+    "@instructure/shared-types": "10.16.3",
+    "@instructure/ui-icons": "10.16.3",
+    "@instructure/ui-img": "10.16.3",
+    "@instructure/ui-prop-types": "10.16.3",
+    "@instructure/ui-react-utils": "10.16.3",
+    "@instructure/ui-testable": "10.16.3",
+    "@instructure/ui-utils": "10.16.3",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },