208 lines
11 KiB
JavaScript
208 lines
11 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var tslib_1 = require("tslib");
|
|
/* eslint-disable deprecation/deprecation */
|
|
var React = require("react");
|
|
var ReactDOM = require("react-dom/server");
|
|
var enzyme_1 = require("enzyme");
|
|
var customizable_1 = require("./customizable");
|
|
var Customizations_1 = require("./Customizations");
|
|
var Customizer_1 = require("./Customizer");
|
|
var Foo = /** @class */ (function (_super) {
|
|
tslib_1.__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 = tslib_1.__decorate([
|
|
(0, customizable_1.customizable)('Foo', ['field'])
|
|
], Foo);
|
|
return Foo;
|
|
}(React.Component));
|
|
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", null);
|
|
};
|
|
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", null);
|
|
};
|
|
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 () {
|
|
return React.createElement("div", null);
|
|
};
|
|
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 receive global customizations', function () {
|
|
Customizations_1.Customizations.applySettings({ field: 'globalName' });
|
|
expect(ReactDOM.renderToStaticMarkup(React.createElement(Foo, null))).toEqual('<div>globalName</div>');
|
|
});
|
|
it('can receive scoped customizations', function () {
|
|
Customizations_1.Customizations.applySettings({ field: 'globalName' });
|
|
Customizations_1.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_1.Customizations.applySettings({ field: 'globalName' });
|
|
Customizations_1.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_1.Customizations.applySettings({ field: 'globalName' });
|
|
Customizations_1.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_1.Customizations.applySettings({ styles: { root: globalStyles } });
|
|
var wrapper = (0, enzyme_1.mount)(React.createElement(Customizer_1.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_1.Customizations.applySettings({ styles: globalStyles });
|
|
var wrapper = (0, enzyme_1.mount)(React.createElement(Customizer_1.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 = (0, enzyme_1.mount)(React.createElement(Customizer_1.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_1.Customizations.applyScopedSettings('ConcatStyles', { styles: { root: scopedStyles } });
|
|
var wrapper = (0, enzyme_1.mount)(React.createElement(Customizer_1.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_1.Customizations.applySettings({ styles: { root: globalStyles } });
|
|
var wrapper = (0, enzyme_1.mount)(React.createElement(Customizer_1.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_1.Customizations.applyScopedSettings('OverrideStyles', { styles: { root: scopedStyles } });
|
|
var wrapper = (0, enzyme_1.mount)(React.createElement(Customizer_1.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_1.Customizations.applySettings({ styles: { root: globalRootStyles } });
|
|
var wrapper = (0, enzyme_1.mount)(React.createElement(Customizer_1.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 = (0, enzyme_1.mount)(React.createElement(Customizer_1.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_1.Customizations.applySettings({ styles: { root: globalRootStyles } });
|
|
var wrapper = (0, enzyme_1.mount)(React.createElement(Customizer_1.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
|