UNPKG

@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
'use strict';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(); }); }); }); }); });