@instructure/ui-tree-browser 10.19.2-snapshot-2 → 10.19.2-snapshot-4

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

@@ -1,527 +0,0 @@
-"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/src/TreeBrowser/TreeButton/__new-tests__/TreeButton.test.tsx

@@ -1,162 +0,0 @@
-/*
- * 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'
-
-describe('<TreeButton />', () => {
-  it('should render', async () => {
-    const { container } = render(<TreeButton id="1" />)
-    const treeButton = container.querySelector('button[class$="-treeButton"]')
-
-    expect(treeButton).toBeInTheDocument()
-  })
-
-  describe('containerRef', () => {
-    it('should call with parent element', async () => {
-      const containerRef = vi.fn()
-
-      render(
-        <div data-testid="1">
-          <TreeButton id="2" containerRef={containerRef} />
-        </div>
-      )
-      const div = screen.getByTestId('1')
-
-      expect(containerRef).toHaveBeenCalledWith(div)
-    })
-  })
-
-  describe('descriptor', () => {
-    it('should not render a descriptor element if no descriptor passed', async () => {
-      const { container } = render(<TreeButton id="1" />)
-
-      const descriptor = container.querySelector(
-        '[class$="-treeButton__textDescriptor"]'
-      )
-      expect(descriptor).not.toBeInTheDocument()
-    })
-
-    it('should render a descriptor element if descriptor passed', async () => {
-      const { container } = render(
-        <TreeButton id="1" descriptor="Some Descriptor" />
-      )
-      const descriptor = container.querySelector(
-        '[class$="-treeButton__textDescriptor"]'
-      )
-
-      expect(descriptor).toBeInTheDocument()
-      expect(descriptor).toHaveTextContent('Some Descriptor')
-    })
-  })
-
-  describe('icons', () => {
-    const Icon = (
-      <svg height="100" width="100" data-testid="custom-icon">
-        <title data-testid="custom-icon-title">Test icon</title>
-        <circle cx="50" cy="50" r="40" />
-      </svg>
-    )
-
-    it('should render a collection icon', async () => {
-      render(
-        <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(<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 { container } = render(<TreeButton id="1" />)
-      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 { container } = render(
-        <TreeButton
-          id="1"
-          type="item"
-          thumbnail="data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw=="
-        />
-      )
-      const img = container.querySelector('img')
-
-      expect(img).toBeInTheDocument()
-    })
-
-    it('should not render a thumbnail if no thumbnail URL is passed', async () => {
-      const { container } = render(<TreeButton id="1" type="item" />)
-      const thumbnail = container.querySelector('img')
-
-      expect(thumbnail).not.toBeInTheDocument()
-    })
-
-    it('should render a thumbnail if a thumbnail and an icon are passed', async () => {
-      const { container } = render(
-        <TreeButton
-          id="1"
-          type="item"
-          itemIcon={() => Icon}
-          thumbnail="data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw=="
-        />
-      )
-      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 { container } = render(
-        <TreeButton
-          id="1"
-          renderContent={() => <div className="test1">abcd</div>}
-        />
-      )
-      const customElement = container.querySelector('div[class="test1"]')
-
-      expect(customElement).toBeInTheDocument()
-    })
-  })
-})