diff --git a/packages/select/test/selectComponentSuite.tsx b/packages/select/test/selectComponentSuite.tsx index c2b12ee2aa6..47082876331 100644 --- 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
, S>( @@ -21,6 +28,7 @@ export function selectComponentSuite
, 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(), @@ -120,7 +128,7 @@ export function selectComponentSuite
, S>( }); }); - describe("create", () => { + describe.only("create", () => { const testCreateProps = { ...testProps, createNewItemFromQuery: sinon.spy(), @@ -128,21 +136,38 @@ export function selectComponentSuite
, S>( noResults:
, }; + 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, 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
, 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
) { + return wrapper.find("textarea"); + } }