Automatically run the JavaScript test in multiple browsers

ʙ1)1FS͔ͩΒͦ͜஌͓͖͍ͬͯͨʙ +BWB4DSJQUͷςετΛ ෳ਺ϒϥ΢βͰࣗಈ࣮ߦ͢Δ࿩ 1)1$POGFSFODF,BOTBJ !TV[VLJ

4IPVMELOPXCFDBVTFZPVBSF1)1FS "VUPNBUJDBMMZSVOUIF+BWB4DSJQU UFTUJONVMUJQMFCSPXTFST 1)1$POGFSFODF,BOTBJ !TV[VLJ

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

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

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

1BTUQSFTFOUBUJPO IUUQTTQFBLFSEFDLDPNTV[VLJ

.Z1)1DPEFJT -(5.

.Z+BWB4DSJQU DPEFJTOPU-(5.

5PEBZTUIFNF

,BSNB IUUQLBSNBSVOOFSHJUIVCJP

8IFOVTF,BSNB w :PVXBOUUPUFTUDPEFJOSFBMCSPXTFST w :PVXBOUUPUFTUDPEFJONVMUJQMFCSPXTFST EFTLUPQ NPCJMF UBCMFUT FUD
w :PVXBOUUPFYFDVUFZPVSUFTUTMPDBMMZEVSJOH EFWFMPQNFOU w :PVXBOUUPFYFDVUFZPVSUFTUTPOBDPOUJOVPVT JOUFHSBUJPOTFSWFS IUUQTHJUIVCDPNLBSNBSVOOFSLBSNB

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

SFBMCSPXTFST IUUQTLBSNBSVOOFSHJUIVCJPDPOpHCSPXTFSTIUNM

#SPXTFSDPNQBUJCJMJUZ IUUQDBOJVTFDPNGFBUDIBOOFMNFTTBHJOH

,BSNBEFNP

3FDFOU +BWB4DSJQU

,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

4FSWFS4JEF 1BDLBHF

/PEFKT IUUQTOPEFKTPSH

OQN IUUQTXXXOQNKTDPN

5BTL3VOOFS

(VMQ IUUQHVMQKTDPN

(SVOU IUUQHSVOUKTDPN

(SVOU 1)16OJU IUUQFOHJOFFSJOHDSPDPTKQQPTUHSVOUXBUDIQIQVOJU

.PEVMF

3FRVJSF+4 IUUQSFRVJSFKTPSH

#SPXTFSJGZ IUUQCSPXTFSJGZPSH

XFCQBDL IUUQXFCQBDLHJUIVCJP

5SBEJUJPOBMTUZMF <!DOCTYPE html> <html> <head>  <script src="functions.js"></script> <script src="library.js"></script> <script src="app.js"></script> </head> <body>  </body> </html>

3FRVJSF+4 <!DOCTYPE html> <html> <head> <script src="require.js"></script> <script src="app.js"></script> </head>
<body>  </body> </html>

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

#SPXTFSJGZXFCQBDL <!DOCTYPE html> <html> <head> <script src="app.js"></script> </head> <body>  </body> </html>

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

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

6OJU5FTU

5FTUBCMFDPEF

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

&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>

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

+BTNJOF IUUQKBTNJOFHJUIVCJP

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

+BTNJOFCBTJD 5FTU3VOOFS )5.- GVODUJPOTKT GVODUJPOT4QFDKT TDSJQUTSDGVODUJPOTKTTDSJQU TDSJQUTSDGVODUJPOT4QFDKTTDSJQU

4QFD3VOOFSIUNM <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jasmine Test Runner</title>
 <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>  <script src="src/functions.js"></script>  <script src="spec/functionsSpec.js"></script> </head> <body> </body> </html>

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

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

3VO 3VO 3VO

/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

,BSNB IUUQLBSNBSVOOFSHJUIVCJP

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

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

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

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

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

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

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

,BSNBTUBSU ᶃ4UBSU,BSNB

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

,BSNBBEECSPXTFST % npm install \  karma-safari-launcher \  karma-firefox-launcher \  --save-dev

MBVODIFS ,BSNB DISPNFMBVODIFS TBGBSJMBVODIFS pSFGPYMBVODIFS

,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

,BSNBBEECSPXTFST

TQFDJpDCSPXTFS % ./node_modules/karma/bin/karma start \  --browsers 'Firefox'

VTFPO$*TFWFS

1IBOUPN+4 IUUQQIBOUPNKTPSH

,BSNBBEECSPXTFST % npm install \  karma-phantomjs-launcher \  --save-dev

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

PO$*TFSWFS % ./node_modules/karma/bin/karma start \  --browsers 'PhantomJS'

*OUFSOFU&YQMPSFS

7JSUVBM#PY IUUQTXXXWJSUVBMCPYPSH

EFWNPEFSOJF IUUQEFWNPEFSOJF

NPEFSOJF PMETUZMF IUUQTXXXNPEFSOJFKBKQ

JFWNT IUUQYEJTTFOUHJUIVCJPJFWNT

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

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

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

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

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

*&TJO7JSUVBM#PY

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

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]

,BSNBXJUI*&T

)FBEMFTTNPEF

,BSNBFYUFOET

1SFQSPDFTTPST IUUQTXXXOQNKTDPNCSPXTFLFZXPSELBSNBQSFQSPDFTTPS

1MVHJOT IUUQTXXXOQNKTDPNCSPXTFLFZXPSELBSNBQMVHJO

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

$PODMVTJPO

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

:PVXJMMCF)BQQZ w -FUTVTFUIF,BSNBUPHFUIFS w *GZPVVTFUIF,BSNB   QMFBTFXSJUFBOBSUJDMFUPZPVSCMPH w *XBOUUPLOPXNPSFJOGPSNBUJPOBCPVU,BSNB

)FMQNF1)1FST ZPVSFNZPOMZIPQF

5IBOLZPV

Automatically run the JavaScript test in multiple browsers

Automatically run the JavaScript test in multiple browsers

More Decks by Norio Suzuki

Other Decks in Technology

Featured

Transcript