absolutely massive typescript porting time

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

@@ -1,3 +1,6 @@
+/**
+ *  @jest-environment jsdom
+ */
 /* eslint-env jest */
 
 import * as React from 'react'
@@ -36,7 +39,7 @@ describe('<Role />', () => {
   })
 
   it('fixes colors when they are not set', () => {
-    const role = shallow(<Role role={{ name: 'Test Role', color: 0 }} />)
+    const role = shallow(<Role role={{ name: 'Test Role', color: '0' }} />)
     expect(role.props().style['--role-color-base']).toEqual('hsl(0, 0%, 93.7%)')
   })
 
@@ -47,12 +50,14 @@ describe('<Role />', () => {
 
   describe('when disabled,', () => {
     it('handles touch hover events', () => {
-      const role = shallow(<Role role={{ name: 'unsafe role', color: '#ffffff' }} disabled />)
+      const el = <Role role={{ name: 'unsafe role', color: '#ffffff' }} disabled={true} />
+      const role = shallow<typeof el>(el)
 
       role.simulate('touchstart')
       expect(role.state().hovering).toEqual(true)
+
       expect(role).toMatchSnapshot() // expecting tooltip
-      expect(role.exists('tooltip')).toEqual(true)
+      expect(role.text().endsWith('This role has unsafe permissions.')).toBe(true)
 
       role.simulate('touchend')
       expect(role.state().hovering).toEqual(false)

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

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

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

@@ -1,3 +1,6 @@
+/**
+ *  @jest-environment jsdom
+ */
 /* eslint-env jest */
 import * as React from 'react'
 import { shallow } from 'enzyme'
@@ -11,7 +14,8 @@ describe('<RoleDemo />', () => {
   })
 
   it('changes state when clicked', () => {
-    const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
+    const el = <RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />
+    const demo = shallow<typeof el>(el)
     expect(demo.state().active).toEqual(false)
     demo.dive().simulate('click')
     expect(demo.state().active).toEqual(true)