160 lines
8.7 KiB
JavaScript
160 lines
8.7 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var tslib_1 = require("tslib");
|
|
/* eslint-disable deprecation/deprecation */
|
|
var React = require("react");
|
|
var customizable_1 = require("./customizable");
|
|
var Customizer_1 = require("./Customizer");
|
|
var Customizations_1 = require("./Customizations");
|
|
var test_utilities_1 = require("@fluentui/test-utilities");
|
|
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
|