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