CentOS7 karma ChromeHeadless jasmine


# Centos7 karma ChromeHeadless jasmine

## 概要
  JavaScriptのユニットテスト環境の構築

## 前提
  下記の内容がすでに完了している
- Vagrant上にCentos7を用意
- nodeのインストール
- npmのインストール


## packege.jsonの生成
対話形式でpackege.jsonを設定する。  
内容はすべてEnterで進む（初期値のまま）

```console:packege.jsonの生成
$ npm init

```

## karmaのインストール

```console:karmaのインストール
$ npm install --save-dev karma

```

karmaの設定ファイル生成

```console:karmaの設定ファイル生成
$ node_modules/karma/bin/karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js adapter into files.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

Which files do you want to test ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> js/*.js
> test/*Spec.js

Any files you want to exclude ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Testacular to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

```

### 生成したkarma.conf.jsの編集

今回はChromeHeadlessを使用するので
browsersの項目を変更

```console:karma.conf.jsの編集
$ vi karma.conf.js

```

```JavaScript:karma.conf.js

    ...

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['ChromeHeadless'],

    ...
}

```

### テストファイルと被テストファイル用のディレクトリを用意

```console:ディレクトリ作成
$ mkdir js
$ mkdir test

```

### chrome-launcherのインストール

```console:chrome-launcherのインストール
$ npm install --save-dev karma-chrome-launcher

```

### chromeのインストール

```console
$ sudo yum install epel-release

```

- chrome.repoの作成

```console:chrome.repoの作成
$ sudo vi /etc/yum.repos.d/chrome.repo

```

- 以下の内容でchrome.repoを作成する

```text
[google-chrome]  
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch  
enabled=1  
gpgcheck=1  
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
```

- yumでインストール

```console:yumでインストール
$ sudo yum info google-chrome-stable

```

### mesa-libOSMesaのインストール

```console:mesa-libOSMesaのインストール
$sudo yum install -y mesa-libOSMesa mesa-libOSMesa-devel

```

- シンボリックリンクの設定

```console:シンボリックリンクの設定
$ sudo ln -s /usr/lib64/libOSMesa.so.8.0.0 /opt/google/chrome/libosmesa.so

```

### フォントもインストール

```console:フォントもインストール
$sudo yum install liberation-mono-fonts liberation-narrow-fonts liberation-sans-fonts liberation-serif-fonts

```




## jasmineのインストール

```console:jasmineのインストール
$ npm install --save-dev jasmine karma-jasmine

```


## テストの実行

```text:プロジェクト構成
.
├── karma.conf.js
├── node_modules
├── package.json
├── test
│   └── sampleSpec.js
└── js
    └── sample.js
```
- 被テストファイル

```js:js/sample.js
function add(x, y) {
  return x + y;
}
```

- テストファイル

```js:test/sampleSpec.js
describe("加算", function() {
  it("1足す2が3であること", function() {
    expect(add(1, 2)).toBe(3);
  });
});

/* その他matcher
describe('Jasmine の使い方', function(){
  it('同一オブジェクトである', function(){
    var obj = {};
    var obj_ = obj;
    expect(obj_).toBe(obj);
    expect({}).not.toBe(obj);
  });

  it('値が等しい', function(){
    var obj = {};
    expect({}).toEqual(obj);
  });

  it('正規表現にマッチ', function(){
    expect('abc').toMatch('^[a-z]+$');
  });

  it('真偽値', function(){
    expect(true).toBeTruthy();
    expect(false).toBeFalsy();
  });

  it('値を含むかどうか', function(){
    expect([1,2,3]).toContain(1);
  });

  it('値の大小', function(){
    expect(1).toBeGreaterThan(0);
    expect(-1).toBeLessThan(0);
  });

  it('値が近い', function(){
    expect(0.001).toBeCloseTo(0);
  });

  it('例外を投げること', function(){
    var myfunc = function(){
      myUndefinedVar;
    };
    expect(myfunc).toThrow();
  });

  it('undefined であるかどうか', function(){
    expect(undefined).toBeUndefined();
  });

  it('null であるかどうか', function(){
    expect(null).toBeNull();
  });

  it('NaN であるかどうか', function(){
    expect(parseInt("str")).toBeNaN();
  });

});
*/

```

- package.jsonにテストコマンドを記述

```json:package.json
{
  …
  "scripts": {
    "test": "node_modules/karma/bin/karma start"
  },
  …
}
```

- 実行

```bash:コンソール
$ npm test

```

- 結果
テストが成功することを確認

```text
WARN [karma]: No captured browser, open http://localhost:9876/  
INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/  
INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency  
INFO [launcher]: Starting browser ChromeHeadless  
INFO [HeadlessChrome 0.0.0 (Linux 0.0.0)]: Connected on socket 77pv-qzaLu4efHnuAAAA with id 64642908  
HeadlessChrome 0.0.0 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.008 secs / 0.003 secs)

```