155 lines
9.3 KiB
JavaScript
155 lines
9.3 KiB
JavaScript
|
define(["require", "exports", "tslib", "react", "./customizable", "./Customizer", "./Customizations", "@fluentui/test-utilities"], function (require, exports, tslib_1, React, customizable_1, Customizer_1, Customizations_1, test_utilities_1) {
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Foo = /** @class */ (function (_super) {
|
||
|
|
tslib_1.__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 = tslib_1.__decorate([
|
||
|
|
(0, customizable_1.customizable)('Foo', ['field'])
|
||
|
|
], Foo);
|
||
|
|
return Foo;
|
||
|
|
}(React.Component));
|
||
|
|
var Bar = /** @class */ (function (_super) {
|
||
|
|
tslib_1.__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 = tslib_1.__decorate([
|
||
|
|
(0, customizable_1.customizable)('Bar', ['field', 'field2', 'field3'])
|
||
|
|
], Bar);
|
||
|
|
return Bar;
|
||
|
|
}(React.Component));
|
||
|
|
describe('Customizer', function () {
|
||
|
|
beforeEach(function () {
|
||
|
|
Customizations_1.Customizations.reset();
|
||
|
|
});
|
||
|
|
it('can provide new defaults', function () {
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.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_1.Customizations.applySettings({ field: 'globalName' });
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.Customizer, { settings: { nonMatch: 'customName' } },
|
||
|
|
React.createElement(Foo, null)), function (wrapper) {
|
||
|
|
expect(wrapper.html()).toEqual('<div>globalName</div>');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
it('can override global settings', function () {
|
||
|
|
Customizations_1.Customizations.applySettings({ field: 'globalName' });
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.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' },
|
||
|
|
};
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.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 () {
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.Customizer, { settings: { field: 'field' } },
|
||
|
|
React.createElement(Customizer_1.Customizer, { settings: { field2: 'field2' } },
|
||
|
|
React.createElement(Bar, null))), function (wrapper) {
|
||
|
|
expect(wrapper.html()).toEqual('<div>fieldfield2</div>');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
it('can layer scoped settings', function () {
|
||
|
|
Customizations_1.Customizations.applySettings({ field3: 'field3' });
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.Customizer, { scopedSettings: { Bar: { field: 'field', field2: 'oldfield2' } } },
|
||
|
|
React.createElement(Customizer_1.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_1.Customizations.applySettings({ field3: 'field3' });
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.Customizer, { scopedSettings: { Bar: { field: 'field' } } },
|
||
|
|
React.createElement(Customizer_1.Customizer, { scopedSettings: function (scopedSettings) { return ({
|
||
|
|
Bar: tslib_1.__assign(tslib_1.__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 () {
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.Customizer, { scopedSettings: { Foo: { field: 'scopedToFoo' } } },
|
||
|
|
React.createElement(Customizer_1.Customizer, { scopedSettings: function (settings) { return (tslib_1.__assign(tslib_1.__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 () {
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.Customizer, { settings: { field: 'field1' } },
|
||
|
|
React.createElement(Customizer_1.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 () {
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.Customizer, { settings: { field: 'field1' } },
|
||
|
|
React.createElement(Customizer_1.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 () {
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.Customizer, { settings: { field: 'field1' } },
|
||
|
|
React.createElement(Customizer_1.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_1.Customizations.applySettings({ field: 'globalName' });
|
||
|
|
(0, test_utilities_1.safeMount)(React.createElement(Customizer_1.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_1.Customizations.applyBatchedUpdates(function () {
|
||
|
|
Customizations_1.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_1.Customizations.applyBatchedUpdates(function () {
|
||
|
|
Customizations_1.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_1.Customizations.applySettings({ field2: 'lastGlobalName' });
|
||
|
|
expect(wrapper.html()).toEqual('<div>notUpdatedlastGlobalName</div>');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=Customizer.test.js.map
|