define(["require", "exports", "tslib", "react", "@testing-library/react", "./customizable", "./Customizations", "./Customizer"], function (require, exports, tslib_1, React, react_1, customizable_1, Customizations_1, Customizer_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ConcatStyles = /** @class */ (function (_super) {
        tslib_1.__extends(ConcatStyles, _super);
        function ConcatStyles() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ConcatStyles.prototype.render = function () {
            return (React.createElement("div", { "data-testid": "concat-styles", 
                // @ts-expect-error - for testing purposes
                style: this.props.styles, "data-style": JSON.stringify(this.props.styles.root) }));
        };
        ConcatStyles = tslib_1.__decorate([
            (0, customizable_1.customizable)('ConcatStyles', ['styles'], true)
        ], ConcatStyles);
        return ConcatStyles;
    }(React.Component));
    var OverrideStyles = /** @class */ (function (_super) {
        tslib_1.__extends(OverrideStyles, _super);
        function OverrideStyles() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        OverrideStyles.prototype.render = function () {
            return (React.createElement("div", { "data-testid": "override-styles", 
                // @ts-expect-error - for testing purposes
                style: this.props.styles, "data-style": JSON.stringify(this.props.styles.root) }));
        };
        OverrideStyles = tslib_1.__decorate([
            (0, customizable_1.customizable)('OverrideStyles', ['styles'])
        ], OverrideStyles);
        return OverrideStyles;
    }(React.Component));
    var StyleFunction = /** @class */ (function (_super) {
        tslib_1.__extends(StyleFunction, _super);
        function StyleFunction() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        StyleFunction.prototype.render = function () {
            var styles = this.props.styles({ styles: { root: {} } });
            return (React.createElement("div", { "data-testid": "style-function", style: styles.root, "data-style": JSON.stringify(styles.root) }));
        };
        StyleFunction = tslib_1.__decorate([
            (0, customizable_1.customizable)('StyleFunction', ['styles'])
        ], StyleFunction);
        return StyleFunction;
    }(React.Component));
    describe('customizable', function () {
        beforeEach(function () {
            Customizations_1.Customizations.reset();
        });
        it('can concatenate global styles and component styles', function () {
            var globalStyles = { color: 'red', background: 'red' };
            var componentStyles = { color: 'blue' };
            Customizations_1.Customizations.applySettings({ styles: { root: globalStyles } });
            var rtl = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: { root: componentStyles } })));
            var concatStyleRoot = rtl.getByTestId('concat-styles');
            var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
            expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(rootStyles).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_1.Customizations.applySettings({ styles: globalStyles });
            var rtl = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: componentStyles })));
            var concatStyleRoot = rtl.getByTestId('concat-styles');
            var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
            expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(rootStyles).toEqual([globalStyles({}).root, componentStyles.root]);
        });
        it('will apply component style function when no global styles are present', function () {
            var componentStyles = { root: { color: 'rgb(255, 0, 0)', background: 'rgb(0, 128, 0)' } };
            var componentStylesFn = function (_props) {
                return componentStyles;
            };
            var wrapper = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(StyleFunction, { styles: componentStylesFn })));
            var component = wrapper.getByTestId('style-function');
            var rootStyles = JSON.parse(component.getAttribute('data-style'));
            expect(component).toHaveStyle(componentStyles.root);
            expect(rootStyles).toEqual(componentStyles.root);
        });
        it('can concatenate scoped styles and component styles', function () {
            var scopedStyles = { color: 'green', background: 'green' };
            var componentStyles = { color: 'blue' };
            Customizations_1.Customizations.applyScopedSettings('ConcatStyles', { styles: { root: scopedStyles } });
            var rtl = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: { root: componentStyles } })));
            var concatStyleRoot = rtl.getByTestId('concat-styles');
            var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
            expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(rootStyles).toEqual([scopedStyles, componentStyles]);
        });
        it('can override global styles with component styles', function () {
            var globalStyles = { color: 'red', background: 'red' };
            var componentStyles = { color: 'blue' };
            Customizations_1.Customizations.applySettings({ styles: { root: globalStyles } });
            var rtl = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(OverrideStyles, { styles: { root: componentStyles } })));
            var overrideStyleRoot = rtl.getByTestId('override-styles');
            var rootStyles = JSON.parse(overrideStyleRoot.getAttribute('data-style'));
            expect(Object.keys(overrideStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(rootStyles).toEqual(componentStyles);
        });
        it('can override scoped styles with component styles', function () {
            var scopedStyles = { color: 'green', background: 'green' };
            var componentStyles = { color: 'blue' };
            Customizations_1.Customizations.applyScopedSettings('OverrideStyles', { styles: { root: scopedStyles } });
            var rtl = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(OverrideStyles, { styles: { root: componentStyles } })));
            var overrideStyleRoot = rtl.getByTestId('override-styles');
            var rootStyles = JSON.parse(overrideStyleRoot.getAttribute('data-style'));
            expect(Object.keys(overrideStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(rootStyles).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_1.Customizations.applySettings({ styles: { root: globalRootStyles } });
            var rtl = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: componentStyles })));
            var overrideStyleRoot = rtl.getByTestId('concat-styles');
            var rootStyles = JSON.parse(overrideStyleRoot.getAttribute('data-style'));
            expect(Object.keys(overrideStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(rootStyles).toEqual([globalRootStyles, componentRootStyles]);
            rtl.rerender(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: componentStyles })));
            var updatedOverrideStyleRoot = rtl.getByTestId('concat-styles');
            var updatedRootStyles = JSON.parse(updatedOverrideStyleRoot.getAttribute('data-style'));
            expect(updatedRootStyles).toStrictEqual(rootStyles);
            expect(updatedRootStyles).toEqual(rootStyles);
        });
        it('should not mutate styles if no change to component styles without global styles', function () {
            var componentStyles = { root: { color: 'blue' } };
            var rtl = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: componentStyles })));
            var concatStyleRoot = rtl.getByTestId('concat-styles');
            var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
            expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(rootStyles).toEqual(componentStyles.root);
            rtl.rerender(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: componentStyles })));
            var updatedConcatStyleRoot = rtl.getByTestId('concat-styles');
            var updatedRootStyles = JSON.parse(updatedConcatStyleRoot.getAttribute('data-style'));
            expect(updatedRootStyles).toStrictEqual(rootStyles);
            expect(updatedRootStyles).toEqual(rootStyles);
        });
        it('should update styles if component styles changed', function () {
            var globalRootStyles = { color: 'red', background: 'red' };
            var componentRootStyles = { color: 'blue' };
            var componentStyles = { root: componentRootStyles };
            Customizations_1.Customizations.applySettings({ styles: { root: globalRootStyles } });
            var rtl = (0, react_1.render)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: componentStyles })));
            var concatStyleRoot = rtl.getByTestId('concat-styles');
            var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
            expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(rootStyles).toEqual([globalRootStyles, componentRootStyles]);
            var newComponentRootStyles = { color: 'red' };
            var newComponentStyles = { root: newComponentRootStyles };
            rtl.rerender(React.createElement(Customizer_1.Customizer, null,
                React.createElement(ConcatStyles, { styles: newComponentStyles })));
            var updatedConcatStyleRoot = rtl.getByTestId('concat-styles');
            var updatedRootStyles = JSON.parse(updatedConcatStyleRoot.getAttribute('data-style'));
            expect(Object.keys(updatedConcatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
            expect(updatedRootStyles).toEqual([globalRootStyles, newComponentRootStyles]);
        });
    });
});
//# sourceMappingURL=customizable.test.js.map