application/__tests__/hocs/atable-test.js

jest.unmock('./../../hocs/atable');
jest.unmock('./../../services/base-service');
jest.unmock('./../../services/error-service');
jest.unmock('./../../services/user-service');

jest.unmock('./../../util/strings');
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 {Input} from 'react-materialize';

import fetch from './../../util/mock-fetch';

import {withAtable, AtableMenu, AtableMenuItem} from './../../hocs/atable';
import {UserService, UsersStore} from './../../services/user-service';

class MockChild extends React.Component {
    constructor(props) {
        super(props);
    }

    draftCb() {
        return;
    }

    updateCb() {
        return;
    }

    componentWillMount() {
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <input type="text" onChange={this.props.onChange} />
        );
    }
}
const MockWrapped = withAtable(MockChild);

describe('Atable Component', () => {

    beforeEach(() => {
        jasmine.clock().uninstall();
        jasmine.clock().install();
        sinon.stub(window, 'fetch').returns(fetch({
            items: [
                {
                    id: 1,
                    name: "Test Testerson",
                    email: "test@example.com"
                },
                {
                    id: 2,
                    name: "Testa Testerson",
                    email: "fraf@example.com"
                }
            ]
        }));

        sinon.stub(MockChild.prototype, 'componentWillMount');
    });

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

    it('wraps component', () => {
        const wrapSpy = sinon.spy(MockWrapped.prototype, 'componentWillMount');

        const el = TestUtils.renderIntoDocument(<MockWrapped />);
        expect(wrapSpy.called).toEqual(true);
        expect(el.interval).not.toEqual(false);
        MockWrapped.prototype.componentWillMount.restore();
    });

    it('injects change callback', () => {
        const onchange = sinon.mock();

        const el = TestUtils.renderIntoDocument(<MockWrapped onChange={onchange} />);
        expect(el);

        el.onChange({'foo': 'bar'});

        expect(onchange.called).toEqual(true);
        expect(onchange.getCalls()[0].args[0]).toEqual({'foo': 'bar'});
    });

    it('intercepts input change', () => {
        const onchange = sinon.mock();

        const el = TestUtils.renderIntoDocument(<MockWrapped onChange={onchange} />);
        expect(el);

        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        TestUtils.Simulate.change(input, {
            target: {
                value: 'this a @atable test'
            }
        });

        expect(onchange.called).toEqual(true);
        expect(el.state.keyword).toEqual('@atable');
    });

    it('parses rando strings', () => {
        const el = TestUtils.renderIntoDocument(<MockWrapped />);
        const matches = el.matchSymbols('this is an @atta-ble123 string that contains @keyw0rds');
        expect(matches.length).toEqual(2);

        expect(matches[0]).toEqual('@atta-ble123');
        expect(matches[1]).toEqual('@keyw0rds');
    });

    it('injects atable menu', (done) => {
        const onchange = sinon.mock();

        const el = TestUtils.renderIntoDocument(<MockWrapped onChange={onchange} />);
        expect(el);

        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        TestUtils.Simulate.change(input, {
            target: {
                value: 'this a @atable test'
            }
        });

        jasmine.clock().uninstall();
        setTimeout(() => {
            expect(window.fetch.called).toEqual(true);
            
            expect(el.state.users.size).toEqual(2);
            const menu = TestUtils.findRenderedComponentWithType(el, AtableMenu);
            expect(menu);
            done();
        });
    });

    it('updates atable menu', (done) => {
        const onchange = sinon.mock();

        const el = TestUtils.renderIntoDocument(<MockWrapped onChange={onchange} />);
        expect(el);

        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        TestUtils.Simulate.change(input, {
            target: {
                value: 'this a @atable test'
            }
        });

        jasmine.clock().uninstall();
        setTimeout(() => {
            expect(window.fetch.called).toEqual(true);
            
            expect(el.state.users.size).toEqual(2);
            const menu = TestUtils.findRenderedComponentWithType(el, AtableMenu);
            expect(menu);
            
            const items = TestUtils.scryRenderedComponentsWithType(menu, AtableMenuItem);
            expect(items.length).toEqual(2);
            
            const node = ReactDOM.findDOMNode(items[0]);
            expect(node.textContent).toEqual('Test Testerson');
            
            done();
        }, 100);
    });

    it('does not create menu', (done) => {
        const onchange = sinon.mock();
        UserService.reset();

        const el = TestUtils.renderIntoDocument(<MockWrapped onChange={onchange} />);
        expect(el);

        const input = TestUtils.findRenderedDOMComponentWithTag(el, 'input');
        TestUtils.Simulate.change(input, {
            target: {
                value: 'this an atable test'
            }
        });

        jasmine.clock().uninstall();
        setTimeout(() => {
            expect(window.fetch.called).toEqual(false);
            
            expect(el.state.users.size).toEqual(0);
            const menu = TestUtils.scryRenderedComponentsWithType(el, AtableMenu);
            expect(menu.length).toEqual(0);
                       
            done();
        }, 100);
    });
});