Merge pull request #96 from AlexKVal/visual-testing

Fix visual testing

Author: AlexKVal

README.md

@@ -119,3 +119,7 @@ Router.run(routes, function (Handler) {
 ## Contributing
 
 See [CONTRIBUTING](CONTRIBUTING.md)
+
+Use `npm run visual-test` command to check components appearance in browser. It will open browser with a blank page. Then after `webpack-server` finishes its bundling, the browser automatically will refresh the page.
+
+URL for it: http://localhost:8080/public/visual#/

package.json

@@ -8,7 +8,7 @@
     "build": "babel src --out-dir=lib && webpack && COMPRESS=1 webpack && npm run bower-prepare",
     "test": "npm run lint && karma start --single-run",
     "tdd": "karma start",
-    "visual-test": "webpack-dev-server --config webpack.test.config.babel.js",
+    "visual-test": "open http://localhost:8080/public/visual#/ && webpack-dev-server --config webpack.test.config.babel.js",
     "lint": "eslint ./",
     "bower-prepare": "babel-node scripts/bower-prepare.js",
     "patch": "release patch",
@@ -45,6 +45,7 @@
     "bootstrap": "^3.3.1",
     "chai": "^3.0.0",
     "colors": "^1.1.2",
+    "css-loader": "^0.15.3",
     "eslint": "^0.24.0",
     "eslint-plugin-babel": "^1.0.0",
     "eslint-plugin-mocha": "^0.4.0",
@@ -55,6 +56,8 @@
     "karma-mocha-reporter": "^1.0.2",
     "karma-phantomjs-launcher": "^0.2.0",
     "karma-webpack": "^1.5.0",
+    "less": "^2.5.1",
+    "less-loader": "^2.2.0",
     "lodash": "^3.10.0",
     "mocha": "^2.1.0",
     "mt-changelog": "^0.6.1",
@@ -65,6 +68,8 @@
     "react-router": ">=0.13.1",
     "release-script": "^0.2.1",
     "shelljs": "^0.5.1",
+    "style-loader": "^0.12.3",
+    "url-loader": "^0.5.6",
     "webpack": "^1.4.15",
     "webpack-dev-server": "^1.7.0",
     "yargs": "^3.15.0"

webpack.test.config.babel.js

@@ -15,7 +15,10 @@ module.exports = {
 
   module: {
     loaders: [
-      {test: /\.js/, loader: 'babel', exclude: /node_modules/}
+      {test: /\.js/, loader: 'babel', exclude: /node_modules/},
+      {test: /\.less$/, loader: 'style!css!less'},
+      {test:/\.woff|\.woff2$/, loader: 'url?prefix=font/&limit=5000'},
+      {test:/\.eot$|\.ttf$|\.svg$/, loader: 'file?prefix=font/'}
     ]
   }
 };