Centos7 karma ChromeHeadless jasmine

概要

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

前提

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

packege.jsonの生成

対話形式でpackege.jsonを設定する。

内容はすべてEnterで進む（初期値のまま）

packege.jsonの生成

$ npm init

karmaのインストール

karmaのインストール

$ npm install --save-dev karma

karmaの設定ファイル生成

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の項目を変更

karma.conf.jsの編集

$ vi karma.conf.js

karma.conf.js

    ...

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

    ...
}

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

ディレクトリ作成

$ mkdir js
$ mkdir test

chrome-launcherのインストール

chrome-launcherのインストール

$ npm install --save-dev karma-chrome-launcher

chromeのインストール

$ sudo yum install epel-release

• chrome.repoの作成

chrome.repoの作成

$ sudo vi /etc/yum.repos.d/chrome.repo

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

[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でインストール

yumでインストール

$ sudo yum info google-chrome-stable

mesa-libOSMesaのインストール

mesa-libOSMesaのインストール

$sudo yum install -y mesa-libOSMesa mesa-libOSMesa-devel

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

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

$ sudo ln -s /usr/lib64/libOSMesa.so.8.0.0 /opt/google/chrome/libosmesa.so

フォントもインストール

フォントもインストール

$sudo yum install liberation-mono-fonts liberation-narrow-fonts liberation-sans-fonts liberation-serif-fonts

jasmineのインストール

jasmineのインストール

$ npm install --save-dev jasmine karma-jasmine

テストの実行

プロジェクト構成

.
├── karma.conf.js
├── node_modules
├── package.json
├── test
│   └── sampleSpec.js
└── js
    └── sample.js

• 被テストファイル

js/sample.js

function add(x, y) {
  return x + y;
}

• テストファイル

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にテストコマンドを記述

package.json

{
  …
  "scripts": {
    "test": "node_modules/karma/bin/karma start"
  },
  …
}

• 実行

コンソール

$ npm test

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

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)