react-oc
Version:
A React component that allows OpenComponents to operate within a react application.
443 lines (385 loc) • 16.6 kB
JavaScript
;
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _bluebird = _interopRequireDefault(require("bluebird"));
var _reactHelpers = require("./__test__/react-helpers");
var _OpenComponentsContext = require("./OpenComponentsContext");
var _OCContext = require("./OCContext");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
describe('<OpenComponentsContext></OpenComponentsContext>', function () {
describe('when not present', function () {
it('OCContext gives false as context',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee() {
var node, context;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
node = document.createElement('div');
_context.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
context = ctx;
return '';
}), node);
case 3:
expect(context).toBe(false);
case 4:
case "end":
return _context.stop();
}
}
}, _callee, this);
})));
});
it('renders its children',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2() {
var node;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
node = document.createElement('div');
_context2.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/"
}, 'hello world'), node);
case 3:
expect(node.innerHTML).toBe('hello world');
case 4:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
})));
it('adds oc, baseUrl and lang to OCContext',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee3() {
var node, oc, context;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
node = document.createElement('div');
oc = {};
_context3.next = 4;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
clientOc: oc,
baseUrl: "http://localhost/",
lang: "en-GB"
}, _react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
context = ctx;
})), node);
case 4:
expect(context).toMatchObject({
baseUrl: 'http://localhost/',
lang: 'en-GB',
oc: oc
});
case 5:
case "end":
return _context3.stop();
}
}
}, _callee3, this);
})));
it('adds a getHtml method to OCContext',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee4() {
var node, context;
return regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
node = document.createElement('div');
_context4.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/"
}, _react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
context = ctx;
})), node);
case 3:
expect(_typeof(context.getHtml)).toBe('function');
case 4:
case "end":
return _context4.stop();
}
}
}, _callee4, this);
})));
it('adds a saveElement method to OCContext',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee5() {
var node, context;
return regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
node = document.createElement('div');
_context5.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/"
}, _react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
context = ctx;
})), node);
case 3:
expect(_typeof(context.saveElements)).toBe('function');
case 4:
case "end":
return _context5.stop();
}
}
}, _callee5, this);
})));
it('adds a getElement method to OCContext',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee6() {
var node, context;
return regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
node = document.createElement('div');
_context6.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/"
}, _react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
context = ctx;
})), node);
case 3:
expect(_typeof(context.getElements)).toBe('function');
case 4:
case "end":
return _context6.stop();
}
}
}, _callee6, this);
})));
it('getHtml returns undefined when prefetchedComponents was not provided',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee7() {
var node, context;
return regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
node = document.createElement('div');
_context7.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/"
}, _react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
context = ctx;
})), node);
case 3:
expect(context.getHtml('key1')).toBeUndefined();
case 4:
case "end":
return _context7.stop();
}
}
}, _callee7, this);
})));
describe('when prefetchedComponents has been supplied', function () {
var prefetchedComponents = {
'key1': "<h1>Key1</h1>",
'key2': "<h1>Key2</h1>",
'key3': "<h1>Key3</h1>"
};
it('getHtml returns the relevant markup based on key',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee8() {
var node, context;
return regeneratorRuntime.wrap(function _callee8$(_context8) {
while (1) {
switch (_context8.prev = _context8.next) {
case 0:
node = document.createElement('div');
_context8.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/",
prefetchedComponents: prefetchedComponents
}, _react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
context = ctx;
})), node);
case 3:
expect(context.getHtml('key2')).toBe("<h1>Key2</h1>");
case 4:
case "end":
return _context8.stop();
}
}
}, _callee8, this);
})));
it('getHtml returns undefined when the provided key is unknown',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee9() {
var node, context;
return regeneratorRuntime.wrap(function _callee9$(_context9) {
while (1) {
switch (_context9.prev = _context9.next) {
case 0:
node = document.createElement('div');
_context9.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/",
prefetchedComponents: prefetchedComponents
}, _react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
context = ctx;
})), node);
case 3:
expect(context.getHtml('keyUnknown')).toBeUndefined();
case 4:
case "end":
return _context9.stop();
}
}
}, _callee9, this);
})));
});
describe('when saveElement is called in componentDidMount', function () {
var elements;
var elementsInContext;
var Dummy =
/*#__PURE__*/
function (_React$Component) {
_inherits(Dummy, _React$Component);
function Dummy(props) {
var _this;
_classCallCheck(this, Dummy);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Dummy).call(this, props));
_this.count = 0;
return _this;
}
_createClass(Dummy, [{
key: "render",
value: function render() {
var _this2 = this;
return _react.default.createElement(_OCContext.OCContext.Consumer, null, function (ctx) {
_this2.ctx = ctx;
elementsInContext = ctx.getElements('myKey');
return "rendered ".concat(++_this2.count, " times");
});
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.ctx.saveElements('myKey', elements);
}
}]);
return Dummy;
}(_react.default.Component);
beforeEach(function () {
elements = [{}];
});
it('should not cause a re-render after saveElement was called',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee10() {
var node;
return regeneratorRuntime.wrap(function _callee10$(_context10) {
while (1) {
switch (_context10.prev = _context10.next) {
case 0:
node = document.createElement('div');
_context10.next = 3;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/"
}, _react.default.createElement(Dummy, null)), node);
case 3:
_context10.next = 5;
return _bluebird.default.delay(5);
case 5:
// give React time to not re-render
expect(node.textContent).toContain('rendered 1 times');
case 6:
case "end":
return _context10.stop();
}
}
}, _callee10, this);
})));
it('the saved element is available by calling getElement when re-rendering',
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee11() {
var node, MyComponent;
return regeneratorRuntime.wrap(function _callee11$(_context11) {
while (1) {
switch (_context11.prev = _context11.next) {
case 0:
node = document.createElement('div');
MyComponent =
/*#__PURE__*/
function (_React$Component2) {
_inherits(MyComponent, _React$Component2);
function MyComponent(props) {
_classCallCheck(this, MyComponent);
return _possibleConstructorReturn(this, _getPrototypeOf(MyComponent).call(this, props));
}
_createClass(MyComponent, [{
key: "render",
value: function render() {
var _this3 = this;
setTimeout(function () {
return _this3.setState({
blah: true
});
}, 3);
return _react.default.createElement(_OpenComponentsContext.OpenComponentsContext, {
baseUrl: "http://localhost/"
}, _react.default.createElement(Dummy, null));
}
}]);
return MyComponent;
}(_react.default.Component);
_context11.next = 4;
return (0, _reactHelpers.renderAsync)(_react.default.createElement(MyComponent, null), node);
case 4:
_context11.next = 6;
return _bluebird.default.delay(5);
case 6:
// give React time to re-render
expect(elementsInContext).toBe(elements);
case 7:
case "end":
return _context11.stop();
}
}
}, _callee11, this);
})));
});
});
//# sourceMappingURL=OpenComponentsContext.test.js.map