Stefan Hacker
178 lines
10 KiB
JavaScript
178 lines
10 KiB
JavaScript
import { __decorate, __extends } from "tslib";
|
|
import * as React from 'react';
|
|
import { render } from '@testing-library/react';
|
|
import { customizable } from './customizable';
|
|
import { Customizations } from './Customizations';
|
|
import { Customizer } from './Customizer';
|
|
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", { "data-testid": "concat-styles",
|
|
// @ts-expect-error - for testing purposes
|
|
style: this.props.styles, "data-style": JSON.stringify(this.props.styles.root) }));
|
|
};
|
|
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", { "data-testid": "override-styles",
|
|
// @ts-expect-error - for testing purposes
|
|
style: this.props.styles, "data-style": JSON.stringify(this.props.styles.root) }));
|
|
};
|
|
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 () {
|
|
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 = __decorate([
|
|
customizable('StyleFunction', ['styles'])
|
|
], StyleFunction);
|
|
return StyleFunction;
|
|
}(React.Component));
|
|
describe('customizable', function () {
|
|
beforeEach(function () {
|
|
Customizations.reset();
|
|
});
|
|
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 rtl = render(React.createElement(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.applySettings({ styles: globalStyles });
|
|
var rtl = render(React.createElement(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 = render(React.createElement(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.applyScopedSettings('ConcatStyles', { styles: { root: scopedStyles } });
|
|
var rtl = render(React.createElement(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.applySettings({ styles: { root: globalStyles } });
|
|
var rtl = render(React.createElement(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.applyScopedSettings('OverrideStyles', { styles: { root: scopedStyles } });
|
|
var rtl = render(React.createElement(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.applySettings({ styles: { root: globalRootStyles } });
|
|
var rtl = render(React.createElement(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, 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 = render(React.createElement(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, 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.applySettings({ styles: { root: globalRootStyles } });
|
|
var rtl = render(React.createElement(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, 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
|