define(["require", "exports", "tslib", "react", "react-dom/test-utils", "./styled", "react-test-renderer", "./customizations/Customizer", "@fluentui/merge-styles", "./classNamesFunction", "./customizations/Customizations", "@fluentui/test-utilities", "enzyme"], function (require, exports, tslib_1, React, ReactTestUtils, styled_1, renderer, Customizer_1, merge_styles_1, classNamesFunction_1, Customizations_1, test_utilities_1, enzyme_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var _lastProps;
    var _renderCount;
    var _styleEval;
    var component;
    var lastStylesInBaseComponent;
    var getClassNames = (0, classNamesFunction_1.classNamesFunction)();
    var TestBase = /** @class */ (function (_super) {
        tslib_1.__extends(TestBase, _super);
        function TestBase(props) {
            return _super.call(this, props) || this;
        }
        TestBase.prototype.render = function () {
            _renderCount++;
            _lastProps = this.props;
            var classNames = getClassNames(this.props.styles, { cool: this.props.cool });
            lastStylesInBaseComponent = this.props.styles;
            return React.createElement("div", { className: classNames.root }, this.props.children);
        };
        return TestBase;
    }(React.Component));
    var ShortCircuit = /** @class */ (function (_super) {
        tslib_1.__extends(ShortCircuit, _super);
        function ShortCircuit() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ShortCircuit.prototype.render = function () {
            return React.createElement("div", null, this.props.children);
        };
        return ShortCircuit;
    }(React.PureComponent));
    var TestStyles = function (props) {
        _styleEval++;
        return {
            root: {
                background: props.cool ? 'blue' : 'red',
            },
        };
    };
    var Test = (0, styled_1.styled)(TestBase, TestStyles, undefined, { scope: 'Test' });
    describe('styled', function () {
        beforeEach(function () {
            _lastProps = undefined;
            _renderCount = 0;
            _styleEval = 0;
            merge_styles_1.Stylesheet.getInstance().setConfig({
                injectionMode: merge_styles_1.InjectionMode.none,
            });
            merge_styles_1.Stylesheet.getInstance().reset();
        });
        afterEach(function () {
            ReactTestUtils.act(function () {
                component === null || component === void 0 ? void 0 : component.unmount();
                component = undefined;
            });
            lastStylesInBaseComponent = undefined;
        });
        it('can create pure components', function () {
            var renderCount = 0;
            var render = function () {
                renderCount++;
                return React.createElement("div", null);
            };
            var styles = function () { return ({}); };
            var Comp = (0, styled_1.styled)(render, styles);
            var PureComp = (0, styled_1.styled)(render, styles, undefined, undefined, true);
            var App = function () {
                return (React.createElement("div", null,
                    React.createElement(Comp, null),
                    React.createElement(PureComp, null)));
            };
            component = (0, enzyme_1.mount)(React.createElement(App, null));
            expect(renderCount).toEqual(2);
            component.setProps({ 'data-foo': '1' });
            expect(renderCount).toEqual(3);
        });
        it('renders base styles (background red)', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Test, null), function (wrapper) {
                // Test that defaults are the base styles (red).
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('allows user overrides (background green)', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Test, { styles: { root: { background: 'green' } } }), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('does not create any new closured functions', function () {
            var _firstProps;
            component = (0, enzyme_1.mount)(React.createElement(Test, null));
            _firstProps = _lastProps;
            expect(_renderCount).toEqual(1);
            component.setProps({ cool: true });
            expect(_renderCount).toEqual(2);
            expect(_firstProps).not.toBe(_lastProps);
            if (_firstProps) {
                // Validate that all functions and objects are the same instances as before.
                for (var propName in _firstProps) {
                    if (_firstProps.hasOwnProperty(propName)) {
                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                        var propValue = _firstProps[propName];
                        if (typeof propValue === 'function' || typeof propValue === 'object') {
                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                            expect(propValue).toBe(_lastProps[propName]);
                        }
                    }
                }
            }
        });
        it('allows for contextual overrides (background yellow)', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Customizer_1.Customizer, { scopedSettings: {
                    Test: {
                        styles: {
                            root: {
                                background: 'yellow',
                            },
                        },
                    },
                } },
                React.createElement(Test, null)), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('allows for contextual overrides mixed under user overrides (background yellow, color red)', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Customizer_1.Customizer, { scopedSettings: {
                    Test: {
                        styles: {
                            root: {
                                background: 'yellow',
                            },
                        },
                    },
                } },
                React.createElement(Test, { styles: { root: { color: 'red' } } })), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('can process style props (background blue)', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Test, { cool: true }), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('can wrap components and merge styling objects for all', function () {
            var TestInner = (0, styled_1.styled)(Test, { root: { color: 'green' } }, undefined);
            var TestOuter = (0, styled_1.styled)(TestInner, { root: { lineHeight: '19px' } }, undefined);
            (0, test_utilities_1.safeCreate)(React.createElement(TestOuter, { cool: true }), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('can wrap components and merge styling functions for all', function () {
            var TestInner = (0, styled_1.styled)(Test, function () { return ({ root: { color: 'green' } }); }, undefined);
            var TestOuter = (0, styled_1.styled)(TestInner, function () { return ({ root: { lineHeight: '29px' } }); }, undefined);
            (0, test_utilities_1.safeCreate)(React.createElement(TestOuter, { cool: true }), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('gives wrapped styles object priority', function () {
            var TestWrapped = (0, styled_1.styled)(Test, { root: { background: 'grey' } }, undefined);
            (0, test_utilities_1.safeCreate)(React.createElement(TestWrapped, { cool: true }), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('gives wrapped styles function priority', function () {
            var TestWrapped = (0, styled_1.styled)(Test, function () { return ({ root: { background: 'grey' } }); }, undefined);
            (0, test_utilities_1.safeCreate)(React.createElement(TestWrapped, { cool: true }), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('gives styles object user prop priority', function () {
            var TestWrapped = (0, styled_1.styled)(Test, { root: { background: 'grey' } }, undefined);
            (0, test_utilities_1.safeCreate)(React.createElement(TestWrapped, { cool: true, styles: { root: { background: 'purple' } } }), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('gives styles function user prop priority', function () {
            var TestWrapped = (0, styled_1.styled)(Test, function () { return ({ root: { background: 'grey' } }); }, undefined);
            (0, test_utilities_1.safeCreate)(React.createElement(TestWrapped, { cool: true, styles: { root: { background: 'purple' } } }), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('respects styles arg', function () {
            var defaultStyles = function () {
                return (0, merge_styles_1.mergeStyles)({
                    backgroundColor: 'red',
                });
            };
            var greenStyles = function () {
                return (0, merge_styles_1.mergeStyles)({
                    backgroundColor: 'green',
                });
            };
            var DefaultPanel = function (props) {
                var _a = props.styles, styles = _a === void 0 ? defaultStyles : _a;
                var className = styles(props);
                return React.createElement("div", { className: className }, props.children);
            };
            var StyledPanel = (0, styled_1.styled)(DefaultPanel, greenStyles);
            (0, test_utilities_1.safeCreate)(React.createElement("div", null,
                React.createElement(DefaultPanel, null, "Panel1"),
                React.createElement(StyledPanel, null, "Panel2")), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('respects styles type', function (done) {
            var defaultStyles = { root: { backgroundColor: 'red' } };
            var Component = function (props) {
                expect(props.styles(props)).toEqual(defaultStyles);
                done();
                return null;
            };
            var StyledComponent = (0, styled_1.styled)(Component, defaultStyles);
            (0, test_utilities_1.safeCreate)(React.createElement(StyledComponent, null), function (wrapper) {
                expect(wrapper.toJSON()).toMatchSnapshot();
            });
        });
        it('can re-render on customization mutations', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Test, null), function () {
                expect(_renderCount).toEqual(1);
                renderer.act(function () {
                    Customizations_1.Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
                });
                expect(_renderCount).toEqual(2);
            });
        });
        it('can re-render the minimal times when nesting', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Test, null,
                React.createElement(Test, null),
                React.createElement(Test, null)), function () {
                expect(_renderCount).toEqual(3);
                renderer.act(function () {
                    Customizations_1.Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
                });
                expect(_renderCount).toEqual(6);
            });
        });
        it('can re-render the minimal times when nesting and in a Customizer', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(Test, null)), function () {
                expect(_renderCount).toEqual(1);
                renderer.act(function () {
                    Customizations_1.Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
                });
                expect(_renderCount).toEqual(2);
            });
        });
        it('can re-render when customized styles change', function () {
            component = (0, enzyme_1.mount)(React.createElement(Test, null));
            expect(_styleEval).toEqual(1);
            component.setProps({ 'data-foo': 1 });
            expect(_styleEval).toEqual(1);
        });
        it('can re-render the minimal times when inside of a pure component', function () {
            (0, test_utilities_1.safeCreate)(React.createElement(Customizer_1.Customizer, null,
                React.createElement(Test, null,
                    React.createElement(ShortCircuit, null,
                        React.createElement(Test, null)))), function () {
                expect(_renderCount).toEqual(2);
                renderer.act(function () {
                    Customizations_1.Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
                });
                expect(_renderCount).toEqual(4);
            });
        });
        it('will not re-render if styles have not changed', function () {
            component = (0, enzyme_1.mount)(React.createElement(Test, { styles: { root: { background: 'red' } } }));
            expect(_renderCount).toEqual(1);
            var stylesProp = lastStylesInBaseComponent;
            component.setProps({ cool: true });
            expect(_renderCount).toEqual(2);
            expect(stylesProp).toBe(lastStylesInBaseComponent);
        });
    });
});
//# sourceMappingURL=styled.test.js.map