hbp-react-ui
Version:
A library of useful user-interface components built with React and MobX
105 lines (81 loc) • 8.19 kB
JavaScript
;var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {return typeof obj;} : function (obj) {return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;};var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();var _class, _desc, _value, _class2, _descriptor;var _react = require('react');var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');var _reactDom2 = _interopRequireDefault(_reactDom);
var _mobx = require('mobx');
var _mobxReact = require('mobx-react');
var _Styles = require('./Styles');var _Styles2 = _interopRequireDefault(_Styles);
var _NameValueArray = require('./NameValueArray');var _NameValueArray2 = _interopRequireDefault(_NameValueArray);
var _Select = require('./Select');var _Select2 = _interopRequireDefault(_Select);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}function _initDefineProp(target, property, descriptor, context) {if (!descriptor) return;Object.defineProperty(target, property, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 });}function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {var desc = {};Object['ke' + 'ys'](descriptor).forEach(function (key) {desc[key] = descriptor[key];});desc.enumerable = !!desc.enumerable;desc.configurable = !!desc.configurable;if ('value' in desc || desc.initializer) {desc.writable = true;}desc = decorators.slice().reverse().reduce(function (desc, decorator) {return decorator(target, property, desc) || desc;}, desc);if (context && desc.initializer !== void 0) {desc.value = desc.initializer ? desc.initializer.call(context) : void 0;desc.initializer = undefined;}if (desc.initializer === void 0) {Object['define' + 'Property'](target, property, desc);desc = null;}return desc;}function _initializerWarningHelper(descriptor, context) {throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');}var
Component = (0, _mobxReact.observer)(_class = (_class2 = function (_React$Component) {_inherits(Component, _React$Component);
function Component(props) {_classCallCheck(this, Component);
console.log('Component.constructor');var _this = _possibleConstructorReturn(this, (Component.__proto__ || Object.getPrototypeOf(Component)).call(this,
props));_initDefineProp(_this, 'options', _descriptor, _this);
_this.options.addFromJSON([{ name: 'Male', value: 'M' }, { name: 'Female', value: 'F' }]);return _this;
}_createClass(Component, [{ key: 'render', value: function render()
{var _this2 = this;
console.log('Component.render');
return (
_react2.default.createElement('div', { style: _Styles2.default.styleTable() },
_react2.default.createElement('div', { style: _Styles2.default.styleRowGroup() },
_react2.default.createElement('div', { style: _Styles2.default.styleRow() },
_react2.default.createElement('div', { style: _Styles2.default.styleCell() },
_react2.default.createElement(_Select2.default, {
path: '/Specimen/Sex',
onSelect: this.onSelect.bind(this),
options: this.options,
selection: 'M',
ref: function ref(childComponent) {_this2.childComponent = childComponent;} }))))));
} }, { key: 'onSelect', value: function onSelect(
path, option) {
console.log('Component.onSelect: ' + path + ' - {name: \'' + option.name + '\', value: \'' + option.value + '\'}');
} }]);return Component;}(_react2.default.Component), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'options', [_mobx.observable], { enumerable: true, initializer: function initializer() {return new _NameValueArray2.default();} })), _class2)) || _class;
QUnit.module('Select', function (hooks) {
console.clear();
this.component = _reactDom2.default.render(_react2.default.createElement(Component, null), document.getElementById('react'));
hooks.before(function (assert) {
console.log('QUnit.hooks.before');
assert.ok(true, 'before');
});
QUnit.test('renderedParent', function (assert) {
console.log('QUnit.renderedParent');
var component = assert.test.module.testEnvironment.component;
assert.ok(_typeof(component.props) == 'object', 'passed');
});
QUnit.test('rendered', function (assert) {
console.log('QUnit.rendered');
var component = assert.test.module.testEnvironment.component.childComponent;
assert.ok(_typeof(component.props) == 'object', 'passed');
});
QUnit.test('addOption', function (assert) {
console.log('QUnit.addOption');
var component = assert.test.module.testEnvironment.component;
var length = component.options.items.length;
component.options.add('Other', 'O');
assert.ok(component.options.items.length == ++length, 'passed');
});
QUnit.test('changeOption', function (assert) {
console.log('QUnit.changeOption');
var component = assert.test.module.testEnvironment.component;
var length = component.options.items.length;
component.options.items[0].name = 'Unknown'; // Doesn't work because array elements are not observable
assert.ok(component.options.items.length == length, 'passed');
});
QUnit.test('removeOption', function (assert) {
console.log('QUnit.removeOption');
var component = assert.test.module.testEnvironment.component;
var length = component.options.items.length;
component.options.remove({ name: 'Female', value: 'F' });
assert.ok(component.options.items.length == --length, 'passed');
});
QUnit.test('replaceOptions', function (assert) {
console.log('QUnit.replaceOptions');
var component = assert.test.module.testEnvironment.component;
component.options = new _NameValueArray2.default(); // Only works because component.options is @observable
component.options.add('Replacement', 'R');
assert.ok(component.options.items.length == 1, 'passed');
});
// hooks.after(function (assert) { // Not getting called here for some reason
// console.log('QUnit.hooks.after');
// ReactDOM.unmountComponentAtNode(document.getElementById('react'));
// assert.ok(true, 'after');
// });
});