@roderickhsiao/react-i13n
Version:
[Experiment] React I13n provides a performant and scalable solution to application instrumentation.
267 lines (222 loc) • 10.1 kB
JavaScript
;
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@testing-library/react");
var _createI13nNode = _interopRequireDefault(require("../createI13nNode"));
var _I13nContext = _interopRequireDefault(require("../../components/core/I13nContext"));
var _setupI13n = _interopRequireDefault(require("../setupI13n"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* Copyright 2020, Yahoo! Inc.
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
*/
/* All the functionalities are tested with this higher order component */
var eventsQueue = [];
var mockData = {
options: {},
plugins: [{
name: 'test',
eventHandlers: {
created: function created() {
eventsQueue.push({
action: 'create'
});
},
click: function click(payload) {
var i13nNode = payload.i13nNode;
eventsQueue.push({
action: 'click',
label: i13nNode.getText(),
model: i13nNode.getMergedModel()
});
}
}
}]
};
var wrappedByI13nRoot = function wrappedByI13nRoot(ui, options, plugins) {
if (options === void 0) {
options = mockData.options;
}
if (plugins === void 0) {
plugins = mockData.plugins;
}
var RootApp = (0, _setupI13n["default"])(function (_ref) {
var children = _ref.children;
return children;
}, options, plugins);
return /*#__PURE__*/_react["default"].createElement(RootApp, null, ui);
};
describe('createI13nNode', function () {
beforeEach(function () {
// http://fb.me/react-polyfills
global.requestAnimationFrame = function (callback) {
setTimeout(callback, 0);
};
window.innerHeight = 100;
});
afterEach(function () {
eventsQueue = [];
});
it('should generate a component with createI13nNode', function (done) {
var TestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _useContext = (0, _react.useContext)(_I13nContext["default"]),
i13nNode = _useContext.i13nNode;
expect(i13nNode.getModel()).toEqual({
sec: 'foo'
});
done();
return /*#__PURE__*/_react["default"].createElement("div", {
ref: ref
});
});
TestComponent.displayName = 'TestComponent'; // check the initial state is correct after render
var I13nTestComponent = (0, _createI13nNode["default"])(TestComponent);
expect(I13nTestComponent.displayName).toEqual('I13nTestComponent');
(0, _react2.render)(wrappedByI13nRoot( /*#__PURE__*/_react["default"].createElement(I13nTestComponent, {
i13nModel: {
sec: 'foo'
}
})));
});
it('should generate a component with createI13nNode and custome name', function () {
var TestComponent = function TestComponent(props, ref) {
return /*#__PURE__*/_react["default"].createElement("div", {
ref: ref
});
};
TestComponent.displayName = 'TestComponent'; // check the initial state is correct after render
var I13nTestComponent = (0, _createI13nNode["default"])( /*#__PURE__*/(0, _react.forwardRef)(TestComponent), {}, {
displayName: 'CustomeName'
});
expect(I13nTestComponent.displayName).toEqual('CustomeName');
}); // hoistNonReactStatics
it('should generate a component with createI13nNode with statics', function (done) {
var TestComponent = function TestComponent(props, ref) {
return /*#__PURE__*/_react["default"].createElement("div", {
ref: ref
});
};
TestComponent.displayName = 'TestComponent';
TestComponent.foo = 'bar'; // check the initial state is correct after render
var I13nTestComponent = (0, _createI13nNode["default"])(TestComponent);
expect(I13nTestComponent.foo).toEqual('bar');
done();
});
it("should handle the case if reactI13n doesn't inititalized", function () {
var TestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
return /*#__PURE__*/_react["default"].createElement("div", {
ref: ref
});
});
TestComponent.displayName = 'TestComponent';
var I13nTestComponent = (0, _createI13nNode["default"])(TestComponent); // rendered without provider
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(I13nTestComponent, null)),
container = _render.container;
expect(container).toBeDefined();
});
it('should handle the case of unmount', function () {
var rootI13nNode = null;
var TestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _useContext2 = (0, _react.useContext)(_I13nContext["default"]),
parentI13nNode = _useContext2.parentI13nNode; // only one layer, parent is root for this case
rootI13nNode = parentI13nNode;
return /*#__PURE__*/_react["default"].createElement("div", {
ref: ref
});
});
TestComponent.displayName = 'TestComponent';
var I13nTestComponent = (0, _createI13nNode["default"])(TestComponent);
var _render2 = (0, _react2.render)(wrappedByI13nRoot( /*#__PURE__*/_react["default"].createElement(I13nTestComponent, null))),
unmount = _render2.unmount;
expect(typeof rootI13nNode.getChildrenNodes()[0]).toEqual('object');
unmount(); // unmount should remove the child from root
expect(rootI13nNode.getChildrenNodes()[0]).toEqual(undefined);
});
it('should be able to bind click handler', function () {
var TestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
return /*#__PURE__*/_react["default"].createElement("div", {
"data-testid": "node",
ref: ref
});
});
TestComponent.displayName = 'TestComponent'; // check the initial state is correct after render
var I13nTestComponent = (0, _createI13nNode["default"])(TestComponent);
var _render3 = (0, _react2.render)(wrappedByI13nRoot( /*#__PURE__*/_react["default"].createElement(I13nTestComponent, {
bindClickEvent: true
}))),
container = _render3.container,
getByTestId = _render3.getByTestId;
expect(container).toBeDefined();
_react2.fireEvent.click(getByTestId('node'));
expect(eventsQueue.some(function (_ref2) {
var action = _ref2.action;
return action === 'click';
})).toEqual(true);
});
it('should handle scan the links inside if autoScanLinks is enable', function () {
var TestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
return /*#__PURE__*/_react["default"].createElement("div", {
"data-testid": "node",
ref: ref
}, /*#__PURE__*/_react["default"].createElement("a", {
"data-testid": "anchor",
href: "/foo"
}, "foo"), /*#__PURE__*/_react["default"].createElement("button", {
"data-testid": "button"
}, "bar"));
});
TestComponent.displayName = 'TestComponent';
var I13nTestComponent = (0, _createI13nNode["default"])(TestComponent);
var _render4 = (0, _react2.render)(wrappedByI13nRoot( /*#__PURE__*/_react["default"].createElement(I13nTestComponent, {
scanLinks: {
enable: true
}
}))),
getByTestId = _render4.getByTestId;
var anchor = getByTestId('anchor');
var button = getByTestId('button');
_react2.fireEvent.click(anchor);
expect(eventsQueue.some(function (_ref3) {
var label = _ref3.label;
return label === 'foo';
})).toEqual(true);
_react2.fireEvent.click(button);
expect(eventsQueue.some(function (_ref4) {
var label = _ref4.label;
return label === 'bar';
})).toEqual(true);
});
it('should update the i13n model when component updates', function () {
var i13nModel = {
sec: 'foo'
};
var TestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _useContext3 = (0, _react.useContext)(_I13nContext["default"]),
i13nNode = _useContext3.i13nNode;
expect(i13nNode.getModel()).toEqual(i13nModel);
return /*#__PURE__*/_react["default"].createElement("div", {
ref: ref
});
});
TestComponent.displayName = 'TestComponent'; // check the initial state is correct after render
var I13nTestComponent = (0, _createI13nNode["default"])(TestComponent);
var _render5 = (0, _react2.render)(wrappedByI13nRoot( /*#__PURE__*/_react["default"].createElement(I13nTestComponent, {
i13nModel: i13nModel
}))),
rerender = _render5.rerender;
i13nModel.sec = 'bar';
rerender(wrappedByI13nRoot( /*#__PURE__*/_react["default"].createElement(I13nTestComponent, {
i13nModel: i13nModel
})));
});
it('should not cause error if we pass a undefined to createI13nNode', function (done) {
console.warn = function (msg) {
expect(msg).toEqual('You are passing a null component into createI13nNode');
done();
};
console.trace = jest.fn();
var I13nTestComponent = (0, _createI13nNode["default"])(undefined);
expect(I13nTestComponent).toEqual(null);
});
});