hippo-fw 0.9.1

data/spec/client/screens/__snapshots__/tabs.spec.jsx.snap

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Workspace Navbar renders a tab 1`] = `
+<li
+  className="grommetux-tab"
+  id={undefined}
+>
+  <button
+    aria-expanded={undefined}
+    aria-label={undefined}
+    aria-selected={undefined}
+    className="grommetux-button grommetux-button--plain grommetux-tab__button"
+    disabled={false}
+    href={undefined}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    role="tab"
+    type="button"
+  >
+    <label
+      className="grommetux-tab__label"
+      htmlFor={undefined}
+    >
+      title
+    </label>
+  </button>
+</li>
+`;
+
+exports[`Workspace Navbar renders and adds/removes tabs 1`] = `
+<div
+  role="tablist"
+>
+  <ul
+    className="grommetux-tabs grommetux-tabs--justify-start grommetux-tabs--responsive"
+  >
+    <li
+      className="grommetux-tab"
+      id={undefined}
+    >
+      <button
+        aria-expanded={undefined}
+        aria-label={undefined}
+        aria-selected={undefined}
+        className="grommetux-button grommetux-button--plain grommetux-tab__button"
+        disabled={false}
+        href={undefined}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="tab"
+        type="button"
+      >
+        <label
+          className="grommetux-tab__label"
+          htmlFor={undefined}
+        >
+          title
+        </label>
+      </button>
+    </li>
+    <li
+      className="grommetux-tab"
+      id={undefined}
+    >
+      <button
+        aria-expanded={undefined}
+        aria-label={undefined}
+        aria-selected={undefined}
+        className="grommetux-button grommetux-button--plain grommetux-tab__button"
+        disabled={false}
+        href={undefined}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="tab"
+        type="button"
+      >
+        <label
+          className="grommetux-tab__label"
+          htmlFor={undefined}
+        >
+          title
+        </label>
+      </button>
+    </li>
+    <li
+      className="grommetux-tab"
+      id={undefined}
+    >
+      <button
+        aria-expanded={undefined}
+        aria-label={undefined}
+        aria-selected={undefined}
+        className="grommetux-button grommetux-button--plain grommetux-tab__button"
+        disabled={false}
+        href={undefined}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="tab"
+        type="button"
+      >
+        <label
+          className="grommetux-tab__label"
+          htmlFor={undefined}
+        >
+          title
+        </label>
+      </button>
+    </li>
+  </ul>
+  <div
+    aria-label="Tab Contents"
+    role="tabpanel"
+  />
+</div>
+`;

data/spec/client/screens/definition.spec.js

@@ -0,0 +1,24 @@
+import { Box, TestExtension, getTestScreen } from '../test-models';
+
+jest.mock('hippo/lib/request-assets');
+
+jest.useFakeTimers();
+
+describe('Screen Definition', () => {
+    let screen;
+
+    beforeEach(() => {
+        screen = getTestScreen();
+    });
+
+    it('computes the title', () => { expect(screen.title).toBe('title'); });
+
+    it('gets model', () => {
+        expect(screen.model).toEqual('test/box');
+        expect(screen.model_type).toBe(Box);
+    });
+
+    it('gets extension_definition', () => {
+        expect(screen.extension).toBeInstanceOf(TestExtension);
+    });
+});

data/spec/client/screens/group.spec.js

@@ -0,0 +1,33 @@
+import ScreensGroup from 'hippo/screens/group';
+import { autorun } from 'mobx';
+import { getTestScreen } from '../test-models';
+
+jest.mock('hippo/lib/request-assets');
+
+
+describe('Screens Group', () => {
+    afterEach(() => {
+        ScreensGroup.all.clear();
+    });
+
+    it('can be registered', () => {
+        const spy = jest.fn();
+        ScreensGroup.all.clear();
+        autorun(() => { spy(ScreensGroup.all.length); });
+        const group = ScreensGroup.register({ id: 'test' });
+        expect(ScreensGroup.all).toHaveLength(1);
+        expect(ScreensGroup.all[0]).toEqual(group);
+        expect(spy).toHaveBeenCalledTimes(2);
+    });
+
+    it('has observable screens', () => {
+        const group = new ScreensGroup({ id: 'test' });
+        expect(group.screens).toHaveLength(0);
+        const spy = jest.fn();
+        autorun(() => { spy(group.screens.length); });
+        group.screens.push(getTestScreen());
+        group.screens.push(getTestScreen());
+        expect(group.screens).toHaveLength(2);
+        expect(spy).toHaveBeenCalledTimes(3);
+    });
+});

data/spec/client/screens/instance.spec.js

@@ -0,0 +1,61 @@
+import Instance from 'hippo/screens/instance';
+import ScreenDefinition from 'hippo/screens/definition';
+
+import { Box, getTestScreen } from '../test-models';
+
+jest.mock('hippo/lib/request-assets');
+
+describe('Screen Instance', () => {
+    let screen;
+    let instance;
+
+    beforeEach(() => {
+        screen = getTestScreen();
+        instance = new Instance({ definition: screen });
+    });
+
+    afterEach(() => {
+        instance.remove();
+        instance = null;
+    });
+
+    it('gets definition', () => {
+        expect(instance.definition).toBeInstanceOf(ScreenDefinition);
+        expect(instance.definition === screen).toBe(true);
+    });
+
+    it('sets as displaying on create', () => {
+        expect(Instance.displaying).toHaveLength(1);
+        expect(Instance.displaying[0]).toEqual(instance);
+    });
+
+    it('calculates the title', () => {
+        instance.model = new Box({ visibleIdentifier: 'BOX1' });
+        expect(instance.title).toEqual('title::BOX1');
+    });
+
+    it('calculates history url', () => {
+        instance.model = new Box({ visibleIdentifier: 'BOX42' });
+        expect(instance.historyUrl).toEqual({ pathname: `/${instance.id}/test/BOX42` });
+    });
+
+    it('toggles active', () => {
+        instance.id = '1';
+        expect(instance.isActive).toEqual(true);
+        const instance2 = new Instance({ id: '2', definition: screen, isActive: true });
+        expect(instance2.isActive).toEqual(true);
+        expect(instance.isActive).toEqual(false);
+
+        const instance3 = new Instance({ id: '3', definition: screen, isActive: false });
+        expect(instance3.isActive).toEqual(false);
+        expect(instance2.isActive).toEqual(true);
+        expect(instance.isActive).toEqual(false);
+
+        instance3.remove();
+        expect(instance2.isActive).toEqual(true);
+        expect(instance.isActive).toEqual(false);
+
+        instance2.remove();
+        expect(instance.isActive).toEqual(true);
+    });
+});

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Snapshot } from 'hippo/testing/screens';
+
+import Settings from 'hippo/screens/system-settings';
+import Instance from 'hippo/screens/instance';
+import { getTestScreen } from '../test-models';
+
+
+describe('SystemSettings Screen', () => {
+    let definition;
+    let instance;
+
+    beforeEach(() => {
+        definition = getTestScreen();
+        instance = new Instance({ definition, isActive: true });
+    });
+
+    it('renders', () => {
+        expect(Snapshot(<Settings screen={instance} />)).toMatchSnapshot();
+    });
+});

data/spec/client/screens/tabs.spec.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { each, range } from 'lodash';
+
+import Tabs, { ScreenTab } from 'hippo/workspace/tabs';
+import Instance    from 'hippo/screens/instance';
+
+import { getTestScreen } from '../test-models';
+import { Context, Snapshot } from 'hippo/testing/screens';
+
+const addTab = () =>
+    new Instance({ definition: getTestScreen() });
+
+describe('Workspace Navbar', () => {
+    beforeEach(() => {
+        each(range(0, 3), addTab);
+    });
+
+    it('renders and adds/removes tabs', () => {
+        const options = new Context();
+        const tabs = shallow(<Tabs />, options);
+        expect(tabs.find('ScreenTab').length).toEqual(3);
+        addTab();
+        expect(tabs.find('ScreenTab').length).toEqual(4);
+        Instance.displaying[2].remove();
+        expect(tabs.find('ScreenTab').length).toEqual(3);
+        expect(Snapshot(<Tabs />)).toMatchSnapshot();
+    });
+
+    it('renders a tab', () => {
+        const options = new Context();
+        const screen = Instance.displaying[2];
+        const tab = shallow(<ScreenTab screen={screen} />, options);
+        expect(tab).toHaveRendered(`Tab[title="${screen.title}"]`);
+        expect(Snapshot(<ScreenTab screen={Instance.displaying[2]} />)).toMatchSnapshot();
+    });
+});

data/spec/client/screens/user-management.spec.jsx

@@ -0,0 +1,48 @@
+import UserScreen from 'hippo/screens/user-management';
+import Instance  from 'hippo/screens/instance';
+import { map, range } from 'lodash';
+import Sync from 'hippo/models/sync';
+
+import { getTestScreen } from '../test-models';
+
+jest.mock('hippo/models/sync');
+
+describe('User Management Screen', () => {
+    let definition;
+    let instance;
+    let screen;
+
+    beforeEach(() => {
+        definition = getTestScreen();
+        instance = new Instance({ definition, isActive: true });
+        Sync.setResponseData({
+            total: 5,
+            success: true,
+            data: map(range(0, 5), i =>
+                [i, `login-${i}`, `name ${i}`, `email-${i}@test.com`],
+            ),
+        });
+        Element.prototype.getBoundingClientRect = jest.fn(() => ({
+            width: 800, height: 1024,
+        }));
+        screen = mount(<UserScreen screen={instance} />);
+        return new Promise(resolve => setTimeout(resolve, 3));
+    });
+
+    xit('renders rows', () => {
+        expect(screen.find('.ReactVirtualized__Table__row')).toHaveLength(5);
+    });
+
+    xit('can edit users', () => {
+        screen.find('.ReactVirtualized__Table__row').first().find('Button').simulate('click');
+        expect(screen).toHaveRendered('EditForm');
+        expect(screen).toHaveRendered('input[name="login"][value="login-0"]');
+        screen.find('input[name="login"][value="login-0"]').simulate(
+            'change', { target: { value: 'bob' } },
+        );
+        screen.find('button.grommetux-button--primary').simulate('click');
+        expect(Sync.forModel).lastCalledWith(expect.objectContaining({
+            login: 'bob',
+        }), expect.any(Object));
+    });
+});

data/spec/client/setup.js

@@ -0,0 +1,12 @@
+// Code included here will be ran to setup your specs.
+// it's a usefull spot to setup globals or custom matchers
+require('hippo/testing');
+const matchers = require('hippo/testing/matchers');
+const { shallow, mount } = require('enzyme');
+
+global.expect.extend(matchers);
+
+global.shallow = shallow;
+global.mount   = mount;
+global.fetch   = require('hippo/testing/mocks/fetch');
+global.React   = require('react');

data/spec/client/test-logo.json

@@ -0,0 +1,41 @@
+{
+    "id": 119,
+    "owner_type": "Hippo::SystemSettings",
+    "owner_id": 1,
+    "order": null,
+    "file_data": {
+        "medium": {
+            "id": "1lzc/4hnw/ewi4/c9f79fadcdafa664472fca1cabe0a157.png",
+            "storage": "store",
+            "metadata": {
+                "size": 4752,
+                "width": 204,
+                "height": 36,
+                "filename": "shrine20170224-28463-1ar7l4m20170224-28463-1widnrj20170224-28463-1bmd8sh.png",
+                "mime_type": "image/png"
+            }
+        },
+        "original": {
+            "id": "kyng/0f46/io5b/bf6a2d733d06754918ebb0fd7febeac9.png",
+            "storage": "store",
+            "metadata": {
+                "size": 4752,
+                "width": 204,
+                "height": 36,
+                "filename": "shrine20170224-28463-1ar7l4m20170224-28463-1widnrj.png",
+                "mime_type": "image/png"
+            }
+        },
+        "thumbnail": {
+            "id": "nd1j/qkps/hbac/09a7ce5d6fc108183f7d3e9d5b9b9ae8.png",
+            "storage": "store",
+            "metadata": {
+                "size": 4752,
+                "width": 204,
+                "height": 36,
+                "filename": "shrine20170224-28463-1ar7l4m20170224-28463-1widnrj20170224-28463-1bmd8sh20170224-28463-7nl4mb.png",
+                "mime_type": "image/png"
+            }
+        }
+    }
+}

data/spec/client/test-models.js

@@ -0,0 +1,94 @@
+import { merge } from 'lodash';
+import {
+    BaseModel,
+    identifiedBy,
+    observable,
+    field, session, belongsTo, hasMany, identifier, computed,
+} from 'hippo/models/base';
+import { BaseExtension } from 'hippo/extensions/base';
+import ScreenDefinition from 'hippo/screens/definition';
+
+@identifiedBy('test/boat')
+export class Ship extends BaseModel {
+    @identifier({ type: 'string' }) name;
+
+    @belongsTo({ model: 'test/container', inverseOf: 'vessel' }) container;
+}
+
+
+@identifiedBy('test/model/image')
+export class TestImage extends BaseModel {
+    @identifier id;
+    @belongsTo({ inverseOf: 'owner', model: 'hippo/asset' }) asset;
+    @observable syncInProgress = false;
+
+    save() {
+        this.syncInProgress = { method: 'POST' };
+    }
+}
+
+
+@identifiedBy('test/box')
+export class Box extends BaseModel {
+
+    @session visibleIdentifier;
+
+    @session({ type: 'string' }) label;
+
+    @identifier id;
+
+    @field({ type: 'number' }) width  = 1;
+    @field height = 1;
+    @field depth  = 1;
+
+    @computed get volume() {
+        return this.width * this.height * this.depth;
+    }
+
+    @belongsTo container;
+}
+
+@identifiedBy('test/container')
+export class Container extends BaseModel {
+
+    @identifier({ type: 'string' }) id;
+
+    @field name;
+    @field location;
+    @session currentValue;
+
+    @computed get description() {
+        return `${this.name} ${this.location}`;
+    }
+
+    @hasMany({ model: 'test/box', inverseOf: 'container' }) boxes;
+
+    @belongsTo vessel;
+    @belongsTo({ model: 'boat' }) watercraft;
+
+    @computed get areaInUse() {
+        return this.boxes.reduce((acc, box) => (acc + box.volume), 0);
+    }
+}
+
+export function getTestScreen(attrs = {}) {
+    return ScreenDefinition.register(merge({
+        id: 'test',
+        title: 'title',
+        icon: 'red',
+        component: {},
+        model: 'test/box',
+        view:  'view_class',
+        assets: ['test.js', 'test.css'],
+        access: 'test/box',
+        group_id: 'group_id',
+        extension_id: 'test',
+        url_prefix: 'test',
+        description: 'description',
+    }, attrs));
+}
+
+export class TestExtension extends BaseExtension {
+    get id() { return 'test'; }
+}
+TestExtension.register();