158 lines
7.9 KiB
JavaScript
158 lines
7.9 KiB
JavaScript
import { __assign, __decorate, __extends } from "tslib";
|
|
/* eslint-disable deprecation/deprecation */
|
|
import * as React from 'react';
|
|
import { customizable } from './customizable';
|
|
import { Customizer } from './Customizer';
|
|
import { Customizations } from './Customizations';
|
|
import { safeMount } from '@fluentui/test-utilities';
|
|
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 Bar = /** @class */ (function (_super) {
|
|
__extends(Bar, _super);
|
|
function Bar() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Bar.prototype.render = function () {
|
|
return (React.createElement("div", null,
|
|
this.props.field,
|
|
this.props.field2,
|
|
this.props.field3));
|
|
};
|
|
Bar = __decorate([
|
|
customizable('Bar', ['field', 'field2', 'field3'])
|
|
], Bar);
|
|
return Bar;
|
|
}(React.Component));
|
|
describe('Customizer', function () {
|
|
beforeEach(function () {
|
|
Customizations.reset();
|
|
});
|
|
it('can provide new defaults', function () {
|
|
safeMount(React.createElement(Customizer, { settings: { field: 'customName' } },
|
|
React.createElement(Foo, null)), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>customName</div>');
|
|
});
|
|
});
|
|
it('can pass through global settings', function () {
|
|
Customizations.applySettings({ field: 'globalName' });
|
|
safeMount(React.createElement(Customizer, { settings: { nonMatch: 'customName' } },
|
|
React.createElement(Foo, null)), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>globalName</div>');
|
|
});
|
|
});
|
|
it('can override global settings', function () {
|
|
Customizations.applySettings({ field: 'globalName' });
|
|
safeMount(React.createElement(Customizer, { settings: { field: 'customName' } },
|
|
React.createElement(Foo, null)), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>customName</div>');
|
|
});
|
|
});
|
|
it('can scope settings to specific components', function () {
|
|
var scopedSettings = {
|
|
Foo: { field: 'scopedToFoo' },
|
|
Bar: { field: 'scopedToBar' },
|
|
};
|
|
safeMount(React.createElement(Customizer, { scopedSettings: scopedSettings },
|
|
React.createElement("div", null,
|
|
React.createElement(Foo, null),
|
|
React.createElement(Bar, null))), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div><div>scopedToFoo</div><div>scopedToBar</div></div>');
|
|
});
|
|
});
|
|
it('can layer global settings', function () {
|
|
safeMount(React.createElement(Customizer, { settings: { field: 'field' } },
|
|
React.createElement(Customizer, { settings: { field2: 'field2' } },
|
|
React.createElement(Bar, null))), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>fieldfield2</div>');
|
|
});
|
|
});
|
|
it('can layer scoped settings', function () {
|
|
Customizations.applySettings({ field3: 'field3' });
|
|
safeMount(React.createElement(Customizer, { scopedSettings: { Bar: { field: 'field', field2: 'oldfield2' } } },
|
|
React.createElement(Customizer, { scopedSettings: { Bar: { field2: 'field2' } } },
|
|
React.createElement(Bar, null))), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>fieldfield2field3</div>');
|
|
});
|
|
});
|
|
it('can layer scoped settings with scopedSettingsFunction', function () {
|
|
Customizations.applySettings({ field3: 'field3' });
|
|
safeMount(React.createElement(Customizer, { scopedSettings: { Bar: { field: 'field' } } },
|
|
React.createElement(Customizer, { scopedSettings: function (scopedSettings) { return ({
|
|
Bar: __assign(__assign({}, scopedSettings.Bar), { field2: 'field2' }),
|
|
}); } },
|
|
React.createElement(Bar, null))), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>fieldfield2field3</div>');
|
|
});
|
|
});
|
|
it('it allows scopedSettings to be merged when a function is passed', function () {
|
|
safeMount(React.createElement(Customizer, { scopedSettings: { Foo: { field: 'scopedToFoo' } } },
|
|
React.createElement(Customizer, { scopedSettings: function (settings) { return (__assign(__assign({}, settings), { Bar: { field: 'scopedToBar' } })); } },
|
|
React.createElement("div", null,
|
|
React.createElement(Foo, null),
|
|
React.createElement(Bar, null)))), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div><div>scopedToFoo</div><div>scopedToBar</div></div>');
|
|
});
|
|
});
|
|
it('overrides previously set settings', function () {
|
|
safeMount(React.createElement(Customizer, { settings: { field: 'field1' } },
|
|
React.createElement(Customizer, { settings: { field: 'field2' } },
|
|
React.createElement(Bar, null))), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>field2</div>');
|
|
});
|
|
});
|
|
it('overrides the old settings when the parameter is ignored', function () {
|
|
safeMount(React.createElement(Customizer, { settings: { field: 'field1' } },
|
|
React.createElement(Customizer, { settings: function (settings) { return ({ field: 'field2' }); } },
|
|
React.createElement(Bar, null))), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>field2</div>');
|
|
});
|
|
});
|
|
it('can use a function to merge settings', function () {
|
|
safeMount(React.createElement(Customizer, { settings: { field: 'field1' } },
|
|
React.createElement(Customizer, { settings: function (settings) { return ({ field: settings.field + 'field2' }); } },
|
|
React.createElement(Bar, null))), function (wrapper) {
|
|
expect(wrapper.html()).toEqual('<div>field1field2</div>');
|
|
});
|
|
});
|
|
it('can suppress updates', function () {
|
|
Customizations.applySettings({ field: 'globalName' });
|
|
safeMount(React.createElement(Customizer, { settings: { nonMatch: 'customName' } },
|
|
React.createElement(Bar, null)), function (wrapper) {
|
|
// verify base state
|
|
expect(wrapper.html()).toEqual('<div>globalName</div>');
|
|
// verify it doesn't update during suppressUpdates(), and it works through errors, and it updates after
|
|
Customizations.applyBatchedUpdates(function () {
|
|
Customizations.applySettings({ field: 'notGlobalName' });
|
|
// it should not update inside
|
|
expect(wrapper.html()).toEqual('<div>globalName</div>');
|
|
throw new Error();
|
|
});
|
|
// afterwards it should have updated
|
|
expect(wrapper.html()).toEqual('<div>notGlobalName</div>');
|
|
// verify it doesn't update during suppressUpdates(), works through errors, and can suppress final update
|
|
Customizations.applyBatchedUpdates(function () {
|
|
Customizations.applySettings({ field: 'notUpdated' });
|
|
// it should not update inside
|
|
expect(wrapper.html()).toEqual('<div>notGlobalName</div>');
|
|
throw new Error();
|
|
}, true);
|
|
// afterwards, it should still be on the old value
|
|
expect(wrapper.html()).toEqual('<div>notGlobalName</div>');
|
|
// verify it updates after suppressUpdates()
|
|
Customizations.applySettings({ field2: 'lastGlobalName' });
|
|
expect(wrapper.html()).toEqual('<div>notUpdatedlastGlobalName</div>');
|
|
});
|
|
});
|
|
});
|
|
//# sourceMappingURL=Customizer.test.js.map
|