Setup coverage

.babelrc

@@ -6,5 +6,33 @@
   ],
   "plugins": [
     "lodash"
-  ]
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+              "transform": "react-transform-hmr",
+              "imports": [
+                "react"
+              ],
+              "locals": [
+                "module"
+              ]
+            }, {
+              "transform": "react-transform-catch-errors",
+              "imports": [
+                "react",
+                "redbox-react"
+              ]
+            }]
+        }]
+      ]
+    },
+    "test": {
+      "plugins": [
+        ["__coverage__", { "ignore": "test/" }]
+      ]
+    }
+  }
 }

.gitignore

@@ -6,6 +6,7 @@
 npm-debug.log*
 node_modules/
 bower_components/
+coverage/
 dist/
 docs/build
 docs/app/docgenInfo.json

README.md

@@ -1,4 +1,8 @@
-# Stardust  [![Code Climate](https://img.shields.io/codeclimate/github/TechnologyAdvice/stardust.svg?style=flat-square)](https://codeclimate.com/github/TechnologyAdvice/stardust) [![Gemnasium](https://img.shields.io/gemnasium/TechnologyAdvice/stardust.svg?style=flat-square)](https://gemnasium.com/TechnologyAdvice/stardust) [![Circle CI](https://img.shields.io/circleci/project/TechnologyAdvice/stardust/master.svg?style=flat-square)](https://circleci.com/gh/TechnologyAdvice/stardust/tree/master)
+# Stardust
+[![Circle CI](https://img.shields.io/circleci/project/TechnologyAdvice/stardust/master.svg?style=flat-square)](https://circleci.com/gh/TechnologyAdvice/stardust/tree/master)
+[![Codecov](https://img.shields.io/codecov/c/github/TechnologyAdvice/stardust/master.svg?style=flat-square)](https://codecov.io/gh/TechnologyAdvice/stardust)
+[![Code Climate](https://img.shields.io/codeclimate/github/TechnologyAdvice/stardust.svg?style=flat-square)](https://codeclimate.com/github/TechnologyAdvice/stardust)
+[![Gemnasium](https://img.shields.io/gemnasium/TechnologyAdvice/stardust.svg?style=flat-square)](https://gemnasium.com/TechnologyAdvice/stardust)
 
 The (soon to be) [official][8] integration between [Semantic UI][5] and [React][3].
 

build/karma.conf.babel.js

@@ -1,5 +1,4 @@
 import { argv } from 'yargs'
-import webpack from 'webpack'
 
 import config from '../config'
 import webpackConfig from './webpack.config'
@@ -11,7 +10,7 @@ module.exports = (karmaConfig) => {
     basePath: process.cwd(),
     browsers: ['PhantomJS'],
     singleRun: !argv.watch,
-    reporters: ['mocha'],
+    reporters: ['mocha', 'coverage'],
     files: [
       './test/tests.bundle.js',
     ],
@@ -23,7 +22,16 @@ module.exports = (karmaConfig) => {
       // exit on ResourceError, useful if karma exits without killing phantom
       exitOnResourceError: true,
     },
+    coverageReporter: {
+      reporters: [
+        { type: 'lcov', dir: 'coverage', subdir: '.' },
+        { type: 'text-summary' },
+      ],
+      includeAllSources: true,
+    },
     preprocessors: {
+      // do not include 'coverage' preprocessor for karma-coverage
+      // code is already instrumented by babel-plugin-__coverage__
       '**/*.bundle.js': ['webpack'],
     },
     client: {
@@ -45,7 +53,7 @@ module.exports = (karmaConfig) => {
         ],
       },
       plugins: [
-        new webpack.DefinePlugin(config.compiler_globals),
+        ...webpackConfig.plugins,
       ],
       resolve: {
         ...webpackConfig.resolve,

build/webpack.config.js

@@ -133,24 +133,6 @@ webpackConfig.module.loaders = [{
   loader: 'babel',
   query: {
     cacheDirectory: true,
-    plugins: [],
-    presets: ['es2015', 'react', 'stage-1'],
-    env: {
-      development: {
-        plugins: [
-          ['react-transform', {
-            transforms: [{
-              transform: 'react-transform-hmr',
-              imports: ['react'],
-              locals: ['module'],
-            }, {
-              transform: 'react-transform-catch-errors',
-              imports: ['react', 'redbox-react'],
-            }],
-          }],
-        ],
-      },
-    },
   },
 }, {
   //

circle.yml

@@ -15,6 +15,8 @@ dependencies:
 test:
   pre:
     - npm run lint
+  post:
+    - bash <(curl -s https://codecov.io/bash)
 
 deployment:
   development:

package.json

@@ -51,6 +51,7 @@
     "babel-core": "^6.5.2",
     "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.0",
+    "babel-plugin-__coverage__": "^0.111111.11",
     "babel-plugin-lodash": "^3.1.4",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-preset-es2015": "^6.5.0",
@@ -85,6 +86,7 @@
     "json-loader": "^0.5.3",
     "karma": "^0.13.22",
     "karma-cli": "^1.0.0",
+    "karma-coverage": "^1.0.0",
     "karma-mocha": "^1.0.1",
     "karma-mocha-reporter": "^2.0.0",
     "karma-phantomjs-launcher": "^1.0.0",

src/addons/Select/Select.js

@@ -9,7 +9,7 @@ import Dropdown from '../../modules/Dropdown/Dropdown'
  * A <Select /> is sugar for <Dropdown selection />.
  * @see Dropdown
  */
-const Select = ({ className, ...rest }) => {
+function Select({ className, ...rest }) {
   const classes = cx('sd-select', className)
 
   return <Dropdown {...rest} className={classes} selection />

src/collections/Menu/MenuItem.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import classNames from 'classnames'
 import META from '../../utils/Meta'
 
-const MenuItem = ({ __onClick, active, children, className, label, name, onClick, ...rest }) => {
+function MenuItem({ __onClick, active, children, className, label, name, onClick, ...rest }) {
   const handleClick = (e) => {
     if (__onClick) __onClick(name)
     if (onClick) onClick(name)

src/elements/Label/Label.js

@@ -19,7 +19,7 @@ import Image from '../Image/Image'
 /**
  * A label displays content classification
  */
-const Label = (props) => {
+function Label(props) {
   const {
     attached, children, color, corner, className, circular, detail, detailLink, floating, horizontal, icon,
     image, link, onClick, onClickDetail, onClickRemove, pointing, removable, ribbon, size, tag, text,

src/modules/Dropdown/DropdownItem.js

@@ -6,7 +6,7 @@ import { someChildType } from '../../utils/childrenUtils'
 import { useKeyOnly } from '../../utils/propUtils'
 import META from '../../utils/Meta'
 
-const DropdownItem = (props) => {
+function DropdownItem(props) {
   const {
     active,
     children,

src/utils/debug.js

@@ -1,7 +1,7 @@
 let debug
 const noop = () => undefined
 
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
   debug = require('debug')
   localStorage.debug = 'stardust:*'
 } else {

src/views/Item/ItemItems.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import cx from 'classnames'
 import META from '../../utils/Meta'
 
-const ItemItems = (props) => {
+function ItemItems(props) {
   const { className, children, ...rest } = props
   const classes = cx('sd-item-items ui', className, 'items')
 

test/specs/collections/Form/Fields-test.js

@@ -12,7 +12,7 @@ describe('Fields', () => {
 
   describe('evenlyDivided', () => {
     it('adds the word class for the number of child fields', () => {
-      const children = _.times(_.random(1, 16), () => <FormField />)
+      const children = _.times(_.random(1, 16), (i) => <FormField key={i} />)
       const className = `${numberToWord(children.length)} fields`
 
       shallow(<FormFields evenlyDivided>{children}</FormFields>)

test/specs/commonTests.js

@@ -47,6 +47,16 @@ const componentInfo = componentCtx.keys().map(key => {
  * @param {Object} [requiredProps={}] Props required to render Component without errors or warnings.
  */
 export const isConformant = (Component, requiredProps = {}) => {
+  // tests depend on Component constructor names, enforce them
+  if (!Component.prototype.constructor.name) {
+    const ReactDOMServer = require('react-dom/server')
+    throw new Error([
+      'Component is not a named function. This should help identify it:',
+      `static _meta = ${JSON.stringify(Component._meta, null, 2)}`,
+      `Rendered:\n${ReactDOMServer.renderToStaticMarkup(<Component />)}`,
+    ].join('\n'))
+  }
+
   const info = _.find(componentInfo, i => i.constructorName === Component.prototype.constructor.name)
   const { _meta, constructorName, componentClassName, filenameWithoutExt, sdClass } = info
 

test/specs/modules/Dropdown/Dropdown-test.js

@@ -21,11 +21,11 @@ const wrapperMount = (node, opts) => {
   attachTo = document.createElement('div')
   document.body.appendChild(attachTo)
 
-  wrapper = global.mount(node, { ...opts, attachTo })
+  wrapper = mount(node, { ...opts, attachTo })
   return wrapper
 }
-const wrapperShallow = (...args) => (wrapper = global.shallow(...args))
-const wrapperRender = (...args) => (wrapper = global.render(...args))
+const wrapperShallow = (...args) => (wrapper = shallow(...args))
+const wrapperRender = (...args) => (wrapper = render(...args))
 
 // ----------------------------------------
 // Options
@@ -52,9 +52,6 @@ const dropdownMenuIsOpen = () => {
   menu.should.have.className('visible')
 }
 
-options = getOptions()
-defaultProps = { options }
-
 describe('Dropdown Component', () => {
   beforeEach(() => {
     attachTo = undefined
@@ -720,12 +717,15 @@ describe('Dropdown Component', () => {
     })
 
     it('still allows moving selection after blur/focus', () => {
+      // open, first item is selected
       const search = wrapperMount(<Dropdown {...defaultProps} search />)
         .find('input.search')
+        .simulate('focus')
+
+      domEvent.keyDown(document, { key: 'ArrowDown' })
+      dropdownMenuIsOpen()
 
-      // open, first item is selected
       const items = wrapper
-        .simulate('click')
         .find('DropdownItem')
 
       items

test/specs/utils/AutoControlledComponent-test.js

@@ -39,6 +39,8 @@ describe('extending AutoControlledComponent', () => {
     })
 
     it('sets state for autoControlledProps', () => {
+      consoleUtil.disableOnce()
+
       const autoControlledProps = _.keys(makeProps())
       const randomProp = _.sample(autoControlledProps)
       const randomValue = faker.hacker.verb()
@@ -70,6 +72,8 @@ describe('extending AutoControlledComponent', () => {
     })
 
     it('does not set state for props defined by the parent', () => {
+      consoleUtil.disableOnce()
+
       const props = makeProps()
       const autoControlledProps = _.keys(props)
 
@@ -95,6 +99,8 @@ describe('extending AutoControlledComponent', () => {
 
   describe('initial state', () => {
     it('is derived from autoControlledProps in props', () => {
+      consoleUtil.disableOnce()
+
       const props = makeProps()
       const autoControlledProps = _.keys(props)
 
@@ -114,6 +120,8 @@ describe('extending AutoControlledComponent', () => {
 
   describe('default props', () => {
     it('are applied to state for props in autoControlledProps', () => {
+      consoleUtil.disableOnce()
+
       const props = makeProps()
       const autoControlledProps = _.keys(props)
       const defaultProps = makeDefaultProps(props)
@@ -134,6 +142,8 @@ describe('extending AutoControlledComponent', () => {
     })
 
     it('allows trySetState to work on non-default autoControlledProps', () => {
+      consoleUtil.disableOnce()
+
       const props = makeProps()
       const autoControlledProps = _.keys(props)
       const defaultProps = makeDefaultProps(props)
@@ -155,6 +165,8 @@ describe('extending AutoControlledComponent', () => {
 
   describe('changing props', () => {
     it('sets state for props in autoControlledProps', () => {
+      consoleUtil.disableOnce()
+
       const props = makeProps()
       const autoControlledProps = _.keys(props)
 
@@ -189,6 +201,8 @@ describe('extending AutoControlledComponent', () => {
     })
 
     it('does not set state for default props when changed', () => {
+      consoleUtil.disableOnce()
+
       const props = makeProps()
       const autoControlledProps = _.keys(props)
       const defaultProps = makeDefaultProps(props)