feat(test): add jest and test case

Author: zWingz

.babelrc

@@ -0,0 +1,24 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "useBuiltIns": "entry",
+        "targets": {
+          "browsers": ["last 2 versions"]
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [["@babel/proposal-class-properties", { "loose": true }]],
+  "env": {
+    "development": {
+      "plugins": ["react-hot-loader/babel"]
+    },
+    "test": {
+      "presets": ["@babel/preset-env", "@babel/preset-react"]
+    }
+  }
+}

.babelrc.js

@@ -12,7 +12,8 @@ module.exports = {
     node: true,
     commonjs: true,
     es6: true,
-    amd: true
+    amd: true,
+    "jest": true
   },
   plugins: [],
   rules: {

.eslintrc.js

@@ -21,7 +21,9 @@
     "build:rollup": "cross-env NODE_ENV=production rollup -c",
     "build:webpack": "cross-env NODE_ENV=production webpack --config=./build/prod.conf.js",
     "dev": "cross-env NODE_ENV=development webpack-serve --config=./build/dev.conf.js --host 0.0.0.0 --port 2222",
-    "pub": "npm run lint && npm run build:rollup && npm publish --registry http://registry.npmjs.org --access=public"
+    "pub": "npm run lint && npm run build:rollup && npm publish --registry http://registry.npmjs.org --access=public",
+    "test": "cross-env NODE_ENV=test jest",
+    "test-watch": "cross-env NODE_ENV=test jest --watchAll"
   },
   "author": "zhengzwing@gmail.com",
   "license": "MIT",
@@ -91,5 +93,18 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "dependencies": {}
+  "dependencies": {
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
+    "jest": "^23.6.0",
+    "react-test-renderer": "^16.5.2"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|scss)$": "<rootDir>/test/utils.js"
+    },
+    "setupTestFrameworkScriptFile": "<rootDir>/test/setup.js"
+  }
 }

package.json

@@ -8,7 +8,6 @@ import sass from 'node-sass'
 import autoprefixer from 'autoprefixer'
 import postcssurl from 'postcss-url'
 import pkg from './package.json'
-const babelrc = require('./.babelrc.js')
 export default {
   input: 'src/index.js',
   output: [
@@ -25,9 +24,9 @@ export default {
     external(),
     postcss({
       preprocessor: (content, id) => new Promise(res => {
-          const result = sass.renderSync({ file: id })
-          res({ code: result.css.toString() })
-        }),
+        const result = sass.renderSync({ file: id })
+        res({ code: result.css.toString() })
+      }),
       plugins: [autoprefixer, postcssurl({ url: 'inline' })],
       minimize: true,
       // extract: true,
@@ -39,8 +38,7 @@ export default {
       emitFiles: true // defaults to true
     }),
     babel({
-      exclude: 'node_modules/**',
-      ...babelrc
+      exclude: 'node_modules/**'
       // externalHelpers: true
     }),
     resolve({

rollup.config.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import ErrorIcon from '..'
+import { shallow, mount, render } from 'enzyme'
+// import renderer from 'react-test-renderer'
+describe('<ErrorIcon />', () => {
+  it('ErrorIcon mounted', () => {
+    const result = shallow(<ErrorIcon />)
+    expect(result.children().length).toEqual(0)
+  })
+  it('ErrorIcon style', () => {
+    const style = { width: '100px'}
+    const result = shallow(<ErrorIcon style={style} />)
+    expect(result.prop('style')).toEqual({
+      backgroundImage: 'url(test-file-stub)',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '65% 65%',
+      border: '1px dashed #dadada',
+      height: '100%',
+      // width: '100px'
+      ...style
+    })
+  })
+})

src/lib/ErrorIcon/__test__/ErrorIcon.test.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Image from '..'
+import { shallow } from 'enzyme'
+
+describe('Image', () => {
+  it('Image Mounted', () => {
+    const result = shallow(<Image src='test.png'/>)
+    expect(result.instance().props.src).toEqual('test.png')
+  })
+})

src/lib/Image/__test__/Image.test.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import ErrorIcon from '..'
+import { shallow } from 'enzyme'
+// import renderer from 'react-test-renderer'
+describe('<LoadingIcon />', () => {
+  it('LoadingIcon mounted', () => {
+    const result = shallow(<ErrorIcon/>)
+    expect(result.children().length).toEqual(4)
+  })
+  it('LoadingIcon size', () => {
+    const result = shallow(<ErrorIcon size='sm'/>)
+    expect(result.hasClass('lds-ring')).toEqual(true)
+    expect(result.hasClass('sm')).toEqual(true)
+    expect(result.hasClass('lg')).toEqual(false)
+  })
+})

src/lib/LoadingIcon/__test__/LoadingIcon.test.js

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

test/setup.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'