From 21c634f8d42c38b5ac21e51fd3ad21383b74cf05 Mon Sep 17 00:00:00 2001 From: Jason Naylor Date: Wed, 2 Dec 2020 11:54:39 -0800 Subject: [PATCH] Add two more unit tests --- package-lock.json | 26 +++++++++ package.json | 1 + src/components/TreeView/TreeViewHeader.tsx | 3 + .../TreeView/tests/TreeViewHeader.test.tsx | 58 +++++++++++-------- .../__snapshots__/TreeDepiction.test.tsx.snap | 5 ++ .../TreeViewComponent.test.tsx.snap | 1 + 6 files changed, 71 insertions(+), 23 deletions(-) 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]}