diff --git a/karma.config.js b/karma.config.js new file mode 100644 index 00000000..6a4bf4ab --- /dev/null +++ b/karma.config.js @@ -0,0 +1,46 @@ +'use strict'; + +var webpackConfig = require('./webpack-base.config.js'); +// entry is determined by karma config 'files' array +webpackConfig.entry = {}; + +module.exports = function (config) { + config.set({ + browsers: [ 'Chrome' ], + browserNoActivityTimeout: 60000, + client: { + captureConsole: true, + mocha: { + ui: 'tdd' + }, + useIframe: true + }, + files: [ + 'src/specs.bundle.js' + ], + frameworks: [ + 'mocha' + ], + plugins: [ + 'karma-chrome-launcher', + 'karma-mocha', + 'karma-sourcemap-loader', + 'karma-webpack' + ], + preprocessors: { + 'src/specs.bundle.js': [ 'webpack', 'sourcemap' ] + }, + reporters: [ 'dots' ], + singleRun: true, + webpack: webpackConfig, + webpackMiddleware: { + stats: { + assetsSort: 'name', + colors: true, + children: false, + chunks: false, + modules: false + } + } + }); +}; diff --git a/package.json b/package.json index 9206c5a6..27daaef7 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ "build": "webpack --config webpack.config.js", "build:watch": "npm run build -- --watch", "build:example": "npm run build && cd example && webpack --config ./webpack.config.js", - "build:example:watch": "npm run build:example -- --watch" + "build:example:watch": "npm run build:example -- --watch", + "test": "NODE_ENV=test karma start karma.config.js", + "test:watch": "npm test -- --no-single-run" }, "dependencies": { "react": "^0.13.3" @@ -23,7 +25,14 @@ "babel-runtime": "^5.5.6", "css-loader": "^0.15.1", "extract-text-webpack-plugin": "^0.8.1", + "karma": "^0.13.9", + "karma-chrome-launcher": "^0.2.0", + "karma-mocha": "^0.2.0", + "karma-sourcemap-loader": "^0.3.5", + "karma-webpack": "^1.7.0", + "mocha": "^2.2.5", "node-libs-browser": "^0.5.2", + "object-assign": "^4.0.1", "postcss-loader": "^0.4.4", "style-loader": "^0.12.3", "webpack": "^1.9.10" diff --git a/src/specs.bundle.js b/src/specs.bundle.js new file mode 100644 index 00000000..57399cce --- /dev/null +++ b/src/specs.bundle.js @@ -0,0 +1,9 @@ +/** + * This module creates a context of all the spec files (following a naming + * convention). It's used as the webpack entry file for unit tests. + * + * See: https://github.com/webpack/docs/wiki/context + */ +const specContext = require.context('.', true, /.+\.spec\.jsx?$/); +specContext.keys().forEach(specContext); +module.exports = specContext; diff --git a/webpack-base.config.js b/webpack-base.config.js new file mode 100644 index 00000000..f855e06d --- /dev/null +++ b/webpack-base.config.js @@ -0,0 +1,24 @@ +var autoprefixer = require('autoprefixer-core'); + +module.exports = { + module: { + loaders: [ + { + test: /\.css$/, + loader: [ + 'style-loader', + 'css-loader?module&localIdentName=[hash:base64:5]', + '!postcss-loader' + ].join('!') + }, + { + test: /\.jsx?$/, + exclude: /node_modules/, + loader: 'babel-loader', + query: { cacheDirectory: true } + } + ] + }, + postcss: [ autoprefixer ] +}; + diff --git a/webpack.config.js b/webpack.config.js index 883bbeaf..91460c8c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,40 +1,22 @@ -var autoprefixer = require('autoprefixer-core'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var assign = require('object-assign'); +var base = require('./webpack-base.config.js'); var webpack = require('webpack'); var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; -module.exports = { +module.exports = assign({}, base, { entry: { main: './src/index' }, externals: [{ react: true }], - module: { - loaders: [ - { - test: /\.css$/, - loader: ExtractTextPlugin.extract( - 'style-loader', - 'css-loader?module&localIdentName=[hash:base64:5]!postcss-loader' - ) - }, - { - test: /\.jsx?$/, - exclude: /node_modules/, - loader: 'babel-loader', - query: { cacheDirectory: true } - } - ] - }, output: { - filename: 'main.js', - library: 'ReactWebSDK', + filename: 'react-native-web.js', + library: 'ReactNativeWeb', libraryTarget: 'commonjs2', path: './dist' }, plugins: [ - new ExtractTextPlugin('react-web-sdk.css'), new UglifyJsPlugin({ compress: { dead_code: true, @@ -43,6 +25,5 @@ module.exports = { warnings: true } }) - ], - postcss: [ autoprefixer ] -}; + ] +});