import { __extends } from "tslib";
/* eslint-disable deprecation/deprecation */
import * as React from 'react';
import * as ReactTestUtils from 'react-dom/test-utils';
import { styled } from './styled';
import * as renderer from 'react-test-renderer';
import { Customizer } from './customizations/Customizer';
import { Stylesheet, InjectionMode, mergeStyles } from '@fluentui/merge-styles';
import { classNamesFunction } from './classNamesFunction';
import { Customizations } from './customizations/Customizations';
import { safeCreate } from '@fluentui/test-utilities';
import { mount } from 'enzyme';
var _lastProps;
var _renderCount;
var _styleEval;
var component;
var lastStylesInBaseComponent;
var getClassNames = classNamesFunction();
var TestBase = /** @class */ (function (_super) {
    __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) {
    __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 = styled(TestBase, TestStyles, undefined, { scope: 'Test' });
describe('styled', function () {
    beforeEach(function () {
        _lastProps = undefined;
        _renderCount = 0;
        _styleEval = 0;
        Stylesheet.getInstance().setConfig({
            injectionMode: InjectionMode.none,
        });
        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 = styled(render, styles);
        var PureComp = styled(render, styles, undefined, undefined, true);
        var App = function () {
            return (React.createElement("div", null,
                React.createElement(Comp, null),
                React.createElement(PureComp, null)));
        };
        component = 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 () {
        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 () {
        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 = 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 () {
        safeCreate(React.createElement(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 () {
        safeCreate(React.createElement(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 () {
        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 = styled(Test, { root: { color: 'green' } }, undefined);
        var TestOuter = styled(TestInner, { root: { lineHeight: '19px' } }, undefined);
        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 = styled(Test, function () { return ({ root: { color: 'green' } }); }, undefined);
        var TestOuter = styled(TestInner, function () { return ({ root: { lineHeight: '29px' } }); }, undefined);
        safeCreate(React.createElement(TestOuter, { cool: true }), function (wrapper) {
            expect(wrapper.toJSON()).toMatchSnapshot();
        });
    });
    it('gives wrapped styles object priority', function () {
        var TestWrapped = styled(Test, { root: { background: 'grey' } }, undefined);
        safeCreate(React.createElement(TestWrapped, { cool: true }), function (wrapper) {
            expect(wrapper.toJSON()).toMatchSnapshot();
        });
    });
    it('gives wrapped styles function priority', function () {
        var TestWrapped = styled(Test, function () { return ({ root: { background: 'grey' } }); }, undefined);
        safeCreate(React.createElement(TestWrapped, { cool: true }), function (wrapper) {
            expect(wrapper.toJSON()).toMatchSnapshot();
        });
    });
    it('gives styles object user prop priority', function () {
        var TestWrapped = styled(Test, { root: { background: 'grey' } }, undefined);
        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 = styled(Test, function () { return ({ root: { background: 'grey' } }); }, undefined);
        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 mergeStyles({
                backgroundColor: 'red',
            });
        };
        var greenStyles = function () {
            return 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 = styled(DefaultPanel, greenStyles);
        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 = styled(Component, defaultStyles);
        safeCreate(React.createElement(StyledComponent, null), function (wrapper) {
            expect(wrapper.toJSON()).toMatchSnapshot();
        });
    });
    it('can re-render on customization mutations', function () {
        safeCreate(React.createElement(Test, null), function () {
            expect(_renderCount).toEqual(1);
            renderer.act(function () {
                Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
            });
            expect(_renderCount).toEqual(2);
        });
    });
    it('can re-render the minimal times when nesting', function () {
        safeCreate(React.createElement(Test, null,
            React.createElement(Test, null),
            React.createElement(Test, null)), function () {
            expect(_renderCount).toEqual(3);
            renderer.act(function () {
                Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
            });
            expect(_renderCount).toEqual(6);
        });
    });
    it('can re-render the minimal times when nesting and in a Customizer', function () {
        safeCreate(React.createElement(Customizer, null,
            React.createElement(Test, null)), function () {
            expect(_renderCount).toEqual(1);
            renderer.act(function () {
                Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
            });
            expect(_renderCount).toEqual(2);
        });
    });
    it('can re-render when customized styles change', function () {
        component = 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 () {
        safeCreate(React.createElement(Customizer, null,
            React.createElement(Test, null,
                React.createElement(ShortCircuit, null,
                    React.createElement(Test, null)))), function () {
            expect(_renderCount).toEqual(2);
            renderer.act(function () {
                Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
            });
            expect(_renderCount).toEqual(4);
        });
    });
    it('will not re-render if styles have not changed', function () {
        component = 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