import { assert } from "chai" ; import { mount } from "enzyme" ; import * as React from "react" ; import * as sinon from "sinon" ; import { InputGroup , Popover } from "@blueprintjs/core" ; import { IFilm , renderFilm , TOP_100_FILMS } from "../../docs-app/src/common/films" ; import { IItemRendererProps , ISelectProps , ISelectState , Select } from "../src" ; import { selectComponentSuite } from "./selectComponentSuite" ; describe ( "<Select>" , ( ) => { const FilmSelect = Select . ofType < IFilm > ( ) ; const defaultProps = { items : TOP_100_FILMS , popoverProps : { isOpen : true , usePortal : false } , query : "" , } ; let handlers ; beforeEach ( ( ) => { handlers = { itemPredicate : sinon . spy ( filterByYear ) , itemRenderer : sinon . spy ( renderFilm ) , onItemSelect : sinon . spy ( ) , } ; } ) ; selectComponentSuite < ISelectProps < IFilm > , ISelectState > ( props => mount ( < Select { ... props } popoverProps = { { isOpen : true , usePortal : false } } />)); it ( "renders a Popover around children that contains InputGroup and items" , ( ) => { const wrapper = select ( ) ; assert . lengthOf ( wrapper . find ( InputGroup ) , 1 , "should render InputGroup" ) ; assert . lengthOf ( wrapper . find ( Popover ) , 1 , "should render Popover" ) ; } ) ; it ( "filterable=false hides InputGroup" , ( ) => { const wrapper = select ( { filterable : false } ) ; assert . lengthOf ( wrapper . find ( InputGroup ) , 0 , "should not render InputGroup" ) ; assert . lengthOf ( wrapper . find ( Popover ) , 1 , "should render Popover" ) ; } ) ; it ( "disabled=true disables Popover" , ( ) => { const wrapper = select ( { disabled : true } ) ; assert . strictEqual ( wrapper . find ( Popover ) . prop ( "disabled" ) , true ) ; } ) ; it ( "disabled=true doesn't call itemRenderer" , ( ) => { select ( { disabled : true } ) ; assert . equal ( handlers . itemRenderer . callCount , 0 ) ; } ) ; it ( "disabled=false calls itemRenderer" , ( ) => { select ( { disabled : false } ) ; assert . equal ( handlers . itemRenderer . callCount , 100 ) ; } ) ; it ( "inputProps value and onChange are ignored" , ( ) => { const inputProps = { value : "nailed it" , onChange : sinon . spy ( ) } ; const input = select ( { inputProps } ) . find ( "input" ) ; assert . notEqual ( input . prop ( "onChange" ) , inputProps . onChange ) ; assert . notEqual ( input . prop ( "value" ) , inputProps . value ) ; } ) ; it ( "popover can be controlled with popoverProps" , ( ) => { const onOpening = sinon . spy ( ) ; const modifiers = { } ; const wrapper = select ( { popoverProps : { onOpening , modifiers } } ) ; wrapper . find ( "article" ) . simulate ( "click" ) ; assert . strictEqual ( wrapper . find ( Popover ) . prop ( "modifiers" ) , modifiers ) ; assert . isTrue ( onOpening . calledOnce ) ; } ) ; it ( "returns focus to focusable target after popover closed" ) ; function select ( props = { } , query ? ) { const wrapper = mount ( < FilmSelect { ... defaultProps } { ... handlers } { ... props } > < article /> < /FilmSelect>); if ( query !== undefined ) { wrapper . setState ( { query } ) ; } return wrapper ; } } ) ; function filterByYear ( query , film ) { return query === "" || film . year . toString ( ) === query ; }