lerna: split up bulk of packages

packages/roleypoly-ui/components/role/__test__/Role.test.js

@@ -0,0 +1,78 @@
+/* eslint-env jest */
+
+import * as React from 'react'
+// import renderer from 'react-test-renderer'
+import { shallow } from 'enzyme'
+import Role from '../index'
+import 'jest-styled-components'
+
+describe('<Role />', () => {
+  it('renders correctly', () => {
+    const role = shallow(<Role role={{ name: 'Test Role', color: '#ffffff' }} />)
+    expect(role).toMatchSnapshot()
+  })
+
+  it('triggers onToggle with new state', () => {
+    let changed = false
+    const role = shallow(
+      <Role
+        role={{ name: 'Test Role', color: '#ffffff' }}
+        onToggle={(next) => { changed = next }}
+        active={false}
+      />
+    )
+    role.simulate('click')
+    expect(changed).toBe(true)
+
+    const role2 = shallow(
+      <Role
+        role={{ name: 'Test Role', color: '#ffffff' }}
+        onToggle={(next) => { changed = next }}
+        active
+      />
+    )
+    role2.simulate('click')
+    expect(changed).toBe(false)
+  })
+
+  it('fixes colors when they are not set', () => {
+    const role = shallow(<Role role={{ name: 'Test Role', color: 0 }} />)
+    expect(role.props().style['--role-color-base']).toEqual('hsl(0, 0%, 93.7%)')
+  })
+
+  it('has a single space for a name when empty', () => {
+    const role = shallow(<Role role={{ name: '', color: '#ffffff' }} />)
+    expect(role.text()).toEqual(' ')
+  })
+
+  describe('when disabled,', () => {
+    it('handles touch hover events', () => {
+      const role = shallow(<Role role={{ name: 'unsafe role', color: '#ffffff' }} disabled />)
+
+      role.simulate('touchstart')
+      expect(role.state().hovering).toEqual(true)
+      expect(role).toMatchSnapshot() // expecting tooltip
+      expect(role.exists('tooltip')).toEqual(true)
+
+      role.simulate('touchend')
+      expect(role.state().hovering).toEqual(false)
+    })
+
+    it('does not trigger onToggle on click', () => {
+      let changed = false
+      const role = shallow(
+        <Role
+          role={{ name: 'Test Role', color: '#ffffff' }}
+          onToggle={() => { changed = true }}
+          active={changed}
+          disabled
+        />
+      )
+      expect(role).toMatchSnapshot()
+      role.simulate('click')
+
+      expect(role.html()).toBe(role.html())
+      expect(changed).toBe(false)
+    })
+  })
+})

packages/roleypoly-ui/components/role/__test__/__snapshots__/Role.test.js.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Role /> renders correctly 1`] = `
+<rolestyled
+  onClick={[Function]}
+  onTouchEnd={null}
+  onTouchStart={null}
+  style={
+    Object {
+      "--role-color-active": "hsl(0, 0%, 100%)",
+      "--role-color-base": "hsl(0, 0%, 100%)",
+      "--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
+      "--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
+    }
+  }
+  title={null}
+>
+  Test Role
+</rolestyled>
+`;
+
+exports[`<Role /> when disabled, does not trigger onToggle on click 1`] = `
+<rolestyled
+  active={false}
+  disabled={true}
+  onClick={null}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    Object {
+      "--role-color-active": "hsl(0, 0%, 100%)",
+      "--role-color-base": "hsl(0, 0%, 100%)",
+      "--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
+      "--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
+    }
+  }
+  title="This role has unsafe permissions."
+>
+  Test Role
+</rolestyled>
+`;
+
+exports[`<Role /> when disabled, handles touch hover events 1`] = `
+<rolestyled
+  disabled={true}
+  onClick={null}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    Object {
+      "--role-color-active": "hsl(0, 0%, 100%)",
+      "--role-color-base": "hsl(0, 0%, 100%)",
+      "--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
+      "--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
+    }
+  }
+  title="This role has unsafe permissions."
+>
+  unsafe role
+  <tooltip>
+    This role has unsafe permissions.
+  </tooltip>
+</rolestyled>
+`;

packages/roleypoly-ui/components/role/__test__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoleDemo /> renders 1`] = `
+<Role
+  active={false}
+  onToggle={[Function]}
+  role={
+    Object {
+      "color": "#ffffff",
+      "name": "test demo role",
+    }
+  }
+/>
+`;

packages/roleypoly-ui/components/role/__test__/demo.test.js

@@ -0,0 +1,19 @@
+/* eslint-env jest */
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import RoleDemo from '../demo'
+import 'jest-styled-components'
+
+describe('<RoleDemo />', () => {
+  it('renders', () => {
+    const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
+    expect(demo).toMatchSnapshot()
+  })
+
+  it('changes state when clicked', () => {
+    const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
+    expect(demo.state().active).toEqual(false)
+    demo.dive().simulate('click')
+    expect(demo.state().active).toEqual(true)
+  })
+})