diff --git a/package-lock.json b/package-lock.json
index c1af43ee1c..3cca23a028 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1955,6 +1955,32 @@
}
}
},
+ "@testing-library/user-event": {
+ "version": "12.3.0",
+ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.3.0.tgz",
+ "integrity": "sha512-A4TZofjkOH42ydTtHZcGNhwYjonkVIGBi4pmNweUgjDEGmWHuZf4k7hLd6QTL+rkSOgrd3TOCFDNyK9KO0reeA==",
+ "dev": true,
+ "requires": {
+ "@babel/runtime": "^7.10.2"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.12.5",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+ "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+ "dev": true,
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ },
+ "regenerator-runtime": {
+ "version": "0.13.7",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+ "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+ "dev": true
+ }
+ }
+ },
"@types/aria-query": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
diff --git a/package.json b/package.json
index 167c742c81..8af6b0ed62 100644
--- 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
index ff39b8c69a..0e6526bdc3 100644
--- 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",
+ }}
/>
diff --git a/src/components/TreeView/tests/TreeViewHeader.test.tsx b/src/components/TreeView/tests/TreeViewHeader.test.tsx
index 6903e25588..9e801608ae 100644
--- 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();
+ 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();
+ 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
index 9154003a54..504a11d8dc 100644
--- 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
index 42eb8b0049..ce7fdc4873 100644
--- 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]}