diff --git a/tests/TreeView/TreeView.test.svelte b/tests/TreeView/TreeView.test.svelte index 38873616..7009132b 100644 --- a/tests/TreeView/TreeView.test.svelte +++ b/tests/TreeView/TreeView.test.svelte @@ -5,9 +5,10 @@ import Analytics from "carbon-icons-svelte/lib/Analytics.svelte"; let treeview: TreeView; - let activeId: TreeNodeId = ""; - let selectedIds: TreeNodeId[] = []; - let expandedIds: TreeNodeId[] = []; + export let activeId: TreeNodeId = ""; + export let selectedIds: TreeNodeId[] = []; + export let expandedIds: TreeNodeId[] = []; + export let size: "default" | "compact" = "compact"; let nodes: ComponentProps["nodes"] = [ { id: 0, text: "AI / Machine learning", icon: Analytics }, { @@ -47,6 +48,7 @@ disabled: true, nodes: [{ id: 15, text: "IBM API Connect", disabled: true }], }, + { id: 16, text: "Disabled Node", disabled: true }, ]; $: console.log("selectedIds", selectedIds); @@ -54,7 +56,7 @@ { const getItemByName = (name: RegExp) => { @@ -79,4 +80,103 @@ describe.each(testCases)("$name", ({ component }) => { screen.getByText("IBM Analytics Engine").parentNode?.parentNode, ).toHaveAttribute("aria-expanded", "true"); }); + + it("can set initial active node", () => { + render(component, { activeId: "0" }); + const activeItem = screen.getByRole("treeitem", { + name: /AI \/ Machine learning/, + }); + expect(activeItem).toHaveAttribute("tabindex", "0"); + }); + + it("can use compact size variant", () => { + render(component, { size: "compact" }); + const tree = screen.getByRole("tree"); + expect(tree).toHaveClass("bx--tree--compact"); + }); + + it("can render nodes with icons", () => { + render(component); + const iconItem = screen.getByRole("treeitem", { + name: /IBM Analytics Engine/, + }); + expect(iconItem.querySelector("svg")).toBeInTheDocument(); + }); + + it("can set initial expanded nodes", () => { + render(component, { expandedIds: ["0", "1"] }); + const expandedItems = screen.getAllByRole("treeitem", { expanded: true }); + expect(expandedItems).toHaveLength(2); + }); + + it("can set initial multiple selected nodes", () => { + render(component, { selectedIds: ["0", "1"] }); + const selectedItems = screen.getAllByRole("treeitem", { selected: true }); + expect(selectedItems).toHaveLength(2); + }); + + it("can programmatically expand all nodes", () => { + const { component: treeView } = render(component); + treeView.expandAll(); + const expandedItems = screen.getAllByRole("treeitem", { expanded: true }); + expect(expandedItems).toHaveLength(5); + }); + + it("can programmatically collapse all nodes", () => { + const { component: treeView } = render(component, { + expandedIds: ["0", "1", "2", "3", "4"], + }); + treeView.collapseAll(); + noExpandedItems(); + }); + + it("can programmatically expand a subset of nodes", () => { + const { component: treeView } = render(component); + treeView.expandNodes((node: TreeNode) => node.text.includes("Analytics")); + const expandedItems = screen.getAllByRole("treeitem", { expanded: true }); + expect(expandedItems).toHaveLength(2); + }); + + it("can programmatically collapse a subset of nodes", () => { + const { component: treeView } = render(component, { + expandedIds: ["0", "1", "2", "3", "4"], + }); + treeView.collapseNodes((node: TreeNode) => node.text.includes("Analytics")); + const expandedItems = screen.getAllByRole("treeitem", { expanded: true }); + expect(expandedItems).toHaveLength(3); + }); + + it("can show a specific node", () => { + const { component: treeView } = render(component); + treeView.showNode("4"); + const activeItem = screen.getByRole("treeitem", { + name: /IBM Cloud Pak for Data/, + }); + expect(activeItem).toHaveAttribute("tabindex", "0"); + expect(activeItem).toHaveAttribute("aria-selected", "true"); + }); + + it("can handle keyboard navigation", async () => { + render(component); + const firstItem = getItemByName(/AI \/ Machine learning/); + firstItem.focus(); + + await user.keyboard("{ArrowDown}"); + const secondItem = getItemByName(/IBM Analytics Engine/); + expect(secondItem).toHaveAttribute("tabindex", "0"); + expect(secondItem).toHaveFocus(); + + await user.keyboard("{ArrowUp}"); + expect(firstItem).toHaveAttribute("tabindex", "0"); + expect(firstItem).toHaveFocus(); + }); + + it.only("can handle disabled nodes", () => { + render(component); + const disabledItem = screen.getByRole("treeitem", { + name: /Disabled Node/, + }); + expect(disabledItem).toHaveAttribute("aria-disabled", "true"); + expect(disabledItem).toHaveClass("bx--tree-node--disabled"); + }); });