1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CentOS7 karma ChromeHeadless jasmine

Last updated at Posted at 2017-08-04

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)

1
0
0

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?