Write tests

palantir · Feb 28, 2019 · f126a9d · f126a9d
1 parent 3e020ed
commit f126a9d
Showing 1 changed file with 51 additions and 6 deletions.
diff --git a/packages/select/test/selectComponentSuite.tsx b/packages/select/test/selectComponentSuite.tsx
@@ -9,7 +9,14 @@ import { assert } from "chai";
 import { ReactWrapper } from "enzyme";
 import * as React from "react";
 import * as sinon from "sinon";
-import { filterFilm, IFilm, renderFilm, TOP_100_FILMS } from "../../docs-app/src/examples/select-examples/films";
+import {
+    areFilmsEqual,
+    createFilm,
+    filterFilm,
+    IFilm,
+    renderFilm,
+    TOP_100_FILMS,
+} from "../../docs-app/src/examples/select-examples/films";
 import { IListItemsProps } from "../src/index";
 
 export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
@@ -21,6 +28,7 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
         itemPredicate: filterFilm,
         itemRenderer: sinon.spy(renderFilm),
         items: TOP_100_FILMS.slice(0, 20),
+        itemsEqual: areFilmsEqual,
         onActiveItemChange: sinon.spy(),
         onItemSelect: sinon.spy(),
         onQueryChange: sinon.spy(),
@@ -128,21 +136,38 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
             noResults: <address />,
         };
 
+        beforeEach(() => {
+            testCreateProps.createNewItemFromQuery.resetHistory();
+        });
+
         it("doesn't render create item if input is empty", () => {
             const wrapper = render({
                 ...testCreateProps,
                 query: "",
             });
-            assert.lengthOf(wrapper.find(`textarea`), 0, "should not find createItem");
+            assert.lengthOf(findCreateItem(wrapper), 0, "should not find createItem");
         });
 
-        it("renders create item if input is not empty", () => {
+        it("doesn't render create item if query is non-empty and matches one of the items", () => {
+            const EXISTING_FILM_TITLE = TOP_100_FILMS[0].title;
             const wrapper = render({
                 ...testCreateProps,
-                query: TOP_100_FILMS[0].title,
+                // We need this callback to return a real item this time, and we
+                // don't need to spy on it.
+                createNewItemFromQuery: createFilm,
+                query: EXISTING_FILM_TITLE,
+            });
+            assert.lengthOf(wrapper.find("address"), 0, "should not find noResults");
+            assert.lengthOf(findCreateItem(wrapper), 0, "should not find createItem");
+        });
+
+        it("renders create item if query is not empty and doesn't match any items exactly", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: TOP_100_FILMS[0].title + " a few extra chars",
             });
             assert.lengthOf(wrapper.find("address"), 0, "should not find noResults");
-            assert.lengthOf(wrapper.find(`textarea`), 1, "should find createItem");
+            assert.lengthOf(findCreateItem(wrapper), 1, "should find createItem");
         });
 
         it("renders create item if filtering returns empty list", () => {
@@ -151,7 +176,7 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
                 query: "non-existent film name",
             });
             assert.lengthOf(wrapper.find("address"), 0, "should not find noResults");
-            assert.lengthOf(wrapper.find(`textarea`), 1, "should find createItem");
+            assert.lengthOf(findCreateItem(wrapper), 1, "should find createItem");
         });
 
         it("enter invokes createNewItemFromQuery", () => {
@@ -188,5 +213,25 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
             assert.equal((testProps.onActiveItemChange.lastCall.args[0] as IFilm).rank, TOP_100_FILMS[0].rank);
             assert.equal(testProps.onActiveItemChange.lastCall.args[1], false);
         });
+
+        it("when create item is rendered, updating the query to exactly match one of the items hides the create item", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                // Again, we need this callback to return a real item this time.
+                createNewItemFromQuery: createFilm,
+                query: "non-empty, non-matching initial value",
+            });
+
+            assert.lengthOf(findCreateItem(wrapper), 1, "should find createItem");
+
+            const EXISTING_FILM_TITLE = TOP_100_FILMS[0].title;
+            findInput(wrapper).simulate("change", { target: { value: EXISTING_FILM_TITLE } });
+
+            assert.lengthOf(findCreateItem(wrapper), 0, "should not find createItem");
+        });
     });
+
+    function findCreateItem(wrapper: ReactWrapper<P, S>) {
+        return wrapper.find("textarea");
+    }
 }