Gruntハンズオン(テスト編)

A. QUnit + Chromeでテストを行う
B. QUnit + PhantomJS でテストを行う
C. Jasmine + Chrome でテストを行う
D. Jasmine + PhantomJS でテストを行う
E. Mocha でテストを行う
F. Mocha で JUnit レポートを出力する
G. Mocha でカバレッジレポートを出力する
H. WebdriverIO で E2E テストを行う
Z. 参考資料

A. QUnit+Chromeでテストを行う

テストランナー Karma を使い、 QUnit フレームワークを使って書かれたテストを Chrome ブラウザ上で実行します。

インストール
Gruntfile.js を作る
テスト対象ファイルを用意する
実行する
カバレッジレポートを取得する

1. インストール

npm install karma-qunit --save-dev
npm install karma-chrome-launcher --save-dev
npm install karma-coverage --save-dev
npm install grunt-karma --save-dev

2. Gruntfile.js を作る

module.exports = function(grunt) {
  grunt.initConfig({
    karma: {
      unit: {
        options: {
          frameworks: ['qunit'],
          browsers: ['Chrome'],
          files: ['test/**/*.js', 'src/**/*.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-karma');
};

3. テスト対象ファイルを用意する

src フォルダを作成し、その中に hello.js という名前で以下のようなファイルを作る

function hello(name) {
  if(name) {
    return "Hello, " + name;
  } else {
    return "Bye";
  }
}

test フォルダを作成し、その中に helloTest.js という名前で以下のようなファイルを作る
```
QUnit.test( "hello test", function( assert ) {
  assert.equal(hello("Shoichi"), "Hello, Shoichi");
});
```

4. 実行する

以下のコマンドを実行すると Chrome ブラウザが起動し、テストが実行される（テスト結果はコンソール上に表示される）

grunt karma

ファイルを変更し保存するたびに、テスト実行が行われる。

5. カバレッジレポートを取得する

module.exports = function(grunt) {
  grunt.initConfig({
    karma: {
      unit: {
        options: {
          frameworks: ['qunit'],
          browsers: ['Chrome'],
          files: ['test/**/*.js', 'src/**/*.js'],
          reporters: ['progress', 'coverage'],
          preprocessors: {
            'src/**/*.js': ['coverage']
          },
          coverageReporter: {
            type : 'html',
            dir : 'coverage/'
          }
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-karma');
};

Gruntfile.js を上記のように変更すると coverage フォルダにカバレッジレポートが作成される

B. QUnit + PhantomJS でテストを行う

テストランナー Karma を使い、 QUnit フレームワークを使って書かれたテストを PhantomJS ブラウザ上で実行します。

このケースでは CI環境 (Jenkins) 上での実行を想定して、テスト結果を JUnit 形式の XML ファイルで出力してみます。

インストール
Gruntfile.js を作る
テスト対象ファイルを用意する
実行する
カバレッジレポートを取得する

1. インストール

npm install karma-qunit --save-dev
npm install karma-phantomjs-launcher --save-dev
npm install karma-junit-reporter --save-dev
npm install karma-coverage --save-dev
npm install grunt-karma --save-dev

2. Gruntfile.js を作る

module.exports = function(grunt) {
  grunt.initConfig({
    karma: {
      unit: {
        options: {
          frameworks: ['qunit'],
          browsers: ['PhantomJS'],
          singleRun: true,
          reporters: ['progress', 'junit'],
          junitReporter: {
            outputFile: 'test-results.xml'
          },
          files: ['test/**/*.js', 'src/**/*.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-karma');
};

test-results.xml にテスト結果が出力される設定

3. テスト対象ファイルを用意する

src フォルダを作成し、その中に hello.js という名前で以下のようなファイルを作る

function hello(name) {
  if(name) {
    return "Hello, " + name;
  } else {
    return "Bye";
  }
}

test フォルダを作成し、その中に helloTest.js という名前で以下のようなファイルを作る
```
QUnit.test( "hello test", function( assert ) {
  assert.equal(hello("Shoichi"), "Hello, Shoichi");
});
```

4. 実行する

以下のコマンドを実行するとテストが実行される

grunt karma

テスト結果は test-results.xml に出力される

5. カバレッジレポートを取得する

module.exports = function(grunt) {
  grunt.initConfig({
    karma: {
      unit: {
        options: {
          frameworks: ['qunit'], browsers: ['PhantomJS'], singleRun: true,
          reporters: ['progress',  'junit', 'coverage'], 
          files: ['test/**/*.js', 'src/**/*.js'],
          junitReporter: {
            outputFile: 'test-results.xml'
          },
          preprocessors: {
            'src/**/*.js': ['coverage']
          },
          coverageReporter: {
            type : 'html', dir : 'coverage/'
          }
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-karma');
};

上記のように変更すると coverage フォルダにカバレッジレポートが作成される

C. Jasmine+Chromeでテストを行う

テストランナー Karma を使い、 Jasmine フレームワークを使って書かれたテストを Chrome ブラウザ上で実行します。

インストール
Gruntfile.js を作る
テスト対象ファイルを用意する
実行する
カバレッジレポートを取得する

1. インストール

npm install karma-jasmine --save-dev
npm install karma-chrome-launcher --save-dev
npm install karma-coverage --save-dev
npm install grunt-karma --save-dev

2. Gruntfile.js を作る

module.exports = function(grunt) {
  grunt.initConfig({
    karma: {
      unit: {
        options: {
          frameworks: ['jasmine'],
          browsers: ['Chrome'],
          files: ['test/**/*.js', 'src/**/*.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-karma');
};

3. テスト対象ファイルを用意する

src フォルダを作成し、その中に hello.js という名前で以下のようなファイルを作る

function hello(name) {
  if(name) {
    return "Hello, " + name;
  } else {
    return "Bye";
  }
}

test フォルダを作成し、その中に helloTest.js という名前で以下のようなファイルを作る

describe('hello', function(){
  it('returns "Hello, [name]"', function(){
    expect(hello('Shoichi')).toBe('Hello, Shoichi')
  });
});

4. 実行する

以下のコマンドを実行すると Chrome ブラウザが起動し、テストが実行される（テスト結果はコンソール上に表示される）

grunt karma

ファイルを変更し保存するたびに、テスト実行が行われる。

5. カバレッジレポートを取得する

module.exports = function(grunt) {
  grunt.initConfig({
    karma: {
      unit: {
        options: {
          frameworks: ['jasmine'],
          browsers: ['Chrome'],
          files: ['test/**/*.js', 'src/**/*.js'],
          reporters: ['progress', 'coverage'],
          preprocessors: {
            'src/**/*.js': ['coverage']
          },
          coverageReporter: {
            type : 'html',
            dir : 'coverage/'
          }
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-karma');
};

Gruntfile.js を上記のように変更すると coverage フォルダにカバレッジレポートが作成される

D. Jasmine + PhantomJS でテストを行う

テストランナー Karma を使い、 Jasmine フレームワークを使って書かれたテストを PhantomJS ブラウザ上で実行します。

このケースでは CI環境 (Jenkins) 上での実行を想定して、テスト結果を JUnit 形式の XML ファイルで出力してみます。

インストール
Gruntfile.js を作る
テスト対象ファイルを用意する
実行する
カバレッジレポートを取得する

1. インストール

npm install karma-jasmine --save-dev
npm install karma-phantomjs-launcher --save-dev
npm install karma-junit-reporter --save-dev
npm install karma-coverage --save-dev
npm install grunt-karma --save-dev

2. Gruntfile.js を作る

module.exports = function(grunt) {
  grunt.initConfig({
    karma: {
      unit: {
        options: {
          frameworks: ['jasmine'],
          browsers: ['PhantomJS'],
          singleRun: true,
          reporters: ['progress', 'junit'],
          junitReporter: {
            outputFile: 'test-results.xml'
          },
          files: ['test/**/*.js', 'src/**/*.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-karma');
};

test-results.xml にテスト結果が出力される設定

3. テスト対象ファイルを用意する

src フォルダを作成し、その中に hello.js という名前で以下のようなファイルを作る

function hello(name) {
  if(name) {
    return "Hello, " + name;
  } else {
    return "Bye";
  }
}

test フォルダを作成し、その中に helloTest.js という名前で以下のようなファイルを作る

describe('hello', function(){
  it('returns "Hello, [name]"', function(){
    expect(hello('Shoichi')).toBe('Hello, Shoichi')
  });
});

4. 実行する

以下のコマンドを実行するとテストが実行される

grunt karma

テスト結果は test-results.xml に出力される

5. カバレッジレポートを取得する

module.exports = function(grunt) {
  grunt.initConfig({
    karma: {
      unit: {
        options: {
          frameworks: ['jasmine'], browsers: ['PhantomJS'], singleRun: true,
          reporters: ['progress',  'junit', 'coverage'], 
          files: ['test/**/*.js', 'src/**/*.js'],
          junitReporter: {
            outputFile: 'test-results.xml'
          },
          preprocessors: {
            'src/**/*.js': ['coverage']
          },
          coverageReporter: {
            type : 'html', dir : 'coverage/'
          }
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-karma');
};

上記のように変更すると coverage フォルダにカバレッジレポートが作成される

E. Mocha でテストを行う

grunt-mocha-test を利用すると Mocha フレームワークを使って書かれたテストを Node.js 上で実行することができます。

インストール
Gruntfile.js を作る
テスト対象ファイルを用意する
実行する

1. インストール

npm install grunt-mocha-test --save-dev

2. Gruntfile.js を作る

module.exports = function(grunt) {
  grunt.initConfig({
    mochaTest: {
      test: {
        src: ['test/**/*.js']
      }
    }
  });
  grunt.loadNpmTasks('grunt-mocha-test');
};

3. テスト対象ファイルを用意する

src フォルダを作成し、その中に hello.js という名前で以下のようなファイルを作る

module.exports = function(name) {
  if(name) {
    return "Hello, " + name;
  } else {
    return "Bye";
  }
};

test フォルダを作成し、その中に helloTest.js という名前で以下のようなファイルを作る

var hello = require('../src/hello.js');
var assert = require('assert');
describe('hello', function(){
  it('returns "Hello, [name]"', function(){
    assert.equal(hello('Shoichi'), 'Hello, Shoichi');
  });
});

4. 実行する

以下のコマンドを実行するとテストが実行される

grunt mochaTest

F. MochaでJUnitレポートを出力する

インストール
Gruntfile.js を作る
テスト対象ファイルを用意する
実行する

1. インストール

npm install grunt-mocha-test --save-dev
npm install grunt-env --save-dev
npm install xunit-file --save-dev
npm install mocha --save-dev

2. Gruntfile.js を作る

module.exports = function(grunt) {
  grunt.initConfig({
    env: {
      test: {
        XUNIT_FILE: 'test-results.xml'
      },
    },
    mochaTest: {
      test: {
        options: {
          reporter: 'xunit-file',
          require: 'xunit-file'
        },
        src: ['test/**/*.js']
      }
    }
  });
  grunt.loadNpmTasks('grunt-env');
  grunt.loadNpmTasks('grunt-mocha-test');
  grunt.registerTask('default', ['env', 'mochaTest']);
};

test-results.xml にテスト結果が出力される設定

3. テスト対象ファイルを用意する

src フォルダを作成し、その中に hello.js という名前で以下のようなファイルを作る

module.exports = function(name) {
  if(name) {
    return "Hello, " + name;
  } else {
    return "Bye";
  }
};

test フォルダを作成し、その中に helloTest.js という名前で以下のようなファイルを作る

var hello = require('../src/hello.js');
var assert = require('assert');
describe('hello', function(){
  it('returns "Hello, [name]"', function(){
    assert.equal(hello('Shoichi'), 'Hello, Shoichi');
  });
});

4. 実行する

以下のコマンドを実行するとテストが実行される

grunt

テスト結果は test-results.xml に出力される

G. Mochaでカバレッジレポートを出力する

インストール
Gruntfile.js を作る
converage/blanket.js を作る
テスト対象ファイルを用意する
実行する

1. インストール

npm install grunt-mocha-test --save-dev
npm install blanket --save-dev

2. Gruntfile.js を作る

module.exports = function(grunt) {
  grunt.initConfig({
    mochaTest: {
      test: {
        options: {
          reporter: 'spec',
          require: 'coverage/blanket'
        },
        src: ['test/**/*.js']
      },
      coverage: {
        options: {
          reporter: 'html-cov',
          quiet: true,
          captureFile: 'coverage.html'
        },
        src: ['test/**/*.js']
      }
    }
  });
  grunt.loadNpmTasks('grunt-mocha-test');
};

coverage.html にカバレッジレポートが出力される設定

3. converage/blanket.js を作る

converage フォルダを作成し、その下に以下のような内容で blanket.js を作成する

require('blanket')({
  pattern: require('path').join(__dirname, '..', 'src')
});

src フォルダの下にあるファイルをカバレッジ取得対象とする設定

4. テスト対象ファイルを用意する

src フォルダを作成し、その中に hello.js という名前で以下のようなファイルを作る

module.exports = function(name) {
  if(name) {
    return "Hello, " + name;
  } else {
    return "Bye";
  }
};

test フォルダを作成し、その中に helloTest.js という名前で以下のようなファイルを作る

var hello = require('../src/hello.js');
var assert = require('assert');
describe('hello', function(){
  it('returns "Hello, [name]"', function(){
    assert.equal(hello('Shoichi'), 'Hello, Shoichi');
  });
});

5. 実行する

以下のコマンドを実行するとテストが実行される

grunt mochaTest

coverage.html にカバレッジレポートが出力される

H. WebdriverIOでE2Eテストを行う

grunt-webdriver を利用すると、 Mocha と WebdriverIO を用いたテストを行うことができます。

インストール
Gruntfile.js の記述
テスト対象ファイルを用意する
実行する

1. インストール

grunt-webdriver をインストールする

npm install grunt-webdriver --save-dev

2. Gruntfile.js の記述

module.exports = function(grunt) {
  grunt.initConfig({
    webdriver: {
      options: {
        desiredCapabilities: {
          browserName: 'chrome'
        },
        reporter: 'xunit',
        output: 'test-results.xml'
      },
      test: {
        tests: ['test/**/*.js']
      }
    }
  });
  grunt.loadNpmTasks('grunt-webdriver');
};

この設定では Chrome ブラウザを起動してテストを行う
この設定では test フォルダの下にある *.js ファイルを対象としてテストを行う
この設定では test-results.xml にテスト結果を出力する

3. テスト対象ファイルを用意する

test フォルダを作成し、その中に test1.js という名前で以下のようなファイルを作る

var assert = require('assert');

describe('grunt-webdriver test', function () {
  it('checks if title contains the search query', function(done) {
    browser
      .url('https://github.com')
      .setValue('form.js-site-search-form input[type="text"]','grunt-webdriver')
      .submitForm('form.js-site-search-form')
      .getTitle(function(err,title) {
          assert(title.indexOf('grunt-webdriver') !== -1);
      })
      .end(done);
  });
});

GitHub にアクセスし、 'grunt-webdriver' で検索して一覧取得する、という動作を行う

4. 実行する

以下のコマンドを実行するとテストが実行される

grunt webdriver

test-results.xml にテスト結果が出力される

Z. 参考資料

『Grunt ハンズオン』 by Ototadana はクリエイティブ・コモンズ表示 4.0 国際ライセンスで提供されています。

Gruntハンズオン(テスト編)

目次

A. QUnit+Chromeでテストを行う

1. インストール

2. Gruntfile.js を作る

3. テスト対象ファイルを用意する

4. 実行する

5. カバレッジレポートを取得する

B. QUnit + PhantomJS でテストを行う

1. インストール

2. Gruntfile.js を作る

3. テスト対象ファイルを用意する

4. 実行する

5. カバレッジレポートを取得する

C. Jasmine+Chromeでテストを行う

1. インストール

2. Gruntfile.js を作る

3. テスト対象ファイルを用意する

4. 実行する

5. カバレッジレポートを取得する

D. Jasmine + PhantomJS でテストを行う

1. インストール

2. Gruntfile.js を作る

3. テスト対象ファイルを用意する

4. 実行する

5. カバレッジレポートを取得する

E. Mocha でテストを行う

1. インストール

2. Gruntfile.js を作る

3. テスト対象ファイルを用意する

4. 実行する

F. MochaでJUnitレポートを出力する

1. インストール

2. Gruntfile.js を作る

3. テスト対象ファイルを用意する

4. 実行する

G. Mochaでカバレッジレポートを出力する

1. インストール

2. Gruntfile.js を作る

3. converage/blanket.js を作る

4. テスト対象ファイルを用意する

5. 実行する

H. WebdriverIOでE2Eテストを行う

1. インストール

2. Gruntfile.js の記述

3. テスト対象ファイルを用意する

4. 実行する

Z. 参考資料