pageflow-react 0.1.0

data/js/spec/resolvers/object_resolver_spec.js

@@ -0,0 +1,165 @@
+import ObjectResolver from 'resolvers/object_resolver';
+import Resolver from 'resolvers/resolver';
+
+import sinon from 'sinon';
+
+describe('ObjectResolver', () => {
+  class FakeResolver extends Resolver {
+    constructor(callback) {
+      super(callback);
+      this.dispose = sinon.spy();
+    }
+
+    get(props, seed) {
+      return `resolved value ${props.other} with ${seed}`;
+    }
+
+    triggerCallback() {
+      this._handleChange();
+    }
+  }
+
+  context('with flat fragment', () => {
+    it('it copies scalar values', () => {
+      var objectResolver = new ObjectResolver({});
+
+      var result = objectResolver.get({key: 123});
+
+      expect(result.key).to.eq(123)
+    });
+
+    it('resolves to null if null is passed as props', () => {
+      var objectResolver = new ObjectResolver({
+        key: (callback) => {
+          return new FakeResolver(callback);
+        }
+      });
+
+      var result = objectResolver.get(null);
+
+      expect(result).to.eq(null)
+    });
+
+    it('uses resolver in fragment to resolve value for key', () => {
+      var objectResolver = new ObjectResolver({
+        key: (callback) => {
+          return new FakeResolver(callback);
+        }
+      });
+
+      var result = objectResolver.get({other: 123}, 'SEED');
+
+      expect(result.key).to.eq('resolved value 123 with SEED');
+    });
+
+    it('invokes callback when some resolver signals a change', () => {
+      var callback = sinon.spy();
+      var resolver;
+      var objectResolver = new ObjectResolver({
+        key: (callback) => {
+          resolver = new FakeResolver(callback);
+          return resolver;
+        }
+      }, callback);
+
+      objectResolver.get({});
+      resolver.triggerCallback();
+
+      expect(callback).to.have.been.called;
+    });
+  });
+
+  context('with nested fragment', () => {
+    it('recreates structure with copied scalars ', () => {
+      var objectResolver = new ObjectResolver();
+
+      var result = objectResolver.get({
+        some: {
+          nested: {
+            key: 'hello'
+          }
+        }
+      });
+
+      expect(result.some.nested.key).to.eq('hello');
+    });
+
+    it('uses resolver in fragment to resolve nested key', () => {
+      var objectResolver = new ObjectResolver({
+        nested: {
+          key: (callback) => {
+            return new FakeResolver(callback);
+          }
+        }
+      });
+
+      var result = objectResolver.get({nested: {other: 123}}, 'SEED');
+
+      expect(result.nested.key).to.eq('resolved value 123 with SEED');
+    });
+
+    it('keeps null event if resolver in nested fragment is present', () => {
+      var objectResolver = new ObjectResolver({
+        nested: {
+          key: (callback) => {
+            return new FakeResolver(callback);
+          }
+        }
+      });
+
+      var result = objectResolver.get({nested: null}, 'SEED');
+
+      expect(result.nested).to.eq(null);
+    });
+
+    it('invokes callback when resolver of nested key signals a change', () => {
+      var callback = sinon.spy();
+      var resolver;
+      var objectResolver = new ObjectResolver({
+        nested: {
+          key: (callback) => {
+            resolver = new FakeResolver(callback);
+            return resolver;
+          }
+        }
+      }, callback);
+
+      objectResolver.get({nested: {}});
+      resolver.triggerCallback();
+
+      expect(callback).to.have.been.called;
+    });
+  });
+
+  it('passes dispose to resolver created from fragment', () => {
+    var resolver;
+    var objectResolver = new ObjectResolver({
+      key: (callback) => {
+        resolver = new FakeResolver(callback);
+        return resolver;
+      }
+    });
+
+    objectResolver.get({});
+    objectResolver.dispose();
+
+    expect(resolver.dispose).to.have.been.called;
+  });
+
+  it('passes dispose to nested resolver', () => {
+    var resolver;
+    var objectResolver = new ObjectResolver({
+      nested: {
+        key: (callback) => {
+          resolver = new FakeResolver(callback);
+          return resolver;
+        }
+      }
+    });
+
+    objectResolver.get({nested: {}});
+    objectResolver.dispose();
+
+    expect(resolver.dispose).to.have.been.called;
+  });
+});

data/js/spec/resolvers/page_type_resolver_spec.js

@@ -0,0 +1,23 @@
+import PageTypeResolver from 'resolvers/page_type_resolver';
+
+describe('PageTypeResolver', () => {
+  it('uses page type seed data', () => {
+    var seed = {page_types: {
+      audio_page: {some: 'data'}
+    }};
+    var pageTypeResolver = new PageTypeResolver();
+
+    var result = pageTypeResolver.get({type: 'audio_page'}, seed);
+
+    expect(result.some).to.eq('data');
+  });
+
+  it('sets name property to page type name', () => {
+    var seed = {page_types: {}};
+    var pageTypeResolver = new PageTypeResolver();
+
+    var result = pageTypeResolver.get({type: 'audio_page'}, seed);
+
+    expect(result.name).to.eq('audio_page');
+  });
+});

data/js/spec/resolvers/seed_resolver_spec.js

@@ -0,0 +1,128 @@
+import SeedResolver from 'resolvers/seed_resolver';
+
+describe('SeedResolver', () => {
+  it('gets props from seed data referenced by id', () => {
+    var seed = {pages: [{id: 1, title: 'Some title'}]};
+    var modelResolver = new SeedResolver({
+      seedProperty: 'pages',
+      attributesForProps: ['title'],
+      property: 'modelId'
+    });
+
+    var result = modelResolver.get({modelId: 1}, seed);
+
+    expect(result).to.deep.eq({title: 'Some title'})
+  });
+
+  it('can map attribute names', () => {
+    var seed = {pages: [{id: 1, template: 'video'}]};
+    var modelResolver = new SeedResolver({
+      seedProperty: 'pages',
+      attributesForProps: [['type', 'template']],
+      property: 'modelId'
+    });
+
+    var result = modelResolver.get({modelId: 1}, seed);
+
+    expect(result).to.deep.eq({type: 'video'})
+  });
+
+  it('camelizes attribute names', () => {
+    var seed = {pages: [{id: 1, background_image_id: 1}]};
+    var modelResolver = new SeedResolver({
+      seedProperty: 'pages',
+      attributesForProps: ['background_image_id'],
+      property: 'modelId'
+    });
+
+    var result = modelResolver.get({modelId: 1}, seed);
+
+    expect(result).to.deep.eq({backgroundImageId: 1})
+  });
+
+  it('gets null if property is missing', () => {
+    var modelResolver = new SeedResolver({
+      seedProperty: 'pages',
+      attributesForProps: ['title'],
+      property: 'modelId'
+    });
+
+    var result = modelResolver.get({}, {});
+
+    expect(result).to.eq(null)
+  });
+
+  it('gets null if seed is missing', () => {
+    var modelResolver = new SeedResolver({
+      seedProperty: 'pages',
+      attributesForProps: ['title'],
+      property: 'modelId'
+    });
+
+    var result = modelResolver.get({modelId: 1}, {});
+
+    expect(result).to.eq(null)
+  });
+
+  it('can use custom id attribute', () => {
+    var seed = {pages: [{perma_id: 1, title: 'Some title'}]};
+    var modelResolver = new SeedResolver({
+      seedProperty: 'pages',
+      attributesForProps: ['title'],
+      idAttribute: 'perma_id',
+      property: 'modelPermaId'
+    });
+
+    var result = modelResolver.get({modelPermaId: 1}, seed);
+
+    expect(result).to.deep.eq({title: 'Some title'})
+  });
+
+  context('with includeConfiguration option', () => {
+    it('includes attributes from a nested configuration object', () => {
+      var seed = {
+        pages: [
+          {id: 1, title: 'Some title', configuration: {setting: true}}
+        ]
+      };
+      var modelResolver = new SeedResolver({
+        seedProperty: 'pages',
+        attributesForProps: ['title'],
+        includeConfiguration: true,
+        property: 'modelId'
+      });
+
+      var result = modelResolver.get({modelId: 1}, seed);
+
+      expect(result).to.deep.eq({title: 'Some title', setting: true})
+    });
+
+    it('deeply camelizes configuration attribute names', () => {
+      var seed = {
+        pages: [
+          {
+            id: 1,
+            title: 'Some title',
+            configuration: {
+              page_links: [
+                {
+                  image_id: 1
+                }
+              ]
+            }
+          }
+        ]
+      };
+      var modelResolver = new SeedResolver({
+        seedProperty: 'pages',
+        attributesForProps: ['title'],
+        includeConfiguration: true,
+        property: 'modelId'
+      });
+
+      var result = modelResolver.get({modelId: 1}, seed);
+
+      expect(result).to.deep.eq({title: 'Some title', pageLinks: [{imageId: 1}]})
+    });
+  });
+});

data/js/spec/stub_spec.js

@@ -0,0 +1,16 @@
+//import PageHeader from 'components/page-header.jsx';
+//import React from 'react/addons';
+//
+//const {renderIntoDocument} = React.addons.TestUtils
+//
+//describe('stub', () => {
+//  it('passes', () => {
+//    expect(PageHeader).to.be.a('function');
+//  });
+//
+//  it('renders', () => {
+//    var result = React.renderToStaticMarkup(<PageHeader text="Hello" />);
+//
+//    expect(result).to.eq('<h1>Hello</h1>'); y
+//  });
+//});

data/js/spec/support/render_component.js

@@ -0,0 +1,7 @@
+import TestUtils from 'react-addons-test-utils';
+
+export default function(component, props, ...children) {
+  const shallowRenderer = TestUtils.createRenderer();
+  shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
+  return shallowRenderer.getRenderOutput();
+};

data/js/src/components/background_image.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import classNames from 'classnames';
+
+/**
+ * Display an element with a background image.
+ */
+export default class BackgroundImage extends React.Component {
+  static propTypes = {
+    /** The id of the image file to display */
+    imageFileId: React.PropTypes.number,
+
+    /** Background position */
+    position: React.PropTypes.arrayOf(React.PropTypes.number),
+
+    /** Additional CSS classes. */
+    className: React.PropTypes.string,
+
+    /** Used to lazy load images. */
+    loaded: React.PropTypes.bool
+  }
+
+  static defaultProps = {
+    position: [50, 50]
+  }
+
+  render() {
+    return (
+      <div className={this.cssClass()} style={this.style()}>
+      </div>
+    );
+  }
+
+  cssClass() {
+    return classNames(
+      this.props.className,
+      this.props.loaded ? 'load_image' : null,
+      this.imageCssClass()
+    );
+  }
+
+  imageCssClass() {
+    return ['image', this.props.imageFileId || 'none'].join('_');
+  }
+
+  style() {
+    return {
+      backgroundPosition: `${this.positionCoordinate(0)}% ${this.positionCoordinate(1)}%`
+    };
+  }
+
+  positionCoordinate(index) {
+    var coordinate = this.props.position[index];
+
+    if (typeof coordinate === 'undefined') {
+      return 50;
+    }
+
+    return coordinate;
+  }
+};

data/js/src/components/lazy_background_image.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import createPageComponent from '../create_page_component.jsx';
+
+import BackgroundImage from './background_image.jsx';
+
+class LazyBackgroundImage extends React.Component {
+  static contextTypes = {
+    pageIsPreloaded: React.PropTypes.bool
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <BackgroundImage {...this.props} loaded={this.context.pageIsPreloaded} />
+    );
+  }
+};
+
+export default createPageComponent(LazyBackgroundImage);

data/js/src/components/lazy_loaded_page_thumbnail.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import createPageComponent from '../create_page_component.jsx';
+
+import PageThumbnail from './page_thumbnail.jsx';
+
+class LazyLoadedPageThumbnail extends React.Component {
+  static contextTypes = {
+    pageIsPreloaded: React.PropTypes.bool
+  }
+
+  render() {
+    return (
+      <PageThumbnail {...this.props} lazy={true} loaded={this.context.pageIsPreloaded} />
+    );
+  }
+};
+
+export default createPageComponent(LazyLoadedPageThumbnail);