hippo-fw 0.9.1

data/spec/client/user.spec.js

@@ -0,0 +1,19 @@
+import { UserModel } from 'hippo/user';
+import Config from 'hippo/config';
+
+jest.mock('hippo/models/sync');
+jest.mock('hippo/config');
+
+describe('User Model', () => {
+    it('can log in and out', () => {
+        const user = new UserModel();
+        Config.access_token = '';
+        expect(user.isLoggedIn).toBe(false);
+        Config.access_token = '93280890';
+        expect(user.isLoggedIn).toBe(true);
+        user.logout().then(() => {
+            expect(Config.access_token).toEqual('');
+            expect(user.isLoggedIn).toBe(false);
+        });
+    });
+});

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

@@ -0,0 +1,380 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Workspace Menu has groups with screens 1`] = `
+<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]}
+  >
+    title
+    <i
+      className="icon icon-red"
+      onClick={undefined}
+      style={undefined}
+    />
+  </a>
+</nav>
+`;
+
+exports[`Workspace Menu has renders a menu option 1`] = `
+<a
+  aria-label={undefined}
+  className="grommetux-anchor"
+  href={undefined}
+  onClick={[Function]}
+>
+  title
+  <i
+    className="icon icon-red"
+    onClick={undefined}
+    style={undefined}
+  />
+</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>
+`;

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

@@ -0,0 +1,52 @@
+import { each, range } from 'lodash';
+
+import Group      from 'hippo/screens/group';
+import Screen     from 'hippo/screens/definition';
+import Menu       from 'hippo/workspace/menu';
+import MenuGroup  from 'hippo/workspace/menu-group';
+import MenuOption from 'hippo/workspace/menu-option';
+
+import { Snapshot } from 'hippo/testing/screens';
+import { getTestScreen } from '../test-models';
+
+describe('Workspace Menu', () => {
+    beforeEach(() => {
+        Group.enabled_group_ids = [];
+        each(range(0, 5), (i) => {
+            const gid = `group-${i}`;
+            Group.enabled_group_ids.push(gid);
+            Group.register({ id: gid, title: `Group # ${i}`, icon: `grp-${i}` });
+            Screen.register({
+                group_id: gid, icon: 'unknown', id: `screen-${i}`, title: `test screen for ${i}`
+            });
+        });
+    });
+
+    it('renders with a logout button', () => {
+        const menu = shallow(<Menu />);
+        expect(menu).toHaveRendered('Logout');
+    });
+
+    fit('renders groups', () => {
+        const menu = shallow(<Menu />);
+        expect(menu.find('Group').length).toEqual(5);
+        expect(Snapshot(<Menu />)).toMatchSnapshot();
+    });
+
+    it('has groups with screens', () => {
+        const group = shallow(<MenuGroup group={Group.all[0]} />);
+        expect(group).not.toHaveRendered('MenuOption');
+
+        getTestScreen({ id: 'new', group_id: Group.all[0].id });
+        expect(group).toHaveRendered('MenuOption');
+        expect(Snapshot(<MenuGroup group={Group.all[0]} />)).toMatchSnapshot();
+    });
+
+    it('has renders a menu option', () => {
+        const screen = getTestScreen();
+        const option = shallow(<MenuOption screen={screen} />);
+        expect(option).toHaveRendered(`Anchor[path="/${screen.id}/"]`);
+        expect(option).toHaveRendered(`Icon[type="${screen.icon}"]`);
+        expect(Snapshot(<MenuOption screen={screen} />)).toMatchSnapshot();
+    });
+});