$30 off During Our Annual Pro Sale. View Details »

Automatically run the JavaScript test in multiple browsers

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. ʙ1)1FS͔ͩΒͦ͜஌͓͖͍ͬͯͨʙ
    +BWB4DSJQUͷςετΛ
    ෳ਺ϒϥ΢βͰࣗಈ࣮ߦ͢Δ࿩
    1)1$POGFSFODF,BOTBJ

    !TV[VLJ

    View Slide

  2. 4IPVMELOPXCFDBVTFZPVBSF1)1FS
    "VUPNBUJDBMMZSVOUIF+BWB4DSJQU
    UFTUJONVMUJQMFCSPXTFST
    1)1$POGFSFODF,BOTBJ

    !TV[VLJ

    View Slide

  3. "HFOEB
    w "CPVUNF
    w 5PEBZTUIFNF
    w 3FDFOU+BWB4DSJQU
    w ,BSNB
    w $PODMVTJPO

    View Slide

  4. "CPVUNF
    w *MPWFTV[VLJBDDPVOU
    w IUUQTUXJUUFSDPNTV[VLJ
    w IUUQTHJUIVCDPNTV[VLJ
    w IUUQTLFZCBTFJPTV[VLJ
    w IUUQTV[VLJUEJBSZOFU

    View Slide

  5. "CPVUNF
    w *SFDFJWFENFOUJPOTBCPVU46;6,*.0503
    $03103"5*0/ FWFSZEBZ

    View Slide

  6. 1BTUQSFTFOUBUJPO
    IUUQTTQFBLFSEFDLDPNTV[VLJ

    View Slide

  7. .Z1)1DPEFJT
    -(5.

    View Slide

  8. .Z+BWB4DSJQU
    DPEFJTOPU-(5.

    View Slide

  9. 5PEBZTUIFNF

    View Slide

  10. ,BSNB
    IUUQLBSNBSVOOFSHJUIVCJP

    View Slide

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

    w :PVXBOUUPFYFDVUFZPVSUFTUTMPDBMMZEVSJOH
    EFWFMPQNFOU
    w :PVXBOUUPFYFDVUFZPVSUFTUTPOBDPOUJOVPVT
    JOUFHSBUJPOTFSWFS
    IUUQTHJUIVCDPNLBSNBSVOOFSLBSNB

    View Slide

  12. 8IFOVTF,BSNB
    w :PVXBOUUPFYFDVUFZPVSUFTUTPOFWFSZTBWF
    w :PVMPWFZPVSUFSNJOBM
    w :PVEPOUXBOUZPVS UFTUJOH
    MJGFUPTVDL
    w :PVXBOUUPVTF*TUBOCVMUPBVUPNBHJDBMMZHFOFSBUF
    DPWFSBHFSFQPSUT
    w :PVXBOUUPVTF3FRVJSF+4GPSZPVSTPVSDFpMFT
    IUUQTHJUIVCDPNLBSNBSVOOFSLBSNB

    View Slide

  13. SFBMCSPXTFST
    IUUQTLBSNBSVOOFSHJUIVCJPDPOpHCSPXTFSTIUNM

    View Slide

  14. #SPXTFSDPNQBUJCJMJUZ
    IUUQDBOJVTFDPNGFBUDIBOOFMNFTTBHJOH

    View Slide

  15. ,BSNBEFNP

    View Slide

  16. 3FDFOU
    +BWB4DSJQU

    View Slide

  17. ,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

    View Slide

  18. 4FSWFS4JEF

    1BDLBHF

    View Slide

  19. /PEFKT
    IUUQTOPEFKTPSH

    View Slide

  20. OQN
    IUUQTXXXOQNKTDPN

    View Slide

  21. 5BTL3VOOFS

    View Slide

  22. (VMQ
    IUUQHVMQKTDPN

    View Slide

  23. (SVOU
    IUUQHSVOUKTDPN

    View Slide

  24. (SVOU1)16OJU
    IUUQFOHJOFFSJOHDSPDPTKQQPTUHSVOUXBUDIQIQVOJU

    View Slide

  25. .PEVMF

    View Slide

  26. 3FRVJSF+4
    IUUQSFRVJSFKTPSH

    View Slide

  27. #SPXTFSJGZ
    IUUQCSPXTFSJGZPSH

    View Slide

  28. XFCQBDL
    IUUQXFCQBDLHJUIVCJP

    View Slide

  29. 5SBEJUJPOBMTUZMF












    View Slide

  30. 3FRVJSF+4










    View Slide

  31. 3FRVJSF+4
    // app.js
    require(['functions', 'library'],
    function(functions, library) {
    }
    );

    View Slide

  32. #SPXTFSJGZXFCQBDL









    View Slide

  33. #SPXTFSJGZXFCQBDL
    // app.js
    var functions = require('functions');
    var library = require('library');

    View Slide

  34. &$."4DSJQU
    // app.js
    import 'functions' as functions;
    import 'library' as library;

    View Slide

  35. 6OJU5FTU

    View Slide

  36. 5FTUBCMFDPEF

    View Slide

  37. /PU5FTUBCMF




    Karma Samples
    <br/>function add(x, y) {<br/>return x + y;<br/>}<br/>


    Karma Samples


    View Slide

  38. &YUFSOBMJTHPPE




    Karma Samples



    Karma Samples


    View Slide

  39. .PSF5FTUBCMF
    w 6TF.PEVMFTZTUFN
    w 3FRVJSF+4
    w #SPXTFSJGZ
    w XFCQBDL
    w &$."4DSJQU
    w #VU OPUGPDVTJUUPEBZ

    View Slide

  40. +BTNJOF
    IUUQKBTNJOFHJUIVCJP

    View Slide

  41. +BTNJOFJOTUBMM
    % npm install jasmine-core --save-dev

    View Slide

  42. +BTNJOFCBTJD
    5FTU3VOOFS )5.-

    GVODUJPOTKT
    GVODUJPOT4QFDKT
    TDSJQUTSDGVODUJPOTKTTDSJQU
    TDSJQUTSDGVODUJPOT4QFDKTTDSJQU

    View Slide

  43. 4QFD3VOOFSIUNM




    Jasmine Test Runner













    View Slide

  44. GVODUJPOTKT
    // functions.js
    function add(x, y) {
    return x + y;
    }

    View Slide

  45. 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);
    });
    });

    View Slide

  46. 3VO

    View Slide

  47. 3VO 3VO 3VO

    View Slide

  48. /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

    View Slide

  49. ,BSNB
    IUUQLBSNBSVOOFSHJUIVCJP

    View Slide

  50. 4UFQUPVTF,BSNB
    w *OTUBMM
    w 4UBSU,BSNB
    w 4UBSUUFTUTCZ,BSNB
    w 8BUDIDIBOHJOHpMFT
    w 8SJUFUFTUPSDPEF
    w %FUFDUDIBOHJOHBpMFCZ,BSNB
    w 4UBSUUFTUTCZ,BSNB

    View Slide

  51. ,BSNBJOTUBMM
    % npm install \
    karma \
    karma-chrome-launcher \
    --save-dev

    View Slide

  52. ,BSNBJOJU
    % ./node_modules/karma/bin/karma init

    View Slide

  53. ,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
    >

    View Slide

  54. ,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".

    View Slide

  55. ,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
    });
    };

    View Slide

  56. ,BSNBTUBSU
    % ./node_modules/karma/bin/karma start

    View Slide

  57. ,BSNBTUBSU
    ᶃ4UBSU,BSNB

    View Slide

  58. ,BSNBTUBSU
    ᶄPQFO$ISPNFCZ,BSNB
    ᶅ&YFDVUFUFTUT
    ᶆ8BUDIpMFT

    View Slide

  59. ,BSNBBEECSPXTFST
    % npm install \

    karma-safari-launcher \

    karma-firefox-launcher \

    --save-dev

    View Slide

  60. MBVODIFS
    ,BSNB
    DISPNFMBVODIFS
    TBGBSJMBVODIFS
    pSFGPYMBVODIFS

    View Slide

  61. ,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

    View Slide

  62. ,BSNBBEECSPXTFST

    View Slide

  63. ,BSNBBEECSPXTFST

    View Slide

  64. TQFDJpDCSPXTFS
    % ./node_modules/karma/bin/karma start \

    --browsers 'Firefox'

    View Slide

  65. VTFPO$*TFWFS

    View Slide

  66. 1IBOUPN+4
    IUUQQIBOUPNKTPSH

    View Slide

  67. ,BSNBBEECSPXTFST
    % npm install \

    karma-phantomjs-launcher \

    --save-dev

    View Slide

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

    View Slide

  69. PO$*TFSWFS
    % ./node_modules/karma/bin/karma start \

    --browsers 'PhantomJS'

    View Slide

  70. *OUFSOFU&YQMPSFS

    View Slide

  71. 7JSUVBM#PY
    IUUQTXXXWJSUVBMCPYPSH

    View Slide

  72. EFWNPEFSOJF
    IUUQEFWNPEFSOJF

    View Slide

  73. NPEFSOJF PMETUZMF

    IUUQTXXXNPEFSOJFKBKQ

    View Slide

  74. JFWNT
    IUUQYEJTTFOUHJUIVCJPJFWNT

    View Slide

  75. 4UFQUPVTF*&
    w *OTUBMM7JSUVBM#PY
    w &YFDVUFJFWNT
    w %PXOMPBE*&7JSUVBM.BDIJOFT
    w 4FUVQ7.UP7JSUVBM#PY

    View Slide

  76. *OTUBMM7JSUVBM#PY
    w %PXOMPBEGSPN8FCTJUF
    w IUUQTXXXWJSUVBMCPYPSHXJLJ%PXOMPBET
    PS
    w 6TF)PNFCSFX$BTL
    % brew cask install virtualbox

    View Slide

  77. 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

    View Slide

  78. 8"3/*/(
    %0/564&JFWNT)&3&
    #FDBVTF*&WJSUVBMNBDIJOFTWFSZWFSZMBSHF

    View Slide

  79. %JTLTQBDFPG7.T
    % du -sh ~/.ievms
    43G /Users/suzuki/.ievms

    View Slide

  80. *&TJO7JSUVBM#PY

    View Slide

  81. LBSNBJFWNT
    % npm install karma-ievms --save-dev

    View Slide

  82. 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]

    View Slide

  83. ,BSNBXJUI*&T

    View Slide

  84. )FBEMFTTNPEF

    View Slide

  85. ,BSNBFYUFOET

    View Slide

  86. 1SFQSPDFTTPST
    IUUQTXXXOQNKTDPNCSPXTFLFZXPSELBSNBQSFQSPDFTTPS

    View Slide

  87. 1MVHJOT
    IUUQTXXXOQNKTDPNCSPXTFLFZXPSELBSNBQMVHJO

    View Slide

  88. .ZGVUVSFQMBO
    w .PCJMF
    w J04MBVODIFS
    w "OESPJEMBVODIFS
    w 3FNPUF#SPXTFST
    w 8FC%SJWFSMBVODIFS
    w #SPXTFS4UBDLMBVODIFS
    w .JDSPTPGU&EHF
    w

    View Slide

  89. $PODMVTJPO

    View Slide

  90. *N)BQQZXJUI,BSNB
    w *N)BQQZXJUI,BSNB
    w *FBTFEBTFOTFPGJOTFDVSJUZXJUISFBMCSPXTFSUFTU

    View Slide

  91. :PVXJMMCF)BQQZ
    w -FUTVTFUIF,BSNBUPHFUIFS
    w *GZPVVTFUIF,BSNB 

    QMFBTFXSJUFBOBSUJDMFUPZPVSCMPH
    w *XBOUUPLOPXNPSFJOGPSNBUJPOBCPVU,BSNB

    View Slide

  92. )FMQNF1)1FST
    ZPVSFNZPOMZIPQF

    View Slide

  93. 5IBOLZPV

    View Slide