'use strict';

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _index = require('../index');

var _ReactDOMComponentTree = require('react-dom/lib/ReactDOMComponentTree');

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _expectDOMStructure = require('./expectDOMStructure');

var _expectDOMStructure2 = _interopRequireDefault(_expectDOMStructure);

var _mockExt = require('./mockExt');

var _mockExt2 = _interopRequireDefault(_mockExt);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _index.install)();

describe('ExtJSComponent', function () {
    var container = void 0,
        Panel = void 0,
        Button = void 0;

    beforeEach(function () {
        (0, _mockExt2.default)();

        var _reactify = (0, _index.reactify)('panel', 'button');

        var _reactify2 = (0, _slicedToArray3.default)(_reactify, 2);

        Panel = _reactify2[0];
        Button = _reactify2[1];

        container = document.createElement('div');
    });

    it('renders the host component', function () {
        var component = _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
                Panel,
                null,
                _react2.default.createElement(Button, null)
            )
        );
        _reactDom2.default.render(component, container);

        (0, _expectDOMStructure2.default)(container.firstChild, {
            nodeName: 'DIV',
            children: [{
                nodeName: 'DIV',
                class: 'x-panel',
                children: [{
                    nodeName: 'DIV',
                    class: 'x-button'
                }]
            }]
        });
    });

    it('renders an Ext JS Component at the root', function () {
        var component = _react2.default.createElement(
            Panel,
            null,
            _react2.default.createElement(Button, null)
        );
        _reactDom2.default.render(component, container);

        (0, _expectDOMStructure2.default)(container.firstChild, {
            nodeName: 'DIV',
            class: 'x-panel'
        });
    });

    it('destroys removed components', function () {
        _reactDom2.default.render(_react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
                Panel,
                null,
                'Test'
            )
        ), container);
        var panel = container.firstChild.firstChild._extCmp;
        _reactDom2.default.render(_react2.default.createElement('div', null), container);

        expect(panel.destroy.calledOnce).toBe(true);
        (0, _expectDOMStructure2.default)(container.firstChild, {
            nodeName: 'DIV'
        });
    });

    it('inserts new components', function () {
        _reactDom2.default.render(_react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(Panel, null)
        ), container);
        var panel = container.firstChild.firstChild._extCmp;
        _reactDom2.default.render(_react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
                Panel,
                null,
                _react2.default.createElement(Button, null)
            )
        ), container);
        expect(panel.add.calledOnce).toBe(true);

        (0, _expectDOMStructure2.default)(container.firstChild, {
            nodeName: 'DIV',
            children: [{
                nodeName: 'DIV',
                class: 'x-panel',
                children: [{
                    nodeName: 'DIV',
                    class: 'x-button'
                }]
            }]
        });
    });

    it('swaps components', function () {
        _reactDom2.default.render(_react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(Panel, null)
        ), container);
        var panel = container.firstChild.firstChild._extCmp;
        _reactDom2.default.render(_react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(Button, null)
        ), container);
        expect(panel.destroy.calledOnce).toBe(true);
        (0, _expectDOMStructure2.default)(container.firstChild, {
            nodeName: 'DIV',
            children: [{
                nodeName: 'DIV',
                class: 'x-button'
            }]
        });
    });

    it('inserts a component before an existing child', function () {
        _reactDom2.default.render(_react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
                Panel,
                null,
                _react2.default.createElement(Panel, null)
            )
        ), container);
        var panel = container.firstChild.firstChild._extCmp;
        _reactDom2.default.render(_react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
                Panel,
                null,
                _react2.default.createElement(Button, null),
                _react2.default.createElement(Panel, null)
            )
        ), container);
        expect(panel.insert.calledOnce).toBe(true);

        (0, _expectDOMStructure2.default)(container.firstChild, {
            nodeName: 'DIV',
            children: [{
                nodeName: 'DIV',
                class: 'x-panel',
                children: [{
                    nodeName: 'DIV',
                    class: 'x-button'
                }, {
                    nodeName: 'DIV',
                    class: 'x-panel'
                }]
            }]
        });
    });

    it('sets the html config when props.children is a string', function () {
        _reactDom2.default.render(_react2.default.createElement(
            Panel,
            null,
            'Test'
        ), container);
        var panel = container.firstChild._extCmp;
        expect(panel.config.html).toBe('<!-- react-text: 1 -->Test<!-- /react-text -->');
    });
});
//# sourceMappingURL=ExtJSComponent.test.js.map