Add two more unit tests

sillsdev · Dec 2, 2020 · 21c634f · 21c634f
1 parent d2369f8
commit 21c634f
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "@sillsdev/react-localize-crowdin": "^1.0.0",
     "@testing-library/react": "^11.2.2",
     "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/user-event": "^12.3.0",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.5",
     "@types/nspell": "^2.1.0",

diff --git a/src/components/TreeView/TreeViewHeader.tsx b/src/components/TreeView/TreeViewHeader.tsx
@@ -68,6 +68,9 @@ export function TreeViewHeader(props: TreeHeaderProps) {
             onChange={handleChange}
             margin="normal"
             autoComplete="off"
+            inputProps={{
+              "data-testid": "testSearch",
+            }}
           />
         </Card>
       </GridListTile>

diff --git a/src/components/TreeView/tests/TreeViewHeader.test.tsx b/src/components/TreeView/tests/TreeViewHeader.test.tsx
@@ -1,8 +1,14 @@
 import React from "react";
+import { render, screen } from "@testing-library/react";
 import { renderHook, act } from "@testing-library/react-hooks";
-import { TreeHeaderProps, useTreeViewNavigation } from "../TreeViewHeader";
+import userEvent from "@testing-library/user-event";
 import MockDomain from "./MockSemanticDomain";
 import SemanticDomainWithSubdomains from "../../../types/SemanticDomain";
+import {
+  TreeViewHeader,
+  TreeHeaderProps,
+  useTreeViewNavigation,
+} from "../TreeViewHeader";
 
 // Handles
 const MOCK_ANIMATE = jest.fn();
@@ -248,26 +254,32 @@ describe("Tests TreeViewHeader", () => {
     );
   });
 
-  // // navigateKeys
-  // it("navigateKeys w/ Arrow Down switches to parent domain", () => {
-  //   const { result } = renderHook(() =>
-  //   useTreeViewNavigation(upOneWithBrothersProps)
-  // );
-
-  //   event.key = "ArrowDown";
-  //   result.current.((event as any) as KeyboardEvent);
-  //   expect(MOCK_ANIMATE).toHaveBeenCalledWith(MockDomain);
-  // });
-
-  // it("navigateKeys w/ Arrow Left switches to left brother domain", () => {
-  //   event.key = "ArrowLeft";
-  //   treeHandle.navigateDomainArrowKeys((event as any) as KeyboardEvent);
-  //   expect(MOCK_ANIMATE).toHaveBeenCalledWith(MockDomain.subdomains[0]);
-  // });
-
-  // it("navigateKeys w/ Arrow Right switches to right brother domain", () => {
-  //   event.key = "ArrowRight";
-  //   treeHandle.navigateDomainArrowKeys((event as any) as KeyboardEvent);
-  //   expect(MOCK_ANIMATE).toHaveBeenCalledWith(MockDomain.subdomains[2]);
-  // });
+  // Integration tests, verify the component uses the hooks to achieve the desired UX
+  it("typing non-matching domain search data does not clear input, or attempt to navigate", () => {
+    render(<TreeViewHeader {...upOneWithBrothersProps} />);
+    expect(
+      (screen.getByTestId("testSearch") as HTMLInputElement).value
+    ).toEqual("");
+    userEvent.type(screen.getByTestId("testSearch"), "flibbertigibbet{enter}");
+    expect(
+      (screen.getByTestId("testSearch") as HTMLInputElement).value
+    ).toEqual("flibbertigibbet");
+    // verify that no attempt to switch domains happened
+    expect(MOCK_ANIMATE).toHaveBeenCalledTimes(0);
+  });
+
+  it("typing valid domain number navigates and clears input", () => {
+    render(<TreeViewHeader {...upOneWithBrothersProps} />);
+    expect(
+      (screen.getByTestId("testSearch") as HTMLInputElement).value
+    ).toEqual("");
+    userEvent.type(screen.getByTestId("testSearch"), "1.2{enter}");
+    expect(
+      (screen.getByTestId("testSearch") as HTMLInputElement).value
+    ).toEqual("");
+    // verify that we're testing with the matching domain
+    expect(MockDomain.subdomains[2].id).toEqual("1.2");
+    // verify that we would switch to the domain requested
+    expect(MOCK_ANIMATE).toHaveBeenCalledWith(MockDomain.subdomains[2]);
+  });
 });
diff --git a/src/components/TreeView/tests/__snapshots__/TreeDepiction.test.tsx.snap b/src/components/TreeView/tests/__snapshots__/TreeDepiction.test.tsx.snap
@@ -117,6 +117,7 @@ Array [
                   autoComplete="off"
                   autoFocus={false}
                   className="MuiInputBase-input MuiInput-input"
+                  data-testid="testSearch"
                   disabled={false}
                   id="name"
                   onAnimationStart={[Function]}
@@ -856,6 +857,7 @@ Array [
                   autoComplete="off"
                   autoFocus={false}
                   className="MuiInputBase-input MuiInput-input"
+                  data-testid="testSearch"
                   disabled={false}
                   id="name"
                   onAnimationStart={[Function]}
@@ -1240,6 +1242,7 @@ Array [
                   autoComplete="off"
                   autoFocus={false}
                   className="MuiInputBase-input MuiInput-input"
+                  data-testid="testSearch"
                   disabled={false}
                   id="name"
                   onAnimationStart={[Function]}
@@ -2118,6 +2121,7 @@ Array [
                   autoComplete="off"
                   autoFocus={false}
                   className="MuiInputBase-input MuiInput-input"
+                  data-testid="testSearch"
                   disabled={false}
                   id="name"
                   onAnimationStart={[Function]}
@@ -2579,6 +2583,7 @@ Array [
                   autoComplete="off"
                   autoFocus={false}
                   className="MuiInputBase-input MuiInput-input"
+                  data-testid="testSearch"
                   disabled={false}
                   id="name"
                   onAnimationStart={[Function]}

diff --git a/src/components/TreeView/tests/__snapshots__/TreeViewComponent.test.tsx.snap b/src/components/TreeView/tests/__snapshots__/TreeViewComponent.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`Tests AddWords Constructs correctly 1`] = `
                     autoComplete="off"
                     autoFocus={false}
                     className="MuiInputBase-input MuiInput-input"
+                    data-testid="testSearch"
                     disabled={false}
                     id="name"
                     onAnimationStart={[Function]}