Upgrade to Pro — share decks privately, control downloads, hide ads and more …

一から始めるJavaScriptユニットテスト/js-unit-test-from-scratch

shibayu36
December 03, 2016

 一から始めるJavaScriptユニットテスト/js-unit-test-from-scratch

buiderscon tokyo 2016で発表した資料です

shibayu36

December 03, 2016
Tweet

More Decks by shibayu36

Other Decks in Technology

Transcript

  1. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc
  2. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ಉҰ໾ׂͷ΋ͷ͸࠷େ̍ͭͣͭ
  3. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc πʔϧ͸ඞཁͳ΋ͷΛਵ࣌
  4. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc
  5. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc
  6. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc
  7. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ຊൃදͰ͸͜ͷࡾͭΛબ୒
  8. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ؔ਺ͷςετ -> ΞαʔγϣϯͱϑϨʔϜϫʔΫ
  9. import assert from 'assert'; import { addNumber } from "../number-util";

    describe('addNumber', function () { it('଍͠ࢉͰ͖Δ', function () { assert.equal(addNumber(1, 2), 3, '1 + 2 = 3'); }); }); ςετΛॻ͘ src/js/test/number-util.js
  10. Πϯετʔϧ $ npm install karma $ npm install karma-browserify browserify

    babelify watchify $ npm install karma-chrome-launcher $ npm install karma-mocha
  11. Πϯετʔϧ $ npm install karma $ npm install karma-browserify browserify

    babelify watchify $ npm install karma-chrome-launcher $ npm install karma-mocha લॲཧ༻ ϒϥ΢βͭͳ͗ࠐΈ ςετϑϨʔϜϫʔΫͭͳ͗ࠐΈ
  12. // લॲཧઃఆ preprocessors: { 'src/js/test/*.js': ['browserify'] }, browserify: { transform:

    ['babelify'], }, // ར༻͢Δϒϥ΢βઃఆ browsers: ['Chrome'],
  13. import assert from 'assert'; import { appendList } from '../append-list';

    document.body.innerHTML = '<ul class="list"></ul>'; let ul = document.querySelector('.list'); assert.equal(ul.children.length, 0, '࠷ॳ͸0݅'); appendList(ul, 'ཁૉ1'); assert.equal(ul.children.length, 1, '݅਺͕1݅ʹ'); assert.equal(ul.children[0].textContent, 'ཁૉ1'); src/js/test/append-list.js
  14. import assert from 'assert'; import { appendList } from '../append-list';

    document.body.innerHTML = '<ul class="list"></ul>'; let ul = document.querySelector('.list'); assert.equal(ul.children.length, 0, '࠷ॳ͸0݅'); appendList(ul, 'ཁૉ1'); assert.equal(ul.children.length, 1, '݅਺͕1݅ʹ'); assert.equal(ul.children[0].textContent, 'ཁૉ1'); src/js/test/append-list.js ςετલʹHTMLΛೖΕΔ
  15. import assert from 'assert'; import { appendList } from '../append-list';

    document.body.innerHTML = '<ul class="list"></ul>'; let ul = document.querySelector('.list'); assert.equal(ul.children.length, 0, '࠷ॳ͸0݅'); appendList(ul, 'ཁૉ1'); assert.equal(ul.children.length, 1, '݅਺͕1݅ʹ'); assert.equal(ul.children[0].textContent, 'ཁૉ1'); src/js/test/append-list.js JSΛ࣮ߦ͠ཁૉΛ͔֬ΊΔ
  16. import assert from 'assert'; import { appendList } from '../append-list';

    document.body.innerHTML = '<ul class="list"></ul>'; let ul = document.querySelector('.list'); assert.equal(ul.children.length, 0, '࠷ॳ͸0݅'); appendList(ul, 'ཁૉ1'); assert.equal(ul.children.length, 1, '݅਺͕1݅ʹ'); assert.equal(ul.children[0].textContent, 'ཁૉ1'); src/js/test/append-list.js
  17. // html΋௥Ճ files: [ 'src/js/test/*.js', 'src/js/test/*.html' ], // લॲཧઃఆʹϓϥάΠϯ௥Ճ preprocessors:

    { 'src/js/test/*.js': ['browserify'], 'src/js/test/*.html': ['html2js'] }, karma.conf.js