@instructure/ui-tree-browser 10.16.1 → 10.16.3

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

@@ -0,0 +1,457 @@
+"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");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * 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 IconFolder = (0, _jsxRuntime.jsxs)("svg", {
+  height: "100",
+  width: "100",
+  children: [(0, _jsxRuntime.jsx)("title", {
+    children: "Folder icon"
+  }), (0, _jsxRuntime.jsx)("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40"
+  })]
+});
+const IconDocument = (0, _jsxRuntime.jsxs)("svg", {
+  height: "100",
+  width: "100",
+  children: [(0, _jsxRuntime.jsx)("title", {
+    children: "Document icon"
+  }), (0, _jsxRuntime.jsx)("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40"
+  })]
+});
+const IconUser = (0, _jsxRuntime.jsxs)("svg", {
+  height: "100",
+  width: "100",
+  children: [(0, _jsxRuntime.jsx)("title", {
+    children: "User icon"
+  }), (0, _jsxRuntime.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 = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 _react.screen.findAllByTitle('Folder icon');
+      expect(folderIcons.length).toBe(2);
+      const documentIcons = await _react.screen.findAllByTitle('Document icon');
+      expect(documentIcons.length).toBe(1);
+    });
+    it('should support the containerRef prop', async () => {
+      const containerRef = _vitest.vi.fn();
+      const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 = _react.screen.getByRole('treeitem');
+      expect(item).toHaveAttribute('aria-expanded');
+    });
+    it('should pass an aria-selected attribute to its list item', async () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 = _react.screen.getByRole('treeitem');
+      expect(item).toHaveAttribute('aria-selected');
+    });
+    it('should correctly evaluate `getCollectionProps` for each item', async () => {
+      const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 = _react.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 = _vitest.vi.fn();
+        (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 = _react.screen.getByRole('treeitem');
+        await _userEvent.default.click(item);
+        await (0, _react.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 () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 = _react.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 = _vitest.vi.fn();
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 = _react.screen.getByLabelText('Item 1');
+      await _userEvent.default.click(item);
+      await (0, _react.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 () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.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(_react.screen.getByTitle('Folder icon')).toBeInTheDocument();
+      expect(_react.screen.getByTitle('User icon')).toBeInTheDocument();
+      expect(_react.screen.getByTitle('Document icon')).toBeInTheDocument();
+    });
+  });
+  describe('sorting', () => {
+    it('should show the items and subcollections in alphabetical order', async () => {
+      const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.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/lib/TreeBrowser/TreeNode/__new-tests__/TreeNode.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _TreeNode, _button;
+/*
+ * The MIT License (MIT)
+ *
+ * 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
+ * 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.
+ */
+describe('<TreeNode />', () => {
+  it('should render children', async () => {
+    (0, _react.render)(_TreeNode || (_TreeNode = (0, _jsxRuntime.jsx)(_index.TreeNode, {
+      children: (0, _jsxRuntime.jsx)("button", {
+        children: "Hello World"
+      })
+    })));
+    const item = _react.screen.getByText('Hello World');
+    expect(item).toBeInTheDocument();
+  });
+  it('supports containerRef prop', async () => {
+    const containerRef = _vitest.vi.fn();
+    (0, _react.render)((0, _jsxRuntime.jsx)("div", {
+      "data-testid": "1",
+      children: (0, _jsxRuntime.jsx)(_index.TreeNode, {
+        containerRef: containerRef,
+        children: _button || (_button = (0, _jsxRuntime.jsx)("button", {
+          children: "Hello World"
+        }))
+      })
+    }));
+    const div = _react.screen.getByTestId('1');
+    expect(containerRef).toHaveBeenCalledWith(div);
+  });
+});