Merge pull request #114 from kpustakhod/not-existing-ids

Add test case

src/__tests__/CheckboxTree.test.tsx

@@ -1,7 +1,9 @@
 import "@testing-library/jest-dom/extend-expect";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import TreeView, { flattenTree } from "..";
+import TreeView from "../TreeView";
+import { INode } from "../TreeView/types";
+import { flattenTree } from "../TreeView/utils";
 
 const folder = {
   name: "",
@@ -46,14 +48,16 @@ const folder = {
   ],
 };
 
-const data = flattenTree(folder);
+const initialData = flattenTree(folder);
 
 function CheckboxTree({
   propagateSelect = true,
   multiSelect = true,
+  data = initialData,
 }: {
   propagateSelect?: boolean;
   multiSelect?: boolean;
+  data?: INode[];
 }) {
   return (
     <div>
@@ -286,3 +290,46 @@ test("should have the correct setsize and posinset values", async () => {
   expect(hopefullyMatcha).toHaveTextContent("Matcha");
   expect(hopefullyMatcha).toHaveAttribute("aria-setsize", "4");
 });
+
+test("Should not throw error when previous selectedId is not in tree data", () => {
+  const { queryAllByRole, container, rerender } = render(<CheckboxTree />);
+
+  const nodes = queryAllByRole("treeitem");
+
+  nodes[0].focus();
+  if (document.activeElement == null)
+    throw new Error(
+      `Expected to find an active element on the document (after focusing the first element with role["treeitem"]), but did not.`
+    );
+  fireEvent.keyDown(document.activeElement, { key: "ArrowRight" }); //expand Fruits
+  fireEvent.keyDown(document.activeElement, { key: "ArrowDown" }); //Avocados
+  fireEvent.keyDown(document.activeElement, { key: "ArrowDown" }); //Bananas
+  fireEvent.keyDown(document.activeElement, { key: "ArrowDown" }); //Berries
+  fireEvent.keyDown(document.activeElement, { key: "Enter" });
+  fireEvent.keyDown(document.activeElement, { key: "ArrowDown" }); //Oranges
+  fireEvent.keyDown(document.activeElement, { key: "Enter" });
+
+  const expandedNodes = queryAllByRole("treeitem");
+
+  expect(container.querySelectorAll("[aria-checked='true']").length).toBe(2);
+  expect(expandedNodes[3]).toHaveAttribute("aria-checked", "true");
+  expect(expandedNodes[4]).toHaveAttribute("aria-checked", "true");
+
+  fireEvent.keyDown(document.activeElement, { key: "Enter" });
+
+  expect(container.querySelectorAll("[aria-checked='true']").length).toBe(1);
+  expect(expandedNodes[3]).toHaveAttribute("aria-checked", "true");
+
+  const newData = {
+    name: "",
+    children: [
+      {
+        name: "Fruits",
+        id: 30,
+      },
+    ],
+  };
+  rerender(<CheckboxTree data={flattenTree(newData)} />);
+  const newNodes = queryAllByRole("treeitem");
+  expect(newNodes.length).toBe(1);
+});