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

Automatically run the JavaScript test in multip...

Automatically run the JavaScript test in multiple browsers

"Automatically run the JavaScript test in multiple browsers"

Talk about JavaScript Test with Karma TestRunner.

at PHP Conference Kansai 2015
http://conference.kphpug.jp/2015/

----
PHPer だからこそ知っておきたい、JavaScript のテストを複数ブラウザで自動実行する話

PHP は得意だけれど JavaScript はいまいち苦手という人も多いのではないでしょうか。苦手なだけに自分が書いたコードに「このブラウザでは動くけど、あのブラウザだと動かない」などの不安が伴っていませんか? その不安を取り除くために、各ブラウザをそれぞれ起動して、あれこれ手で操作してテストをしていませんか?
また、QUnit や Mocha、Jasmine などのテストフレームワークを利用し、自動テストの環境を構築している場合でも、それぞれのテスト実行ファイルを各ブラウザで開いて実行していませんか?
こういった「各ブラウザを開いて実行する」という行為そのものを自動化し、コードの不安をより早く取り除く環境を「PHPer であり JavaScript に不安を持っていた私」が Karma を使って構築した経験をお話します。
■Karma http://karma-runner.github.io/
※発表内容に PHP のコードは出てきません :-)

Norio Suzuki

May 30, 2015
Tweet

More Decks by Norio Suzuki

Other Decks in Technology

Transcript

  1. 8IFOVTF,BSNB w :PVXBOUUPUFTUDPEFJOSFBMCSPXTFST w :PVXBOUUPUFTUDPEFJONVMUJQMFCSPXTFST EFTLUPQ NPCJMF UBCMFUT FUD 

    w :PVXBOUUPFYFDVUFZPVSUFTUTMPDBMMZEVSJOH EFWFMPQNFOU w :PVXBOUUPFYFDVUFZPVSUFTUTPOBDPOUJOVPVT JOUFHSBUJPOTFSWFS IUUQTHJUIVCDPNLBSNBSVOOFSLBSNB
  2. 8IFOVTF,BSNB w :PVXBOUUPFYFDVUFZPVSUFTUTPOFWFSZTBWF w :PVMPWFZPVSUFSNJOBM w :PVEPOUXBOUZPVS UFTUJOH MJGFUPTVDL w

    :PVXBOUUPVTF*TUBOCVMUPBVUPNBHJDBMMZHFOFSBUF DPWFSBHFSFQPSUT w :PVXBOUUPVTF3FRVJSF+4GPSZPVSTPVSDFpMFT IUUQTHJUIVCDPNLBSNBSVOOFSLBSNB
  3. ,FZXPSETPG3FDFOU+4 ,FZXPSE 1SPEVDUT 4FSWFS4JEF /PEFKTJPKT -BOHVBHF $P⒎FF4DSJQU5ZQF4DSJQU&$."4DSJQU 1BDLBHF OQN#PXFSDPNQPOFOU 5BTL3VOOFS

    (VMQ(SVOU 4UZMFTIFFU -&444BTT -JOU +4-JOU+4)JOU&4)JOU .PEVMF 3FRVJSF+4#SPXTFSJGZ8FC1BDL 'SBNFXPSL "OHVMBS+4#BDLCPOFKT3FBDU 5FTU'SBNFXPSL 26OJU.PDIB+BTNJOF #SPXTFS 1IBOUPN+4$BTQFS+4 5FTU3VOOFS ,BSNB
  4. 5SBEJUJPOBMTUZMF <!DOCTYPE html> <html> <head> <!-- Do NOT change this

    order --> <script src="functions.js"></script> <script src="library.js"></script> <script src="app.js"></script> </head> <body> <!-- [snip] --> </body> </html>
  5. /PU5FTUBCMF <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Karma Samples</title> <script>

    function add(x, y) { return x + y; } </script> </head> <body> <h1>Karma Samples</h1> </body> </html>
  6. &YUFSOBMJTHPPE <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Karma Samples</title> <script

    src="functions.js"></script> </head> <body> <h1>Karma Samples</h1> </body> </html>
  7. 4QFD3VOOFSIUNM <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jasmine Test Runner</title>

    <!-- Jasmine --> <link rel="stylesheet" href="spec/lib/jasmine/jasmine.css"> <script src="spec/lib/jasmine/jasmine.js"></script> <script src="spec/lib/jasmine/jasmine-html.js"></script> <script src="spec/lib/jasmine/boot.js"></script> <!-- Target code --> <script src="src/functions.js"></script> <!-- Test code --> <script src="spec/functionsSpec.js"></script> </head> <body> </body> </html>
  8. GVODUJPOT4QFDKT // functionsSpec.js describe('add() tests', function() { it('1 + 2

    equal 3', function() { expect(add(1, 2)).toBe(3); }); it('2 + 2 not equal 5', function() { expect(add(2, 2)).not.toBe(5); }); });
  9. 3VO

  10. /PUSIZUINJD  8SJUF5FTU  8SJUF$PEF  3FMPBE#SPXTFSˡ#SFBLUIFSIZUIN  3FMPBE#SPXTFSˡ#SFBLUIFSIZUIN 

    3FMPBE#SPXTFSˡ#SFBLUIFSIZUIN  8SJUF5FTU  8SJUF$PEF  3FMPBE#SPXTFSˡ#SFBLUIFSIZUIN  3FMPBE#SPXTFSˡ#SFBLUIFSIZUIN  3FMPBE#SPXTFSˡ#SFBLUIFSIZUIN
  11. 4UFQUPVTF,BSNB w *OTUBMM w 4UBSU,BSNB w 4UBSUUFTUTCZ,BSNB w 8BUDIDIBOHJOHpMFT w

    8SJUFUFTUPSDPEF w %FUFDUDIBOHJOHBpMFCZ,BSNB w 4UBSUUFTUTCZ,BSNB
  12. ,BSNBJOJU 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 plugin. Press tab to list possible options. Enter to move to the next question. > no Do you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome >
  13. ,BSNBJOJU What is the location of your source and test

    files ? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Enter empty string to move to the next question. > src/*.js > spec/*Spec.js > Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. "**/*.swp". Enter empty string to move to the next question. > Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options. > yes Config file generated at "/Users/suzuki/work/karma-samples/ karma.conf.js".
  14. ,BSNBDPOpHpMF // karma.conf.js module.exports = function(config) { config.set({ basePath: '',

    frameworks: ['jasmine'], files: [ 'src/*.js', 'spec/*Spec.js' ], exclude: [], preprocessors: {}, reporters: ['progress'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); };
  15. ,BSNBBEECSPXTFST // karma.conf.js module.exports = function(config) { // [snip] browsers:

    ['Chrome'], // [snip] }); }; // karma.conf.js module.exports = function(config) { // [snip] browsers: ['Chrome', 'Safari', 'Firefox'], // [snip] }); }; .PEJGZDPOpH
  16. LBSNBDPOGKT // karma.conf.js module.exports = function(config) { // [snip] browsers:

    [ 'Chrome', 'Safari', 'Firefox', 'PhantomJS' // added ], // [snip] }); };
  17. 6TFJFWNT w %PXOMPBE"MMWFSTJPOT % curl -s https://raw.githubusercontent.com/ xdissent/ievms/master/ievms.sh | bash

    w %PXOMPBE4QFDJpDWFSTJPOT % curl -s https://raw.githubusercontent.com/ xdissent/ievms/master/ievms.sh | env IEVMS_VERSIONS="7 9" bash
  18. LBSNBDPOGKT // karma.conf.js // [snip] browsers: [ //'Chrome', //'Safari', //'Firefox',

    //'PhantomJS', 'IE7 - WinXP', // added 'IE8 - WinXP', // added 'IE9 - Win7', // added 'IE10 - Win7', // added 'IE11 - Win7' // added ], // [snip]
  19. .ZGVUVSFQMBO w .PCJMF w J04MBVODIFS w "OESPJEMBVODIFS w 3FNPUF#SPXTFST w

    8FC%SJWFSMBVODIFS w #SPXTFS4UBDLMBVODIFS w .JDSPTPGU&EHF w