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

Automatically run the JavaScript test in multiple browsers

More Decks by Norio Suzuki

Other Decks in Technology

Featured

Transcript