hippo-fw 0.9.1

data/spec/client/models/collection.spec.js

@@ -0,0 +1,51 @@
+import { autorun } from 'mobx';
+import { Box } from '../test-models';
+
+describe('Model Collection Test', () => {
+    it('adds items specific for each model', () => {
+        const collection = Box.Collection.create();
+        expect(Box.identifiedBy).toEqual('test/box');
+        collection.push({ width: 3, height: 3, depth: 3 });
+        const box = collection[0];
+        expect(box).toBeInstanceOf(Box);
+        expect(box.volume).toBe(27);
+    });
+
+    it('has custom properties are observable', () => {
+        const collection = Box.Collection.create();
+        const spy = jest.fn();
+        autorun(() => { spy(collection.lastServerMessage); });
+        expect(spy).toHaveBeenCalledTimes(1);
+        collection.lastServerMessage = 'test-2';
+        expect(collection.lastServerMessage).toEqual('test-2');
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy).toHaveBeenLastCalledWith('test-2');
+    });
+
+    it('can fetch', () => {
+        fetch.mockResponseOnce(JSON.stringify({ data: [{ width: 12, height: 12, depth: 10 }] }));
+        Box.Collection.create().fetch().then((collection) => {
+            expect(fetch).lastCalledWith(
+                '/api/test/boxes.json',
+                { headers: { 'Content-Type': 'application/json' } },
+            );
+            expect(collection.length).toEqual(1);
+            expect(collection[0].volume).toBe(1440);
+        });
+    });
+
+    it('can be initialized with models', () => {
+        const collection = Box.Collection.create([{ width: 3, height: 3, depth: 3 }]);
+        expect(collection[0].volume).toBe(27);
+    });
+
+    it('can set default attributes', () => {
+        const collection = Box.Collection.create(
+            [{ width: 3 }],
+            { defaults: { label: 'paper box' } },
+        );
+        expect(collection[0].width).toBe(3); // doesn't overwrite
+        collection.push({ });
+        expect(collection[1].label).toEqual('paper box');
+    });
+});

data/spec/client/models/query.spec.js

@@ -0,0 +1,243 @@
+import Config from 'hippo/config';
+import Sync from 'hippo/models/sync';
+
+import { map, find, range, shuffle } from 'lodash';
+
+import Clause from 'hippo/models/query/clause';
+import Query  from 'hippo/models/query';
+import { Box } from '../test-models';
+
+jest.mock('hippo/models/sync');
+jest.useFakeTimers();
+describe('Model Queries', () => {
+    let query;
+
+    beforeEach(() => {
+        query = new Query({
+            src: Box,
+            fields: [
+                { id: 'id', visible: false, queryable: false },
+                { id: 'computed', title: 'IsAdmin?', loadable: false },
+                { id: 'label' },
+                { id: 'width' },
+                { id: 'height' },
+                { id: 'depth', visible: false },
+            ],
+        });
+    });
+
+    it('autoloads query when changed', () => {
+        query.fetch = jest.fn();
+        query.autoFetch = true;
+        expect(query.fetch).toHaveBeenCalled();
+        query.clauses[0].value = 'test value';
+        jest.runAllTimers();
+        expect(query.fetch).toHaveBeenCalledTimes(2);
+        query.clauses[0].value = 'test two value';
+        jest.runAllTimers();
+        expect(query.fetch).toHaveBeenCalledTimes(3);
+
+        query.autoFetch = false;
+        query.clauses[0].value = 'yet another value';
+        jest.runAllTimers();
+        expect(query.fetch).toHaveBeenCalledTimes(3);
+    });
+
+    it('calculates fields', () => {
+        const q = new Query({ src: Box });
+        expect(q.src).toEqual(Box);
+        expect(q.clauses).toHaveLength(1);
+        const clause = q.clauses[0];
+        expect(clause).toBeInstanceOf(Clause);
+        expect(clause.query).toBe(q);
+    });
+
+    it('calculates min width', () => {
+        expect(query.info.minWidth).toEqual(400);
+    });
+
+    it('has operators that can calculate valid types', () => {
+        let op = find(query.operators, { id: 'like' });
+        expect(op.isValidForField(query.fields[0])).toBe(false);
+        expect(op.isValidForField(query.fields[1])).toBe(true);
+        expect(op.isValidForField(query.fields[2])).toBe(true);
+
+        op = find(query.operators, { id: 'eq' });
+        query.fields.forEach((f) => {
+            expect(op.isValidForField(f)).toBe(true);
+        });
+
+        op = find(query.operators, { id: 'lt' });
+        expect(op.isValidForField(query.fields[0])).toBe(true);
+        expect(op.isValidForField(query.fields[1])).toBe(false);
+        expect(op.isValidForField(query.fields[2])).toBe(false);
+    });
+
+    it('filters available fields and clauses', () => {
+        expect(map(query.info.queryableFields, 'id')).toEqual(
+            ['computed', 'label', 'width', 'height', 'depth'],
+        );
+        const clause = query.clauses[0];
+        expect(clause.field.id).toEqual('computed');
+        expect(clause.operator.id).toEqual('like');
+        expect(map(clause.validOperators, 'id')).toEqual(['like', 'eq']);
+        clause.field = query.fields[3];
+        expect(clause.operator.id).toEqual('eq');
+        expect(map(clause.validOperators, 'id')).toEqual(['eq', 'lt', 'gt']);
+    });
+
+    it('can read visible identifier field', () => {
+        expect(query.info.visibleIdentifierField.id).toEqual('id');
+    });
+
+    it('converts a row to object', () => {
+        const i = 1;
+        query.results.rows.push([i, `${i} l`, 10 + i, 10 + i, 10 + i]);
+        expect(query.results.rowAsObject(0)).toEqual({
+            id: 1,
+            label: '1 l',
+            depth: 11,
+            height: 11,
+            width: 11,
+        });
+    });
+
+    it('converts a row to model', () => {
+        const i = 1;
+        query.results.rows.push([i, `${i} l`, 10 + i, 10 + i, 10 + i]);
+        const box = query.results.modelForRow(0);
+        expect(box).toBeInstanceOf(Box);
+        expect(box.label).toEqual('1 l'); // 'label' isn't serialized; it's a session property
+        expect(box.serialize()).toEqual({
+            id: 1,
+            depth: 11,
+            height: 11,
+            width: 11,
+        });
+    });
+
+    it('calculates dataIndex', () => {
+        expect(query.fields[0].queryable).toBe(false);
+        expect(query.fields[1].queryable).toBe(true);
+        expect(query.fields[0].dataIndex).toEqual(0);
+        expect(query.fields[1].dataIndex).toEqual(null);
+        expect(query.fields[2].dataIndex).toEqual(1);
+        expect(query.fields[3].dataIndex).toEqual(2);
+        expect(query.fields[4].dataIndex).toEqual(3);
+    });
+
+    describe('loading', () => {
+        beforeEach(() => {
+            Sync.perform.mockReturnValue(Promise.resolve({
+                total: 200,
+                data: map(range(0, 20), i => [i, `label ${i}`, 10 + i, 10 + i, 10 + i]),
+            }));
+        });
+        it('sends query', () => {
+            expect(map(query.info.loadableFields, 'id')).toEqual(
+                ['id', 'label', 'width', 'height', 'depth'],
+            );
+            query.clauses[0].value = 'test value';
+            query.results.fetch();
+            expect(Sync.perform).toHaveBeenLastCalledWith(
+                '/api/test/boxes', {
+                    total_count: 't',
+                    fields: ['id', 'label', 'width', 'height', 'depth'],
+                    query:  { computed: { op: 'like', value: 'test value%' } },
+                    format: 'array',
+                    limit:  20,
+                    start:  0,
+                },
+            );
+        });
+
+        it('loads sequentially without arguments', () => {
+            query.clauses[0].value = 'test value';
+            return query.results.fetch().then(() => {
+                expect(query.results.totalCount).toEqual(200);
+                expect(query.results.rows).toHaveLength(20);
+                expect(query.results.rows[0]).toEqual([0, 'label 0', 10, 10, 10]);
+                expect(query.results.rows[1]).toEqual([1, 'label 1', 11, 11, 11]);
+                expect(query.results.rows[18]).toEqual([18, 'label 18', 28, 28, 28]);
+
+                expect(query.results.rows.map(r => r[0])).toEqual(range(0, 20));
+                return query.results;
+            }).then((results) => {
+                Sync.perform.mockReturnValueOnce(Promise.resolve({
+                    total: 200,
+                    data: map(range(20, 40), i => [i, `label ${i}`, 10 + i, 10 + i, 10 + i]),
+                }));
+                return results.fetch().then(() => {
+                    expect(results.rows).toHaveLength(40);
+                    expect(query.results.rows[38]).toEqual([38, 'label 38', 48, 48, 48]);
+                });
+            });
+        });
+        it('can load past previous end', () => {
+            expect(query.results.rows).toHaveLength(0);
+            const promise = query.results.fetch({ start: 10, limit: 20 }).then(() => {
+                expect(query.results.rows).toHaveLength(30);
+                expect(query.results.rows[0]).toEqual([]);
+                expect(query.results.rows[11]).toEqual([1, 'label 1', 11, 11, 11]);
+                expect(query.results.isRowLoading(11)).toBe(false);
+            });
+            expect(query.results.isRowLoading(1)).toBe(false);
+            expect(query.results.isRowLoading(11)).toBe(true);
+            expect(query.results.isRowLoading(20)).toBe(true);
+            expect(query.results.isRowLoading(40)).toBe(false);
+            return promise;
+        });
+        it('replaces previous records', () => {
+            range(0, 50).forEach(i => query.results.rows.push(['blank', i]));
+            expect(query.results.rows).toHaveLength(50);
+            const promise = query.results.fetch({ start: 10, limit: 20 }).then(() => {
+                expect(query.results.rows).toHaveLength(50);
+                expect(query.results.rows[0][0]).toEqual('blank');
+                expect(query.results.rows[11]).toEqual([1, 'label 1', 11, 11, 11]);
+                expect(query.results.rows[15]).toEqual([5, 'label 5', 15, 15, 15]);
+                expect(query.results.rows[29]).toEqual([19, 'label 19', 29, 29, 29]);
+                expect(query.results.isRowLoading(29)).toBe(false);
+                expect(query.results.rows[30]).toEqual(['blank', 30]);
+                expect(query.results.isRowLoading(30)).toBe(false);
+            });
+            expect(query.results.isRowLoading(1)).toBe(false);
+            expect(query.results.isRowLoading(11)).toBe(true);
+            expect(query.results.isRowLoading(30)).toBe(false);
+            return promise;
+        });
+    });
+
+    describe('sorting', () => {
+        beforeEach(() => {
+            query.results.reset();
+            shuffle(range(0, 5)).forEach(
+                i => query.results.rows.push([i, `${i} l`, 10 + i, 10 + i, 10 + i]),
+            );
+        });
+
+        it('sorts in place when fully loaded', () => {
+            query.results.totalCount = 5;
+            expect(query.results.fullyLoaded).toEqual(true);
+            query.setSort({ field: query.fields[0], ascending: true });
+            expect(map(query.results.rows, '0')).toEqual([0, 1, 2, 3, 4]);
+            query.setSort({ field: query.fields[1], ascending: false });
+            expect(map(query.results.rows, '0')).toEqual([0, 1, 2, 3, 4]);
+        });
+
+        it('loads sorted', () => {
+            query.results.totalCount = 15;
+            expect(query.results.fullyLoaded).toEqual(false);
+            query.setSort({ field: query.fields[2], ascending: true });
+            expect(Sync.perform).toHaveBeenLastCalledWith(
+                '/api/test/boxes', {
+                    total_count: 't',
+                    fields: ['id', 'label', 'width', 'height', 'depth'],
+                    order:  { label: 'asc' },
+                    format: 'array',
+                    limit:  20,
+                    start:  0, // will request from start, ignoring the 5 existing records
+                },
+            );
+        });
+    });
+});

data/spec/client/models/sync.spec.js

@@ -0,0 +1,42 @@
+import Sync from 'hippo/models/sync';
+import { Box } from '../test-models';
+
+describe('Network sync', () => {
+    it('makes a request', () => {
+        fetch.mockResponseOnce(JSON.stringify({ access_token: '12345' }));
+        Sync.perform('/foo')
+            .then((json) => {
+                expect(json).toEqual({ access_token: '12345' });
+            });
+        expect(fetch).toHaveBeenCalledWith(
+            '/foo.json',
+            { headers: { 'Content-Type': 'application/json' } },
+        );
+    });
+
+    it('makes request using options', () => {
+        Sync.perform('/foo', { fields: ['test'] });
+        expect(fetch).lastCalledWith('/foo.json?f%5B%5D=test', expect.any(Object));
+        Sync.perform('/foo', { with: 'test' });
+        expect(fetch).lastCalledWith('/foo.json?w=test', expect.any(Object));
+        Sync.perform('/foo', { query: { bar: 'baz' } });
+        expect(fetch).lastCalledWith('/foo.json?q%5Bbar%5D=baz', expect.any(Object));
+    });
+
+    it('sets a models value', () => {
+        fetch.mockResponseOnce(JSON.stringify({ data: { width: 12, height: 12, depth: 10 } }));
+        const box = new Box({ width: 5 });
+        expect(box.width).toEqual(5);
+        Sync.forModel(box, 'GET').then(() => expect(box.width).toEqual(12));
+    });
+
+    it('saves a model', () => {
+        fetch.mockResponseOnce(JSON.stringify({ data: { width: 12, height: 12, depth: 10 } }));
+        const box = new Box({ id: 11, width: 5 });
+        const body = JSON.stringify(box.syncData);
+        Sync.forModel(box).then(() => expect(box.width).toEqual(12));
+        expect(fetch).lastCalledWith(
+            '/api/test/boxes/11.json',
+            { body, headers: { 'Content-Type': 'application/json' }, method: 'PUT' });
+    });
+});

data/spec/client/models/system-setting.spec.js

@@ -0,0 +1,19 @@
+import SystemSettings from 'hippo/models/system-setting';
+import Asset from 'hippo/models/asset';
+
+const TEST_SETTINGS = {
+    id: 1,
+    logo: { file_data: { foo: 'bar' } },
+    settings: { hippo: { smtp: { login: 'test', server: 'test.test.test', password: 'test' } } },
+};
+
+describe('SystemSettings Model', () => {
+    it('has an asset', () => {
+        const ss = new SystemSettings();
+        ss.logo = TEST_SETTINGS.logo;
+        expect(ss.logo).toBeInstanceOf(Asset);
+        expect(ss.logo.file_data.foo).toEqual('bar');
+        ss.logo = { };
+        expect(ss.logo).toBeInstanceOf(Asset);
+    });
+});

data/spec/client/screens/__snapshots__/system-settings.spec.jsx.snap

@@ -0,0 +1,364 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SystemSettings Screen renders 1`] = `
+<div
+  className="screen is-active"
+  data-screen-id="test"
+>
+  <div
+    className="grommetux-header__container grommetux-header__container--fixed grommetux-header__container--fill"
+  >
+    <div
+      className="grommetux-header__mirror"
+    />
+    <div
+      className="grommetux-header__wrapper"
+    >
+      <div
+        className="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-box--flex-off"
+        id={undefined}
+        onClick={undefined}
+        role={undefined}
+        style={Object {}}
+        tabIndex={undefined}
+      >
+        <header
+          className="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--pad-horizontal-none grommetux-box--pad-vertical-none grommetux-box--pad-between-small grommetux-header"
+          id={undefined}
+          onClick={undefined}
+          role={undefined}
+          style={Object {}}
+          tabIndex={undefined}
+        >
+          <button
+            aria-label={undefined}
+            className="grommetux-button grommetux-button--primary"
+            disabled={false}
+            href={undefined}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            type="button"
+          >
+            <span
+              className="grommetux-button__icon"
+            >
+              <svg
+                aria-label="save"
+                className="grommetux-control-icon grommetux-control-icon-save grommetux-control-icon--responsive"
+                height="24px"
+                role="img"
+                version="1.1"
+                viewBox="0 0 24 24"
+                width="24px"
+              >
+                <path
+                  d="M3,2 L3,21 L21,21 L21,3 L12,3 L12,14 M8,11 L12,15 L16,11"
+                  fill="none"
+                  stroke="#000"
+                  strokeWidth="2"
+                />
+              </svg>
+            </span>
+            <span
+              className="grommetux-button__label"
+            >
+              Save
+            </span>
+          </button>
+        </header>
+      </div>
+    </div>
+  </div>
+  <h1
+    className="grommetux-heading"
+  >
+    title
+  </h1>
+  <h3
+    className="grommetux-heading"
+  >
+    Images
+  </h3>
+  <div
+    className="row"
+  >
+    <div
+      className="col-sm-4 col-xs-12"
+    >
+      <div
+        className="asset form-field"
+      >
+        <div
+          className="grommetux-form-field grommetux-form-field--size-medium"
+          onClick={[Function]}
+        >
+          <label
+            className="grommetux-form-field__label"
+            htmlFor={undefined}
+          >
+            Logo
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <div
+              className="drop-zone"
+              onClick={[Function]}
+              onDragEnter={[Function]}
+              onDragLeave={[Function]}
+              onDragOver={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              style={Object {}}
+            >
+              <div>
+                Drop a file here, or click to select one to upload.
+              </div>
+              <input
+                accept={undefined}
+                multiple={false}
+                onChange={[Function]}
+                style={
+                  Object {
+                    "display": "none",
+                  }
+                }
+                type="file"
+              />
+            </div>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      className="col-sm-4 col-xs-12"
+    >
+      <div
+        className="asset form-field"
+      >
+        <div
+          className="grommetux-form-field grommetux-form-field--size-medium"
+          onClick={[Function]}
+        >
+          <label
+            className="grommetux-form-field__label"
+            htmlFor={undefined}
+          >
+            Print Logo
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <div
+              className="drop-zone"
+              onClick={[Function]}
+              onDragEnter={[Function]}
+              onDragLeave={[Function]}
+              onDragOver={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              style={Object {}}
+            >
+              <div>
+                Drop a file here, or click to select one to upload.
+              </div>
+              <input
+                accept={undefined}
+                multiple={false}
+                onChange={[Function]}
+                style={
+                  Object {
+                    "display": "none",
+                  }
+                }
+                type="file"
+              />
+            </div>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="section"
+  >
+    <h3
+      className="grommetux-heading"
+    >
+      Email settings
+    </h3>
+    <div
+      className="section row"
+    >
+      <div
+        className="form-field col-md-4 col-xs-6"
+      >
+        <div
+          className="grommetux-form-field grommetux-form-field--size-medium"
+          onClick={[Function]}
+        >
+          <label
+            className="grommetux-form-field__label"
+            htmlFor={undefined}
+          >
+            User Name
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <input
+              autoComplete="off"
+              autoFocus={undefined}
+              className="grommetux-text-input grommetux-input"
+              defaultValue={undefined}
+              name="user_name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              placeholder={undefined}
+              type="text"
+              value=""
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        className="form-field col-md-4 col-xs-6"
+      >
+        <div
+          className="grommetux-form-field grommetux-form-field--size-medium"
+          onClick={[Function]}
+        >
+          <label
+            className="grommetux-form-field__label"
+            htmlFor={undefined}
+          >
+            Password
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <input
+              autoComplete="off"
+              autoFocus={undefined}
+              className="grommetux-text-input grommetux-input"
+              defaultValue={undefined}
+              name="password"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              placeholder={undefined}
+              type="password"
+              value=""
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        className="form-field col-md-4 col-xs-6"
+      >
+        <div
+          className="grommetux-form-field grommetux-form-field--size-medium"
+          onClick={[Function]}
+        >
+          <label
+            className="grommetux-form-field__label"
+            htmlFor={undefined}
+          >
+            Server Address
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <input
+              autoComplete="off"
+              autoFocus={undefined}
+              className="grommetux-text-input grommetux-input"
+              defaultValue={undefined}
+              name="address"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              placeholder={undefined}
+              type="text"
+              value=""
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        className="form-field col-md-4 col-xs-6"
+      >
+        <div
+          className="grommetux-form-field grommetux-form-field--size-medium"
+          onClick={[Function]}
+        >
+          <label
+            className="grommetux-form-field__label"
+            htmlFor={undefined}
+          >
+            From Email
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <input
+              autoComplete="off"
+              autoFocus={undefined}
+              className="grommetux-text-input grommetux-input"
+              defaultValue={undefined}
+              name="from_email"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              placeholder={undefined}
+              type="text"
+              value=""
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        className="form-field col-md-4 col-xs-6"
+      >
+        <div
+          className="grommetux-form-field grommetux-form-field--size-medium"
+          onClick={[Function]}
+        >
+          <label
+            className="grommetux-form-field__label"
+            htmlFor={undefined}
+          >
+            From Name
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <input
+              autoComplete="off"
+              autoFocus={undefined}
+              className="grommetux-text-input grommetux-input"
+              defaultValue={undefined}
+              name="from_name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              placeholder={undefined}
+              type="text"
+              value=""
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;