@instructure/ui-tree-browser 10.16.1 → 10.16.3

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

@@ -0,0 +1,525 @@
+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.
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
+import { TreeBrowser } from '../index';
+import { TreeNode } from '../TreeNode';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+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 = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render a tree', async () => {
+    const _render = render(_TreeBrowser || (_TreeBrowser = _jsx(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 () => {
+    render(_TreeBrowser2 || (_TreeBrowser2 = _jsx(TreeBrowser, {
+      collections: COLLECTIONS_DATA,
+      items: ITEMS_DATA,
+      rootId: 2
+    })));
+    const items = screen.getAllByRole('treeitem');
+    expect(items.length).toEqual(1);
+    await userEvent.click(items[0]);
+    await waitFor(() => {
+      const itemsAfterClick = 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 () => {
+    render(_TreeBrowser3 || (_TreeBrowser3 = _jsx(TreeBrowser, {
+      collections: COLLECTIONS_DATA,
+      items: ITEMS_DATA,
+      rootId: void 0
+    })));
+    const items = screen.getAllByRole('treeitem');
+    expect(items.length).toEqual(4);
+  });
+  describe('expanded', () => {
+    it('should not expand collections or items without defaultExpanded prop', async () => {
+      render(_TreeBrowser4 || (_TreeBrowser4 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      })));
+      const items = screen.getAllByRole('treeitem');
+      expect(items.length).toEqual(1);
+      expect(items[0]).toHaveTextContent('Root Directory');
+    });
+    it('should accept an array of default expanded collections', async () => {
+      render(_jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        defaultExpanded: [2, 3]
+      }));
+      const items = screen.getAllByRole('treeitem');
+      const subRoot2 = screen.getByLabelText('Sub Root 2');
+      const nestedSub = 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 () => {
+      render(_TreeBrowser5 || (_TreeBrowser5 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      })));
+      const item = screen.getByRole('treeitem');
+      await userEvent.click(item);
+      await waitFor(() => {
+        expect(item).not.toHaveAttribute('aria-selected');
+      });
+    });
+    it('should show the selection indicator on last clicked collection or item', async () => {
+      render(_TreeBrowser6 || (_TreeBrowser6 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        selectionType: "single"
+      })));
+      const item = screen.getByLabelText('Root Directory');
+      await userEvent.click(item);
+      await waitFor(() => {
+        expect(item).toHaveAttribute('aria-selected');
+      });
+      const nestedItem = screen.getByLabelText('Item 1');
+      await userEvent.click(nestedItem);
+      await waitFor(() => {
+        expect(nestedItem).toHaveAttribute('aria-selected');
+      });
+    });
+  });
+  describe('collections', () => {
+    it('should render collections with string-keyed ids', async () => {
+      render(_TreeBrowser7 || (_TreeBrowser7 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA_WITH_STRING_IDS,
+        items: ITEMS_DATA,
+        rootId: '2',
+        showRootCollection: true
+      })));
+      const item = screen.getByLabelText('Root Directory');
+      expect(item).toBeInTheDocument();
+    });
+    it('should not show the first keyed collection if showRootCollection is false', async () => {
+      render(_TreeBrowser8 || (_TreeBrowser8 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        showRootCollection: false
+      })));
+      const items = screen.getAllByRole('treeitem');
+      expect(items.length).toEqual(3);
+    });
+    it('should render first keyed collection if showRootCollection is true and rootId specified', async () => {
+      render(_TreeBrowser9 || (_TreeBrowser9 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      })));
+      const item = screen.getByLabelText('Root Directory');
+      expect(item).toBeInTheDocument();
+    });
+    it('should not show the first keyed collection if showRootCollection is false and rootId is 0', async () => {
+      render(_TreeBrowser10 || (_TreeBrowser10 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA_WITH_ZERO,
+        items: ITEMS_DATA,
+        rootId: 0,
+        showRootCollection: false
+      })));
+      const items = screen.getAllByRole('treeitem');
+      expect(items.length).toEqual(3);
+    });
+    it('should render a folder icon by default', async () => {
+      const _render2 = render(_TreeBrowser11 || (_TreeBrowser11 = _jsx(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 = _jsxs("svg", {
+        height: "100",
+        width: "100",
+        "data-testid": "icon-custom",
+        children: [_jsx("title", {
+          "data-testid": "icon-custom-title",
+          children: "Custom icon"
+        }), _jsx("circle", {
+          cx: "50",
+          cy: "50",
+          r: "40"
+        })]
+      }));
+      render(_jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        collectionIcon: () => IconCustom
+      }));
+      const iconCustom = screen.getByTestId('icon-custom');
+      const title = 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 = render(_TreeBrowser12 || (_TreeBrowser12 = _jsx(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 = vi.fn();
+      render(_jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        onCollectionToggle: onCollectionToggle
+      }));
+      const item = screen.getByRole('treeitem');
+      await userEvent.click(item);
+      await waitFor(() => {
+        expect(onCollectionToggle).toHaveBeenCalled();
+      });
+    });
+    it('should call onCollectionClick on button activation (space/enter or click)', async () => {
+      const onCollectionClick = vi.fn();
+      render(_jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        onCollectionClick: onCollectionClick
+      }));
+      const item = screen.getByLabelText('Root Directory');
+      await userEvent.click(item);
+      await userEvent.type(item, '{space}');
+      await userEvent.type(item, '{enter}');
+      await waitFor(() => {
+        expect(onCollectionClick).toHaveBeenCalledTimes(3);
+      });
+    });
+    it('should render before, after nodes of the provided collection', async () => {
+      const _render4 = render(_jsx(TreeBrowser, {
+          collections: {
+            2: {
+              id: 2,
+              name: 'Root Directory',
+              collections: [],
+              items: [],
+              renderBeforeItems: _TreeNode || (_TreeNode = _jsx(TreeNode, {
+                children: _jsx("input", {
+                  id: "input-before"
+                })
+              })),
+              renderAfterItems: _TreeNode2 || (_TreeNode2 = _jsx(TreeNode, {
+                children: _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 = render(_jsx(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 = _jsxs("svg", {
+        height: "100",
+        width: "100",
+        "data-testid": "icon-custom",
+        children: [_jsx("title", {
+          "data-testid": "icon-custom-title",
+          children: "Custom icon"
+        }), _jsx("circle", {
+          cx: "50",
+          cy: "50",
+          r: "40"
+        })]
+      }));
+      render(_jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        defaultExpanded: [2],
+        itemIcon: () => IconCustom
+      }));
+      const iconCustom = screen.getByTestId('icon-custom');
+      const title = 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 = render(_TreeBrowser13 || (_TreeBrowser13 = _jsx(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 = render(_TreeBrowser14 || (_TreeBrowser14 = _jsx(TreeBrowser, {
+          collections: COLLECTIONS_DATA,
+          items: ITEMS_DATA,
+          rootId: 2
+        }))),
+        container = _render7.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should accept a treeLabel prop', async () => {
+      render(_TreeBrowser15 || (_TreeBrowser15 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        treeLabel: "Test treeLabel"
+      })));
+      const tree = screen.getByLabelText('Test treeLabel');
+      expect(tree).toBeInTheDocument();
+    });
+    it('should toggle aria-expanded', async () => {
+      render(_TreeBrowser16 || (_TreeBrowser16 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2
+      })));
+      const item = screen.getByRole('treeitem');
+      expect(item).toHaveAttribute('aria-expanded', 'false');
+      await userEvent.click(item);
+      await waitFor(() => {
+        expect(item).toHaveAttribute('aria-expanded', 'true');
+      });
+    });
+    it('should use aria-selected when selectionType is not none', async () => {
+      render(_TreeBrowser17 || (_TreeBrowser17 = _jsx(TreeBrowser, {
+        collections: COLLECTIONS_DATA,
+        items: ITEMS_DATA,
+        rootId: 2,
+        selectionType: "single"
+      })));
+      const item = screen.getByRole('treeitem');
+      expect(item).not.toHaveAttribute('aria-selected');
+      await userEvent.click(item);
+      await waitFor(() => {
+        expect(item).toHaveAttribute('aria-selected', 'true');
+      });
+      const nestedItem = 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 () => {
+      render(_jsx(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 = 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/lib/TreeBrowser/TreeButton/__new-tests__/TreeButton.test.js

@@ -0,0 +1,166 @@
+"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 _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.
+ */
+describe('<TreeButton />', () => {
+  it('should render', async () => {
+    const _render = (0, _react.render)(_TreeButton || (_TreeButton = (0, _jsxRuntime.jsx)(_index.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 = _vitest.vi.fn();
+      (0, _react.render)((0, _jsxRuntime.jsx)("div", {
+        "data-testid": "1",
+        children: (0, _jsxRuntime.jsx)(_index.TreeButton, {
+          id: "2",
+          containerRef: containerRef
+        })
+      }));
+      const div = _react.screen.getByTestId('1');
+      expect(containerRef).toHaveBeenCalledWith(div);
+    });
+  });
+  describe('descriptor', () => {
+    it('should not render a descriptor element if no descriptor passed', async () => {
+      const _render2 = (0, _react.render)(_TreeButton2 || (_TreeButton2 = (0, _jsxRuntime.jsx)(_index.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 = (0, _react.render)(_TreeButton3 || (_TreeButton3 = (0, _jsxRuntime.jsx)(_index.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 = (0, _jsxRuntime.jsxs)("svg", {
+      height: "100",
+      width: "100",
+      "data-testid": "custom-icon",
+      children: [(0, _jsxRuntime.jsx)("title", {
+        "data-testid": "custom-icon-title",
+        children: "Test icon"
+      }), (0, _jsxRuntime.jsx)("circle", {
+        cx: "50",
+        cy: "50",
+        r: "40"
+      })]
+    }));
+    it('should render a collection icon', async () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeButton, {
+        id: "1",
+        type: "collection",
+        collectionIcon: () => Icon
+      }));
+      const icon = _react.screen.getByTestId('custom-icon');
+      const iconTitle = _react.screen.getByTestId('custom-icon-title');
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveTextContent('Test icon');
+      expect(iconTitle).toBeInTheDocument();
+    });
+    it('should render an item icon', async () => {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeButton, {
+        id: "1",
+        type: "item",
+        itemIcon: () => Icon
+      }));
+      const icon = _react.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 = (0, _react.render)(_TreeButton4 || (_TreeButton4 = (0, _jsxRuntime.jsx)(_index.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 = (0, _react.render)(_TreeButton5 || (_TreeButton5 = (0, _jsxRuntime.jsx)(_index.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 = (0, _react.render)(_TreeButton6 || (_TreeButton6 = (0, _jsxRuntime.jsx)(_index.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 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.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 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.TreeButton, {
+          id: "1",
+          renderContent: () => _div || (_div = (0, _jsxRuntime.jsx)("div", {
+            className: "test1",
+            children: "abcd"
+          }))
+        })),
+        container = _render8.container;
+      const customElement = container.querySelector('div[class="test1"]');
+      expect(customElement).toBeInTheDocument();
+    });
+  });
+});