Skip to content

Commit e3b817c

Browse files
casesandbergcasesandberg
committed
Upgrade Tests to Jest
1 parent 970f83f commit e3b817c

11 files changed

Lines changed: 168 additions & 256 deletions

‎.eslintrc.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
module.exports = { extends: '@case/eslint-config' }
1+
module.exports = {
2+
extends: '@case/eslint-config',
3+
env: {
4+
jest: true
5+
}
6+
}

‎package.json‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@
77
"scripts": {
88
"clean": "rm -rf lib && mkdir lib",
99
"lib": "npm run clean && babel src -d lib",
10-
"test": "npm run unit-test",
11-
"unit-test": "mocha test/** --compilers js:babel-register",
12-
"tdd": "mocha test/** --compilers js:babel-register --watch",
10+
"test": "npm run unit-test -s && npm run eslint -s",
11+
"unit-test": "node_modules/.bin/jest",
12+
"tdd": "node_modules/.bin/jest --watchAll",
1313
"docs": "webpack-dev-server --config webpack.dev.js --port 2570",
1414
"docs-dist": "webpack --config webpack.prod.js",
1515
"dev": "npm run docs",
1616
"prepublish": "npm run lib",
17-
"eslint": "node_modules/.bin/eslint src/**/*.js",
18-
"posttest": "npm run eslint"
17+
"eslint": "node_modules/.bin/eslint src/**/*.js"
1918
},
2019
"repository": {
2120
"type": "git",
@@ -41,27 +40,22 @@
4140
"babel-preset-react": "^6.1.18",
4241
"babel-preset-stage-0": "^6.1.18",
4342
"babel-register": "^6.9.0",
44-
"chai": "^2.2.0",
4543
"css-loader": "^0.14.5",
4644
"highlight.js": "^8.6.0",
4745
"html-loader": "^0.3.0",
4846
"install": "^0.4.0",
47+
"jest": "^19.0.2",
4948
"jsx-loader": "^0.13.2",
5049
"markdown-loader": "^0.1.2",
51-
"mocha": "^2.2.1",
52-
"mocha-sinon": "^1.1.4",
5350
"normalize.css": "^3.0.3",
5451
"react": "^15.1.0",
55-
"react-addons-test-utils": "^15.1.0",
5652
"react-context": "0.0.3",
5753
"react-dom": "^15.1.0",
5854
"react-hot-loader": "^1.2.5",
55+
"react-test-renderer": "^15.4.2",
5956
"remarkable": "^1.6.0",
6057
"require-dir": "^0.3.0",
61-
"sinon": "^1.15.3",
62-
"sinon-chai": "^2.8.0",
6358
"style-loader": "^0.12.3",
64-
"testdom": "^2.0.0",
6559
"webpack": "^1.8.11",
6660
"webpack-dev-server": "^1.8.2"
6761
}

‎test/__snapshots__/index.test.js.snap‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`reactCSS should return complex css 1`] = `
4+
<div>
5+
<div
6+
className="card"
7+
style={
8+
Object {
9+
"MozBoxShadow": "0 4px 8px rgba(0,0,0,.15)",
10+
"OBoxShadow": "0 4px 8px rgba(0,0,0,.15)",
11+
"WebkitBoxShadow": "0 4px 8px rgba(0,0,0,.15)",
12+
"boxShadow": "0 4px 8px rgba(0,0,0,.15)",
13+
"msBoxShadow": "0 4px 8px rgba(0,0,0,.15)",
14+
}
15+
}
16+
/>
17+
</div>
18+
`;
19+
20+
exports[`reactCSS should return multiple css 1`] = `
21+
<div>
22+
<div
23+
className="title"
24+
style={
25+
Object {
26+
"color": "red",
27+
}
28+
}
29+
/>
30+
<div
31+
className="card"
32+
style={
33+
Object {
34+
"MozBoxShadow": "0 0 2px rgba(0,0,0,.1)",
35+
"OBoxShadow": "0 0 2px rgba(0,0,0,.1)",
36+
"WebkitBoxShadow": "0 0 2px rgba(0,0,0,.1)",
37+
"boxShadow": "0 0 2px rgba(0,0,0,.1)",
38+
"msBoxShadow": "0 0 2px rgba(0,0,0,.1)",
39+
}
40+
}
41+
/>
42+
</div>
43+
`;
44+
45+
exports[`reactCSS should return simple css 1`] = `
46+
<div
47+
className="body"
48+
style={
49+
Object {
50+
"backgroundColor": "#fafafa",
51+
}
52+
}
53+
/>
54+
`;

‎test/autoprefix.test.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
/* global describe, it */
2-
3-
import { expect } from './helpers'
41
import autoprefix from '../src/autoprefix'
52

63
describe('Autoprefix', () => {
7-
it('should prefix borderRadius', () => {
4+
test('should prefix borderRadius', () => {
85
const before = {
96
box: {
107
borderRadius: '2px',
@@ -19,10 +16,10 @@ describe('Autoprefix', () => {
1916
borderRadius: '2px',
2017
},
2118
}
22-
expect(autoprefix(before)).to.eql(after)
19+
expect(autoprefix(before)).toEqual(after)
2320
})
2421

25-
it('should prefix absolute', () => {
22+
test('should prefix absolute', () => {
2623
const before = {
2724
box: {
2825
absolute: '0px 0px 0px 0px',
@@ -37,6 +34,6 @@ describe('Autoprefix', () => {
3734
left: '0px',
3835
},
3936
}
40-
expect(autoprefix(before)).to.eql(after)
37+
expect(autoprefix(before)).toEqual(after)
4138
})
4239
})

‎test/flattenNames.test.js‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,39 @@
1-
/* global describe, it */
2-
3-
import { expect } from './helpers'
41
import flattenNames from '../src/flattenNames'
52

63
describe('Combine', () => {
7-
it('should return basic strings', () => {
4+
test('should return basic strings', () => {
85
const before = ['foo', 'bar', 'baz']
96
const after = ['foo', 'bar', 'baz']
10-
11-
expect(flattenNames(before)).to.eql(after)
7+
expect(flattenNames(before)).toEqual(after)
128
})
139

14-
it('should flatten arrays', () => {
10+
test('should flatten arrays', () => {
1511
const before = [['foo', 'bar'], [[['baz']]]]
1612
const after = ['foo', 'bar', 'baz']
17-
18-
expect(flattenNames(before)).to.eql(after)
13+
expect(flattenNames(before)).toEqual(after)
1914
})
2015

21-
it('should return key and key-true when value is true', () => {
16+
test('should return key and key-true when value is true', () => {
2217
const before = [{ foo: true }]
2318
const after = ['foo', 'foo-true']
24-
25-
expect(flattenNames(before)).to.eql(after)
19+
expect(flattenNames(before)).toEqual(after)
2620
})
2721

28-
it('should return key-false when value is false', () => {
22+
test('should return key-false when value is false', () => {
2923
const before = [{ foo: false }]
3024
const after = ['foo-false']
31-
32-
expect(flattenNames(before)).to.eql(after)
25+
expect(flattenNames(before)).toEqual(after)
3326
})
3427

35-
it('should return key-value when value is a string', () => {
28+
test('should return key-value when value is a string', () => {
3629
const before = [{ foo: 'bar' }]
3730
const after = ['foo-bar']
38-
39-
expect(flattenNames(before)).to.eql(after)
31+
expect(flattenNames(before)).toEqual(after)
4032
})
4133

42-
it('should return key-value when value is a number', () => {
34+
test('should return key-value when value is a number', () => {
4335
const before = [{ foo: 2 }]
4436
const after = ['foo-2']
45-
46-
expect(flattenNames(before)).to.eql(after)
37+
expect(flattenNames(before)).toEqual(after)
4738
})
4839
})

‎test/helpers/index.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎test/index.test.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react'
2+
import renderer from 'react-test-renderer'
3+
import reactCSS from '../src'
4+
5+
describe('reactCSS', () => {
6+
test('should return simple css', () => {
7+
const Component = () => {
8+
const styles = reactCSS({
9+
'default': {
10+
body: {
11+
backgroundColor: '#fafafa',
12+
},
13+
},
14+
})
15+
return <div className="body" style={ styles.body } />
16+
}
17+
const tree = renderer.create(<Component />).toJSON()
18+
expect(tree).toMatchSnapshot()
19+
})
20+
21+
test('should return multiple css', () => {
22+
const Component = ({ color }) => {
23+
const styles = reactCSS({
24+
'default': {
25+
title: {
26+
color,
27+
},
28+
card: {
29+
boxShadow: '0 0 2px rgba(0,0,0,.1)',
30+
},
31+
},
32+
})
33+
return (
34+
<div>
35+
<div className="title" style={ styles.title } />
36+
<div className="card" style={ styles.card } />
37+
</div>
38+
)
39+
}
40+
const tree = renderer.create(<Component color="red" />).toJSON()
41+
expect(tree).toMatchSnapshot()
42+
})
43+
44+
test('should return complex css', () => {
45+
const Component = ({ zIndex }) => {
46+
const styles = reactCSS({
47+
'default': {
48+
card: {
49+
boxShadow: '0 0 2px rgba(0,0,0,.1)',
50+
},
51+
},
52+
'zIndex-2': {
53+
card: {
54+
boxShadow: '0 4px 8px rgba(0,0,0,.15)',
55+
},
56+
},
57+
}, { zIndex })
58+
return (
59+
<div>
60+
<div className="card" style={ styles.card } />
61+
</div>
62+
)
63+
}
64+
const tree = renderer.create(<Component zIndex="2" />).toJSON()
65+
expect(tree).toMatchSnapshot()
66+
})
67+
})

‎test/loop.test.js‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,26 @@
1-
/* global describe, it */
2-
/* eslint react/prefer-stateless-function: 0 */
3-
4-
import { React, TestUtils, expect } from './helpers'
1+
import React from 'react'
52
import loopable from '../src/loop'
63

74
describe('Loopable', () => {
8-
it('should return first-child if first', () => {
9-
expect(loopable(0, 4)).to.eql({ 'first-child': true, 'nth-child': 0, 'even': true })
5+
test('should return first-child if first', () => {
6+
expect(loopable(0, 4)).toEqual({ 'first-child': true, 'nth-child': 0, 'even': true })
107
})
118

12-
it('should return last-child if last', () => {
13-
expect(loopable(3, 4)).to.eql({ 'last-child': true, 'nth-child': 3, 'odd': true })
9+
test('should return last-child if last', () => {
10+
expect(loopable(3, 4)).toEqual({ 'last-child': true, 'nth-child': 3, 'odd': true })
1411
})
1512

16-
it('should return even if even', () => {
17-
expect(loopable(2, 4)).to.eql({ 'even': true, 'nth-child': 2 })
13+
test('should return even if even', () => {
14+
expect(loopable(2, 4)).toEqual({ 'even': true, 'nth-child': 2 })
1815
})
1916

20-
it('should return odd if odd', () => {
21-
expect(loopable(1, 4)).to.eql({ 'odd': true, 'nth-child': 1 })
17+
test('should return odd if odd', () => {
18+
expect(loopable(1, 4)).toEqual({ 'odd': true, 'nth-child': 1 })
2219
})
2320

24-
it('should return simple css', () => {
25-
class Component extends React.Component {
26-
render() {
27-
return <div className="body" />
28-
}
29-
}
30-
const component = TestUtils.renderIntoDocument(<Component { ...loopable(3, 4) } />)
31-
expect(component.props).to.eql({ 'last-child': true, 'nth-child': 3, 'odd': true })
21+
test('should return simple css', () => {
22+
const Component = () => <div className="body" />
23+
const rendered = <Component { ...loopable(3, 4) } />
24+
expect(rendered.props).toEqual({ 'last-child': true, 'nth-child': 3, 'odd': true })
3225
})
3326
})

‎test/mergeClasses.test.js‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
/* global describe, it */
2-
3-
import { expect } from './helpers'
41
import mergeClasses from '../src/mergeClasses'
52

63
describe('Combine', () => {
@@ -17,8 +14,7 @@ describe('Combine', () => {
1714
margin: '0px',
1815
},
1916
}
20-
21-
expect(mergeClasses(classes)).to.eql(after)
17+
expect(mergeClasses(classes)).toEqual(after)
2218
})
2319

2420
it('should not return merged classes that are not active', () => {
@@ -40,8 +36,7 @@ describe('Combine', () => {
4036
margin: '0px',
4137
},
4238
}
43-
44-
expect(mergeClasses(classes, names)).to.eql(after)
39+
expect(mergeClasses(classes, names)).toEqual(after)
4540
})
4641

4742
it('should return basic merged css', () => {
@@ -64,8 +59,7 @@ describe('Combine', () => {
6459
color: '#333',
6560
},
6661
}
67-
68-
expect(mergeClasses(classes, names)).to.eql(after)
62+
expect(mergeClasses(classes, names)).toEqual(after)
6963
})
7064

7165
it('should return overlaping css', () => {
@@ -103,8 +97,7 @@ describe('Combine', () => {
10397
color: 'blue',
10498
},
10599
}
106-
107-
expect(mergeClasses(classes, names)).to.eql(after)
100+
expect(mergeClasses(classes, names)).toEqual(after)
108101
})
109102

110103
it('should not mutate default classes when merging', () => {
@@ -132,9 +125,7 @@ describe('Combine', () => {
132125
margin: '0px',
133126
},
134127
}
135-
136-
expect(mergeClasses(classes, names)).to.eql(after1)
137-
expect(mergeClasses(classes, [])).to.eql(after2)
128+
expect(mergeClasses(classes, names)).toEqual(after1)
129+
expect(mergeClasses(classes, [])).toEqual(after2)
138130
})
139-
140131
})

0 commit comments

Comments
 (0)