ProtractorでngMockE2Eを読み込んでモックを使ってテストしている場合、build時にはngMockE2Eを除外したい
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のセクションは消えている。