常連

# やりたいこと
Angularの公式ドキュメントに沿って、アプリを作成しました。
https://angular.jp/tutorial

作成したアプリに対してテストを実施したところ、エラーを吐くのでエラーを解決したいです。
どのようにしたら解決できるでしょうか。

# エラー
`ng test`を実施すると以下のエラーが出ます。テストプログラムは変えていません。

```
AppComponent should create the app
Failed: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <a routerLink="/heroes">Heroes</a>
</nav>
[ERROR ->]<router-outlet></router-outlet>
<app-messages></app-messages>
"): ng:///DynamicTestModule/AppComponent.html@5:0
```

# ソース
おそらくapp.module.tsの`@NgModule`が何か悪いのだと思っていますが、当てがつきません。

app.component.html
```html
<h1>{{ title }}</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>
```

app.component.ts
```TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Tour of Heroes';
}
```

app.module.ts
```TypeScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { HttpClientModule } from '@angular/common/http';

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroSearchComponent } from './hero-search/hero-search.component';
import { MessagesComponent } from './messages/messages.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
    // and returns simulated server responses.
    // Remove it when a real server is ready to receive requests.
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false },
    ),
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroesComponent,
    HeroDetailComponent,
    MessagesComponent,
    HeroSearchComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

app-routing.module.ts
```TypeScript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

```

Angular チュートリアルに沿って作成したアプリで、テストを実行するとエラーが出る

# 概要

* Node.jsのファイル分割について

## 実現したいこと

* 以下のテストを合格に保ちながら

```javascript
var ClassA = require('../src/main');

describe('requireTest', function() {
    it('methodC()を呼び出してOKが返ること', function() {
        var method_CD = ClassA.space_B.method_CD;
        expect(method_CD.methodC()).toBe('OK');
    });
});
```

* 以下の`メソッド2`を別のファイルに切り出したい

```javascript
var ClassA = (function () {
    function namespace(string) { //namespace関数
        var object = this;
        var levels = string.split('.');
        for (var i = 0, l = levels.length; i < l; i++) {
            if (typeof object[levels[i]] === 'undefined') {
                object[levels[i]] = {};
            }
            object = object[levels[i]];
        }
        return object;
    }
    return {
        namespace: namespace
    };
}());
module.exports = ClassA;

//メソッド1
(function () { //クラス名の追加、削除
    var space_A = ClassA.namespace("space_A");
    function methodA() {}
    function methodB() {}
    space_A.methodA = methodA;
    space_A.methodB = methodB;
}());

//メソッド2
(function () {
    function methodC() {
        return 'OK';
    }
    function methodD() {}
    ClassA.namespace("space_B").method_CD = {
        methodC: methodC,
        methodD: methodD
    };
}());
```

## つまづいている箇所

* 以下の書き方で書き出した場合、

```javascript
var ClassA = require('./main.js');

(function () {
    function methodC() {
        return 'OK';
    }
    function methodD() {}
    ClassA.namespace("space_B").method_CD = {
        methodC: methodC,
        methodD: methodD
    };
}());
```

* `undefined`となり、テストが不合格になってしまう。

JSの初心者です。どなたか知見のある方、御指南いただけたら幸いです。

## 備考

* テストツールはkarma, jasmine, webpackです。
* (できれば)即時実行関数の形は保ちたいと考えています。

Node.jsのファイル分割

現在、Karmaを用いたユニットテストの実装をしております。
そこで疑問に思ったことが、テスト対象のファイルが多くなると、karma.conf.jsのfilesに記載するテスト対象のコードとテストコードが増えてしまい、管理が面倒になってしまうように思えます。
ディレクトリ指定をして、テスト対象のファイルを個別に指定するということをしなくて済む手段というのはあるのでしょうか？

例えば、以下のディレクトリ構成のプロダクションコードがあるとします。
```
└── js
    ├── actions
    │   └── index.js
    ├── app
    │   └── app.js
    ├── components
    │   ├── App.js
    │   ├── Footer.js
    │   ├── Link.js
    │   ├── Todo.js
    │   └── TodoList.js
    ├── containers
    │   ├── AddTodo.js
    │   ├── FilterLink.js
    │   └── VisibleTodoList.js
    ├── index.js
    └── reducers
        ├── index.js
        ├── todos.js
        └── visibilityFilter.js
```

この場合、いちいちファイルを個別にkarma.conf.jsのfilesに記載していくのは面倒です。
例えば、jsのフォルダを指定したら、その直下の全てのファイルに対してテストを行うことができるようにする方法はあるのでしょうか？

[karma]karma.conf.jsにおける、テスト対象ファイルの一括指定

### 前提・実現したいこと
TypeScriptで書いたものをKarmaを使ってテストしています。
Blobの中身を検証したいので、FileReaderを使って読み込もうとしています。
FireFoxではうまく行く（想定通り失敗する）のですが、Chromeではexpect()にたどり着きません。
Chromeでも想定通り失敗する解決法はありますでしょうか？
よろしくお願いいたします。

### 該当のソースコード
'foo'と'bar'の同一性を比較しているので失敗するはず。
```TypeScript
let blob = new Blob(['foo'], {type: 'text/plain'});
let reader = new FileReader();
reader.addEventListener('load', ()=>{
    expect(reader.result).toBe('bar');
}//テストにおいてChromeではイベントが発生しないようです。
reader.readAsText(blob);
```

### 試したこと
テストがファイルの読み込み前に終了してしまうのかと思ったので、ファイルの読み込みが終わるまでkarmaを待たせるためにFileReaderのreadyStateプロパティが、２になるまでループするようにしたのですが、それもうまく行かず(ERROR [karma]: illegal access)、「baz」は一度も出ません。
```TypeScript
let blob = new Blob(['foo'], {type: 'text/plain'});
let reader = new FileReader();
reader.addEventListener('load', ()=>{
    expect(reader.result).toBe('bar');
}
reader.readAsText(blob);
while(reader.readyState != 2) {
    console.log('baz');//一度も実行されない
}
```

FileReaderによるBlobの読み込みがKarmaでのテストにおいてChromeでは発生しません。

サーバーからアドレスを取ってくるjavascriptプログラムで目視では上手くいっているのですが、karmaでテストを自動化しようとしたところ上手くいきません。

当該assertionが失敗してしまいます。
Expected '' to be 'Nagono Nakamura Ward Nagoya Aichi Prefecture'.

コードとテストは以下のようなものです。
```Karma
/* eslint-env jasmine */
jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
describe('autoFillAddress', function() {

  beforeEach(function() {
    var fixture = '<form id="autoFillSet" class="h-adr">' +
      '<input class="p-postal-code" type="text">' +
      '<input class="p-address" type="text">' +
      '</form>';

    document.body.insertAdjacentHTML(
      'afterbegin',
      fixture);
    document.page3 = {};
    var event = document.createEvent('Event');
    event.initEvent('DOMContentLoaded', true, true);
    document.dispatchEvent(event);
  });

  it('japanese address in english', function(done) {
    document.querySelector(".p-postal-code").value = '450-0001';
    var evt = document.createEvent("KeyboardEvent");
    evt.initEvent("keyup", false, true);
    document.querySelector(".p-postal-code").dispatchEvent(evt);
    setTimeout(() => {
      expect(document.querySelector(".p-address").value).toBe('Nagono Nakamura Ward Nagoya Aichi Prefecture');
      done();
    }, 2000);
  });
});
```

```javascript
import AutofillAddressApi from './api/AutofillAddressApi';

document.addEventListener('DOMContentLoaded', () => {
      const postalCode = addressForm.querySelector('.p-postal-code');
      const address = addressForm.querySelector('.p-address');

      postalCode.addEventListener('keyup', () => {
            AutofillAddressApi.getAddress(query)
              .then((res) => {
                if (res.body.status === 'OK') {
                  const addressAll = res.body.results[0].addressAll;
                  address.value = AutofillAddressApi.adjustAddressByLanguage(language, addressAll);
                }
              });
          });
});

```

追記
１.ライブラリが更新されないと実行できないでしょうか？
https://github.com/karma-runner/karma/issues/1403

２.やってみたけど上手くいかず
https://stackoverflow.com/questions/43083419/karma-mocha-how-to-test-method-that-listens-to-domcontentloaded-event

karma で DOMContentLoaded の javascript テストが上手くいかない

### 実現したいこと

javascriptの単体テストを自動で行いたい。
下記の記事を最後まで実行したい。
[フロントエンドにテストを導入](https://qiita.com/howdy39/items/cdd5b252096f5a2fa438)

### 発生している問題・エラーメッセージ

```
(node:4371) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
⚠ ｢wdm｣: Hash: 841c81d5e12fc948407b
Version: webpack 4.17.1
Time: 11059ms
Built at: 2018-08-29 19:41:44

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ℹ ｢wdm｣: Compiled with warnings.
ℹ ｢wdm｣: Compiling...
29 08 2018 19:41:45.180:WARN [karma]: No captured browser, open http://localhost:9876/
⚠ ｢wdm｣: Hash: fb8f81e72c37d049da1b
Version: webpack 4.17.1
Time: 11165ms
Built at: 2018-08-29 19:41:45
```

### package.json

```json
{
  "name": "test-test",
  "version": "1.0.0",
  "main": "test.js",
  "dependencies": {},
  "devDependencies": {
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-webpack": "^3.0.0",
    "mocha": "^5.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "scripts": {
    "test": "karma start",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}
```
```js
// Karma configuration
// Generated on Tue Aug 28 2018 19:29:52 GMT+0900 (GMT+09:00)

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
      'documents/works/test/test.js'
    ],
    exclude: [
    ],
    preprocessors: {
        'documents/works/test/test.js': ['webpack']
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

```

### 試したこと
`"build": "webpack --mode development"`にしたり
extract-text-webpack-pluginを入れましたがお手上げな状態です。

[webpack/issues/6568](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
`process.traceDeprecation = true;`をkarma.config.jsに追記、
karma-webpack.jsに`process.noDeprecation = true;`を追記して`$ node test`を実行したところ
```
⚠ ｢wdm｣: Hash: 841c81d5e12fc948407b
Version: webpack 4.17.1
Time: 11063ms
Built at: 2018-08-31 19:32:41

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ℹ ｢wdm｣: Compiled with warnings.
ℹ ｢wdm｣: Compiling...
31 08 2018 19:32:41.835:WARN [karma]: No captured browser, open http://localhost:9876/
⚠ ｢wdm｣: Hash: fb8f81e72c37d049da1b
Version: webpack 4.17.1
Time: 11199ms
Built at: 2018-08-31 19:32:41
                       Asset      Size  Chunks             Chunk Names
documents/works/test/test.js  13.8 KiB       0  [emitted]  documents/works/test/test.js
Entrypoint documents/works/test/test.js = documents/works/test/test.js
[0] (webpack)/buildin/global.js 489 bytes {0} [built]
[1] ./documents/works/test/test.js 275 bytes {0} [built]
[2] ./node_modules/assert/assert.js 15.1 KiB {0} [built]
[3] ./node_modules/util/util.js 15.2 KiB {0} [built]
[4] ./node_modules/process/browser.js 5.29 KiB {0} [built]
[5] ./node_modules/util/support/isBufferBrowser.js 203 bytes {0} [built]
[6] ./node_modules/inherits/inherits_browser.js 672 bytes {0} [built]
[7] ./documents/works/sample.js 420 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ℹ ｢wdm｣: Compiled with warnings.
31 08 2018 19:32:41.842:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/
31 08 2018 19:32:41.843:INFO [launcher]: Launching browser Chrome with unlimited concurrency
31 08 2018 19:32:41.846:INFO [launcher]: Starting browser Chrome
```
`(node:4371) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead`は出なくなりましたがテストは走っていない状態？です。

### 試したこと2
####package.json
`"build": "webpack --mode development"`を
`"build": "webpack --mode=development"`に変更
`"build": "webpack --mode = development"`も試してみました。
```json
{
  "name": "test-test",
  "version": "1.0.0",
  "main": "test.js",
  "dependencies": {},
  "devDependencies": {
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-webpack": "^3.0.0",
    "mocha": "^5.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "scripts": {
    "test": "karma start",
    "build": "webpack --mode=development"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}
```
####webpack.config.js
`mode: 'development',`を追加してみました。
```js
module.exports = {
    mode: 'development',
    entry: {
        app: 'src/index.js'
    },
    output: {
        path: 'dist/',
        filename: '[name].bundle.js'
    }
};
```
実行してみましたがメッセージは変わらずでした。

###試したこと３
karma.conf.jsに`webpack: require('./webpack.config'),`を追記しました。
####karma.conf.js
```js
    preprocessors: {
        './test/test.js': ['webpack']
    },
    webpack: require('./webpack.config'),
```
WARNING in configuration〜のメッセージは出なくなりました。
```
ℹ ｢wdm｣: wait until bundle finished: noop
03 09 2018 20:32:08.204:WARN [karma]: No captured browser, open http://localhost:9876/
ℹ ｢wdm｣: Hash: 8fb8bf89b9e3a998e103
Version: webpack 4.17.1
Time: 11105ms
Built at: 2018-09-03 20:32:08
       Asset      Size        Chunks             Chunk Names
         app   4.9 KiB           app  [emitted]  app
test/test.js  45.9 KiB  test/test.js  [emitted]  test/test.js
Entrypoint app = app
Entrypoint test/test.js = test/test.js
[./node_modules/assert/assert.js] 15.1 KiB {test/test.js} [built]
[./node_modules/inherits/inherits_browser.js] 672 bytes {test/test.js} [built]
[./node_modules/process/browser.js] 5.29 KiB {test/test.js} [built]
[./node_modules/util/support/isBufferBrowser.js] 203 bytes {test/test.js} [built]
[./node_modules/util/util.js] 15.2 KiB {test/test.js} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {test/test.js} [built]
[./src/index.js] 353 bytes {app} [built]
[./src/sample.js] 420 bytes {app} {test/test.js} [built]
[./test/test.js] 279 bytes {test/test.js} [built]
ℹ ｢wdm｣: Compiled successfully.
03 09 2018 20:32:08.220:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/
03 09 2018 20:32:08.220:INFO [launcher]: Launching browser Chrome with unlimited concurrency
03 09 2018 20:32:08.230:INFO [launcher]: Starting browser Chrome
```
まだテストは動かないようです。

必要な情報があれば追記しますのでよろしくお願いします。

フロントエンドにテストを導入したいがkarmaの導入でつまずいた

実際に動いているjavascriptのテストをkarmaとphantom.jsで自動化しています。safariやchromeを使い、目視で確認すると動いていますが、karma+phantom.js で動かそうとすると上手くサーバーから情報を取得できていません。返り値がnullです。


下記のプログラムを
```javascript
import request from 'superagent';

export default class AutofillAddressApi {
  static getCountryCode() {
    return new Promise((resolve, reject) => {
      request
        .get(`/countries/1/getCode`)
        .end((err, res) => {
          if (err) {
            reject(err);
          }
          resolve(res.body.country_code);
        });
    });
  }
}
```

safariやchromeブラウザを使ってしゅどうでアクセスすると、JSONを返してくれます。
{"country_code":"JP"}

karma + phantomjs + jasmin で下記のエラーが返ってきます。
```javascript
PhantomJS 2.1.1 (Linux 0.0.0) local server access FAILED
	TypeError: null is not an object (evaluating 'res.body.country_code') thrown
```

下記のPRなど関係してそうですが、使い方がわかりません。
https://github.com/karma-runner/karma/pull/2285
https://github.com/karma-runner/karma/pull/2555

docker内の karma + superagent + phantomjs でローカルサーバーやインターネットにアクセスできない

jasmine2 でフォーム送信のテストをしたいのですが、サンプルが見つからずやり方がわかりません。jasmine1では下記のようなコードが使えるようなのですが、jasmine2で使えません。

TypeError: undefined is not a function (evaluating 'jasmine.createSpy().
といったエラーが出てしまいます。

```jasmine2
it('calls ajax post on export button click', function() {
  view.render();
  var form = $('#export_images_xml_form');
  var submitCallback = jasmine.createSpy().andReturn(false);
  form.submit(submitCallback);

  $('#export_images_xml_button').click();

  expect(form.attr('action')).toEqual('/export');
  expect($('#export_images_xml_form input').attr('value')).toEqual('22,33,44');
  expect(submitCallback).toHaveBeenCalled();
});
```

これをどう書き換えたらうまくいくでしょうか。