yeomanのgenerator-angularで作ったプロジェクトで、grunt-wiredepを使っているので、素直にE2Eテストでangular-mocksを使おうとすると、bower.jsonのdevDependenciesからdependenciesに移す必要がある。
bower.json
{
"name": "MyApp",
"version": "0.0.1",
"dependencies": {
"angular": "1.2.23",
"angular-resource": "1.2.23",
"angular-cookies": "1.2.23",
"angular-sanitize": "1.2.23",
"angular-animate": "1.2.23",
"angular-touch": "1.2.23",
"angular-ui-router": "~0.2.11",
"angular-i18n": "~1.2.23"
},
"devDependencies": {
"angular-mocks": "1.2.23" // dependenciesに移すと…
},
"overrides": {
"angular-i18n": {
"main": "angular-locale_ja-jp.js"
}
},
"appPath": "app"
}
しかし、これだとテスト時はいいが、grunt buildして製品用に吐き出した時にangular-mocks.jsも一緒に結合、圧縮されてしまう。
index.html
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/ng-file-upload-shim/angular-file-upload-shim.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-i18n/angular-locale_ja-jp.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<!-- wiredepにより、ここに挿入されるので、一緒にまとめられてしまう!! -->
<!-- endbower -->
<!-- endbuild -->
何かいい方法はないかと調べたら、そのものずばりであった。
…And $httpBackend Mock For All (Unit & E2E) Testings
ので、下のようにを、ファイル名指定なしで書いてangular-mocks.jsを囲う。
index.html
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/ng-file-upload-shim/angular-file-upload-shim.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-i18n/angular-locale_ja-jp.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js -->
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<!-- endbuild -->
これでテスト時は普通にモックが使えて、grunt buildすると、angular-mocks.jsのセクションは消えている。