diff --git a/README.md b/README.md index 3b5862f..9cacc78 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ The following features are planned to be included in the final version: - [x] Webpack and Webpack-Dev-Server, including hot-loader - [x] Babel and JSX -- [ ] Mocha Unit tests (*optional*) +- [x] Mocha Unit tests (*optional*) - [ ] React.Router - [x] EsLint Support - [x] No dependency on grunt, gulp or the next hot taskrunner! @@ -31,6 +31,9 @@ npm run dist # Run unit tests npm test + +# Lint all files in src (also automatically done AFTER tests are run) +npm run lint ``` You can also use your globally installed version of webpack like this: diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..9c5bb02 --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,56 @@ +var path = require('path'); +var srcPath = __dirname + '/src/'; + +module.exports = function(config) { + config.set({ + basePath: '', + browsers: ['PhantomJS'], + files: [ + 'test/loadtests.js' + ], + port: 8080, + captureTimeout: 60000, + frameworks: ['phantomjs-shim', 'mocha', 'chai'], + client: { + mocha: { + + } + }, + singleRun: true, + reporters: ['mocha'], + preprocessors: { + 'test/loadtests.js': ['webpack', 'sourcemap'] + }, + webpack: { + cache: true, + devtool: 'inline-source-map', + module: { + loaders: [ + { + test: /\.(css|png|jpg|gif|woff|woff2)$/, + loader: 'null-loader' + }, + { + test: /\.(js|jsx)$/, + loader: 'babel-loader', + exclude: /node_modules/ + } + ] + }, + resolve: { + extensions: ['', '.js', '.jsx'], + alias: { + actions: srcPath + '/actions/', + helpers: path.join(__dirname, 'test', 'helpers'), + components: srcPath + '/components/', + sources: srcPath + '/sources/', + stores: srcPath + '/stores/', + styles: srcPath + '/styles/' + } + } + }, + webpackServer: { + noInfo: true + } + }); +}; diff --git a/package.json b/package.json index 0658670..ffc8759 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,12 @@ "private": true, "scripts": { "start": "node server.js --env=dev", + "test": "karma start", + "posttest": "npm run lint", "serve": "node server.js --env=dev", "servedist": "node server.js --env=dist", "dist": "webpack", - "test": "echo \"Error: no test specified\" && exit 1" + "lint": "eslint ./src" }, "repository": { "type": "git", @@ -29,13 +31,25 @@ "devDependencies": { "babel-core": "^5.8.22", "babel-loader": "^5.3.2", + "chai": "^3.2.0", "css-loader": "^0.16.0", "eslint": "^1.2.1", "eslint-loader": "^1.0.0", "eslint-plugin-react": "^3.3.0", "file-loader": "^0.8.4", + "karma": "^0.13.9", + "karma-chai": "^0.1.0", + "karma-mocha": "^0.2.0", + "karma-mocha-reporter": "^1.1.1", + "karma-phantomjs-launcher": "^0.2.1", + "karma-phantomjs-shim": "^1.1.1", + "karma-sourcemap-loader": "^0.3.5", + "karma-webpack": "^1.7.0", "minimist": "^1.2.0", + "mocha": "^2.2.5", + "null-loader": "^0.1.1", "open": "0.0.5", + "phantomjs": "^1.9.18", "react-hot-loader": "^1.2.9", "style-loader": "^0.12.3", "url-loader": "^0.5.6", diff --git a/src/components/Main.js b/src/components/Main.js index 1b80743..503d62d 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -6,7 +6,7 @@ import React from 'react/addons'; class AppComponent extends React.Component { render() { return ( -
+
Content
); diff --git a/test/actions/.keep b/test/actions/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/components/MainTest.js b/test/components/MainTest.js new file mode 100644 index 0000000..0a1c498 --- /dev/null +++ b/test/components/MainTest.js @@ -0,0 +1,27 @@ +/*eslint-env node, mocha */ +/*global expect */ +/*eslint no-console: 0*/ +'use strict'; + +// Uncomment the following lines to use the react test utilities +// import React from 'react/addons'; +// const TestUtils = React.addons.TestUtils; +import createComponent from 'helpers/shallowRenderHelper'; + +import Main from 'components/Main'; + +describe('MainComponent', () => { + let MainComponent; + + beforeEach(() => { + MainComponent = createComponent(Main); + }); + + it('should have its component name as default className', () => { + expect(MainComponent._store.props.className).to.equal('index'); + }); + + it('should do something!', () => { + expect(true).to.be.true; + }); +}); diff --git a/test/helpers/shallowRenderHelper.js b/test/helpers/shallowRenderHelper.js new file mode 100644 index 0000000..37a1363 --- /dev/null +++ b/test/helpers/shallowRenderHelper.js @@ -0,0 +1,23 @@ +/** + * Function to get the shallow output for a given component + * As we are using phantom.js, we also need to include the fn.proto.bind shim! + * + * @see http://simonsmith.io/unit-testing-react-components-without-a-dom/ + * @author somonsmith + */ +import React from 'react/addons'; +const TestUtils = React.addons.TestUtils; + +/** + * Get the shallow rendered component + * + * @param {Object} component The component to return the output for + * @param {Object} props [optional] The components properties + * @param {Mixed} ...children [optional] List of children + * @return {Object} Shallow rendered output + */ +export default function createComponent(component, props = {}, ...children) { + const shallowRenderer = TestUtils.createRenderer(); + shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0])); + return shallowRenderer.getRenderOutput(); +} diff --git a/test/loadtests.js b/test/loadtests.js new file mode 100644 index 0000000..a3fbd63 --- /dev/null +++ b/test/loadtests.js @@ -0,0 +1,2 @@ +var testsContext = require.context('.', true, /(Test\.js$)|(Helper\.js$)/); +testsContext.keys().forEach(testsContext); diff --git a/test/sources/.keep b/test/sources/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/stores/.keep b/test/stores/.keep new file mode 100644 index 0000000..e69de29