chore: unit test

Author: booxood

.eslintrc

@@ -8,7 +8,8 @@
   "env": {
     "browser": true,
     "node": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "parserOptions": {
     "ecmaFeatures": {

.gitignore

@@ -9,3 +9,5 @@ package-lock.json
 
 dev/config.js
 yarn.lock
+
+coverage

__mocks__/setup.js

@@ -0,0 +1,52 @@
+import moxios from 'moxios'
+
+// mock window.*
+global.localStorage = {
+  getItem () { return '{}' },
+  setItem () {},
+  removeItem () {}
+}
+global.document = {
+  title: ''
+}
+global.location = {
+  search: '',
+  href: ''
+}
+
+// mock axios request
+moxios.stubRequest(/\/repos\/.*\/comments/, {
+  status: 200,
+  response: [{
+    id: 1,
+    html_url: 'https://github.com/xxx/xxx/issues/1#issuecomment-xxx',
+    body_html: '<p>111</p>',
+    created_at: '2017-06-30T09:00:19Z',
+    user: {
+      login: 'booxood',
+      avatar_url: 'https://avatars0.githubusercontent.com/u/2151410?v=3',
+      html_url: 'https://github.com/booxood'
+    }
+  }, {
+    id: 2,
+    html_url: 'https://github.com/xxx/xxx/issues/1#issuecomment-xxx',
+    body_html: '<p>222</p>',
+    created_at: '2017-06-30T09:01:19Z',
+    user: {
+      login: 'booxood',
+      avatar_url: 'https://avatars0.githubusercontent.com/u/2151410?v=3',
+      html_url: 'https://github.com/booxood'
+    }
+  }]
+})
+moxios.stubRequest(/\/repos\/.*\/issues/, {
+  status: 200,
+  response: [{
+    html_url: 'https://github.com/xxx/xxx/issues/1',
+    comments_url: 'https://api.github.com/repos/xxx/xxx/issues/1/comments',
+    comments: 2
+  }]
+})
+moxios.stubRequest(/.*/, {
+  status: 404,
+})

__mocks__/style.js

@@ -0,0 +1 @@
+module.exports = {}

package.json

@@ -12,26 +12,36 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --no-info --progress",
     "build": "rimraf ./dist && cross-env NODE_ENV=production webpack --hide-modules && cross-env NODE_ENV=production webpack --config webpack.config.min.js",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "coverage": "jest --coverage",
+    "test": "jest"
   },
   "author": "Liucw",
   "license": "MIT",
   "devDependencies": {
     "autoprefixer": "7.1.2",
     "babel-core": "6.25.0",
     "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
     "babel-loader": "7.1.1",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
     "cross-env": "5.0.1",
     "css-loader": "0.28.4",
+    "enzyme": "2.9.1",
     "eslint": "4.1.1",
     "eslint-config-o2team": "0.1.6",
     "eslint-plugin-react": "7.1.0",
     "extract-text-webpack-plugin": "2.1.2",
+    "jest": "20.0.4",
+    "moxios": "0.4.0",
     "postcss-loader": "2.0.6",
+    "react": "15.6.1",
+    "react-dom": "15.6.1",
+    "react-test-renderer": "15.6.1",
     "rimraf": "2.6.1",
+    "sinon": "2.3.7",
     "style-loader": "0.18.2",
     "url-loader": "0.5.9",
     "webpack": "3.1.0",
@@ -46,5 +56,20 @@
     "preact": "8.1.0",
     "preact-compat": "3.16.0",
     "react-flip-move": "2.9.14"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(css|less|scss)$": "<rootDir>/__mocks__/style.js"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "coveragePathIgnorePatterns": [
+      "src/gitalk.jsx"
+    ]
   }
 }

src/__tests__/gitalk.test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import moxios from 'moxios'
+
+import '../../__mocks__/setup'
+import Gitalk from '../gitalk'
+import Comment from '../component/comment'
+import { axiosGithub } from '../util'
+
+describe('Gitalk', function () {
+  beforeEach(function () {
+    moxios.install(axiosGithub)
+  })
+  afterEach(function () {
+    moxios.uninstall(axiosGithub)
+  })
+  it('render', function (done) {
+    const props = {}
+    const wrapper = shallow(<Gitalk {...props} />)
+    expect(wrapper.find('.gt-container')).toHaveLength(1)
+
+    moxios.wait(function () {
+      wrapper.update()
+      expect(wrapper.find(Comment)).toHaveLength(2)
+      done()
+    })
+  })
+})

src/__tests__/util.test.js

@@ -0,0 +1,46 @@
+import { queryParse, queryStringify, formatErrorMsg } from '../util'
+
+describe('util', function () {
+  const search = 'a=b&c=1'
+  const searchObject = {
+    a: 'b',
+    c: '1'
+  }
+
+  describe('queryParse', function () {
+    it(search, function () {
+      expect(queryParse(search)).toEqual(searchObject)
+    })
+    it(`?${search}`, function () {
+      expect(queryParse(`?${search}`)).toEqual(searchObject)
+    })
+  })
+
+  describe('queryStringify', function () {
+    it('object', function () {
+      expect(queryStringify(searchObject)).toEqual(search)
+    })
+  })
+
+  describe('formatErrorMsg', function () {
+    it('err.response', function () {
+      expect(formatErrorMsg({
+        response: {
+          data: {
+            message: 'm1',
+            errors: [{
+              message: 'm21'
+            }, {
+              message: 'm22'
+            }]
+          }
+        }
+      })).toEqual('Error: m1. m21, m22')
+    })
+    it('err.msg', function () {
+      expect(formatErrorMsg({
+        message: 'm1'
+      })).toEqual('Error: m1')
+    })
+  })
+})

src/component/avatar.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 export default function Avatar (props) {
   const src = props.src
   let className = 'gt-avatar '
-  props.className && (className+=props.className)
+  props.className && (className += props.className)
   return (
     <div className={className}>
       <img src={src} alt="头像"/>

src/component/avatar.spec.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Avatar from './avatar'
+
+describe('Avatar', function () {
+  it('set props className', function () {
+    const className = 'class'
+    expect(shallow(<Avatar className={className} />)
+      .hasClass(`gt-avatar ${className}`)
+    ).toBe(true)
+  })
+  it('set props src', function () {
+    const src = 'src'
+    expect(shallow(<Avatar src={src} />)
+      .find('img').prop('src')
+    ).toEqual(src)
+  })
+})
+

src/component/button.spec.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+
+import Button from './button'
+
+describe('Button', function () {
+  it('set props className', function () {
+    const className = 'class'
+    expect(shallow(<Button className={className} />)
+      .hasClass(className)
+    ).toBe(true)
+  })
+  it('set props text', function () {
+    const text = 'text'
+    expect(shallow(<Button text={text} />)
+      .find('.gt-btn-text').text()
+    ).toEqual(text)
+  })
+  it('set props isLoading', function () {
+    expect(shallow(<Button isLoading={true} />)
+      .find('.gt-btn-loading').exists()
+    ).toBe(true)
+  })
+  it('set props onClick', function () {
+    const onButtonClick = sinon.spy()
+    const wrapper = shallow(<Button onClick={onButtonClick} />)
+    wrapper.find('button').simulate('click')
+    expect(onButtonClick.calledOnce).toBe(true)
+  })
+})

src/component/comment.spec.js

@@ -0,0 +1,87 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Comment from './comment'
+import Avatar from './avatar'
+
+const comment = {
+  html_url: 'https://github.com/xxxx/xxxxx/issues/1#issuecomment-xxxxx',
+  body_html: '<p>123</p>',
+  created_at: '2017-06-30T09:01:19Z',
+  user: {
+    login: 'booxood',
+    avatar_url: 'https://avatars0.githubusercontent.com/u/2151410?v=3',
+    html_url: 'https://github.com/booxood'
+  }
+}
+
+describe('Comment', function () {
+  it('render with no user', function () {
+    const props = {
+      comment
+    }
+    const wrapper = shallow(<Comment {...props} />)
+    expect(wrapper.hasClass('gt-comment')).toBe(true)
+    expect(wrapper.find(Avatar)).toHaveLength(1)
+    expect(wrapper.find('.gt-comment-header')).toHaveLength(1)
+    expect(wrapper.find('.gt-comment-username').prop('href')).toEqual(comment.user.html_url)
+    expect(wrapper.find('.gt-comment-username').text()).toEqual(comment.user.login)
+    expect(wrapper.find('.gt-comment-date').text()).toEqual(expect.stringMatching(/ago$/))
+    expect(wrapper.find('.gt-comment-body').render().html()).toEqual(expect.stringContaining(comment.body_html))
+  })
+
+  it('render with user but isn\'t creator', function () {
+    const props = {
+      comment,
+      user: { login: 'hello' }
+    }
+    const wrapper = shallow(<Comment {...props} />)
+    expect(wrapper.find('.gt-comment-edit')).toHaveLength(0)
+  })
+
+  it('render with user is creator', function () {
+    const props = {
+      comment,
+      user: { login: 'booxood' }
+    }
+    const wrapper = shallow(<Comment {...props} />)
+    expect(wrapper.find('.gt-comment-edit')).toHaveLength(1)
+  })
+
+  it('render with creator isn\'t admin', function () {
+    const props = {
+      comment,
+      admin: ['hello']
+    }
+    const wrapper = shallow(<Comment {...props} />)
+    expect(wrapper.hasClass('gt-comment-admin')).toBe(false)
+  })
+
+  it('render with creator is admin', function () {
+    const props = {
+      comment,
+      admin: ['booxood', 'hello']
+    }
+    const wrapper = shallow(<Comment {...props} />)
+    expect(wrapper.hasClass('gt-comment-admin')).toBe(true)
+  })
+
+  it('set props commentedText', function () {
+    const commentedText = 'commentedText'
+    const props = {
+      comment,
+      commentedText
+    }
+    const wrapper = shallow(<Comment {...props} />)
+    expect(wrapper.find('.gt-comment-text').text()).toEqual(commentedText)
+  })
+
+  it('set props language=zh-TW', function () {
+    const props = {
+      comment,
+      language: 'zh-TW'
+    }
+    const wrapper = shallow(<Comment {...props} />)
+    expect(wrapper.find('.gt-comment-date').text()).toEqual(expect.stringContaining('前'))
+  })
+})

src/util.js

@@ -8,6 +8,7 @@ export const queryParse = (search = window.location.search) => {
     .split('&')
     .forEach(queryStr => {
       const [key, value] = queryStr.split('=')
+      /* istanbul ignore else */
       if (key) query[decodeURIComponent(key)] = decodeURIComponent(value)
     })
 
@@ -17,7 +18,7 @@ export const queryParse = (search = window.location.search) => {
 export const queryStringify = query => {
   const queryString = Object.keys(query)
     .map(key => `${key}=${encodeURIComponent(query[key] || '')}`)
-    .join('&') || ''
+    .join('&')
   return queryString
 }
 
@@ -36,6 +37,7 @@ export const axiosGithub = axios.create({
 
 export const getMetaContent = (name, content = 'content') => {
   const el = document.querySelector(`meta[name='${name}']`)
+  /* istanbul ignore next */
   return el && el.getAttribute(content)
 }