From 7e152137fa3cf66b4d853852f7f5ea6988f78f9c Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: 2015年7月15日 00:13:47 +0300
Subject: [PATCH] [fixed] visual testing
---
 README.md &#124; 4 ++++
 package.json &#124; 7 ++++++-
 webpack.test.config.babel.js &#124; 5 ++++-
 3 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 96e9373..8532924 100644
--- a/README.md
+++ b/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#/
diff --git a/package.json b/package.json
index 7b0c737..36b3515 100644
--- a/package.json
+++ b/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"
diff --git a/webpack.test.config.babel.js b/webpack.test.config.babel.js
index 4309301..3c1a7a8 100644
--- a/webpack.test.config.babel.js
+++ b/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&#124;\.woff2$/, loader: 'url?prefix=font/&limit=5000'},
+ {test:/\.eot$&#124;\.ttf$&#124;\.svg$/, loader: 'file?prefix=font/'}
 ]
 }
 };
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/react-bootstrap/react-router-bootstrap/pull/96.patch">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/react-bootstrap/react-router-bootstrap/pull/96.patch" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>