Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 267b46a

Browse files
author
Alexandru Buliga
authored
feat(tests): make ts-jest compile tests (#445)
* feat(tests): make `ts-jest` compile tests * Improvements to test with Keyboard events. * addressed PR comments * fixed typescript errors in tests after merging lodash types
1 parent 0b0d98f commit 267b46a

18 files changed

+303
-561
lines changed

‎package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@
100100
"@types/enzyme": "^3.1.14",
101101
"@types/faker": "^4.1.3",
102102
"@types/gulp-load-plugins": "^0.0.31",
103-
"@types/jest": "^23.1.0",
103+
"@types/jest": "^23.3.9",
104+
"@types/jest-axe": "^2.2.2",
104105
"@types/lodash": "^4.14.118",
105106
"@types/node": "^10.3.2",
106107
"@types/react": "^16.3.17",
@@ -134,8 +135,8 @@
134135
"html-webpack-plugin": "^3.2.0",
135136
"husky": "^0.14.3",
136137
"inquirer": "^6.0.0",
137-
"jest": "^23.1.0",
138-
"jest-axe": "^3.0.0",
138+
"jest": "^23.6.0",
139+
"jest-axe": "^3.1.0",
139140
"js-beautify": "^1.6.14",
140141
"leven": "^2.1.0",
141142
"lint-staged": "^7.0.2",
@@ -161,7 +162,7 @@
161162
"ta-scripts": "^2.5.2",
162163
"through2": "^2.0.3",
163164
"tmp": "^0.0.33",
164-
"ts-jest": "^22.4.6",
165+
"ts-jest": "^23.10.4",
165166
"ts-node": "^6.1.0",
166167
"tslint": "^5.10.0",
167168
"tslint-config-airbnb": "^5.9.2",

‎src/components/Input/Input.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,6 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
135135
}
136136

137137
static defaultProps = {
138-
as: 'div',
139138
type: 'text',
140139
wrapper: 'div',
141140
iconPosition: 'end',

‎test/specs/behaviors/testHelper.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ import { Accessibility } from '../../../src/lib/accessibility/types'
33

44
interface FilteredDescription {
55
behaviorName: string
6-
testMethod: ([string]) => void
6+
testMethod: (arg: TestMethod) => void
77
params: RegExpExecArray
88
}
99

1010
export interface TestMethod {
1111
behavior: Accessibility
12-
props: [string]
12+
props: string[]
1313
}
1414

1515
export interface TestDefinition {
1616
regexp: RegExp
17-
testMethod: (TestMethod) => void
17+
testMethod: (arg: TestMethod) => void
1818
}
1919

2020
export class TestHelper {
@@ -27,7 +27,7 @@ export class TestHelper {
2727
this.behaviors.set(name, behavior)
2828
}
2929

30-
public addTest(regexp: RegExp, testMethod: (TestMethod) => void) {
30+
public addTest(regexp: RegExp, testMethod: (arg: TestMethod) => void) {
3131
this.testDefinitions.push({ regexp, testMethod })
3232
}
3333

‎test/specs/commonTests/isConformant.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ export default (Component, options: Conformant = {}) => {
324324
'forgot to use `getUnhandledProps` util to spread the `rest` props.',
325325
)
326326
}
327-
const customHandler = eventTarget.prop(listenerName)
327+
const customHandler: Function = eventTarget.prop(listenerName)
328328

329329
if (customHandler) {
330330
customHandler(eventShape)

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

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,37 @@
11
import * as React from 'react'
2-
import { isConformant } from 'test/specs/commonTests'
2+
import { ComponentClass } from 'enzyme'
33

4-
import { implementsShorthandProp } from '../../commonTests'
5-
import { Button, RadioGroup, Input, Text, FormField } from '../../../../src/'
4+
import { isConformant, implementsShorthandProp } from 'test/specs/commonTests'
65
import { mountWithProvider } from 'test/utils'
7-
import Slot from '../../../../src/components/Slot/Slot'
6+
import { Button, RadioGroup, Input, Text, FormField } from 'src/index'
7+
import Slot from 'src/components/Slot/Slot'
88

99
const formFieldImplementsShorthandProp = implementsShorthandProp(FormField)
1010

11+
const getFormField = (control: ComponentClass<any> | string) =>
12+
mountWithProvider(<FormField control={{ as: control }} name="firstName" />).find('FormField')
13+
1114
describe('FormField', () => {
1215
isConformant(FormField)
1316
formFieldImplementsShorthandProp('label', Text)
1417
formFieldImplementsShorthandProp('message', Text)
1518
formFieldImplementsShorthandProp('control', Slot)
1619

17-
it('renders the control provided in the control shorthand prop', () => {
18-
const controls = [Button, Input, 'input', RadioGroup]
19-
controls.forEach(control => {
20-
const formField = mountWithProvider(
21-
<FormField control={{ as: control }} name="firstName" />,
22-
).find('FormField')
20+
it('renders the component control provided in the control shorthand prop', () => {
21+
const controls = [Button, Input, RadioGroup]
2322

23+
controls.forEach(control => {
24+
const formField = getFormField(control)
2425
const controlElement = formField.find(control)
26+
2527
expect(controlElement.length).toEqual(1)
2628
})
2729
})
30+
31+
it('renders the primitive control provided in the control shorthand prop', () => {
32+
const formField = getFormField('input')
33+
const controlElement = formField.find('input')
34+
35+
expect(controlElement.length).toEqual(1)
36+
})
2837
})

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { isConformant, handlesAccessibility, getRenderedAttribute } from '../../
33

44
import Icon from '../../../../src/components/Icon/Icon'
55
import { mountWithProviderAndGetComponent } from 'test/utils'
6+
import { ThemeInput } from 'src/themes/types'
67

78
describe('Icon', () => {
89
isConformant(Icon)
@@ -13,14 +14,18 @@ describe('Icon', () => {
1314
})
1415

1516
describe('aria-hidden', () => {
16-
const themeWithDefinedIcons = {
17+
const themeWithDefinedIcons: ThemeInput = {
1718
icons: {
18-
svgIcon: () => (
19-
<svg>
20-
<p />
21-
</svg>
22-
),
23-
fontIcon: { fontFamily: 'Icons', content: `'\\f0152'` },
19+
svgIcon: {
20+
icon: () => (
21+
<svg>
22+
<p />
23+
</svg>
24+
),
25+
},
26+
fontIcon: {
27+
icon: { fontFamily: 'Icons', content: `'\\f0152'` },
28+
},
2429
},
2530
}
2631

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import _ from 'lodash'
2+
import * as _ from 'lodash'
33
import { mount } from 'enzyme'
44
import { domEvent, nextFrame, withProvider } from 'test/utils'
55

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { mount } from 'enzyme'
33

44
import Provider from 'src/components/Provider/Provider'
55
import ProviderConsumer from 'src/components/Provider/ProviderConsumer'
6-
import { IThemeInput } from 'types/theme'
6+
import { ThemeInput } from 'src/themes/types'
77

88
describe('ProviderConsumer', () => {
99
test('is exported', () => {
@@ -18,7 +18,7 @@ describe('ProviderConsumer', () => {
1818
test('is a callback that receives the prepared theme', () => {
1919
expect.assertions(13)
2020

21-
const inputTheme: IThemeInput = {
21+
const inputTheme: ThemeInput = {
2222
siteVariables: { a: 'b' },
2323
componentVariables: { Button: { color: 'red' } },
2424
componentStyles: { Button: { root: { color: 'red' } } },

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,16 @@ describe('Slot', () => {
1414
it(`create renders a ${Slot.defaultProps.as} element with content prop`, () => {
1515
const testContent = 'test content'
1616
const slot = createSlotComp(createSlot, testContent)
17-
const { as, content } = slot.props()
1817

19-
expect(as).toEqual(Slot.defaultProps.as)
20-
expect(content).toEqual(testContent)
18+
expect(slot.prop('as')).toEqual(Slot.defaultProps.as)
19+
expect(slot.prop('content')).toEqual(testContent)
2120
})
2221

2322
it(`createHTMLInput renders an input element with type prop`, () => {
2423
const testType = 'test type'
2524
const slot = createSlotComp(createHTMLInput, testType)
26-
const { as, type } = slot.props()
2725

28-
expect(as).toEqual('input')
29-
expect(type).toEqual(testType)
26+
expect(slot.prop('as')).toEqual('input')
27+
expect(slot.prop('type')).toEqual(testType)
3028
})
3129
})

‎test/specs/lib/AutoControlledComponent-test.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import * as _ from 'lodash'
22
import * as React from 'react'
3-
import { shallow } from 'enzyme'
3+
import { shallow, ShallowWrapper } from 'enzyme'
44
import { AutoControlledComponent } from 'src/lib'
55
import { consoleUtil } from 'test/utils'
6+
import { Props } from 'types/utils'
67

78
let TestClass
89

@@ -26,11 +27,14 @@ const makeProps = () => ({
2627
ion: 'belt',
2728
})
2829

29-
const makeDefaultProps = props =>
30+
const makeDefaultProps = (props: Props): Props =>
3031
_.transform(props, (res, val, key) => {
3132
res[toDefaultName(key)] = val
3233
})
3334

35+
const getAutoControlledInstance = (wrapper: ShallowWrapper = shallow(<TestClass />)) =>
36+
wrapper.instance() as AutoControlledComponent
37+
3438
describe('extending AutoControlledComponent', () => {
3539
beforeEach(() => {
3640
TestClass = createTestClass({ autoControlledProps: [], state: {} })
@@ -43,7 +47,7 @@ describe('extending AutoControlledComponent', () => {
4347

4448
describe('trySetState', () => {
4549
test('is an instance method', () => {
46-
expect(typeof shallow(<TestClass />).instance().trySetState).toBe('function')
50+
expect(typeof getAutoControlledInstance().trySetState).toBe('function')
4751
})
4852

4953
test('sets state for autoControlledProps', () => {
@@ -56,7 +60,7 @@ describe('extending AutoControlledComponent', () => {
5660
TestClass = createTestClass({ autoControlledProps })
5761
const wrapper = shallow(<TestClass />)
5862

59-
wrapper.instance().trySetState({ [randomProp]: randomValue })
63+
getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
6064

6165
expect(wrapper.state()).toHaveProperty(randomProp, randomValue)
6266
})
@@ -67,7 +71,7 @@ describe('extending AutoControlledComponent', () => {
6771
TestClass = createTestClass({ autoControlledProps: [], state: {} })
6872
const wrapper = shallow(<TestClass />)
6973

70-
wrapper.instance().trySetState({ ['system']: 'compress' })
74+
getAutoControlledInstance(wrapper).trySetState({ ['system']: 'compress' })
7175

7276
expect(wrapper.state()).toEqual({})
7377
})
@@ -85,7 +89,7 @@ describe('extending AutoControlledComponent', () => {
8589
TestClass = createTestClass({ autoControlledProps, state: {} })
8690
const wrapper = shallow(<TestClass {...props} />)
8791

88-
wrapper.instance().trySetState({ [randomProp]: randomValue })
92+
getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
8993

9094
// not updated
9195
expect(wrapper.state()).not.toHaveProperty(randomProp, randomValue)
@@ -109,7 +113,7 @@ describe('extending AutoControlledComponent', () => {
109113
TestClass = createTestClass({ autoControlledProps, state: {} })
110114
const wrapper = shallow(<TestClass {...props} />)
111115

112-
wrapper.instance().trySetState({ [randomProp]: randomValue })
116+
getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
113117

114118
expect(wrapper.state()).toHaveProperty(randomProp, randomValue)
115119
})
@@ -129,7 +133,7 @@ describe('extending AutoControlledComponent', () => {
129133
TestClass = createTestClass({ autoControlledProps, state: {} })
130134
const wrapper = shallow(<TestClass {...props} />)
131135

132-
wrapper.instance().trySetState({ [randomProp]: randomValue })
136+
getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
133137

134138
// not updated
135139
expect(wrapper.state()).not.toHaveProperty(randomProp, randomValue)
@@ -258,7 +262,7 @@ describe('extending AutoControlledComponent', () => {
258262
TestClass = createTestClass({ autoControlledProps, state: {} })
259263
const wrapper = shallow(<TestClass {...defaultProps} />)
260264

261-
wrapper.instance().trySetState({ [randomProp]: randomValue })
265+
getAutoControlledInstance(wrapper).trySetState({ [randomProp]: randomValue })
262266

263267
expect(wrapper.state()).toHaveProperty(randomProp, randomValue)
264268
})

‎test/specs/lib/customPropTypes-test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { customPropTypes } from 'src/lib'
22

33
describe('suggest prop type', () => {
44
test('should throw error when non-array argument given', () => {
5-
expect(() => customPropTypes.suggest('foo')).toThrowError(Error)
5+
expect(() => customPropTypes.suggest('foo' as any)).toThrowError(Error)
66
})
77

88
test('should return undefined when prop is valid', () => {

‎test/specs/lib/factories-test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ describe('factories', () => {
161161

162162
test('throw if passed Component that is not a string nor function', () => {
163163
consoleUtil.disableOnce()
164-
const badComponents = [undefined, null, true, false, [], {}, 123]
164+
const badComponents: any[] = [undefined, null, true, false, [], {}, 123]
165165

166166
_.each(badComponents, badComponent => {
167167
const badUsage = () => createShorthand(badComponent, () => ({}))

‎test/specs/lib/getKeyDownHandlers-test.ts

Lines changed: 8 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,12 @@ const props = {}
55
const partElementName = 'anchor'
66
let actionsDefinition
77

8-
const eventArg: React.KeyboardEvent = {
8+
const eventArg: any = {
99
keyCode: testKeyCode,
1010
altKey: false,
11-
charCode: null,
12-
ctrlKey: null,
13-
getModifierState: () => undefined,
14-
key: null,
15-
locale: null,
16-
location: null,
17-
metaKey: null,
18-
repeat: null,
19-
shiftKey: null,
20-
which: null,
21-
bubbles: null,
22-
cancelable: null,
23-
currentTarget: null,
24-
defaultPrevented: null,
25-
eventPhase: null,
26-
isTrusted: null,
27-
nativeEvent: null,
28-
persist: () => undefined,
29-
preventDefault: () => undefined,
30-
isDefaultPrevented: () => undefined,
31-
stopPropagation: () => undefined,
32-
isPropagationStopped: () => undefined,
33-
target: null,
34-
timeStamp: null,
35-
type: null,
11+
ctrlKey: false,
12+
metaKey: false,
13+
shiftKey: false,
3614
}
3715

3816
describe('getKeyDownHandlers', () => {
@@ -124,19 +102,15 @@ describe('getKeyDownHandlers', () => {
124102
expect(keyHandlers.hasOwnProperty(partElementName)).toBeFalsy()
125103
})
126104
test("when acessibility's actionsDefinition is null", () => {
127-
const actions = {
128-
otherAction: (event: React.KeyboardEvent) => {},
129-
}
130-
105+
const actions = { otherAction: () => {} }
131106
const keyHandlers = getKeyDownHandlers(actions, null, props)
107+
132108
expect(keyHandlers.hasOwnProperty(partElementName)).toBeFalsy()
133109
})
134110
test('there are not common actions and actions definition', () => {
135-
const actions = {
136-
otherAction: (event: React.KeyboardEvent) => {},
137-
}
138-
111+
const actions = { otherAction: () => {} }
139112
const keyHandlers = getKeyDownHandlers(actions, actionsDefinition, props)
113+
140114
expect(keyHandlers.hasOwnProperty(partElementName)).toBeFalsy()
141115
})
142116
})

0 commit comments

Comments
 (0)