feat(tests): make ts-jest compile tests

package.json

@@ -100,7 +100,8 @@
     "@types/enzyme": "^3.1.14",
     "@types/faker": "^4.1.3",
     "@types/gulp-load-plugins": "^0.0.31",
-    "@types/jest": "^23.1.0",
+    "@types/jest": "^23.3.9",
+    "@types/jest-axe": "^2.2.2",
     "@types/lodash": "^4.14.118",
     "@types/node": "^10.3.2",
     "@types/react": "^16.3.17",
@@ -134,8 +135,8 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "inquirer": "^6.0.0",
-    "jest": "^23.1.0",
-    "jest-axe": "^3.0.0",
+    "jest": "^23.6.0",
+    "jest-axe": "^3.1.0",
     "js-beautify": "^1.6.14",
     "leven": "^2.1.0",
     "lint-staged": "^7.0.2",
@@ -161,7 +162,7 @@
     "ta-scripts": "^2.5.2",
     "through2": "^2.0.3",
     "tmp": "^0.0.33",
-    "ts-jest": "^22.4.6",
+    "ts-jest": "^23.10.4",
     "ts-node": "^6.1.0",
     "tslint": "^5.10.0",
     "tslint-config-airbnb": "^5.9.2",

src/components/Input/Input.tsx

@@ -135,7 +135,6 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
   }
 
   static defaultProps = {
-    as: 'div',
     type: 'text',
     wrapper: 'div',
     iconPosition: 'end',

test/specs/behaviors/testHelper.tsx

@@ -3,18 +3,18 @@ import { Accessibility } from '../../../src/lib/accessibility/types'
 
 interface FilteredDescription {
   behaviorName: string
-  testMethod: ([string]) => void
+  testMethod: (arg: TestMethod) => void
   params: RegExpExecArray
 }
 
 export interface TestMethod {
   behavior: Accessibility
-  props: [string]
+  props: string[]
 }
 
 export interface TestDefinition {
   regexp: RegExp
-  testMethod: (TestMethod) => void
+  testMethod: (arg: TestMethod) => void
 }
 
 export class TestHelper {
@@ -27,7 +27,7 @@ export class TestHelper {
     this.behaviors.set(name, behavior)
   }
 
-  public addTest(regexp: RegExp, testMethod: (TestMethod) => void) {
+  public addTest(regexp: RegExp, testMethod: (arg: TestMethod) => void) {
     this.testDefinitions.push({ regexp, testMethod })
   }
 

test/specs/commonTests/isConformant.tsx

@@ -324,7 +324,7 @@ export default (Component, options: Conformant = {}) => {
               'forgot to use `getUnhandledProps` util to spread the `rest` props.',
           )
         }
-        const customHandler = eventTarget.prop(listenerName)
+        const customHandler: Function = eventTarget.prop(listenerName)
 
         if (customHandler) {
           customHandler(eventShape)

test/specs/components/Form/FormField-test.tsx

@@ -1,28 +1,37 @@
 import * as React from 'react'
-import { isConformant } from 'test/specs/commonTests'
+import { ComponentClass } from 'enzyme'
 
-import { implementsShorthandProp } from '../../commonTests'
-import { Button, RadioGroup, Input, Text, FormField } from '../../../../src/'
+import { isConformant, implementsShorthandProp } from 'test/specs/commonTests'
 import { mountWithProvider } from 'test/utils'
-import Slot from '../../../../src/components/Slot/Slot'
+import { Button, RadioGroup, Input, Text, FormField } from 'src/index'
+import Slot from 'src/components/Slot/Slot'
 
 const formFieldImplementsShorthandProp = implementsShorthandProp(FormField)
 
+const getFormField = (control: ComponentClass<any> | string) =>
+  mountWithProvider(<FormField control={{ as: control }} name="firstName" />).find('FormField')
+
 describe('FormField', () => {
   isConformant(FormField)
   formFieldImplementsShorthandProp('label', Text)
   formFieldImplementsShorthandProp('message', Text)
   formFieldImplementsShorthandProp('control', Slot)
 
-  it('renders the control provided in the control shorthand prop', () => {
-    const controls = [Button, Input, 'input', RadioGroup]
-    controls.forEach(control => {
-      const formField = mountWithProvider(
-        <FormField control={{ as: control }} name="firstName" />,
-      ).find('FormField')
+  it('renders the component control provided in the control shorthand prop', () => {
+    const controls = [Button, Input, RadioGroup]
 
+    controls.forEach(control => {
+      const formField = getFormField(control)
       const controlElement = formField.find(control)
+
       expect(controlElement.length).toEqual(1)
     })
   })
+
+  it('renders the primitive control provided in the control shorthand prop', () => {
+    const formField = getFormField('input')
+    const controlElement = formField.find('input')
+
+    expect(controlElement.length).toEqual(1)
+  })
 })

test/specs/components/Icon/Icon-test.tsx

@@ -3,6 +3,7 @@ import { isConformant, handlesAccessibility, getRenderedAttribute } from '../../
 
 import Icon from '../../../../src/components/Icon/Icon'
 import { mountWithProviderAndGetComponent } from 'test/utils'
+import { ThemeInput } from 'src/themes/types'
 
 describe('Icon', () => {
   isConformant(Icon)
@@ -13,14 +14,18 @@ describe('Icon', () => {
     })
 
     describe('aria-hidden', () => {
-      const themeWithDefinedIcons = {
+      const themeWithDefinedIcons: ThemeInput = {
         icons: {
-          svgIcon: () => (
-            <svg>
-              <p />
-            </svg>
-          ),
-          fontIcon: { fontFamily: 'Icons', content: `'\\f0152'` },
+          svgIcon: {
+            icon: () => (
+              <svg>
+                <p />
+              </svg>
+            ),
+          },
+          fontIcon: {
+            icon: { fontFamily: 'Icons', content: `'\\f0152'` },
+          },
         },
       }
 

test/specs/components/Portal/Portal-test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import _ from 'lodash'
+import * as _ from 'lodash'
 import { mount } from 'enzyme'
 import { domEvent, nextFrame, withProvider } from 'test/utils'
 

test/specs/components/Provider/ProviderConsumer-test.tsx

@@ -3,7 +3,7 @@ import { mount } from 'enzyme'
 
 import Provider from 'src/components/Provider/Provider'
 import ProviderConsumer from 'src/components/Provider/ProviderConsumer'
-import { IThemeInput } from 'types/theme'
+import { ThemeInput } from 'src/themes/types'
 
 describe('ProviderConsumer', () => {
   test('is exported', () => {
@@ -18,7 +18,7 @@ describe('ProviderConsumer', () => {
     test('is a callback that receives the prepared theme', () => {
       expect.assertions(13)
 
-      const inputTheme: IThemeInput = {
+      const inputTheme: ThemeInput = {
         siteVariables: { a: 'b' },
         componentVariables: { Button: { color: 'red' } },
         componentStyles: { Button: { root: { color: 'red' } } },

test/specs/components/Slot/Slot-test.ts

@@ -14,18 +14,16 @@ describe('Slot', () => {
   it(`create renders a ${Slot.defaultProps.as} element with content prop`, () => {
     const testContent = 'test content'
     const slot = createSlotComp(createSlot, testContent)
-    const { as, content } = slot.props()
 
-    expect(as).toEqual(Slot.defaultProps.as)
-    expect(content).toEqual(testContent)
+    expect(slot.prop('as')).toEqual(Slot.defaultProps.as)
+    expect(slot.prop('content')).toEqual(testContent)
   })
 
   it(`createHTMLInput renders an input element with type prop`, () => {
     const testType = 'test type'
     const slot = createSlotComp(createHTMLInput, testType)
-    const { as, type } = slot.props()
 
-    expect(as).toEqual('input')
-    expect(type).toEqual(testType)
+    expect(slot.prop('as')).toEqual('input')
+    expect(slot.prop('type')).toEqual(testType)
   })
 })

test/specs/lib/AutoControlledComponent-test.tsx

@@ -1,8 +1,9 @@
 import * as _ from 'lodash'
 import * as React from 'react'
-import { shallow } from 'enzyme'
+import { shallow, ShallowWrapper } from 'enzyme'
 import { AutoControlledComponent } from 'src/lib'
 import { consoleUtil } from 'test/utils'
+import { Props } from 'types/utils'
 
 let TestClass
 
@@ -26,11 +27,14 @@ const makeProps = () => ({
   ion: 'belt',
 })
 
-const makeDefaultProps = props =>
+const makeDefaultProps = (props: Props): Props =>
   _.transform(props, (res, val, key) => {
     res[toDefaultName(key)] = val
   })
 
+const getAutoControlledInstance = (wrapper: ShallowWrapper = shallow(<TestClass />)) =>
+  wrapper.instance() as AutoControlledComponent
+
 describe('extending AutoControlledComponent', () => {
   beforeEach(() => {
     TestClass = createTestClass({ autoControlledProps: [], state: {} })
@@ -43,7 +47,7 @@ describe('extending AutoControlledComponent', () => {
 
   describe('trySetState', () => {
     test('is an instance method', () => {
-      expect(typeof shallow(<TestClass />).instance().trySetState).toBe('function')
+      expect(typeof getAutoControlledInstance().trySetState).toBe('function')
     })
 
     test('sets state for autoControlledProps', () => {
@@ -56,7 +60,7 @@ describe('extending AutoControlledComponent', () => {
       TestClass = createTestClass({ autoControlledProps })
       const wrapper = shallow(<TestClass />)
 
-      wrapper.instance().trySetState({ [randomProp]: randomValue })
+      getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
 
       expect(wrapper.state()).toHaveProperty(randomProp, randomValue)
     })
@@ -67,7 +71,7 @@ describe('extending AutoControlledComponent', () => {
       TestClass = createTestClass({ autoControlledProps: [], state: {} })
       const wrapper = shallow(<TestClass />)
 
-      wrapper.instance().trySetState({ ['system']: 'compress' })
+      getAutoControlledInstance(wrapper).trySetState({ ['system']: 'compress' })
 
       expect(wrapper.state()).toEqual({})
     })
@@ -85,7 +89,7 @@ describe('extending AutoControlledComponent', () => {
       TestClass = createTestClass({ autoControlledProps, state: {} })
       const wrapper = shallow(<TestClass {...props} />)
 
-      wrapper.instance().trySetState({ [randomProp]: randomValue })
+      getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
 
       // not updated
       expect(wrapper.state()).not.toHaveProperty(randomProp, randomValue)
@@ -109,7 +113,7 @@ describe('extending AutoControlledComponent', () => {
       TestClass = createTestClass({ autoControlledProps, state: {} })
       const wrapper = shallow(<TestClass {...props} />)
 
-      wrapper.instance().trySetState({ [randomProp]: randomValue })
+      getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
 
       expect(wrapper.state()).toHaveProperty(randomProp, randomValue)
     })
@@ -129,7 +133,7 @@ describe('extending AutoControlledComponent', () => {
       TestClass = createTestClass({ autoControlledProps, state: {} })
       const wrapper = shallow(<TestClass {...props} />)
 
-      wrapper.instance().trySetState({ [randomProp]: randomValue })
+      getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
 
       // not updated
       expect(wrapper.state()).not.toHaveProperty(randomProp, randomValue)
@@ -258,7 +262,7 @@ describe('extending AutoControlledComponent', () => {
       TestClass = createTestClass({ autoControlledProps, state: {} })
       const wrapper = shallow(<TestClass {...defaultProps} />)
 
-      wrapper.instance().trySetState({ [randomProp]: randomValue })
+      getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
 
       expect(wrapper.state()).toHaveProperty(randomProp, randomValue)
     })

test/specs/lib/customPropTypes-test.ts

@@ -2,7 +2,7 @@ import { customPropTypes } from 'src/lib'
 
 describe('suggest prop type', () => {
   test('should throw error when non-array argument given', () => {
-    expect(() => customPropTypes.suggest('foo')).toThrowError(Error)
+    expect(() => customPropTypes.suggest('foo' as any)).toThrowError(Error)
   })
 
   test('should return undefined when prop is valid', () => {

test/specs/lib/factories-test.tsx

@@ -161,7 +161,7 @@ describe('factories', () => {
 
     test('throw if passed Component that is not a string nor function', () => {
       consoleUtil.disableOnce()
-      const badComponents = [undefined, null, true, false, [], {}, 123]
+      const badComponents: any[] = [undefined, null, true, false, [], {}, 123]
 
       _.each(badComponents, badComponent => {
         const badUsage = () => createShorthand(badComponent, () => ({}))

test/specs/lib/getKeyDownHandlers-test.ts

@@ -5,34 +5,12 @@ const props = {}
 const partElementName = 'anchor'
 let actionsDefinition
 
-const eventArg: React.KeyboardEvent = {
+const eventArg: any = {
   keyCode: testKeyCode,
   altKey: false,
-  charCode: null,
-  ctrlKey: null,
-  getModifierState: () => undefined,
-  key: null,
-  locale: null,
-  location: null,
-  metaKey: null,
-  repeat: null,
-  shiftKey: null,
-  which: null,
-  bubbles: null,
-  cancelable: null,
-  currentTarget: null,
-  defaultPrevented: null,
-  eventPhase: null,
-  isTrusted: null,
-  nativeEvent: null,
-  persist: () => undefined,
-  preventDefault: () => undefined,
-  isDefaultPrevented: () => undefined,
-  stopPropagation: () => undefined,
-  isPropagationStopped: () => undefined,
-  target: null,
-  timeStamp: null,
-  type: null,
+  ctrlKey: false,
+  metaKey: false,
+  shiftKey: false,
 }
 
 describe('getKeyDownHandlers', () => {
@@ -124,19 +102,15 @@ describe('getKeyDownHandlers', () => {
       expect(keyHandlers.hasOwnProperty(partElementName)).toBeFalsy()
     })
     test("when acessibility's actionsDefinition is null", () => {
-      const actions = {
-        otherAction: (event: React.KeyboardEvent) => {},
-      }
-
+      const actions = { otherAction: () => {} }
       const keyHandlers = getKeyDownHandlers(actions, null, props)
+
       expect(keyHandlers.hasOwnProperty(partElementName)).toBeFalsy()
     })
     test('there are not common actions and actions definition', () => {
-      const actions = {
-        otherAction: (event: React.KeyboardEvent) => {},
-      }
-
+      const actions = { otherAction: () => {} }
       const keyHandlers = getKeyDownHandlers(actions, actionsDefinition, props)
+
       expect(keyHandlers.hasOwnProperty(partElementName)).toBeFalsy()
     })
   })