import { __decorate, __extends } from "tslib";
/* eslint-disable deprecation/deprecation */
import * as React from 'react';
import * as ReactDOM from 'react-dom/server';
import { mount } from 'enzyme';
import { customizable } from './customizable';
import { Customizations } from './Customizations';
import { Customizer } from './Customizer';
var Foo = /** @class */ (function (_super) {
    __extends(Foo, _super);
    function Foo() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Foo.prototype.render = function () {
        return React.createElement("div", null, this.props.field);
    };
    Foo = __decorate([
        customizable('Foo', ['field'])
    ], Foo);
    return Foo;
}(React.Component));
var ConcatStyles = /** @class */ (function (_super) {
    __extends(ConcatStyles, _super);
    function ConcatStyles() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ConcatStyles.prototype.render = function () {
        return React.createElement("div", null);
    };
    ConcatStyles = __decorate([
        customizable('ConcatStyles', ['styles'], true)
    ], ConcatStyles);
    return ConcatStyles;
}(React.Component));
var OverrideStyles = /** @class */ (function (_super) {
    __extends(OverrideStyles, _super);
    function OverrideStyles() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OverrideStyles.prototype.render = function () {
        return React.createElement("div", null);
    };
    OverrideStyles = __decorate([
        customizable('OverrideStyles', ['styles'])
    ], OverrideStyles);
    return OverrideStyles;
}(React.Component));
var StyleFunction = /** @class */ (function (_super) {
    __extends(StyleFunction, _super);
    function StyleFunction() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    StyleFunction.prototype.render = function () {
        return React.createElement("div", null);
    };
    StyleFunction = __decorate([
        customizable('StyleFunction', ['styles'])
    ], StyleFunction);
    return StyleFunction;
}(React.Component));
describe('customizable', function () {
    beforeEach(function () {
        Customizations.reset();
    });
    it('can receive global customizations', function () {
        Customizations.applySettings({ field: 'globalName' });
        expect(ReactDOM.renderToStaticMarkup(React.createElement(Foo, null))).toEqual('<div>globalName</div>');
    });
    it('can receive scoped customizations', function () {
        Customizations.applySettings({ field: 'globalName' });
        Customizations.applyScopedSettings('Foo', { field: 'scopedName' });
        expect(ReactDOM.renderToStaticMarkup(React.createElement(Foo, null))).toEqual('<div>scopedName</div>');
    });
    it('can ignore scoped customizations that do not apply', function () {
        Customizations.applySettings({ field: 'globalName' });
        Customizations.applyScopedSettings('Bar', { field: 'scopedName' });
        expect(ReactDOM.renderToStaticMarkup(React.createElement(Foo, null))).toEqual('<div>globalName</div>');
    });
    it('can accept props over global/scoped values', function () {
        Customizations.applySettings({ field: 'globalName' });
        Customizations.applyScopedSettings('Foo', { field: 'scopedName' });
        expect(ReactDOM.renderToStaticMarkup(React.createElement(Foo, { field: "name" }))).toEqual('<div>name</div>');
    });
    it('can concatenate global styles and component styles', function () {
        var globalStyles = { color: 'red', background: 'red' };
        var componentStyles = { color: 'blue' };
        Customizations.applySettings({ styles: { root: globalStyles } });
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: { root: componentStyles } })));
        var component = wrapper.find('ConcatStyles');
        var props = component.props();
        expect(Object.keys(props.styles)).toEqual(['root', '__shadowConfig__']);
        expect(props.styles.root).toEqual([globalStyles, componentStyles]);
    });
    it('can concatenate global styles and component styles', function () {
        var globalStyles = function (_props) {
            return { root: { color: 'red', background: 'green' } };
        };
        var componentStyles = { root: { color: 'blue' } };
        Customizations.applySettings({ styles: globalStyles });
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var component = wrapper.find('ConcatStyles');
        var props = component.props();
        expect(Object.keys(props.styles)).toEqual(['root', '__shadowConfig__']);
        expect(props.styles.root).toEqual([globalStyles({}).root, componentStyles.root]);
    });
    it('will apply component style function when no global styles are present', function () {
        var componentStyles = function (_props) {
            return { root: { color: 'red', background: 'green' } };
        };
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(StyleFunction, { styles: componentStyles })));
        var component = wrapper.find('StyleFunction');
        var props = component.props();
        expect(typeof props.styles).toBe('function');
        expect(props.styles.__shadowConfig__).toBeTruthy();
    });
    it('can concatenate scoped styles and component styles', function () {
        var scopedStyles = { color: 'green', background: 'green' };
        var componentStyles = { color: 'blue' };
        Customizations.applyScopedSettings('ConcatStyles', { styles: { root: scopedStyles } });
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: { root: componentStyles } })));
        var component = wrapper.find('ConcatStyles');
        var props = component.props();
        expect(Object.keys(props.styles)).toEqual(['root', '__shadowConfig__']);
        expect(props.styles.root).toEqual([scopedStyles, componentStyles]);
    });
    it('can override global styles with component styles', function () {
        var globalStyles = { color: 'red', background: 'red' };
        var componentStyles = { color: 'blue' };
        Customizations.applySettings({ styles: { root: globalStyles } });
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(OverrideStyles, { styles: { root: componentStyles } })));
        var component = wrapper.find('OverrideStyles');
        var props = component.props();
        expect(Object.keys(props.styles)).toEqual(['root', '__shadowConfig__']);
        expect(props.styles.root).toEqual(componentStyles);
    });
    it('can override scoped styles with component styles', function () {
        var scopedStyles = { color: 'green', background: 'green' };
        var componentStyles = { color: 'blue' };
        Customizations.applyScopedSettings('OverrideStyles', { styles: { root: scopedStyles } });
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(OverrideStyles, { styles: { root: componentStyles } })));
        var component = wrapper.find('OverrideStyles');
        var props = component.props();
        expect(Object.keys(props.styles)).toEqual(['root', '__shadowConfig__']);
        expect(props.styles.root).toEqual(componentStyles);
    });
    it('should not mutate styles if no change to component and global styles', function () {
        var globalRootStyles = { color: 'red', background: 'red' };
        var componentRootStyles = { color: 'blue' };
        var componentStyles = { root: componentRootStyles };
        Customizations.applySettings({ styles: { root: globalRootStyles } });
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var component = wrapper.find('ConcatStyles');
        var finalStyles = component.props().styles;
        expect(Object.keys(finalStyles)).toEqual(['root', '__shadowConfig__']);
        expect(finalStyles.root).toEqual([globalRootStyles, componentRootStyles]);
        wrapper.setProps({});
        var updatedComponent = wrapper.find('ConcatStyles');
        var finalStylesAfterRerender = updatedComponent.props().styles;
        expect(finalStylesAfterRerender).toBe(finalStyles);
        expect(finalStylesAfterRerender).toEqual(finalStyles);
    });
    it('should not mutate styles if no change to component styles without global styles', function () {
        var componentStyles = { root: { color: 'blue' } };
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var component = wrapper.find('ConcatStyles');
        var finalStyles = component.props().styles;
        expect(Object.keys(finalStyles)).toEqual(['root', '__shadowConfig__']);
        expect(finalStyles.root).toEqual(componentStyles.root);
        wrapper.setProps({});
        var updatedComponent = wrapper.find('ConcatStyles');
        var finalStylesAfterRerender = updatedComponent.props().styles;
        expect(finalStylesAfterRerender).toStrictEqual(finalStyles);
        expect(finalStylesAfterRerender).toEqual(finalStyles);
    });
    it('should update styles if component styles changed', function () {
        var globalRootStyles = { color: 'red', background: 'red' };
        var componentRootStyles = { color: 'blue' };
        var componentStyles = { root: componentRootStyles };
        Customizations.applySettings({ styles: { root: globalRootStyles } });
        var wrapper = mount(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var component = wrapper.find('ConcatStyles');
        var finalStyles = component.props().styles;
        expect(Object.keys(finalStyles)).toEqual(['root', '__shadowConfig__']);
        expect(finalStyles.root).toEqual([globalRootStyles, componentRootStyles]);
        var newComponentRootStyles = { color: 'red' };
        var newComponentStyles = { root: newComponentRootStyles };
        // re-render ConcatStyles with new styles
        wrapper.setProps({
            children: React.cloneElement(wrapper.props().children, { styles: newComponentStyles }),
        });
        var updatedComponent = wrapper.find('ConcatStyles');
        var finalStylesAfterRerender = updatedComponent.props().styles;
        expect(Object.keys(finalStylesAfterRerender)).toEqual(['root', '__shadowConfig__']);
        expect(finalStylesAfterRerender.root).toEqual([globalRootStyles, newComponentRootStyles]);
    });
});
//# sourceMappingURL=customizable.test.js.map