hippo-fw 0.9.1 → 0.9.2

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hippo-fw",
-  "version": "0.7.0",
+  "version": "0.9.1",
   "description": "Hippo is a framework for easily writing single page web applications",
   "main": "index.js",
   "repository": "https://github.com/argosity/hippo",
@@ -33,12 +33,11 @@
     "domtastic": "^0.12.3",
     "enzyme": "^2.8.2",
     "eslint": "^3.13.1",
-    "eslint-config-argosity": "1.0.5",
+    "eslint-config-argosity": "^1.1.3",
     "file-loader": "^0.11.1",
     "flexboxgrid": "^6.3.1",
     "grommet": "^1.4.0",
     "history": "3.2.1",
-    "html-webpack-plugin": "^2.28.0",
     "identity-obj-proxy": "^3.0.0",
     "invariant": "^2.2.2",
     "jest": "^19.0.2",
@@ -67,6 +66,7 @@
     "react-router": "^3.0.2",
     "react-sidebar": "^2.3.0",
     "react-test-renderer": "^15.4.2",
+    "react-tippy": "^0.14.0",
     "react-virtualized": "^9.0.0",
     "rsvp": "^3.3.3",
     "sass-loader": "^4.1.1",

data/spec/client/components/__snapshots__/master-detail.spec.jsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Master Detail Component renders and matches snapshot 1`] = `
+<div
+  className="master-detail-wrapper has-detail"
+>
+  <div
+    className="master"
+  >
+    <h1>
+      Hi, i am master
+    </h1>
+  </div>
+  <div
+    className="detail"
+  >
+    <h1>
+      Hi, i am detail
+    </h1>
+  </div>
+</div>
+`;

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

@@ -1,24 +1,23 @@
 import React from 'react';
 import {
-    nonBlank, validEmail, hasLength,
-    FormFields, FormFieldPropType,
+    nonBlank, validEmail, hasLength, validURL, FormState,
 } from 'hippo/components/form';
 
 describe('Form Validation functions', () => {
     it('validates fields', () => {
-        const form = new FormFields({
-            name: hasLength({ length: 3, default: 'onee' }),
-            email: validEmail,
+        const form = new FormState();
+        form.setFields({
+            email: { validate: validEmail },
+            name:  { validate: hasLength({ length: 3 }) },
         });
+        expect(form.get('email.isValid')).toBe(false);
         expect(form.isValid).toBe(false);
         expect(form.isTouched).toBe(false);
 
-        expect(form.get('email').isValid).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 = '';
@@ -47,17 +46,18 @@ describe('Form Validation functions', () => {
         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();
+    it('tests url', () => {
+        let url = validURL();
+        expect(url.test('bad-url')).toBe(false);
+        expect(url.test('')).toBe(false);
+        url = validURL({ allowBlank: true });
+        expect(url.test('')).toBe(true);
     });
 });

data/spec/client/components/master-detail.spec.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Snapshot } from 'hippo/testing/screens';
+import MasterDetail from 'hippo/components/master-detail';
+
+function MasterComp() { return <h1>Hi, i am master</h1>; }
+function DetailComp() { return <h1>Hi, i am detail</h1>; }
+
+describe('Master Detail Component', () => {
+    it('renders and matches snapshot', () => {
+        expect(Snapshot(
+            <MasterDetail
+                master={<MasterComp />}
+                detail={<DetailComp />}
+            />)).toMatchSnapshot();
+    });
+
+    it('renders and then can add detail', () => {
+        const md = shallow(<MasterDetail master={<MasterComp />} />);
+        expect(md).not.toHaveRendered('.has-detail');
+        md.setProps({ detail: <DetailComp /> });
+        expect(md).toHaveRendered('.has-detail');
+    });
+});

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { range } from 'lodash';
 
-
 import Query     from 'hippo/models/query';
 
 import { Snapshot } from 'hippo/testing/screens';
@@ -10,11 +9,15 @@ import RecordFinder from 'hippo/components/record-finder';
 import { Container } from '../test-models';
 
 jest.mock('hippo/models/sync');
+import { FormState, stringValue } from 'hippo/components/form';
 
 describe("RecordFinder Component", () => {
     let query;
     let props;
+    let formState;
+
     beforeEach(() => {
+        formState = new FormState();
         query = new Query({
             src: Container,
             fields: [
@@ -28,7 +31,7 @@ describe("RecordFinder Component", () => {
             onRecordFound: jest.fn(),
             name: 'name',
             recordsTitle: 'Foos',
-            fields: { name: { value: 'ONE', events: {} } },
+            formState,
             query,
         };
         range(0, 5).forEach(

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

@@ -23,7 +23,7 @@ describe('Asset Test', () => {
         const image = TestImage.deserialize({ asset: LogoJson });
         expect(image.asset.isImage).toBe(true);
         expect(image.asset.previewUrl)
-            .toEqual(`/api/asset/${LogoJson.file_data.thumbnail.id}`);
+            .toContain(LogoJson.file_data.thumbnail.id);
         expect(image.asset.owner).toBe(image);
         expect(image.asset.owner_association_name).toBe('asset');
     });
@@ -32,19 +32,8 @@ describe('Asset Test', () => {
         model.asset.file = file;
         expect(model.asset.isDirty).toBe(true);
         model.asset.save();
-        expect(fetch).lastCalledWith('/api/asset', expect.objectContaining({
+        expect(fetch).lastCalledWith(expect.anything(), 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

@@ -29,7 +29,7 @@ describe('BaseModel Test', () => {
         autorun(() => spy(box.syncUrl));
         expect(spy).toHaveBeenCalledWith('/api/test/boxes/11');
         expect(box.id).toEqual(11);
-        expect(box.identifier).toEqual(11);
+        expect(box.identifierFieldValue).toEqual(11);
         expect(box.isNew).toEqual(false);
         expect(box.syncUrl).toEqual('/api/test/boxes/11');
         box.id = 42;
@@ -63,16 +63,6 @@ describe('BaseModel Test', () => {
         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;

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

@@ -1,6 +1,4 @@
-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';
@@ -86,8 +84,8 @@ describe('Model Queries', () => {
         expect(map(clause.validOperators, 'id')).toEqual(['eq', 'lt', 'gt']);
     });
 
-    it('can read visible identifier field', () => {
-        expect(query.info.visibleIdentifierField.id).toEqual('id');
+    it('can read identifier field', () => {
+        expect(query.info.identifierField.id).toEqual('id');
     });
 
     it('converts a row to object', () => {

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

@@ -1,7 +1,14 @@
 import Sync from 'hippo/models/sync';
+import Config from 'hippo/config';
 import { Box } from '../test-models';
 
+jest.unmock('hippo/models/sync');
+
 describe('Network sync', () => {
+    beforeEach(() => {
+        Config.api_host = '';
+    });
+
     it('makes a request', () => {
         fetch.mockResponseOnce(JSON.stringify({ access_token: '12345' }));
         Sync.perform('/foo')

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

@@ -77,6 +77,85 @@ exports[`SystemSettings Screen renders 1`] = `
   >
     title
   </h1>
+  <div
+    className="tenant-edit-form"
+  >
+    <h3
+      className="grommetux-heading"
+    >
+      Account
+    </h3>
+    <div
+      className="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}
+          >
+            Identifier
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <input
+              autoComplete="off"
+              autoFocus={undefined}
+              className="grommetux-text-input grommetux-input"
+              defaultValue={undefined}
+              name="slug"
+              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}
+          >
+            Name
+          </label>
+          <span
+            className="grommetux-form-field__contents"
+          >
+            <input
+              autoComplete="off"
+              autoFocus={undefined}
+              className="grommetux-text-input grommetux-input"
+              defaultValue={undefined}
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              placeholder={undefined}
+              type="text"
+              value=""
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
   <h3
     className="grommetux-heading"
   >

data/spec/client/screens/system-settings-tenants.spec.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import TenantModel from 'hippo/models/tenant';
+import Tenant from 'hippo/screens/system-settings/tenant';
+
+describe('SystemSettings Tenants section', () => {
+    it('displays warning dialog after update slug', (done) => {
+        const t = mount(<Tenant />);
+        expect(t).not.toHaveRendered('TenantSlugChange Layer');
+        TenantModel.current.slug = 'ONE';
+        t.find('input[name="name"]').simulate('change', { target: { value: 'NEW' } });
+        t.instance().onSave();
+        setTimeout(() => {
+            expect(t).toHaveRendered('TenantSlugChange Layer');
+            done();
+        });
+    });
+});

data/spec/client/workspace/__snapshots__/menu.spec.jsx.snap

@@ -28,15 +28,41 @@ exports[`Workspace Menu has groups with screens 1`] = `
       <h4
         className="grommetux-heading grommetux-heading--strong"
       >
-        Group # 0
+        Settings
         <i
-          className="icon icon-grp-0"
+          className="icon icon-wrench"
           onClick={undefined}
           style={undefined}
         />
       </h4>
     </header>
   </div>
+  <a
+    aria-label={undefined}
+    className="grommetux-anchor"
+    href={undefined}
+    onClick={[Function]}
+  >
+    User Management
+    <i
+      className="icon icon-group"
+      onClick={undefined}
+      style={undefined}
+    />
+  </a>
+  <a
+    aria-label={undefined}
+    className="grommetux-anchor"
+    href={undefined}
+    onClick={[Function]}
+  >
+    System Settings
+    <i
+      className="icon icon-cogs"
+      onClick={undefined}
+      style={undefined}
+    />
+  </a>
   <a
     aria-label={undefined}
     className="grommetux-anchor"
@@ -53,7 +79,7 @@ exports[`Workspace Menu has groups with screens 1`] = `
 </nav>
 `;
 
-exports[`Workspace Menu has renders a menu option 1`] = `
+exports[`Workspace Menu has renders menu options 1`] = `
 <a
   aria-label={undefined}
   className="grommetux-anchor"
@@ -68,313 +94,3 @@ exports[`Workspace Menu has renders a menu option 1`] = `
   />
 </a>
 `;
-
-exports[`Workspace Menu renders groups 1`] = `
-<div
-  className="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-box--separator-right grommetux-background-color-index-brand grommetux-background-color-index--pending grommetux-sidebar grommetux-sidebar--full grommetux-sidebar--small"
-  id={undefined}
-  onClick={undefined}
-  role={undefined}
-  style={Object {}}
-  tabIndex={undefined}
->
-  <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--justify-between grommetux-box--align-center grommetux-box--pad-horizontal-medium grommetux-header grommetux-header--large"
-      id={undefined}
-      onClick={undefined}
-      role={undefined}
-      style={Object {}}
-      tabIndex={undefined}
-    >
-      Logo
-    </header>
-  </div>
-  <nav
-    className="grommetux-box grommetux-box--direction-column grommetux-box--justify-between grommetux-box--align-start grommetux-box--responsive grommetux-box--pad-none grommetux-menu grommetux-menu--column grommetux-menu--primary grommetux-menu--inline"
-    id={undefined}
-    onClick={undefined}
-    role={undefined}
-    style={Object {}}
-    tabIndex={undefined}
-  >
-    <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-end grommetux-box--pad-horizontal-medium grommetux-header"
-        id={undefined}
-        onClick={undefined}
-        role={undefined}
-        style={Object {}}
-        tabIndex={undefined}
-      >
-        <h4
-          className="grommetux-heading grommetux-heading--strong"
-        >
-          Group # 0
-          <i
-            className="icon icon-grp-0"
-            onClick={undefined}
-            style={undefined}
-          />
-        </h4>
-      </header>
-    </div>
-    <a
-      aria-label={undefined}
-      className="grommetux-anchor"
-      href={undefined}
-      onClick={[Function]}
-    >
-      test screen for 0
-      <i
-        className="icon icon-unknown"
-        onClick={undefined}
-        style={undefined}
-      />
-    </a>
-  </nav>
-  <nav
-    className="grommetux-box grommetux-box--direction-column grommetux-box--justify-between grommetux-box--align-start grommetux-box--responsive grommetux-box--pad-none grommetux-menu grommetux-menu--column grommetux-menu--primary grommetux-menu--inline"
-    id={undefined}
-    onClick={undefined}
-    role={undefined}
-    style={Object {}}
-    tabIndex={undefined}
-  >
-    <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-end grommetux-box--pad-horizontal-medium grommetux-header"
-        id={undefined}
-        onClick={undefined}
-        role={undefined}
-        style={Object {}}
-        tabIndex={undefined}
-      >
-        <h4
-          className="grommetux-heading grommetux-heading--strong"
-        >
-          Group # 1
-          <i
-            className="icon icon-grp-1"
-            onClick={undefined}
-            style={undefined}
-          />
-        </h4>
-      </header>
-    </div>
-    <a
-      aria-label={undefined}
-      className="grommetux-anchor"
-      href={undefined}
-      onClick={[Function]}
-    >
-      test screen for 1
-      <i
-        className="icon icon-unknown"
-        onClick={undefined}
-        style={undefined}
-      />
-    </a>
-  </nav>
-  <nav
-    className="grommetux-box grommetux-box--direction-column grommetux-box--justify-between grommetux-box--align-start grommetux-box--responsive grommetux-box--pad-none grommetux-menu grommetux-menu--column grommetux-menu--primary grommetux-menu--inline"
-    id={undefined}
-    onClick={undefined}
-    role={undefined}
-    style={Object {}}
-    tabIndex={undefined}
-  >
-    <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-end grommetux-box--pad-horizontal-medium grommetux-header"
-        id={undefined}
-        onClick={undefined}
-        role={undefined}
-        style={Object {}}
-        tabIndex={undefined}
-      >
-        <h4
-          className="grommetux-heading grommetux-heading--strong"
-        >
-          Group # 2
-          <i
-            className="icon icon-grp-2"
-            onClick={undefined}
-            style={undefined}
-          />
-        </h4>
-      </header>
-    </div>
-    <a
-      aria-label={undefined}
-      className="grommetux-anchor"
-      href={undefined}
-      onClick={[Function]}
-    >
-      test screen for 2
-      <i
-        className="icon icon-unknown"
-        onClick={undefined}
-        style={undefined}
-      />
-    </a>
-  </nav>
-  <nav
-    className="grommetux-box grommetux-box--direction-column grommetux-box--justify-between grommetux-box--align-start grommetux-box--responsive grommetux-box--pad-none grommetux-menu grommetux-menu--column grommetux-menu--primary grommetux-menu--inline"
-    id={undefined}
-    onClick={undefined}
-    role={undefined}
-    style={Object {}}
-    tabIndex={undefined}
-  >
-    <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-end grommetux-box--pad-horizontal-medium grommetux-header"
-        id={undefined}
-        onClick={undefined}
-        role={undefined}
-        style={Object {}}
-        tabIndex={undefined}
-      >
-        <h4
-          className="grommetux-heading grommetux-heading--strong"
-        >
-          Group # 3
-          <i
-            className="icon icon-grp-3"
-            onClick={undefined}
-            style={undefined}
-          />
-        </h4>
-      </header>
-    </div>
-    <a
-      aria-label={undefined}
-      className="grommetux-anchor"
-      href={undefined}
-      onClick={[Function]}
-    >
-      test screen for 3
-      <i
-        className="icon icon-unknown"
-        onClick={undefined}
-        style={undefined}
-      />
-    </a>
-  </nav>
-  <nav
-    className="grommetux-box grommetux-box--direction-column grommetux-box--justify-between grommetux-box--align-start grommetux-box--responsive grommetux-box--pad-none grommetux-menu grommetux-menu--column grommetux-menu--primary grommetux-menu--inline"
-    id={undefined}
-    onClick={undefined}
-    role={undefined}
-    style={Object {}}
-    tabIndex={undefined}
-  >
-    <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-end grommetux-box--pad-horizontal-medium grommetux-header"
-        id={undefined}
-        onClick={undefined}
-        role={undefined}
-        style={Object {}}
-        tabIndex={undefined}
-      >
-        <h4
-          className="grommetux-heading grommetux-heading--strong"
-        >
-          Group # 4
-          <i
-            className="icon icon-grp-4"
-            onClick={undefined}
-            style={undefined}
-          />
-        </h4>
-      </header>
-    </div>
-    <a
-      aria-label={undefined}
-      className="grommetux-anchor"
-      href={undefined}
-      onClick={[Function]}
-    >
-      test screen for 4
-      <i
-        className="icon icon-unknown"
-        onClick={undefined}
-        style={undefined}
-      />
-    </a>
-  </nav>
-  <footer
-    className="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--pad-horizontal-medium grommetux-footer grommetux-footer--large"
-    id={undefined}
-    onClick={undefined}
-    role={undefined}
-    style={Object {}}
-    tabIndex={undefined}
-  >
-    <a
-      aria-hidden="true"
-      className="grommetux-skip-link-anchor"
-      id="skip-link-footer"
-      tabIndex="-1"
-    >
-      Footer
-    </a>
-    <a
-      aria-label={undefined}
-      className="grommetux-anchor"
-      href={undefined}
-      onClick={[Function]}
-    >
-      <h3
-        className="grommetux-heading grommetux-heading--strong grommetux-heading--margin-none"
-      >
-        Log Out
-      </h3>
-    </a>
-  </footer>
-</div>
-`;