206 lines
11 KiB
JavaScript
206 lines
11 KiB
JavaScript
import { __decorate, __extends } from "tslib";
|
|
/* eslint-disable deprecation/deprecation */
|
|
import * as React from 'react';
|
|
import * as ReactDOM from 'react-dom/server';
|
|
import { mount } from 'enzyme';
|
|
import { customizable } from './customizable';
|
|
import { Customizations } from './Customizations';
|
|
import { Customizer } from './Customizer';
|
|
var Foo = /** @class */ (function (_super) {
|
|
__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 = __decorate([
|
|
customizable('Foo', ['field'])
|
|
], Foo);
|
|
return Foo;
|
|
}(React.Component));
|
|
var ConcatStyles = /** @class */ (function (_super) {
|
|
__extends(ConcatStyles, _super);
|
|
function ConcatStyles() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
ConcatStyles.prototype.render = function () {
|
|
return React.createElement("div", null);
|
|
};
|
|
ConcatStyles = __decorate([
|
|
customizable('ConcatStyles', ['styles'], true)
|
|
], ConcatStyles);
|
|
return ConcatStyles;
|
|
}(React.Component));
|
|
var OverrideStyles = /** @class */ (function (_super) {
|
|
__extends(OverrideStyles, _super);
|
|
function OverrideStyles() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
OverrideStyles.prototype.render = function () {
|
|
return React.createElement("div", null);
|
|
};
|
|
OverrideStyles = __decorate([
|
|
customizable('OverrideStyles', ['styles'])
|
|
], OverrideStyles);
|
|
return OverrideStyles;
|
|
}(React.Component));
|
|
var StyleFunction = /** @class */ (function (_super) {
|
|
__extends(StyleFunction, _super);
|
|
function StyleFunction() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
StyleFunction.prototype.render = function () {
|
|
return React.createElement("div", null);
|
|
};
|
|
StyleFunction = __decorate([
|
|
customizable('StyleFunction', ['styles'])
|
|
], StyleFunction);
|
|
return StyleFunction;
|
|
}(React.Component));
|
|
describe('customizable', function () {
|
|
beforeEach(function () {
|
|
Customizations.reset();
|
|
});
|
|
it('can receive global customizations', function () {
|
|
Customizations.applySettings({ field: 'globalName' });
|
|
expect(ReactDOM.renderToStaticMarkup(React.createElement(Foo, null))).toEqual('<div>globalName</div>');
|
|
});
|
|
it('can receive scoped customizations', function () {
|
|
Customizations.applySettings({ field: 'globalName' });
|
|
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.applySettings({ field: 'globalName' });
|
|
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.applySettings({ field: 'globalName' });
|
|
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.applySettings({ styles: { root: globalStyles } });
|
|
var wrapper = mount(React.createElement(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.applySettings({ styles: globalStyles });
|
|
var wrapper = mount(React.createElement(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 = mount(React.createElement(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.applyScopedSettings('ConcatStyles', { styles: { root: scopedStyles } });
|
|
var wrapper = mount(React.createElement(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.applySettings({ styles: { root: globalStyles } });
|
|
var wrapper = mount(React.createElement(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.applyScopedSettings('OverrideStyles', { styles: { root: scopedStyles } });
|
|
var wrapper = mount(React.createElement(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.applySettings({ styles: { root: globalRootStyles } });
|
|
var wrapper = mount(React.createElement(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 = mount(React.createElement(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.applySettings({ styles: { root: globalRootStyles } });
|
|
var wrapper = mount(React.createElement(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
|