starface-outlook-sync-addin/node_modules/@fluentui/utilities/lib-commonjs/customizations/customizable.test.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("@testing-library/react");
var customizable_1 = require("./customizable");
var Customizations_1 = require("./Customizations");
var Customizer_1 = require("./Customizer");
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