add tests; resync files, forgot where i was.

ui/components/role/Role.test.js

@@ -0,0 +1,77 @@
+/* eslint-env jest */
+
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+import { shallow } from 'enzyme'
+import Role from './index'
+
+describe('<Role />', () => {
+  it('renders correctly', () => {
+    const role = renderer.create(<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.html()).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.html()).toMatchSnapshot()
+      role.simulate('click')
+
+      expect(role.html()).toBe(role.html())
+      expect(changed).toBe(false)
+    })
+  })
+})

ui/components/role/__snapshots__/Role.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Role /> renders correctly 1`] = `
+<div
+  className="rolestyled-r4hjov-0 kfzQxT"
+  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
+</div>
+`;
+
+exports[`<Role /> when disabled, does not trigger onToggle on click 1`] = `"<div disabled=\\"\\" style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" title=\\"This role has unsafe permissions.\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">Test Role</div>"`;
+
+exports[`<Role /> when disabled, handles touch hover events 1`] = `"<div disabled=\\"\\" style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" title=\\"This role has unsafe permissions.\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">unsafe role<div class=\\"tooltip-aykj5z-0 euOEXl\\">This role has unsafe permissions.</div></div>"`;

ui/components/role/__snapshots__/demo.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoleDemo /> renders 1`] = `"<div style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">test demo role</div>"`;

ui/components/role/demo.test.js

@@ -0,0 +1,18 @@
+/* eslint-env jest */
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import RoleDemo from './demo'
+
+describe('<RoleDemo />', () => {
+  it('renders', () => {
+    const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
+    expect(demo.html()).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)
+  })
+})

ui/components/role/index.js

@@ -68,7 +68,7 @@ export default class Role extends React.Component<RoleProps, RoleState> {
       'base': Color(color).hsl().string()
     }
 
-    const name = (this.props.role.name !== '') ? this.props.role.name : <>&nbsp;</>
+    const name = (this.props.role.name !== '') ? this.props.role.name : ' '
 
     return <RoleStyled
       active={this.props.active}

ui/kit/__test__/__snapshots__/media.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MediaQuery outputs media queries 1`] = `
+"@media screen and (min-width: 0px) {
+font-size: 0.5em;
+};
+@media screen and (min-width: 544px) {
+font-size: 1em;
+};
+@media screen and (min-width: 768px) {
+font-size: 1.5em;
+};
+@media screen and (min-width: 1012px) {
+font-size: 2em;
+};
+@media screen and (min-width: 1280px) {
+font-size: 2.5em;
+};"
+`;

ui/kit/__test__/media.test.js

@@ -0,0 +1,16 @@
+/* eslint-env jest */
+import MediaQuery from '../media'
+
+describe('MediaQuery', () => {
+  it('outputs media queries', () => {
+    const mq = MediaQuery({
+      xs: 'font-size: 0.5em;',
+      sm: 'font-size: 1em;',
+      md: 'font-size: 1.5em;',
+      lg: 'font-size: 2em;',
+      xl: 'font-size: 2.5em;'
+    })
+
+    expect(mq).toMatchSnapshot()
+  })
+})

ui/pages/_internal/_server.js

@@ -92,7 +92,7 @@ class Server extends React.Component<ServerPageProps> {
           <title key='title'>{currentServer.server.name} - Roleypoly</title>
         </Head>
         { this.renderSocial() }
-        hello <span style={{ color: currentServer.gm.color }}>{currentServer.gm.nickname}</span> on {currentServer.server.name} ({ view.dirty ? 'dirty' : 'clean' })
+        hello <span style={{ color: currentServer.gm?.color }}>{currentServer.gm?.nickname}</span> on {currentServer.server.name} ({ view.dirty ? 'dirty' : 'clean' })
         <Hider visible={true || currentServer.id !== null}>
           { !view.invalidated && view.categories.map(c => <Category key={`cat__${c.name}__${c.id}`}>
             <div>{ c.name }</div>

ui/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })

ui/stores/roles.js

@@ -1,6 +1,7 @@
 // @flow
 // import { action } from './servers'
 import { namespaceConfig } from 'fast-redux'
+// $FlowFixMe
 import { OrderedMap, OrderedSet, Set } from 'immutable'
 import { getCurrentServerState, type ServerState } from './currentServer'
 
@@ -102,5 +103,5 @@ export const renderRoles = (id: string) => (dispatch: *, getState: *) => {
   render = render.add(getUncategorized(roleMap, render.toSet()))
   render = render.sortBy(h => (h.position) ? h.position : h.name)
 
-  dispatch(updateCurrentView({ server: id, categories: render, invalidated: false, selected: Set(current.gm.roles), originalSelected: Set(current.gm.roles) }))
+  dispatch(updateCurrentView({ server: id, categories: render, invalidated: false, selected: Set(current.gm?.roles), originalSelected: Set(current.gm?.roles) }))
 }