application/__tests__/components/assignment/content-search-box-test.js

jest.unmock('./../../../components/assignment/content-search-box');
jest.unmock('./../../../services/base-service');
jest.unmock('./../../../services/error-service');
jest.unmock('./../../../services/content-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 Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import fetch from './../../../util/mock-fetch';
import {ContentService, ContentStore} from './../../../services/content-service';

import ContentSearchBox, {ContentSearchBoxModal, ContentSearchResults, ContentSearchResult, ContentItem} from './../../../components/assignment/content-search-box';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

describe('ContentSearchBox component', () => {
    beforeEach(() => {
        jasmine.clock().uninstall();
        sinon.stub(window, 'fetch').returns(fetch({
            'items': [
                {
                    id: 1,
                    uuid: '123-456',
                    attachment: {}
                },
                {
                    id: 2,
                    uuid: '987-654',
                    attachment: {}
                }
            ],
            '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(<ContentSearchBox />);
        expect(el);
    });

    it('opens search box', () => {
        const el = TestUtils.renderIntoDocument(<ContentSearchBox />);
        expect(el);
        el.componentWillMount();

        expect(el.state.modalIsOpen).toEqual(false);
        const button = TestUtils.findRenderedComponentWithType(el, RaisedButton);
        expect(button);

        el.handleOpenModal();
        jasmine.clock().uninstall();

        expect(el.state.modalIsOpen).toEqual(true);
        const modal = TestUtils.findRenderedComponentWithType(el, ContentSearchBoxModal);
        expect(modal);
    });

    it('handles search request', (done) => {
        const el = TestUtils.renderIntoDocument(<ContentSearchBox />);

        el.setState({'modalIsOpen': true});
        const dialog = TestUtils.findRenderedComponentWithType(el, Dialog);
        expect(dialog);
        const renderedDialog = TestUtils.renderIntoDocument(<MuiThemeProvider>{dialog.renderLayer()}</MuiThemeProvider>);

        const tf = TestUtils.findRenderedComponentWithType(renderedDialog, TextField);
        const input = ReactDOM.findDOMNode(
            TestUtils.findRenderedDOMComponentWithTag(tf, 'input')
        );
        input.value = 'test';

        expect(window.fetch.called).toEqual(false);

        TestUtils.Simulate.keyDown(input, {
            'which': 13,
            'target': input
        });

        expect(window.fetch.called).toEqual(true);

        jasmine.clock().uninstall();
        setTimeout(() => {
            expect(el.state.contents.size).toEqual(2);
            done();
        }, 100);
    });

    it('shows injects content', (done) => {
        const el = TestUtils.renderIntoDocument(<ContentSearchBox />);

        el.setState({'modalIsOpen': true});
        const dialog = TestUtils.findRenderedComponentWithType(el, Dialog);
        expect(dialog);
        const renderedDialog = TestUtils.renderIntoDocument(<MuiThemeProvider>{dialog.renderLayer()}</MuiThemeProvider>);

        const tf = TestUtils.findRenderedComponentWithType(renderedDialog, TextField);
        const input = ReactDOM.findDOMNode(
            TestUtils.findRenderedDOMComponentWithTag(tf, 'input')
        );
        input.value = 'test';

        expect(window.fetch.called).toEqual(false);

        TestUtils.Simulate.keyDown(input, {
            'which': 13,
            'target': input
        });

        expect(window.fetch.called).toEqual(true);

        expect(el.state.contents.size).toEqual(0);
        jasmine.clock().uninstall();
        setTimeout(() => {
            expect(el.state.contents.size).toEqual(2);

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

    it('shows searched content', () => {
        const contents = Immutable.fromJS([
            {
                id: 1,
                uuid: '123-456',
                attachment: {}
            },
            {
                id: 2,
                uuid: '987-654',
                attachment: {}
            }
        ]);
        const select = sinon.mock();
        const el = TestUtils.renderIntoDocument(
            <ContentSearchResults
                contents={contents}
                onSelectContent={select}
                />
        );

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


    it('selects clicked content', () => {
        const contents = Immutable.fromJS([
            {
                id: 1,
                uuid: '123-456',
                attachment: {}
            },
            {
                id: 2,
                uuid: '987-654',
                attachment: {}
            }
        ]);
        const select = sinon.mock();
        const el = TestUtils.renderIntoDocument(
            <ContentSearchResults
                contents={contents}
                onSelectContent={select}
                />
        );

        const items = TestUtils.scryRenderedComponentsWithType(el, ContentSearchResult);
        expect(items);
        const link = TestUtils.scryRenderedDOMComponentsWithTag(items[0], 'a');
        const node = ReactDOM.findDOMNode(link[0]);
        TestUtils.Simulate.click(node, {});

        expect(select.calledOnce).toEqual(true);
    });

    it('removes clicked content', () => {
        const contents = Immutable.fromJS([
            {
                id: 1,
                uuid: '123-456',
                attachment: {}
            },
            {
                id: 2,
                uuid: '987-654',
                attachment: {}
            }
        ]);
        const remove = sinon.mock();
        const el = TestUtils.renderIntoDocument(<ContentSearchBox contents={contents} />);
        el.componentWillMount();

        const selected = TestUtils.scryRenderedComponentsWithType(el, ContentItem);
        expect(selected.length).toEqual(2);

        const link = TestUtils.findRenderedDOMComponentWithClass(selected[0], 'handle-remove')
        TestUtils.Simulate.click(ReactDOM.findDOMNode(link), {});

        const selectedAgain = TestUtils.scryRenderedComponentsWithType(el, ContentItem);
        expect(selectedAgain.length).toEqual(1);
    });

    it('sets sort on empty', () => {
        const el = TestUtils.renderIntoDocument(<ContentSearchBox />);
        el.componentWillMount();

        expect(el.state.selectedContent.size).toEqual(0);
        expect(el.state.sortedContent.length).toEqual(0);
    });

    it('sorts collection sans sort param', (done) => {
        const contents = Immutable.fromJS([
            {
                id: 1,
                uuid: '123-456',
                attachment: {}
            },
            {
                id: 2,
                uuid: '987-654',
                attachment: {}
            }
        ]);
        const remove = sinon.mock();
        const el = TestUtils.renderIntoDocument(<ContentSearchBox contents={contents} />);
        el.componentWillMount();

        jasmine.clock().uninstall();
        setTimeout(() => {
            expect(el.state.selectedContent.size).toEqual(2);
            expect(el.state.sortedContent.length).toEqual(2);

            expect(el.state.selectedContent.first().get('uuid')).toEqual(el.state.sortedContent[0]);
            done();
        }, 100);
    });

    it('sorts collection sans with param', (done) => {
        const contents = Immutable.fromJS([
            {
                id: 1,
                uuid: '123-456',
                attachment: {}
            },
            {
                id: 2,
                uuid: '987-654',
                attachment: {}
            },
            {
                id: 3,
                uuid: '543-987',
                attachment: {}
            }
        ]);
        const remove = sinon.mock();
        const el = TestUtils.renderIntoDocument(
            <ContentSearchBox
                contents={contents}
                sorted={Immutable.fromJS(['543-987', '123-456', '987-654'])}
                />
        );
        el.componentWillMount();

        jasmine.clock().uninstall();
        setTimeout(() => {
            expect(el.state.selectedContent.size).toEqual(3);
            expect(el.state.sortedContent.length).toEqual(3);

            expect(el.state.selectedContent.last().get('uuid')).toEqual(el.state.sortedContent[0]);
            done();
        }, 100);
    });
});