application/__tests__/components/common/user-search-box-test.js

jest.unmock('./../../../components/common/user-search-box');
jest.unmock('./../../../services/base-service');
jest.unmock('./../../../services/error-service');
jest.unmock('./../../../services/user-service');
jest.unmock('./../../../alt');

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import Immutable from 'immutable';
import sinon from 'sinon';
import AltTestingUtils from 'alt-utils/lib/AltTestingUtils';

import Chip from 'material-ui/Chip';

import fetch from './../../../util/mock-fetch';
import {UserService, UsersStore} from './../../../services/user-service';

import UserSearchBox, {UserSearchItem, UserSearchMenu, UserSearchMenuItem} from './../../../components/common/user-search-box';

describe('UserSearchBox component', () => {
    beforeEach(() => {
        jasmine.clock().uninstall();
        sinon.stub(window, 'fetch').returns(fetch({
            'items': [
                {
                    id: 444,
                    uuid: '123-456',
                    name: 'Testuser One'
                },
                {
                    id: 445,
                    uuid: '987-654',
                    name: 'Testuser Two'
                }
            ],
            'first': 1,
            'before': 1,
            'current': 1,
            'last': 1,
            'next': 1,
            'total_pages': 1,
            'total_items': 1,
            'limit': 1
        }));
    });

    afterEach(() => {
        jasmine.clock().uninstall();
        window.fetch.restore();
    });

    it('loads defaults', () => {
        const el = TestUtils.renderIntoDocument(<UserSearchBox />);
        expect(el);
    });

    it('appends children', (done) => {
        const el = TestUtils.renderIntoDocument(<UserSearchBox />);
        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        const node = ReactDOM.findDOMNode(input);
        node.value = 'This is a test';

        TestUtils.Simulate.change(input, {});

        setTimeout(() => {
            const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchMenuItem);
            expect(items.length).toEqual(2);

            const itemNode = ReactDOM.findDOMNode(items[0]);
            expect(itemNode.textContent).toEqual('Testuser One');
            done();
        });
    });

    it('fires select event', (done) => {
        const clickSpy = sinon.mock();

        const el = TestUtils.renderIntoDocument(<UserSearchBox onSelectUser={clickSpy} />);
        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        const node = ReactDOM.findDOMNode(input);
        node.value = 'This is a test';

        TestUtils.Simulate.change(input, {});

        setTimeout(() => {
            const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchMenuItem);
            expect(items.length).toEqual(2);

            const itemNode = ReactDOM.findDOMNode(items[0]);
            TestUtils.Simulate.click(itemNode);

            expect(clickSpy.called).toEqual(true);

            expect(el.state.selectedUsers.size).toEqual(1);

            const selected = TestUtils.scryRenderedComponentsWithType(el, UserSearchItem);
            expect(selected.length).toEqual(1);
            done();
        }, 100);
    });

    it('fires remove event', (done) => {
        const clickSpy = sinon.mock();

        const el = TestUtils.renderIntoDocument(<UserSearchBox onSelectUser={clickSpy} />);
        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        const node = ReactDOM.findDOMNode(input);
        node.value = 'This is a test';

        TestUtils.Simulate.change(input, {});

        setTimeout(() => {
            const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchMenuItem);
            expect(items.length).toEqual(2);

            const itemNode = ReactDOM.findDOMNode(items[0]);
            TestUtils.Simulate.click(itemNode);

            expect(el.state.selectedUsers.size).toEqual(1);
            const selected = TestUtils.scryRenderedComponentsWithType(el, UserSearchItem);
            expect(selected.length).toEqual(1);

            selected[0].handleRemove({
                stopPropagation: () => {},
                preventDefault: () => {}
            });

            expect(clickSpy.called).toEqual(true);
            expect(el.state.selectedUsers.size).toEqual(0);

            done();
        }, 100);
    });

    it('appends managed children', () => {
        const clickSpy = sinon.mock();

        const kids = Immutable.fromJS([
            {
                id: 3,
                uuid: '123-456',
                name: 'Manageduser Three'
            },
            {
                id: 4,
                uuid: '987-654',
                name: 'Manageduser Four'
            }
        ]);

        const el = TestUtils.renderIntoDocument(<UserSearchBox users={kids} onSelectUser={clickSpy} />);

        const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchItem);
        expect(items.length).toEqual(2);

        const itemNode = ReactDOM.findDOMNode(items[0]);
        expect(el.state.selectedUsers.size).toEqual(2);
    });

    it('selects first item by default', (done) => {
        const clickSpy = sinon.mock();

        const el = TestUtils.renderIntoDocument(<UserSearchBox onSelectUser={clickSpy} />);
        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        const node = ReactDOM.findDOMNode(input);
        node.value = 'This is a test';

        TestUtils.Simulate.change(input, {});

        setTimeout(() => {
            const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchMenuItem);
            expect(items.length).toEqual(2);

            const selectedItem = TestUtils.findRenderedDOMComponentWithClass(el, 'highlighted');
            expect(selectedItem);

            const selectedNode = ReactDOM.findDOMNode(selectedItem);
            expect(selectedNode.textContent).toEqual('Testuser One');
            done();
        }, 100);
    });

    it('selects next item with down arrow', (done) => {
        const clickSpy = sinon.mock();

        const el = TestUtils.renderIntoDocument(<UserSearchBox onSelectUser={clickSpy} />);
        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        const node = ReactDOM.findDOMNode(input);
        node.value = 'This is a test';

        TestUtils.Simulate.change(input, {});

        setTimeout(() => {
            const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchMenuItem);
            expect(items.length).toEqual(2);

            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });

            const selectedItem = TestUtils.findRenderedDOMComponentWithClass(el, 'highlighted');
            expect(selectedItem);

            const selectedNode = ReactDOM.findDOMNode(selectedItem);
            expect(selectedNode.textContent).toEqual('Testuser Two');
            done();
        }, 100);
    });

    it('selects previous item with up arrow', (done) => {
        window.fetch.restore();
        sinon.stub(window, 'fetch').returns(fetch({
            'items': [
                {
                    id: 444,
                    uuid: '123-456',
                    name: 'Testuser One'
                },
                {
                    id: 445,
                    uuid: '987-654',
                    name: 'Testuser Two'
                },
                {
                    id: 446,
                    uuid: '987-654',
                    name: 'Testuser Three'
                },
                {
                    id: 447,
                    uuid: '987-654',
                    name: 'Testuser Four'
                }
            ],
            'first': 1,
            'before': 1,
            'current': 1,
            'last': 1,
            'next': 1,
            'total_pages': 1,
            'total_items': 1,
            'limit': 1
        }));

        const clickSpy = sinon.mock();

        const el = TestUtils.renderIntoDocument(<UserSearchBox onSelectUser={clickSpy} />);
        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        const node = ReactDOM.findDOMNode(input);
        node.value = 'This is a test';

        TestUtils.Simulate.change(input, {});

        setTimeout(() => {
            const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchMenuItem);
            expect(items.length).toEqual(4);

            // go down three
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            // then up one
            TestUtils.Simulate.keyDown(input, {
                which: 38,
                preventDefault: () => {}
            });

            const selectedItem = TestUtils.findRenderedDOMComponentWithClass(el, 'highlighted');
            expect(selectedItem);

            const selectedNode = ReactDOM.findDOMNode(selectedItem);
            expect(selectedNode.textContent).toEqual('Testuser Three');
            done();
        }, 100);
    });

    it('handles selection on return', (done) => {
        window.fetch.restore();
        sinon.stub(window, 'fetch').returns(fetch({
            'items': [
                {
                    id: 444,
                    uuid: '123-456',
                    name: 'Testuser One'
                },
                {
                    id: 445,
                    uuid: '987-654',
                    name: 'Testuser Two'
                },
                {
                    id: 446,
                    uuid: '987-654',
                    name: 'Testuser Three'
                },
                {
                    id: 447,
                    uuid: '987-654',
                    name: 'Testuser Four'
                }
            ],
            'first': 1,
            'before': 1,
            'current': 1,
            'last': 1,
            'next': 1,
            'total_pages': 1,
            'total_items': 1,
            'limit': 1
        }));

        const clickSpy = sinon.mock();

        const el = TestUtils.renderIntoDocument(<UserSearchBox onSelectUser={clickSpy} />);
        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        const node = ReactDOM.findDOMNode(input);
        node.value = 'This is a test';

        TestUtils.Simulate.change(input, {});

        setTimeout(() => {
            const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchMenuItem);
            expect(items.length).toEqual(4);

            // go down three
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            // then up one
            TestUtils.Simulate.keyDown(input, {
                which: 38,
                preventDefault: () => {}
            });

            const selectedItem = TestUtils.findRenderedDOMComponentWithClass(el, 'highlighted');
            expect(selectedItem);

            const selectedNode = ReactDOM.findDOMNode(selectedItem);
            TestUtils.Simulate.click(selectedNode);

            expect(el.state.selectedUsers.size).toEqual(1);

            expect(el.state.selectedUsers.first().get('name')).toEqual('Testuser Three');
            done();

        }, 100);
    });

    it('clears on escape', (done) => {
        window.fetch.restore();
        sinon.stub(window, 'fetch').returns(fetch({
            'items': [
                {
                    id: 444,
                    uuid: '123-456',
                    name: 'Testuser One'
                },
                {
                    id: 445,
                    uuid: '987-654',
                    name: 'Testuser Two'
                },
                {
                    id: 446,
                    uuid: '987-654',
                    name: 'Testuser Three'
                },
                {
                    id: 447,
                    uuid: '987-654',
                    name: 'Testuser Four'
                }
            ],
            'first': 1,
            'before': 1,
            'current': 1,
            'last': 1,
            'next': 1,
            'total_pages': 1,
            'total_items': 1,
            'limit': 1
        }));

        const clickSpy = sinon.mock();

        const el = TestUtils.renderIntoDocument(<UserSearchBox onSelectUser={clickSpy} />);
        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        const node = ReactDOM.findDOMNode(input);
        node.value = 'This is a test';

        // TestUtils.Simulate.change(input, {});
        el.onKeywordChange({
            target: {
                value: 'This is a test'
            }
        });

        setTimeout(() => {
            const items = TestUtils.scryRenderedComponentsWithType(el, UserSearchMenuItem);
            expect(items.length).toEqual(4);

            // go down three
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            TestUtils.Simulate.keyDown(input, {
                which: 40,
                preventDefault: () => {}
            });
            // then up one
            TestUtils.Simulate.keyDown(input, {
                which: 38,
                preventDefault: () => {}
            });

            // then clear it
            // TestUtils.Simulate.keyDown(input, {
            //     which: 27,
            //     preventDefault: () => {}
            // });
            el.onKeyPress({
                which: 27,
                stopPropagation: () => {},
                preventDefault: () => {}
            });

            setTimeout(() => {
                expect(el.state.users.size).toEqual(0);
                // expect(node.value.length).toEqual(0);
                done();
            }, 100);
        }, 100);
    });
});