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 のコードは出てきません :-)

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