LoginSignup
10

More than 5 years have passed since last update.

ProtractorでngMockE2Eを読み込んでモックを使ってテストしている場合、build時にはngMockE2Eを除外したい

Posted at

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

ので、下のように<!-- build:js -->を、ファイル名指定なしで書いて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のセクションは消えている。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10