hippo-fw 0.9.1

data/spec/client/components/asset.spec.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Col } from 'react-flexbox-grid';
+import Asset from 'hippo/components/asset';
+
+import { TestImage } from '../test-models';
+import { Snapshot } from 'hippo/testing/screens';
+
+describe("Asset Component", () => {
+    it('renders and matches snapshot', () => {
+        const image = new TestImage();
+        const asset = mount(<Asset model={image} name="asset" />);
+        expect(asset).toHaveRendered('Dropzone');
+        expect(Snapshot(<Asset model={image} name="asset" />)).toMatchSnapshot();
+    });
+});

data/spec/client/components/data-list.spec.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { range } from 'lodash';
+
+import Query     from 'hippo/models/query';
+
+import DataList from 'hippo/components/data-list';
+
+import { Container } from '../test-models';
+import { Snapshot } from 'hippo/testing/screens';
+
+jest.mock('hippo/models/sync');
+
+describe("DataList Component", () => {
+    let query;
+
+    beforeEach(() => {
+        query = new Query({
+            src: Container,
+            fields: [
+                { id: 'id', visible: false, queryable: false },
+                { id: 'computed', title: 'White?', loadable: false },
+                { id: 'name' },
+                { id: 'location' },
+            ],
+        });
+        range(0, 5).forEach(
+            i => query.results.rows.push([i, `name ${i}`, `location ${i}`]),
+        );
+    });
+
+    it('renders', () => {
+        const Row = ({ row }) => <div data-id={row[0]}>{row[1]}</div>;
+        const list = mount(<DataList query={query} rowComponent={Row} />);
+        expect(list).toHaveRendered('List');
+    });
+});

data/spec/client/components/data-table.spec.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { first, map, find, range } from 'lodash';
+import { autorun } from 'mobx';
+import Sync from 'hippo/models/sync';
+import Query     from 'hippo/models/query';
+
+import DataTable from 'hippo/components/data-table';
+
+import { Container } from '../test-models';
+
+jest.mock('hippo/models/sync');
+
+describe("DataTable Component", () => {
+    let query;
+
+    beforeEach(() => {
+        query = new Query({
+            src: Container,
+            fields: [
+                { id: 'id', visible: false, queryable: false },
+                { id: 'computed', title: 'White?', loadable: false },
+                { id: 'name' },
+                { id: 'location' },
+            ],
+        });
+        range(0, 5).forEach(
+            i => query.results.rows.push([i, `name ${i}`, `location ${i}`]),
+        );
+    });
+
+    it('can be edited', () => {
+        const Editor = () => <h3 data-id="test">Hello - I am Editor</h3>;
+        Element.prototype.getBoundingClientRect = jest.fn(() => ({
+            width: 800, height: 1024,
+        }));
+        const onEditSpy = jest.fn();
+        const table = mount(
+            <DataTable onEdit={onEditSpy} query={query} editor={Editor} />,
+        );
+        expect(table).toHaveRendered('Grid');
+        // console.log(table.debug())
+        // table.find('CaretNext').at(3).simulate('click');
+        // expect(onEditSpy).toHaveBeenCalledWith(3);
+        // table.setProps({ editRowIndex: 1 });
+        // expect(table).toHaveRendered('h3[data-id="test"]');
+    });
+
+    xit('can sort', () => {
+        const table = mount(<DataTable query={query} editable />);
+        const spy = jest.fn();
+        autorun(() => spy(query.sortField));
+        table.find('SortingHeaderCell').first().simulate('click');
+        expect(spy).toHaveBeenLastCalledWith(query.info.visibleFields[0]);
+    });
+});

data/spec/client/components/form.spec.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+    nonBlank, validEmail, hasLength,
+    FormFields, FormFieldPropType,
+} from 'hippo/components/form';
+
+describe('Form Validation functions', () => {
+    it('validates fields', () => {
+        const form = new FormFields({
+            name: hasLength({ length: 3, default: 'onee' }),
+            email: validEmail,
+        });
+        expect(form.isValid).toBe(false);
+        expect(form.isTouched).toBe(false);
+
+        expect(form.get('email').isValid).toBe(false);
+        form.get('email').value = 'test@test.com';
+        expect(form.get('email').isValid).toBe(true);
+
+        expect(form.isValid).toBe(true);
+
+        form.fields.get('email').isTouched = true;
+        expect(form.isTouched).toBe(true);
+        form.fields.get('name').value = '';
+        form.fields.get('name').onBlur();
+        expect(form.isValid).toBe(false);
+
+        form.fields.get('name').onChange({ target: { value: 'a value' } });
+        expect(form.isValid).toBe(true);
+    });
+
+    it('builds tests using blank', () => {
+        const test = nonBlank();
+        expect(test.message).toEqual('is required');
+        expect(test.test(undefined)).toBe(false);
+        expect(test.test('')).toBe(false);
+        expect(test.test('')).toBe(false);
+        expect(test.test(null)).toBe(false);
+        expect(test.test('a')).toBe(true);
+    });
+
+    it('builds tests using email', () => {
+        const test = validEmail({ message: 'YO FIX IT' });
+        expect(test.message).toContain('YO');
+        expect(test.test('a')).toBe(false);
+        expect(test.test('test')).toBe(false);
+        expect(test.test('@test.com')).toBe(false);
+        expect(test.test('test@test.com')).toBe(true);
+    });
+    it('tests hasLength', () => {
+        const len = hasLength(3);
+        expect(len.test('a')).toBe(false);
+        expect(len.test('abc')).toBe(true);
+    });
+
+    it('validates prop types', () => {
+        const form = new FormFields({ name: nonBlank });
+        const validator = FormFieldPropType;
+        expect(validator({ name: 'name' })).toBeInstanceOf(Error);
+        expect(validator({ name: 'no-field', form })).toBeInstanceOf(Error);
+        expect(validator({ name: 'name', form })).toBeNull();
+    });
+});

data/spec/client/components/network-activity-overlay.spec.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import NetworkActivityOverlay from 'hippo/components/network-activity-overlay';
+import { Box } from '../test-models';
+import { Snapshot } from 'hippo/testing/screens';
+
+jest.useFakeTimers();
+
+describe('Network Activity Overlay', () => {
+    let model;
+    beforeEach(() => {
+        model = new Box();
+    });
+
+    it('renders', () => {
+        const activity = mount(<NetworkActivityOverlay model={model} />);
+        expect(activity).not.toHaveRendered('.mask');
+        model.syncInProgress = { method: 'PUT' };
+        expect(activity).toHaveRendered('.mask');
+        expect(activity.find('span').text()).toEqual('Saving…');
+        jest.runAllTimers();
+        expect(activity).not.toHaveRendered('.mask');
+    });
+
+    it('matches snapshot', () => {
+        model.syncInProgress = { method: 'DELETE' };
+        jest.runAllTimers();
+        expect(Snapshot(<NetworkActivityOverlay model={model} />)).toMatchSnapshot();
+    });
+});

data/spec/client/components/query-builder.spec.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import QueryBuilder from 'hippo/components/query-builder';
+
+import { Box } from '../test-models';
+import { Snapshot } from 'hippo/testing/screens';
+import Query from 'hippo/models/query';
+
+jest.useFakeTimers();
+
+describe("Query Builder Component", () => {
+
+    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('renders and matches snapshot', () => {
+        expect(Snapshot(<QueryBuilder query={query} />)).toMatchSnapshot();
+    });
+
+    it('autoloads query when changed', () => {
+        query.fetch = jest.fn();
+        expect(query.autoFetch).toBe(false);
+        const builder = mount(<QueryBuilder query={query} autoFetch />);
+        expect(query.autoFetch).toBe(true);
+        expect(query.fetch).toHaveBeenCalled();
+        query.clauses[0].value = 'test';
+        jest.runAllTimers();
+        expect(query.fetch).toHaveBeenCalledTimes(2);
+        builder.unmount();
+        expect(query.autoFetch).toBe(false);
+    });
+});

data/spec/client/components/record-finder.spec.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { range } from 'lodash';
+
+
+import Query     from 'hippo/models/query';
+
+import { Snapshot } from 'hippo/testing/screens';
+import RecordFinder from 'hippo/components/record-finder';
+
+import { Container } from '../test-models';
+
+jest.mock('hippo/models/sync');
+
+describe("RecordFinder Component", () => {
+    let query;
+    let props;
+    beforeEach(() => {
+        query = new Query({
+            src: Container,
+            fields: [
+                { id: 'id', visible: false, queryable: false },
+                { id: 'computed', title: 'White?', loadable: false },
+                { id: 'name' },
+                { id: 'location' },
+            ],
+        });
+        props = {
+            onRecordFound: jest.fn(),
+            name: 'name',
+            recordsTitle: 'Foos',
+            fields: { name: { value: 'ONE', events: {} } },
+            query,
+        };
+        range(0, 5).forEach(
+            i => query.results.rows.push([i, `name ${i}`, `location ${i}`]),
+        );
+    });
+
+    it('renders', () => {
+        const finder = mount(
+            <RecordFinder {...props} />,
+        );
+        expect(finder).toHaveRendered('TextInput');
+    });
+});

data/spec/client/extension/base.spec.js

@@ -0,0 +1,15 @@
+import { BaseExtension } from 'hippo/extensions/base';
+import { observable } from 'mobx';
+
+class TestExtension extends BaseExtension {
+
+    @observable identifier = 'foo-bar-baz';
+
+}
+
+describe('Base Extension', () => {
+    it('computes the title', () => {
+        const ext = new TestExtension();
+        expect(ext.title).toEqual('Foo Bar Baz');
+    });
+});

data/spec/client/lib/util.spec.js

@@ -0,0 +1,48 @@
+import * as Util from 'hippo/lib/util';
+
+describe('Util helper functions', () => {
+    it('dasherize', () => {
+        expect(Util.dasherize('bar baz bing')).toEqual('bar-baz-bing');
+    });
+
+    it('titleize', () => {
+        expect(Util.titleize('bar baz bing')).toEqual('Bar Baz Bing');
+    });
+
+    it('underscored', () => {
+        expect(Util.underscored('bar baz bing')).toEqual('bar_baz_bing');
+    });
+
+    it('toSentence', () => {
+        expect(Util.toSentence(['bar', 'baz', 'bing'])).toEqual('bar, baz and bing');
+    });
+
+    it('classify', () => {
+        expect(Util.classify('bar baz bing')).toEqual('BarBazBing');
+        expect(Util.classify('bar/baz-bing')).toEqual('Bar::BazBing');
+    });
+
+    it('isBlank', () => {
+        expect(Util.isBlank(new Date('notdate'))).toBe(true);
+        expect(Util.isBlank(new Date())).toBe(false);
+        expect(Util.isBlank(-1 / 'r')).toBe(true);
+        expect(Util.isBlank(/foo/)).toBe(false);
+        expect(Util.isBlank(Util.isBlank)).toBe(false);
+        expect(Util.isBlank(true)).toBe(false);
+        expect(Util.isBlank(false)).toBe(false);
+        expect(Util.isBlank(0)).toBe(true);
+        expect(Util.isBlank(100)).toBe(false);
+        expect(Util.isBlank({ a: 1 })).toBe(false);
+        expect(Util.isBlank({})).toBe(true);
+        expect(Util.isBlank('')).toBe(true);
+        expect(Util.isBlank('test')).toBe(false);
+        expect(Util.isBlank(undefined)).toBe(true);
+        expect(Util.isBlank(null)).toBe(true);
+    });
+
+    it('renames properties', () => {
+        expect(
+            Util.renameProperties({ a: 1, b: 2, c: 3 }, { a: 'z', b: 'y' }),
+        ).toEqual({ z: 1, y: 2, c: 3 });
+    });
+});

data/spec/client/models/asset.spec.js

@@ -0,0 +1,50 @@
+import Asset from 'hippo/models/asset';
+import LogoJson from '../test-logo.json';
+
+import { TestImage } from '../test-models';
+
+describe('Asset Test', () => {
+    let model;
+    let file;
+
+    beforeEach(() => {
+        model = new TestImage();
+        model.asset = new Asset({ owner: model });
+        file = new File([''], 'test-image.png', {
+            lastModified: 1449505890000,
+            lastModifiedDate: new Date(1449505890000),
+            name: 'ecp-logo.png',
+            size: 44320,
+            type: 'image/png',
+        });
+    });
+
+    it('can use json', () => {
+        const image = TestImage.deserialize({ asset: LogoJson });
+        expect(image.asset.isImage).toBe(true);
+        expect(image.asset.previewUrl)
+            .toEqual(`/api/asset/${LogoJson.file_data.thumbnail.id}`);
+        expect(image.asset.owner).toBe(image);
+        expect(image.asset.owner_association_name).toBe('asset');
+    });
+
+    it('can be saved', () => {
+        model.asset.file = file;
+        expect(model.asset.isDirty).toBe(true);
+        model.asset.save();
+        expect(fetch).lastCalledWith('/api/asset', expect.objectContaining({
+            body: expect.any(FormData),
+        }));
+    });
+
+    it('attempts to save after owner does', () => {
+        model.asset.save = jest.fn();
+        expect(model.asset.isDirty).toBe(false);
+        model.save();
+        expect(model.asset.save).not.toHaveBeenCalled();
+        model.asset.file = file;
+        expect(model.asset.isDirty).toBe(true);
+        model.save();
+        expect(model.asset.save).toHaveBeenCalled();
+    });
+});

data/spec/client/models/base.spec.js

@@ -0,0 +1,95 @@
+import { autorun, observe } from 'mobx';
+import { Ship, Container, Box } from '../test-models';
+
+describe('BaseModel Test', () => {
+    it('translates assignments to a hasMany field into reset()', () => {
+        const container = new Container();
+        const originalBoxes = container.boxes;
+        container.boxes = [
+            { width: 42 },
+        ];
+        expect(container.boxes).toBe(originalBoxes);
+    });
+
+    it('translates assignments of a belongsTo', () => {
+        const boat = new Ship({ name: 'BOATY', container: { name: 'box-1' } });
+        expect(boat.container).toBeInstanceOf(Container);
+        expect(boat.container.name).toEqual('box-1');
+        expect(boat.container.vessel).toBe(boat);
+        boat.container = { name: 'Ceci n’est pas une récipient' };
+        expect(boat.container).toBeInstanceOf(Container);
+        expect(boat.container.name).toEqual('Ceci n’est pas une récipient');
+        expect(boat.container.vessel).toBe(boat);
+        boat.container = null;
+    });
+
+    it('computes the syncUrl', () => {
+        const box = new Box({ id: 11, width: 5 });
+        const spy = jest.fn();
+        autorun(() => spy(box.syncUrl));
+        expect(spy).toHaveBeenCalledWith('/api/test/boxes/11');
+        expect(box.id).toEqual(11);
+        expect(box.identifier).toEqual(11);
+        expect(box.isNew).toEqual(false);
+        expect(box.syncUrl).toEqual('/api/test/boxes/11');
+        box.id = 42;
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy).toHaveBeenCalledWith('/api/test/boxes/42');
+        expect(box.syncUrl).toEqual('/api/test/boxes/42');
+    });
+
+    it('is set from sync', () => {
+        const box = new Box({ id: 11, width: 5 });
+        expect(box.syncData).toEqual({ id: 11, height: 1, depth: 1, width: 5 });
+        const spy = jest.fn();
+        observe(box, 'syncData', spy);
+        box.syncData = { id: 2 };
+        expect(spy).toHaveBeenCalled();
+    });
+
+    it('sets isNew depending on primary Key', () => {
+        const box = new Box();
+        expect(box.identifier).toEqual(undefined);
+        expect(box.isNew).toBe(true);
+        box.id = 42;
+        expect(box.id).toEqual(42);
+        expect(box.isNew).toBe(false);
+    });
+
+    it('rejects unsettable', () => {
+        const box = new Box({ bad: 1 });
+        expect(box.bad).toBeUndefined();
+        box.update({ bad: 22 });
+        expect(box.bad).toBeUndefined();
+    });
+
+    it('re-fetches record', () => {
+        const box = new Box({ id: 1 });
+        expect(box.isNew).toBe(false);
+        box.fetch();
+        expect(fetch).lastCalledWith(
+            '/api/test/boxes/1.json?l=1&q%5Bid%5D=1',
+            { headers: { 'Content-Type': 'application/json' }, method: 'GET' },
+        );
+    });
+
+    it('validates and records "type" in schema', () => {
+        const box = new Box();
+        box.id = 23;
+        expect(Box.propertyOptions.id.type).toEqual('number');
+        expect(() => (box.id = 'red')).toThrow('Bad Type');
+        expect(box.id).toEqual(23);
+
+        const container = new Container();
+        container.id = 'test';
+        expect(() => (container.id = 42)).toThrow('Bad Type');
+        expect(container.id).toEqual('test');
+    });
+
+    it('generates an error message from errors', () => {
+        const box = new Box();
+        expect(box.errorMessage).toEqual('');
+        box.errors = { foo: 'cannot be blank', baz: 'is very invalid' };
+        expect(box.errorMessage).toEqual('Foo cannot be blank and Baz is very invalid');
+    });
+});