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