Stefan Hacker
298 lines
13 KiB
JavaScript
298 lines
13 KiB
JavaScript
import { __extends } from "tslib";
|
|
import * as React from 'react';
|
|
import { act, render } from '@testing-library/react';
|
|
import { styled } from './styled';
|
|
import { Customizer } from './customizations/Customizer';
|
|
import { Stylesheet, InjectionMode, mergeStyles } from '@fluentui/merge-styles';
|
|
import { classNamesFunction } from './classNamesFunction';
|
|
import { Customizations } from './customizations/Customizations';
|
|
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 () {
|
|
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 Component = function () {
|
|
renderCount++;
|
|
return React.createElement("div", null);
|
|
};
|
|
var styles = function () { return ({}); };
|
|
var Comp = styled(Component, styles);
|
|
var PureComp = styled(Component, styles, undefined, undefined, true);
|
|
var App = function () {
|
|
return (React.createElement("div", null,
|
|
React.createElement(Comp, null),
|
|
React.createElement(PureComp, null)));
|
|
};
|
|
act(function () {
|
|
component = render(React.createElement(App, null));
|
|
});
|
|
expect(renderCount).toEqual(2);
|
|
act(function () {
|
|
component.rerender(React.createElement(App, { "data-foo": "1" }));
|
|
});
|
|
expect(renderCount).toEqual(3);
|
|
});
|
|
it('renders base styles (background red)', function () {
|
|
var wrapper = render(React.createElement(Test, null));
|
|
// Test that defaults are the base styles (red)
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
});
|
|
it('allows user overrides (background green)', function () {
|
|
var wrapper = render(React.createElement(Test, { styles: { root: { background: 'green' } } }));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
it('does not create any new closured functions', function () {
|
|
var _firstProps;
|
|
act(function () {
|
|
component = render(React.createElement(Test, null));
|
|
});
|
|
_firstProps = _lastProps;
|
|
expect(_renderCount).toEqual(1);
|
|
act(function () {
|
|
component.rerender(React.createElement(Test, { 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 () {
|
|
var wrapper = render(React.createElement(Customizer, { scopedSettings: {
|
|
Test: {
|
|
styles: {
|
|
root: {
|
|
background: 'yellow',
|
|
},
|
|
},
|
|
},
|
|
} },
|
|
React.createElement(Test, null)));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
it('allows for contextual overrides mixed under user overrides (background yellow, color red)', function () {
|
|
var wrapper = render(React.createElement(Customizer, { scopedSettings: {
|
|
Test: {
|
|
styles: {
|
|
root: {
|
|
background: 'yellow',
|
|
},
|
|
},
|
|
},
|
|
} },
|
|
React.createElement(Test, { styles: { root: { color: 'red' } } })));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
it('can process style props (background blue)', function () {
|
|
var wrapper = render(React.createElement(Test, { cool: true }));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
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);
|
|
var wrapper = render(React.createElement(TestOuter, { cool: true }));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
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);
|
|
var wrapper = render(React.createElement(TestOuter, { cool: true }));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
it('gives wrapped styles object priority', function () {
|
|
var TestWrapped = styled(Test, { root: { background: 'grey' } }, undefined);
|
|
var wrapper = render(React.createElement(TestWrapped, { cool: true }));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
it('gives wrapped styles function priority', function () {
|
|
var TestWrapped = styled(Test, function () { return ({ root: { background: 'grey' } }); }, undefined);
|
|
var wrapper = render(React.createElement(TestWrapped, { cool: true }));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
it('gives styles object user prop priority', function () {
|
|
var TestWrapped = styled(Test, { root: { background: 'grey' } }, undefined);
|
|
var wrapper = render(React.createElement(TestWrapped, { cool: true, styles: { root: { background: 'purple' } } }));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
it('gives styles function user prop priority', function () {
|
|
var TestWrapped = styled(Test, function () { return ({ root: { background: 'grey' } }); }, undefined);
|
|
var wrapper = render(React.createElement(TestWrapped, { cool: true, styles: { root: { background: 'purple' } } }));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
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);
|
|
var wrapper = render(React.createElement("div", null,
|
|
React.createElement(DefaultPanel, null, "Panel1"),
|
|
React.createElement(StyledPanel, null, "Panel2")));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
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);
|
|
var wrapper = render(React.createElement(StyledComponent, null));
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
|
wrapper.unmount();
|
|
});
|
|
it('can re-render on customization mutations', function () {
|
|
var wrapper = render(React.createElement(Test, null));
|
|
expect(_renderCount).toEqual(1);
|
|
act(function () {
|
|
Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
|
|
});
|
|
expect(_renderCount).toEqual(2);
|
|
wrapper.unmount();
|
|
});
|
|
it('can re-render the minimal times when nesting', function () {
|
|
var wrapper = render(React.createElement(Test, null,
|
|
React.createElement(Test, null),
|
|
React.createElement(Test, null)));
|
|
expect(_renderCount).toEqual(3);
|
|
act(function () {
|
|
Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
|
|
});
|
|
expect(_renderCount).toEqual(6);
|
|
wrapper.unmount();
|
|
});
|
|
it('can re-render the minimal times when nesting and in a Customizer', function () {
|
|
var wrapper = render(React.createElement(Customizer, null,
|
|
React.createElement(Test, null)));
|
|
expect(_renderCount).toEqual(1);
|
|
act(function () {
|
|
Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
|
|
});
|
|
expect(_renderCount).toEqual(2);
|
|
wrapper.unmount();
|
|
});
|
|
it('can re-render when customized styles change', function () {
|
|
act(function () {
|
|
component = render(React.createElement(Test, null));
|
|
});
|
|
expect(_styleEval).toEqual(1);
|
|
act(function () {
|
|
component.rerender(React.createElement(Test, { "data-foo": 1 }));
|
|
});
|
|
expect(_styleEval).toEqual(1);
|
|
component.unmount();
|
|
});
|
|
it('can re-render the minimal times when inside of a pure component', function () {
|
|
var wrapper = render(React.createElement(Customizer, null,
|
|
React.createElement(Test, null,
|
|
React.createElement(ShortCircuit, null,
|
|
React.createElement(Test, null)))));
|
|
expect(_renderCount).toEqual(2);
|
|
act(function () {
|
|
Customizations.applySettings({ theme: { palette: { themePrimary: 'red' } } });
|
|
});
|
|
expect(_renderCount).toEqual(4);
|
|
wrapper.unmount();
|
|
});
|
|
it('will not re-render if styles have not changed', function () {
|
|
var firstStylesProp;
|
|
act(function () {
|
|
component = render(React.createElement(Test, { styles: { root: { background: 'red' } } }));
|
|
firstStylesProp = lastStylesInBaseComponent;
|
|
});
|
|
expect(_renderCount).toEqual(1);
|
|
act(function () {
|
|
component.rerender(React.createElement(Test, { cool: true, styles: { root: { background: 'red' } } }));
|
|
});
|
|
expect(_renderCount).toEqual(2);
|
|
// With react-test-renderer, object identity may change but the content is equivalent
|
|
expect(JSON.stringify(firstStylesProp)).toBe(JSON.stringify(lastStylesInBaseComponent));
|
|
});
|
|
});
|
|
//# sourceMappingURL=styled.test.js.map
|