diff --git a/src/suggestor/List.jsx b/src/suggestor/List.jsx deleted file mode 100644 index 732c71c..0000000 --- a/src/suggestor/List.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ListItem from './ListItem'; - -const List = ({ open, filtered, index, value, onItemClick, onItemMouseEnter, classSchema }) => - open && - !!filtered.length && ( - - ); - -List.propTypes = { - filtered: PropTypes.array.isRequired, - index: PropTypes.number.isRequired, - onItemClick: PropTypes.func.isRequired, - onItemMouseEnter: PropTypes.func.isRequired, - value: PropTypes.string.isRequired, - open: PropTypes.bool.isRequired, - classSchema: PropTypes.shape({ - list: PropTypes.string, - item: PropTypes.string, - activeItem: PropTypes.string - }) -}; - -export default List; diff --git a/src/suggestor/Suggestor.jsx b/src/suggestor/Suggestor.jsx index e3e9c66..ca7945d 100644 --- a/src/suggestor/Suggestor.jsx +++ b/src/suggestor/Suggestor.jsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { autoBind, keys, noop } from '../utils'; import transform from '../utils/transform'; -import List from './List'; +import ListItem from './ListItem'; class Suggestor extends PureComponent { constructor(props) { @@ -161,6 +161,7 @@ class Suggestor extends PureComponent { render() { const { classSchema, style, placeholder, arrow, close, tooltip, required } = this.props; const { open, value, index, filtered } = this.state; + const displaySuggestions = open && !!filtered.length; return (
@@ -176,11 +177,22 @@ class Suggestor extends PureComponent { /> {arrow && } {close && value && } - + {displaySuggestions && ( +
    + {filtered.map((item, i) => ( + + ))} +
+ )}
); } diff --git a/src/suggestor/__tests__/List.spec.js b/src/suggestor/__tests__/List.spec.js deleted file mode 100644 index 2a9cc68..0000000 --- a/src/suggestor/__tests__/List.spec.js +++ /dev/null @@ -1,137 +0,0 @@ -import React from 'react'; -import renderer from 'react-test-renderer'; -import { shallow, mount } from 'enzyme'; -import classSchema from '../../class-schema/bootstrap-3'; -import List from '../List'; - -const PROPS = { - filtered: [{ word: 'locellus', index: 0 }, { word: 'Lydian', index: 0 }, { word: 'warray', index: -1 }], - index: 0, - onItemClick: jest.fn(), - onItemMouseEnter: jest.fn(), - open: false, - value: '', - classSchema -}; - -describe('', () => { - it('snapshot', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('snapshot - no suggestion list', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('snapshot - suggestion list closed', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('snapshot - suggestion list open', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('snapshot - suggestion list open (index 1)', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); -}); - -describe('List component', () => { - let wrapper; - - beforeEach(() => { - PROPS.onItemClick.mockClear(); - PROPS.onItemMouseEnter.mockClear(); - - wrapper = shallow(); - }); - - it('should render nothing when is closed', () => { - expect(wrapper.getElement()).toBeFalsy(); - expect(wrapper.equals(false)).toBeTruthy(); - expect(wrapper.find('.dropdown-menu').getElements().length).toBeFalsy(); - }); - - describe('when is open', () => { - let component; - beforeEach(() => { - component = shallow(); - }); - - it('should render when open flag and any filtered items', () => { - expect(component.getElement()).toBeTruthy(); - expect(component.find('.dropdown-menu').getElement()).toBeTruthy(); - }); - - it('should call onItemClick prop when is clicked', () => { - component - .find('ListItem') - .first() - .simulate('itemClick'); - - expect(PROPS.onItemClick).toHaveBeenCalledTimes(1); - }); - - it('should call onItemClick prop when each is clicked', () => { - const listItems = component.find('ListItem'); - listItems.first().simulate('itemClick'); - listItems.at(1).simulate('itemClick'); - listItems.last().simulate('itemClick'); - - expect(PROPS.onItemClick).toHaveBeenCalledTimes(3); - }); - - it('should call onItemMouseEnter prop when mouse enter into area', () => { - component - .find('ListItem') - .first() - .simulate('itemMouseEnter'); - - expect(PROPS.onItemMouseEnter).toHaveBeenCalledTimes(1); - }); - - it('should call onItemMouseEnter prop when mouse enter into each area', () => { - const listItems = component.find('ListItem'); - listItems.first().simulate('itemMouseEnter'); - listItems.at(1).simulate('itemMouseEnter'); - listItems.last().simulate('itemMouseEnter'); - - expect(PROPS.onItemMouseEnter).toHaveBeenCalledTimes(3); - }); - }); - - describe('list items', () => { - const mounted = mount(); - - it('should render all three
  • elements', () => { - expect(mounted.find('li').length).toBe(3); - }); - - it('should render each item inside
  • ', () => { - const [first, second, third] = PROPS.filtered; - expect( - mounted - .find('li') - .first() - .text() - ).toBe(first.word); - expect( - mounted - .find('li') - .at(1) - .text() - ).toBe(second.word); - expect( - mounted - .find('li') - .last() - .text() - ).toBe(third.word); - }); - }); -}); diff --git a/src/suggestor/__tests__/__snapshots__/List.spec.js.snap b/src/suggestor/__tests__/__snapshots__/List.spec.js.snap deleted file mode 100644 index 80175fd..0000000 --- a/src/suggestor/__tests__/__snapshots__/List.spec.js.snap +++ /dev/null @@ -1,75 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` snapshot - no suggestion list 1`] = `null`; - -exports[` snapshot - suggestion list closed 1`] = `null`; - -exports[` snapshot - suggestion list open (index 1) 1`] = ` - -`; - -exports[` snapshot - suggestion list open 1`] = ` - -`; - -exports[` snapshot 1`] = `null`;