@girders-elements/core
Version:
Girders Elements is an architectural framework that assists with building data-driven apps with React or React Native.
252 lines (176 loc) • 10.4 kB
JavaScript
;var _jsxFileName='packages/core/src/ui/__tests__/ui.js';
var _enzyme=require('enzyme');
var _react=require('react');var _react2=_interopRequireDefault(_react);
var _immutable=require('immutable');
var _cursor=require('immutable/contrib/cursor');var _cursor2=_interopRequireDefault(_cursor);
var _data=require('../../data');
var _classes=require('../../impl/classes');
var _subsystem=require('../../subsystem');var Subsystem=_interopRequireWildcard(_subsystem);
var _kernel=require('../../kernel');var Kernel=_interopRequireWildcard(_kernel);
var _=require('..');var _2=_interopRequireDefault(_);function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}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 _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;}
var app=Subsystem.create(function(){return{
name:'app'};});
var ui=app.ui;
describe('UI Subsystem',function(){
var kernel=Kernel.create([_2.default,app],{},{});
describe('Element UI registration',function(){
afterEach(function(){
ui.reset();
});
describe('#register',function(){
it("doesn't accept undefined/null components",function(){
expect(function(){return ui.register('component');}).toThrow();
expect(function(){return ui.register('component',null);}).toThrow();
});
it("doesn't accept invalid component definitions",function(){
expect(function(){return ui.register('component','foo');}).toThrow();
expect(function(){return ui.register('component',1);}).toThrow();
expect(function(){return ui.register('component',{});}).toThrow();
expect(function(){return ui.register();}).toThrow();
});
it('expects valid element references',function(){var
Comp=function(_React$Component){_inherits(Comp,_React$Component);function Comp(){_classCallCheck(this,Comp);return _possibleConstructorReturn(this,(Comp.__proto__||Object.getPrototypeOf(Comp)).apply(this,arguments));}return Comp;}(_react2.default.Component);
expect(function(){return ui.register(1,Comp);}).toThrow();
expect(function(){return ui.register(null,Comp);}).toThrow();
expect(function(){return ui.register(false,Comp);}).toThrow();
expect(function(){return ui.register({component:'comp'},Comp);}).toThrow();
expect(function(){return ui.register('component',Comp);}).not.toThrow();
expect(function(){return ui.register(['component','subkind'],Comp);}).not.toThrow();
expect(function(){return(
ui.register(_immutable.List.of('component','subkind'),Comp));}).
not.toThrow();
});
it('accepts react components',function(){var
Comp=function(_React$Component2){_inherits(Comp,_React$Component2);function Comp(){_classCallCheck(this,Comp);return _possibleConstructorReturn(this,(Comp.__proto__||Object.getPrototypeOf(Comp)).apply(this,arguments));}return Comp;}(_react2.default.Component);
expect(function(){return ui.register('component',Comp);}).not.toThrow();
});
it('accepts pure-function components',function(){
function Template(){
return _react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:71}});
}
expect(function(){return ui.register('component',Template);}).not.toThrow();
});
it.skip('returns the registered element UI (not necessarily the same component)',function(){var
Comp=function(_React$Component3){_inherits(Comp,_React$Component3);function Comp(){_classCallCheck(this,Comp);return _possibleConstructorReturn(this,(Comp.__proto__||Object.getPrototypeOf(Comp)).apply(this,arguments));}return Comp;}(_react2.default.Component);
var Klass=ui.register('component',Comp);
expect((0,_classes.isSubclassOf)(Klass,_react2.default.Component)).toBeTruthy();
});
});
});
describe('Element UI Lookup',function(){
ui.register('c1',function(){
return _react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:92}},'Watson');
});
ui.register('c2',function(){
return _react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:95}},'Hudson');
});
ui.register(['c2','specific'],function(){
return _react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:98}},'Mycroft');
});
ui.register('detectives',function(_ref){var uiFor=_ref.uiFor;
return _react2.default.createElement('div',{id:'list',__source:{fileName:_jsxFileName,lineNumber:101}},uiFor('list'));
});
var globalUiFor=kernel.subsystems.ui.uiFor;
describe('ui.uiFor (single element)',function(){
it('Requires a cursor around the element',function(){
expect(function(){return globalUiFor((0,_immutable.fromJS)({kind:'c1'}));}).toThrow();
expect(globalUiFor(_cursor2.default.from((0,_immutable.fromJS)({kind:'c1'})))).toEqual(
expect.anything());
});
it('returns the corresponding element when looked for',function(){
var html=(0,_enzyme.mount)(globalUiFor(_cursor2.default.from((0,_immutable.fromJS)({kind:'c1'}))));
expect(html.find('div')).toMatchElement(_react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:117}},'Watson'));
});
it('looks up for an element by resolving the kind canonically',function(){
var htmlWithSpecificRegistered=(0,_enzyme.mount)(
globalUiFor(_cursor2.default.from((0,_immutable.fromJS)({kind:['c2','specific']}))));
var htmlWithSpecificUnregistered=(0,_enzyme.mount)(
globalUiFor(_cursor2.default.from((0,_immutable.fromJS)({kind:['c1','specific']}))));
expect(htmlWithSpecificRegistered).toContainReact(_react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:135}},'Mycroft'));
expect(htmlWithSpecificRegistered).not.toContainReact(_react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:136}},'Hudson'));
expect(htmlWithSpecificUnregistered).toContainReact(_react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:137}},'Watson'));
});
});
describe('ui.uiFor (multiple elements)',function(){
it('returns a list of elements, filtering empty (not found)',function(){
var html=(0,_enzyme.mount)(
globalUiFor(
_cursor2.default.from(
(0,_immutable.fromJS)({
kind:'detectives',
list:[
{
kind:'c1'},
{
kind:'c2'},
{
kind:'not-registered'}]}))));
expect(html).toContainReact(_react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:164}},'Watson'));
expect(html).toContainReact(_react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:165}},'Hudson'));
expect(html.find('#list')).toBePresent();
});
});
describe('element#uiFor',function(){
ui.register('root',function(){return _react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:171}},'Root mounted');});
ui.register('comp1',function(){return _react2.default.createElement('div',{className:'c1',__source:{fileName:_jsxFileName,lineNumber:172}},'Comp1 mounted');});
ui.register('comp2',function(){return _react2.default.createElement('div',{className:'c2',__source:{fileName:_jsxFileName,lineNumber:173}},'Comp2 mounted');});
function implFor(el){
var impl=null;
ui.register((0,_data.kindOf)(el),function(_ref2){var uiFor=_ref2.uiFor;
impl=uiFor;
return _react2.default.createElement('div',{__source:{fileName:_jsxFileName,lineNumber:180}});
});
(0,_enzyme.mount)(kernel.subsystems.ui.uiFor(el));
return impl;
}
describe('using a key path (string or array)',function(){
var state=_cursor2.default.from(
(0,_immutable.fromJS)({
kind:'root',
child1:{
kind:'comp1',
items:[
{
kind:'comp2',
child:{
kind:'comp2'}},
{
kind:'comp2'},
{
kind:'comp3'}]},
notAnElement:{
title:'foo'}}));
var uiFor=implFor(state);
it('renders the ui for the element under the specified sub-key path',function(){
expect((0,_enzyme.mount)(uiFor('child1'))).toContainReact(
_react2.default.createElement('div',{className:'c1',__source:{fileName:_jsxFileName,lineNumber:218}},'Comp1 mounted'));
});
it('renders the ui for the elements under the specified sub-key-path, if said key path is an array',function(){
expect((0,_enzyme.mount)(uiFor(['child1','items',0,'child']))).toContainReact(
_react2.default.createElement('div',{className:'c2',__source:{fileName:_jsxFileName,lineNumber:223}},'Comp2 mounted'));
});
it('returns undefined if there is no ui registered for the elemnent under the key path',function(){
expect(uiFor('nonExistingChild')==null).toBe(true);
expect(uiFor(['child1','items',100])==null).toBe(true);
});
it('returns a list of UI if under there is a List of elements under the specified key path',function(){
var ui=uiFor(['child1','items']);
expect(_immutable.Iterable.isIndexed(ui)).toEqual(true);
expect((0,_enzyme.mount)(ui.get(0))).toContainReact(
_react2.default.createElement('div',{className:'c2',__source:{fileName:_jsxFileName,lineNumber:234}},'Comp2 mounted'));
expect((0,_enzyme.mount)(ui.get(1))).toContainReact(
_react2.default.createElement('div',{className:'c2',__source:{fileName:_jsxFileName,lineNumber:237}},'Comp2 mounted'));
});
it('returns a list of UI elements only for those elements that have a registered UI',function(){
var ui=uiFor(['child1','items']);
for(var _iterator=ui,_isArray=Array.isArray(_iterator),_i=0,_iterator=_isArray?_iterator:_iterator[typeof Symbol==='function'?Symbol.iterator:'@@iterator']();;){var _ref3;if(_isArray){if(_i>=_iterator.length)break;_ref3=_iterator[_i++];}else{_i=_iterator.next();if(_i.done)break;_ref3=_i.value;}var u=_ref3;
expect((0,_data.isOfKind)(['comp3'],u.props.element)).toEqual(false);
}
});
it('throws and error if the data structure under the specified path is not an element',function(){
expect(function(){return uiFor('notAnElement');}).toThrow();
});
});
});
});
});