第9回SenchaUG@札幌「Siestaで中の人に頑張ってもらう」

SiestaΛ࢖ͬͯɺதͷਓʹؤுͬͯ΋Β͓͏ גࣜձࣾθϊϑΟ খఅ Ұ߂

SiestaͬͯԿʁ w +4ΦϒδΣΫτͷൺֱ w %0.্ͷΤϨϝϯτͷଘࡏ֬ೝ w ϑΥʔϜͳͲͷೖྗςετ w υϥοάυϩοϓͳͲͷϢʔβૢ࡞ w
ͦͷଞFUD ؆୯ʹઆ໌͢Δͱɺ+4্ͷίʔυ͕ਖ਼ৗʹ ಈ࡞͍ͯ͠Δ͔Ͳ͏͔ΛࣗಈͰςετͯ͠ ͘ΕΔπʔϧͰ͢ɻ βοΫϦઆ໌͢ΔͱɺҎԼͷΑ͏ͳ͜ͱ͕ ग़དྷ·͢ɻ

ʮඦฉ͸Ұݟʹ͔ͣ͠ʯͰ͢

ࠓճ͸ ࠓճ͸4FODIB&YU+4ͱɺ͜ͷͱͬͯ΋ૉఢͳ4JFTUBΛ࢖ͬͯ؆୯ ͳΞϓϦέʔγϣϯΛ࡞Γɺ࣮ࡍʹͦͷΞϓϦέʔγϣϯͷࣗಈςετΛ͢ ΔҝͷςετέʔεΛ࡞͍͖ͬͯ·͢

αϯϓϧΞϓϦέʔγϣϯ

ࠓճ࢖͏ΞϓϦέʔγϣϯ ͔ͤͬ͘ͳͷͰɺ4FODIB$NEΛ࢖ͬ ͯΞϓϦέʔγϣϯΛ࡞͍͖ͬͯ·͠ΐ ͏ɻ 4FODIB$NEͰϓϩδΣΫτΛ࡞੒͢ ΔલͷσΟϨΫτϦߏ੒͸࣍ͷ௨Γɻ TELσΟϨΫτϦ͸ɺ&YU+4ͷ4%,͕ ೖ͍ͬͯΔσΟϨΫτϦʹͳΓ·͢ɻ

ࠓճ࢖͏ΞϓϦέʔγϣϯ ४උ͕ग़དྷͨΒɺΈΜͳେ޷͖ࠇ͍ը໘ ʢλʔϛφϧʣ͔ΒίϚϯυͰϓϩδΣ ΫτΛੜ੒͠·͢ $ cd {project root dir} $
ls sdk/ $ sencha -sdk ./sdk/ generate app \ Siesta ./siesta [enter] Sencha Cmd v3.x.xxxx [INF] xxxx . . . $ ls sdk/ siesta/ w 4%,σΟϨΫτϦ w ໊લۭؒ w ੜ੒͢ΔϓϩδΣΫτσΟϨΫτϦ ࣍ͷΑ͏ʹ Λࢦఆͯ͋͛͠Δ͜ͱʹΑΓɺεέϧτ ϯͷΞϓϦέʔγϣϯ͕ੜ੒͞Ε·͢ɻ

ࠓճ࢖͏ΞϓϦέʔγϣϯ ࠓճ࢖༻͢ΔαϯϓϧΞϓϦέʔγϣ ϯ͸ɺӈͷΑ͏ͳ΋ͷΛ࢖༻͠·͢ɻ ߏ੒ͱͯ͠͸ w ೖྗϑΥʔϜʢ&YUGPSN1BOFMʣ w σʔλΛදࣔ͢Δ(SJEʢ&YUHSJE1BOFMʣ ʹͳΓ·͢ɻ

ࠓճ࢖͏ΞϓϦέʔγϣϯ ࣮ࡍ͸ɺ'PSNʹೖྗͨ͠஋Λ(SJEʹ ௥Ճ͢ΔͷͰ͕͢ɺࠓճ͸ςετέʔ εΛಈ͔͢ҝʹ࢖༻͢ΔͷͰɺ(SJE΁ ͷ௥ՃͳͲͷॲཧ͸ೖΕͯ͋Γ·ͤ Μɻ อଘϘλϯΛԡͨ͠ࡍ͸ɺ୯७ʹอଘ ࣌ͷΠϕϯτ͕ൃՐ͢Δ͚ͩʹͳͬͯ ͍·͢ɻ

4JFTUBͷ४උ

·ͣ͸ɺμ΢ϯϩʔυ 4JFTUBΛ࢖͏ʹ͸ɺ੡඼Λμ΢ϯϩ ʔυ͢Δඞཁ͕͋Γ·͢ɻ ʢࠓճ͸ແྉ൛Λ࢖͍͖ͬͯ·͢ʣ ແྉ൛ͷμ΢ϯϩʔυ͸ɺฐࣾ੡඼ϖ ʔδʹϦϯΫ͕ுͬͯ͋ΔͷͰɺͦͪ Β͔Βμ΢ϯϩʔυ͠·͢ɻ http://www.xenophy.com/product/ bryntum/siesta

ઃஔ͢Δ μ΢ϯϩʔυͯ͠ղౚͨ͠ΒɺσΟϨ ΫτϦ໊ΛʮTJFTUBʯͳͲʹϦωʔ Ϝͯ͠ɺΞϓϦέʔγϣϯͷϧʔτσ ΟϨΫτϦʹઃஔ͠·͢ɻ

ςετը໘ͷ४උ ςετͷى఺ͱͳΔϖʔδͷ४උΛ͢ ΔҝʹɺUFTU@IBSOFTTIUNMΛ࡞ ੒͠·͢ɻ

ςετը໘ͷ४උ த਎͸͜Μͳײ͡Ͱɺදࣔʹඞཁͳ$44ͱ4JFTUBͷಈ࡞ʹඞཁͳ+4ͷಡΈ ࠐΈΛߦ͍ɺ࠷ޙʹςετέʔεͰ͋ΔUFTU@IBSOFTTKTΛಡΈࠐΈ·͢ <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css"
href="./resources/default/app.css"/> <link rel="stylesheet" type="text/css" href="./siesta/resources/css/siesta-all.css"> <script type="text/javascript" src="./ext/ext-all.js"></script> <script type="text/javascript" src="./siesta/siesta-all.js"></script> <script type="text/javascript" src="./test_harness.js"></script> </head> <body> </body> </html>

ςετը໘ͷ४උ ଓ͍ͯɺઌ΄Ͳͷ)5.-ͰಡΈࠐ· ͍ͤͯͨɺςετέʔεͷى఺ͱͳΔ UFTU@IBSOFTTKTΛ࡞੒͠·͢ɻ

ςετը໘ͷ४උ ͪ͜Βͷத਎͸ɺ4JFTUBͷॳظ ઃఆͱɺ͜Ε͔Β֎෦ϑΝΠϧͰ هड़͢Δ֤ςετέʔεͷఆٛΛ ߦ͍·͢ɻ var Harness = Siesta.Harness.Browser.ExtJS; Harness.conﬁgure({
title: 'Siesta Test', loaderPath: { 'Siesta': 'app' }, preload: [ './ext/resources/css/ext-all.css', './ext/ext-all-debug.js' ] }); Harness.start({ group: 'Sample', items: [ 'tests/010_sanity.t.js' ] });

ςετը໘ͷ४උ ςετͷ࣮ߦʹ༻͍ΔΠϯελϯ εͷऔಘ var Harness = Siesta.Harness.Browser.ExtJS; Harness.conﬁgure({ title: 'Siesta
Test', loaderPath: { 'Siesta': 'app' }, preload: [ './ext/resources/css/ext-all.css', './ext/ext-all-debug.js' ] }); Harness.start({ group: 'Sample', items: [ 'tests/010_sanity.t.js' ] });

ςετը໘ͷ४උ ଓ͍ͯɺ4JFTUBຊମͷઃఆΛߦ ͍͖ͬͯ·͢ɻ var Harness = Siesta.Harness.Browser.ExtJS; Harness.conﬁgure({ title: 'Siesta
Test', loaderPath: { 'Siesta': 'app' }, preload: [ './ext/resources/css/ext-all.css', './ext/ext-all-debug.js' ] }); Harness.start({ group: 'Sample', items: [ 'tests/010_sanity.t.js' ] }); w UJUMF ςετը໘ͷλΠτϧ w MPBEFS1BUI ΞϓϦέʔγϣϯͷ໊લۭؒͷղܾ ʢ&YU-PBEFSͱಉ༷ͷઃఆʣ

ςετը໘ͷ४උ ଓ͍ͯɺQSFMPBEͷઃఆ var Harness = Siesta.Harness.Browser.ExtJS; Harness.conﬁgure({ title: 'Siesta Test',
loaderPath: { 'Siesta': 'app' }, preload: [ './ext/resources/css/ext-all.css', './ext/ext-all-debug.js' ] }); Harness.start({ group: 'Sample', items: [ 'tests/010_sanity.t.js' ] }); w QSFMPBE ֤ςετͰඞཁʹͳΔ+4ϑΝΠϧ܈

ςετը໘ͷ४උ ֎෦ϑΝΠϧʹఆ͍ٛͯ͠Δɺ֤ ςετέʔεͷಡΈࠐΈઃఆ var Harness = Siesta.Harness.Browser.ExtJS; Harness.conﬁgure({ title: 'Siesta
Test', loaderPath: { 'Siesta': 'app' }, preload: [ './ext/resources/css/ext-all.css', './ext/ext-all-debug.js' ] }); Harness.start({ group: 'Sample', items: [ 'tests/010_sample.t.js' ] }); w HSPVQ JUFNT಺ʹఆ͍ٛͯ͠Δ֤ςετέ ʔεͷάϧʔϓ໊ w JUFNT ֎෦ϑΝΠϧʹఆ͍ٛͯ͠Δςετ έʔε܈

ςετը໘ͷ४උ ࠷ޙʹɺ࣮ࡍͷςετέʔεೖΕ͓ͯ ͘UFTUTσΟϨΫτϦΛ࡞੒͠ɺ·ͣ w UFTUT@TBNQMFUKT Λ࡞੒͍͖ͯ͠·͢ɻ

ςετը໘ͷ४උ @TBNQMFUKT಺ͷίʔυ ͸࣍ͷΑ͏ͳܗʹͳΓ·͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is
here’); t.requireOk(‘Siesta.controller.Main’); });

ςετը໘ͷ४උ ςετίʔυ͸ݪଇ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’);
t.requireOk(‘Siesta.controller.Main’); }); StartTest(function(t) { ... }); Ͱϥοϓͯ͠هड़͍͖ͯ͠·͢ɻ

ςετը໘ͷ४උ 4UBSU5FTUʹ౉͞ΕΔҾ਺ͷU ͸ɺ4JFTUB5FTUͷΠϯελϯε Ͱ͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS
is here’); t.requireOk(‘Siesta.controller.Main’); }); ͜ͷ4JFTUB5FTUΠϯελϯε͸ ͍͔ͭ͘ͷΞαʔγϣϯϝιου ͕༻ҙ͞Ε͓ͯΓɺͦΕΒΛ࢖༻ ͯ͠ςετίʔυΛهड़͍͖ͯ͠ ·͢ɻ

ςετը໘ͷ४උ EJBHϝιου͸ɺςετέʔε Λ࣮ߦͨ͠ࡍͷɺ݁Ռදࣔ෦෼ʹ λΠτϧͷΑ͏ͳܗͰจࣈྻΛද ࣔͤ͞ΔҝͷϝιουͰ͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext,
‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); });

ςετը໘ͷ४උ PLϝιου͸ɺୈҾ਺ʹ༩͑ͨ ஋͕USVFͷ৔߹ςετΛύε ͠ɺୈҾ਺ʹ༩͑ͨจࣈྻΛς ετ݁Ռʹग़ྗ͠·͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext,
‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); }); ӈͷίʔυͷ৔߹ɺ&YUΦϒδΣ Ϋτ͕ଘࡏ͢Ε͹ςετΛύε͠ ·͢ɻ

ςετը໘ͷ४උ SFRVJSF0Lϝιου͸ɺͦͷΫϥ ε͕ਖ਼ৗʹSFRVJSF͞ΕΕ͹ςε τΛύε͠·͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS
is here’); t.requireOk(‘Siesta.controller.Main’); }); ·ͨɺ͜ͷޙ৮Ε͍͖ͯ·͕͢ɺ ୈҾ਺ʹίʔϧόοΫؔ਺Λη οτ͢Δ͜ͱͰɺΫϥεΛϩʔυ ޙॲཧΛ࣮ߦ͢Δ͜ͱ΋ग़དྷ·͢

ςετը໘ͷ४උ ͜ͷଞʹ΋ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’);
t.requireOk(‘Siesta.controller.Main’); }); w EPOFϝιου w JTϝιου౳ ͍͔ͭ͘ͷϝιου͕༻ҙ͞Εͯ ͍·͕͢ɺ͜͜Ͱ͸·ͣӈͷίʔ υΛ࣮ߦͯ͠Έ·͠ΐ͏ɻ

4JFTUBΛಈ͔ͯ͠ΈΔ

ઃஔͨ͠63-ʹΞΫηε ४උͷࡍʹ࡞੒ͨ͠ɺ UFTU@IBSOFTTIUNMʹΞΫηε͢ Δ͜ͱͰɺ4JFTUBͷςετը໘Λ։ ͘͜ͱ͕ग़དྷ·͢ɻ IUUQ\QSPKFDU3PPU%JS^UFTU@IBSOFTTIUNM

4JFTUB࣮ߦը໘ ΞΫηε͢ΔͱӈͷΑ͏ͳը໘͕։͖ ·͢ɻࠨͷπϦʔϏϡʔʹදࣔ͞Εͯ ͍Δͷ͕ɺ४උͷࡍʹ࡞੒ͨ͠ɺ UFTU@IBSOFTTKTʹهड़ͨ͠ɺςε τέʔεҰཡͰ͢ɻ

4JFTUB࣮ߦը໘ ςετΛ࣮ߦ͢Δʹ͸ɺπϦʔϏϡʔ ʹදࣔ͞Ε͍ͯΔςετέʔεΛμϒ ϧΫϦοΫ͢Δ͜ͱͰ࣮ߦͰ͖·͢ɻ

4JFTUB࣮ߦը໘ ςετΛ࣮ߦ͢Δͱɺઌ΄Ͳهड़ͨ͠ ςετέʔε͕૸ΓӈͷΑ͏ͳ߲໨͕ ग़ྗ͞Ε·͢ɻ

4JFTUB࣮ߦը໘ t.diag(‘Hello World!!’);

4JFTUB࣮ߦը໘ t.ok(Ext, ‘ExtJS is here’);

4JFTUB࣮ߦը໘ t.requireOk('Siesta.controller.Main');

4JFTUB࣮ߦը໘ ͜Ε͕؆୯ͳςετͷํ๏ʹͳΓ· ͢ɻͦΕͰ͸ɺ๯಄Ͱ৮Εͨαϯϓϧ ΞϓϦέʔγϣϯΛݩʹɺ·ͣ͸σʔ λ.PEFMͷςετέʔεΛॻ͍ͯΈ ·͠ΐ͏ɻ

.PEFMͷςετέʔεΛॻ͍ͯΈΔ

ςετέʔεͷ௥Ճ UFTU@IBSOFTTKTʹ৽ͨʹ߲໨ Λ௥Ճ͠·͢ɻ ... Harness.start({ group: 'Sample', items: [ 'tests/010_sanity.t.js'
] }, { group: ‘Model’, items: [ ‘tests/021_product.t.js’ ] });

.PEFMͷςετέʔε Ϟσϧͷςετέʔε͸ԼهͷΑ͏ʹɺSFRVJSF0Lϝιουͷίʔϧόο ΫͰνΣοΫΛߦͬͨΓग़དྷ·͢ɻ ͜͜Ͱ͸ɺɹ1SPEVDUϞσϧΛಡΈࠐΈσʔλΛੜ੒ɺͦͷσʔλ͕ੜ੒Ͱ ͖͍ͯΔ͔ΛJTϝιουͰνΣοΫ͍ͯ͠·͢ɻ StartTest(function(t) { t.requireOk('Siesta.model.Product', function() {
var model = Ext.create('Siesta.model.Product', { id: 10, name: 'Siesta Test Model' }); t.is(model.get('id'), 10, 'Create Siesta Test Model!!'); }); });

4UPSFͷςετέʔε ·ͨɺࠓճ͸ߦ͍·ͤΜ͕4UPSFͷςετέʔεΛॻ͘ࡍ͸ɺ CFHJO"TZOD͓ΑͼFOE"TZODΛར༻ͯ͠ɺ4UPSFͷಡΈࠐΈ͕׬ྃ͢ Δ·Ͱɺςετͷ࣮ߦΛࢭΊ͓ͯ͘ඞཁ͕͋Γ·͢ɻ StartTest(function(t) { t.requireOk('Siesta.store.Products', function() { var
store = Ext.create('Siesta.store.Products'), sync = t.beginAsync(); store.load({ callback: function() { // check code here... t.endAsync(sync); } }); });

ଓ͍ͯ7JFXͷςετέʔεͰ͢

ςετέʔεͷ௥Ճ UFTU@IBSOFTTKTʹ7JFX༻ ͷɺςετέʔεΛ௥Ճ͠·͢ɻ ... Harness.start({ group: 'Sample', items: [ 'tests/010_sanity.t.js'
] }, { group: ‘Model’, items: [ ‘tests/021_product.t.js’ ] }, { group: ‘View’, items: [ ‘tests/031_grid.t.js’ ] });

7JFXͷςετέʔε 7JFXͷςετέʔεΛߦ͏ͨΊʹ͸ʢࠓճ͸(SJEͷέʔεʣ w දࣔʹඞཁͳΫϥεͷSFRVJSFνΣοΫ w දࣔʹඞཁͳΠϯελϯεͷੜ੒ʢࠓճ͸(SJEͳͷͰ4UPSF͕ඞཁʣ 4UPSFੜ੒࣌ʹTUPSF*EϓϩύςΟΛઃఆ͢Δඞཁ༗ w 7JFXͷੜ੒
SFOEFS5PϓϩύςΟͰඳըઌΛ&YUHFU#PEZ ʹઃఆ w ্ه׬ྃޙʹ֤ςετॲཧΛهड़ ίʔυ͕গ͠௕͘ͳΔͷͰɺ࣍ͷεϥΠυʹࡌͤ·͢ɻ

7JFXͷςετέʔε StartTest(function(t) { t.requireOk([ 'Siesta.model.Product', 'Siesta.store.Products', 'Siesta.view.Grid' ], function() {
var grid; Ext.create('Siesta.store.Products', { storeId: 'Products' }); grid = Ext.create('Siesta.view.Grid', { renderTo: Ext.getBody() }); t.waitForRowsVisible(grid, function() { t.is(grid.store.getCount(), grid.getView().getNodes().length, 'Rendered Items OK'); t.matchGridCellContent(grid, 0, 1, grid.store.ﬁrst().get('name'), 'Found full name in ﬁrst cell'); }); }); });

var grid; Ext.create('Siesta.store.Products', { storeId: 'Products' }); grid = Ext.create('Siesta.view.Grid', { renderTo: Ext.getBody() }); t.waitForRowsVisible(grid, function() { t.is(grid.store.getCount(), grid.getView().getNodes().length, 'Rendered Items OK'); t.matchGridCellContent(grid, 0, 1, grid.store.ﬁrst().get('name'), 'Found full name in ﬁrst cell'); }); }); }); (SJEΛදࣔ͢ΔͷʹඞཁͳΫϥεͷSFRVJSFν ΣοΫΛߦ͍·͢ɻ

var grid; Ext.create('Siesta.store.Products', { storeId: 'Products' }); grid = Ext.create('Siesta.view.Grid', { renderTo: Ext.getBody() }); t.waitForRowsVisible(grid, function() { t.is(grid.store.getCount(), grid.getView().getNodes().length, 'Rendered Items OK'); t.matchGridCellContent(grid, 0, 1, grid.store.ﬁrst().get('name'), 'Found full name in ﬁrst cell'); }); }); }); (SJEʹදࣔ͢ΔͨΊͷ4UPSFΛੜ੒͠·͢ɻ ͜ͷࡍʹɺ(SJEʹఆٛͨ͠4UPSF*%ͷઃఆΛ ߦΘͳ͍ͱ(SJEʹσʔλ͕දࣔͰ͖ͳ͍ͷͰ ஫ҙ͍ͯͩ͘͠͞ɻ

var grid; Ext.create('Siesta.store.Products', { storeId: 'Products' }); grid = Ext.create('Siesta.view.Grid', { renderTo: Ext.getBody() }); t.waitForRowsVisible(grid, function() { t.is(grid.store.getCount(), grid.getView().getNodes().length, 'Rendered Items OK'); t.matchGridCellContent(grid, 0, 1, grid.store.ﬁrst().get('name'), 'Found full name in ﬁrst cell'); }); }); }); (SJEͦͷ΋ͷΛੜ੒͠·͢ɻ ඳըઌΛɺ&YUHFU#PEZϝιουͰઃఆ͠· ͢ɻ

var grid; Ext.create('Siesta.store.Products', { storeId: 'Products' }); grid = Ext.create('Siesta.view.Grid', { renderTo: Ext.getBody() }); t.waitForRowsVisible(grid, function() { t.is(grid.store.getCount(), grid.getView().getNodes().length, 'Rendered Items OK'); t.matchGridCellContent(grid, 0, 1, grid.store.ﬁrst().get('name'), 'Found full name in ﬁrst cell'); }); }); }); (SJEͷ͕දࣔ͞ΕΔ·Ͱ଴ػ͢ΔϝιουͰ ͢ɻ͜ΕΛར༻ͯ͠ɺ(SJEͷ಺༰͕දࣔ͞Ε ͔ͯΒςετΛߦ͍·͢ɻ

var grid; Ext.create('Siesta.store.Products', { storeId: 'Products' }); grid = Ext.create('Siesta.view.Grid', { renderTo: Ext.getBody() }); t.waitForRowsVisible(grid, function() { t.is(grid.store.getCount(), grid.getView().getNodes().length, 'Rendered Items OK'); t.matchGridCellContent(grid, 0, 1, grid.store.ﬁrst().get('name'), 'Found full name in ﬁrst cell'); }); }); }); ͜͜Ͱߦ͍ͬͯΔͷ͸ɺ4UPSF಺ͷσʔλ਺ ͱɺ(SJEʹ࣮ࡍදࣔ͞Ε͍ͯΔσʔλ਺͕ಉ ͔͡Ͳ͏͔ΛνΣοΫ͍ͯ͠·͢ɻ

var grid; Ext.create('Siesta.store.Products', { storeId: 'Products' }); grid = Ext.create('Siesta.view.Grid', { renderTo: Ext.getBody() }); t.waitForRowsVisible(grid, function() { t.is(grid.store.getCount(), grid.getView().getNodes().length, 'Rendered Items OK'); t.matchGridCellContent(grid, 0, 1, grid.store.ﬁrst().get('name'), 'Found full name in ﬁrst cell'); }); }); }); ˞͜͜͸ޙͰॻ͘

͓଴͔ͪͶͷϢʔβೖྗγϛϡϨʔτ

function() { function() { function() { function() { // ...
} } } } Ϣʔβૢ࡞γϛϡϨʔτͷྲྀΕ 4JFTUBͰߦ͑ΔϢʔβૢ࡞ͷ γϛϡϨʔτ͸ɺ 4JFTUB5FTU4JNVMBUF഑Լͷ ϝιου΍ɺ 4JFTUB5FTU"DUJPOΫϥε͕ ৭ʑͱߦͬͯ͘Ε·͢ɻ ಈ࡞ͷྲྀΕͱͯ͠͸ɺ֤ΞΫγ ϣϯ׬ྃޙʹίʔϧόοΫΛݺ ͼग़͢ͱ͍͏ඇಉظͳܗʹͳΓ ·͢ɻ ਂ͘ͳͬͯ·͏ŋŋŋ

ͦΜͳ͋ͳͨʹ DIBJOϝιουͱ͍͏΋ͷ͕༻ҙ͞Ε ͍ͯ·͢ɻ͜Ε͸ɺDIBJOͷҾ਺ʹॱ ࣮࣍ߦ͍ͨؔ͠਺Λ౉͠ɺͦͷؔ਺ͷ தͰςετΛߦ͏ࡍʹɺҾ਺ʹೖͬͯ ͘ΔΠϯελϯεΛςετϝιουʹ ౉ͯ͋͛͠·͢ɻ ͜ͷΑ͏ʹɺॱ൪ʹؔ਺Λ౉ͯ͋͛͠ Δ͚ͩͰɺ؆୯ʹॱ࣮࣍ߦ͢Δ͜ͱ͕ Ͱ͖·͢ʂ
t.chain( function (next) { t.type(userNameField, 'username', next) }, function (next) { t.type(passwordField, 'secret', next) }, function (next) { t.click(loginButton, next) }, function () { // done } });

ͦΜͳ͋ͳͨʹ ·ͨɺ͜ͷDIBJOϝιου͸"DUJPO ͱݺ͹ΕΔΦϒδΣΫτΛ౉ͯ͋͛͠ Δ͜ͱͰ΋ɺςετέʔεΛ࡞Δ͜ͱ ͕ग़དྷ·͢ɻ t.chain({ action : 'type', target
: userNameField, text : 'username' },{ action : 'type', target : passwordField, text : 'secret' },{ action : 'click', target : loginButton });

ͦΜͳ͋ͳͨʹ ࢦఆͰ͖Δ಺༰ͱͯ͠͸ t.chain({ action : 'type', target : userNameField, text
: 'username' },{ action : 'type', target : passwordField, text : 'secret' },{ action : 'click', target : loginButton }); w BDUJPO ࣮ߦ͢ΔΞΫγϣϯ໊ʢDMJDL౳ʣ w UBSHFU ΞΫγϣϯͷର৅ͱͳΔΤϨϝϯτ ʢ࣍ͷεϥΠυͰ΋͏গ͠ৄ͘͠ʣ w UFYU BDUJPOUZQFͷ৔߹ɺςΩετϑΟʔϧ υʹೖྗ͢Δจࣈྻɺ͜ͷଞʹ΋BDUJPO ຖʹࢦఆͰ͖ΔΦϓγϣϯ౳΋͋Γ·͢ ͕ɺৄ͘͠͸"1*υΩϡϝϯτΛ͝ཡ͘ ͍ͩ͞ɻ

UBSHFUʹ͍ͭͯ 4JFTUBͰ͸ɺ͍Ζ͍Ζͳํ๏ͰΞΫγ ϣϯͷର৅ͱͳΔΤϨϝϯτΛࢦఆͰ ͖ΔΑ͏ʹͳ͍ͬͯ·͢ɻ t.chain({ action : 'type', target :
userNameField, text : 'username' },{ action : 'type', target : passwordField, text : 'secret' },{ action : 'click', target : loginButton }); w BDUJPO ࣮ߦ͢ΔΞΫγϣϯ໊ʢDMJDL౳ʣ w UBSHFU ΞΫγϣϯͷର৅ͱͳΔΤϨϝϯτ ʢ࣍ͷεϥΠυͰ΋͏গ͠ৄ͘͠ʣ w UFYU BDUJPOUZQFͷ৔߹ɺςΩετϑΟʔϧ υʹೖྗ͢Δจࣈྻɺ͜ͷଞʹ΋BDUJPO ຖʹࢦఆͰ͖ΔΦϓγϣϯ౳΋͋Γ·͢

UBSHFUʹ͍ͭͯ t.chain({ action : 'type', target : userNameField, text :
'username' },{ action : 'type', target : passwordField, text : 'secret' },{ action : 'click', target : loginButton }); w 4JFTUB5FTU#SPXTFS )5.-ΤϨϝϯτ <Y Z>ܗࣜͷ഑ྻͰ࠲ඪࢦఆ %0.ΫΤϦʔΛද͢$44ηϨΫλ w &YU+4͓Αͼ5PVDI &YUEPN&MFNFOUͷΠϯελϯε &YU$PNQPOFOUͷΠϯελϯε ίϯϙδοτΫΤϦʔจࣈྻ ίϯϙʔωϯτΫΤϦʔจࣈྻ ʢ͜ΕͰࢦఆ͢Δ৔߹͸ɺઌ಄ʹ ʠʡΛ͚ͭΔඞཁ͕͋Γ·͢ʣ

Ϣʔβૢ࡞ΛγϛϡϨʔτ͢Δςετίʔυ 4JFTUBͰߦ͑ΔϢʔβૢ࡞ͷγϛϡϨʔτ͸ɺ4JFTUB5FTU4JNVMBUF഑ Լͷϝιου΍ɺ4JFTUB5FTU"DUJPOΫϥε͕৭ʑͱߦͬͯ͘Ε·͢ɻ શମΛࡌͤΔͱ௕͘ͳͬͯ͠·͏ͷͰɺϙΠϯτຖʹઆ໌͍͖ͯ͠·͢ɻ ࠓճͷϢʔβૢ࡞Ͱߦ͍ͷ͸ҎԼ఺ w ͭͷUFYUpFMEʹ஋Λೖྗͤ͞Δ w ೖྗͨ͠஋Λอଘ͢ΔͨΊʹɺอଘϘλϯΛΫϦοΫͤ͞Δ w
อଘϘλϯ͕ΫϦοΫ͞ΕͨࡍͷΠϕϯτΛर͍ɺೖྗͨ͠஋ͷνΣοΫΛߦ͏

γϛϡϨʔτ ·ͣɺඞཁͳΫϥεͷಡΈࠐΈ͓ Αͼੜ੒͕׬ྃͨ͠ΒɺGPSNί ϯϙʔωϯτ಺ͷɺςετέʔε ʹ࢖͏ཁૉΛલ΋ͬͯऔಘ͓ͯ͠ ͖·͢ɻ ... Ext.create('Siesta.store.Products', { storeId:
'Products' }); form = Ext.create('Siesta.view.Form', { width: 500, renderTo: Ext.getBody() }); nameFld = form.down('textﬁeld[name=name]'); idFld = form.down('textﬁeld[name=id]'); saveButton = form.down('button[text=อଘ]'); ...

γϛϡϨʔτ ͜ͷ෦෼Ͱ͢Ͷɻ ੜ੒ͨ͠GPSN͔ΒEPXOϝιου Λར༻ͯ͠ɺͦΕͧΕͷίϯϙʔ ωϯτΛऔಘ͓͖ͯ͠·͢ɻ ... Ext.create('Siesta.store.Products', { storeId: 'Products'
}); form = Ext.create('Siesta.view.Form', { width: 500, renderTo: Ext.getBody() }); nameFld = form.down('textﬁeld[name=name]'); idFld = form.down('textﬁeld[name=id]'); saveButton = form.down('button[text=อଘ]'); ...

γϛϡϨʔτ ଓ͍ͯɺอଘϘλϯΛΫϦοΫ͞ ΕͨࡍͷςετॲཧΛॻ͍͓͖ͯ ·͢ɻ ... nameFld = form.down('textﬁeld[name=name]'); idFld =
form.down('textﬁeld[name=id]'); saveButton = form.down('button[text=保存]'); form.on('saveCommand', function(form) { var values = form.getValues(); t.diag('保存ボタンがクリックされました'); t.is(values.name, nameValue, 'nameフィールドの⼀一致'); t.is(values.id, idValue, 'idフィールドの⼀一致'); t.endAsync(sync); }); form.loadRecord(rec); ...

γϛϡϨʔτ POϝιουΛར༻ͯ͠ɺGPSN͕ ൃՐ͍ͯ͠Δɺอଘ࣌ͷ TBWF$PNNBOEΠϕϯτΛϦ οεϯ͠·͢ɻ ͦͯ͠ɺͦͷதͰߦ͍ͬͯΔͷ͸ GPSNʹೖྗ͞Εͨ஋͕߹͍ͬͯ Δ͔Ͳ͏͔ͷνΣοΫͰ͢ɻ ... nameFld
= form.down('textﬁeld[name=name]'); idFld = form.down('textﬁeld[name=id]'); saveButton = form.down('button[text=保存]'); form.on('saveCommand', function(form) { var values = form.getValues(); t.diag('保存ボタンがクリックされました'); t.is(values.name, nameValue, 'nameフィールドの⼀一致'); t.is(values.id, idValue, 'idフィールドの⼀一致'); t.endAsync(sync); }); form.loadRecord(rec); ...

γϛϡϨʔτ GPSNʹରͯ͠ɺ࠷ॳʹ࡞͓ͬͯ ͍ۭͨͷ.PEFMΛϩʔυͤͯ͞ ͓͖·͢ɻ ... nameFld = form.down('textﬁeld[name=name]'); idFld =
form.down('textﬁeld[name=id]'); saveButton = form.down('button[text=保存]'); form.on('saveCommand', function(form) { var values = form.getValues(); t.diag('保存ボタンがクリックされました'); t.is(values.name, nameValue, 'nameフィールドの⼀一致'); t.is(values.id, idValue, 'idフィールドの⼀一致'); t.endAsync(sync); }); form.loadRecord(rec); ...

γϛϡϨʔτ ͦͯ͠ɺ࠷ޙʹ֤ΞΫγϣϯΛఆ ͍͖ٛͯ͠·͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld,
text: idValue }, { action: 'type', target: nameFld, text: nameValue }, { action: 'click', target: saveButton // ﬁre ‘saveCommand’ }) ...

γϛϡϨʔτ ·ͣ࠷ॳ͸ɺ*%ͷUFYUpFMEʹ஋ Λೖྗ͠·͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld,

γϛϡϨʔτ ࣍ʹɺ໊લͷUFYUpFMEʹ஋Λೖ ྗ͠·͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld,

γϛϡϨʔτ ͦͯ͠ɺ࠷ޙʹ֤ΞΫγϣϯΛఆ ͍͖ٛͯ͠·͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld,

γϛϡϨʔτ ࠷ޙʹɺอଘϘλϯΛΫϦοΫ͞ ͤΔΞΫγϣϯΛೖΕͨΒςετ έʔε͸׬੒Ͱ͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target:
idFld, text: idValue }, { action: 'type', target: nameFld, text: nameValue }, { action: 'click', target: saveButton // ﬁre ‘saveCommand’ }) ...

ݟͯΈΑ͏ʂ

4JFTUBΛར༻ͨ͠4FODIB5PVDIͷςετέʔε

ςετը໘ͷ४උ ४උ͢ΔϑΝΠϧʹ͍ͭͯ͸ɺ &YU+4ͱԿΒมΘΓ͸ͳ͍ͷͰ w UFTU@IBSOFTTIUNM w UFTU@IBSOFTTKT ্هͭͷۭϑΝΠϧΛઌʹ௥Ճͯ͠ ͓͖·͠ΐ͏ɻ

αϯϓϧΞϓϦέʔγϣϯ ͜͜Ͱςετʹ࢖༻͢ΔΞϓϦέʔγ ϣϯ͸ɺ4FODIB5PVDIͰॳظϓϩδ ΣΫτΛ࡞੒ͨ͠ࡍʹੜ੒͞ΕΔΞϓ ϦέʔγϣϯΛɺςετ༻ͷαϯϓϧ ΞϓϦέʔγϣϯͱͯ͠ར༻͠·͢ɻ

ςετը໘ͷ४උ UFTU@IBSOFTTIUNMͷத਎΋΄ͱΜͲมΘΓ·ͤΜɺಡΈࠐΉϦιʔε͕ 4FODIB5PVDI༻ͷ΋ͷʹͳ͙ͬͨΒ͍Ͱ͢Ͷɻ <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css"
href="./touch/resources/css/sencha-touch.css"/> <link rel="stylesheet" type="text/css" href="./siesta/resources/css/siesta-touch-all.css"> <script type="text/javascript" src="./touch/sencha-touch-all.js"></script> <script type="text/javascript" src="./siesta/siesta-touch-all.js"></script> <script type="text/javascript" src="./test_harness.js"></script> </head> <body> </body> </html>

ςετը໘ͷ४උ ࣍͸ɺUFTU@IBSOFTTKTͷத਎Λ ॻ͍͍͖ͯ·͢ɻ ߏ੒͸&YU+4ͱಉ͡Ͱɺͪ͜Β ΋Ϧιʔε͕มΘ͙ͬͨΒ͍Ͱ ͢ɻ var Harness = Siesta.Harness.Browser.SenchaTouch;
Harness.conﬁgure({ title: 'Siesta Test', loaderPath: { 'Siesta': 'app' }, preload: [ './touch/resources/css/sencha-touch.css', './touch/sencha-touch-all-debug.js' ] }); Harness.start({ group: 'View', items: [ 'tests/010_tabview.t.js' ] });

ςετέʔεΛॻ͍ͯΈΔ ॳظϓϩδΣΫτͰੜ੒͞ΕΔΞϓϦέʔγϣϯ͸ɺ୯७ͳ7JFX͕༻ҙ͞ Ε͍ͯΔλϒߏ੒ͷΞϓϦέʔγϣϯʹͳ͍ͬͯ·͢ɻ ࠓճ͸ɺॳظͰੜ੒͞ΕΔΞϓϦέʔγϣϯͷεΫϩʔϧͷ֬ೝͱɺλϒ੾ Γସ͕͑ਖ਼ৗʹߦ͑Δ͔Ͳ͏͔ͷςετΛ΍ͬͯΈ͍ͨͱࢥ͍·͢ɻ

ςετέʔεΛॻ͍ͯΈΔ StartTest(function(t) { t.diag('View Test'); t.requireOk( ['Siesta.view.Main'], function() { Ext.create('Siesta.view.Main',
{fullscreen: true}); t.waitForSelector('.x-container', function() { t.chain( {action: 'wait', delay: 2000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, 200]}, {action: 'wait', delay: 1000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, -200]}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .action'}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .home'}, {action: 'wait', delay: 1000} ); }); }

{fullscreen: true}); t.waitForSelector('.x-container', function() { t.chain( {action: 'wait', delay: 2000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, 200]}, {action: 'wait', delay: 1000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, -200]}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .action'}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .home'}, {action: 'wait', delay: 1000} ); }); } ςετʹ࢖༻͢Δ7JFXΛੜ੒͠·͢ɻ

{fullscreen: true}); t.waitForSelector('.x-container', function() { t.chain( {action: 'wait', delay: 2000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, 200]}, {action: 'wait', delay: 1000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, -200]}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .action'}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .home'}, {action: 'wait', delay: 1000} ); }); } ࢦఆͨ͠ηϨΫλΛࢀরͰ͖Δঢ়ଶʹͳΔ· Ͱɺ଴ػͯ͘͠ΕΔXBJU'PS4FMFDUPSϝιο υΛར༻ͯ͠ɺඞཁͳηϨΫλʔΛࢦఆ͠· ͢ɻ

{fullscreen: true}); t.waitForSelector('.x-container', function() { t.chain( {action: 'wait', delay: 2000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, 200]}, {action: 'wait', delay: 1000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, -200]}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .action'}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .home'}, {action: 'wait', delay: 1000} ); }); } &YU+4ଆͰ΋࢖༻ͨ͠ɺॱ࣍"DUJPOΛ࣮ߦ͢Δ ͨΊͷɺDIBJOϝιουΛར༻֤ͯ͠ςετέ ʔεΛ௥Ճ͍͖ͯ͠·͢ɻ

{fullscreen: true}); t.waitForSelector('.x-container', function() { t.chain( {action: 'wait', delay: 2000}, // 2秒待機 {action: 'drag', source: '>>container[title=Welcome]', by: [0, 200]}, {action: 'wait', delay: 1000}, // 1秒待機 {action: 'drag', source: '>>container[title=Welcome]', by: [0, -200]}, {action: 'wait', delay: 1000}, // 1秒待機 {action: 'tap', target: '.x-tab .action'}, {action: 'wait', delay: 1000}, // 1秒待機 {action: 'tap', target: '.x-tab .home'}, {action: 'wait', delay: 1000} // 1秒待機 ); }); XBJUΞΫγϣϯ͸ɺEFMBZϓϩύςΟʹϛϦඵ Λࢦఆ͢Δ͜ͱͰɺ࣍ͷΞΫγϣϯΛ࣮ߦ͢Δ ·Ͱ଴ػΛߦ͏ΞΫγϣϯʹͳΓ·͢ɻ

{fullscreen: true}); t.waitForSelector('.x-container', function() { t.chain( {action: 'wait', delay: 2000}, {action: 'drag', target: '>>container[title=Welcome]', by: [0, 200]}, {action: 'wait', delay: 1000}, {action: 'drag', target: '>>container[title=Welcome]', by: [0, -200]}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .action'}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .home'}, {action: 'wait', delay: 1000} ); }); } ESBHΞΫγϣϯ͸ɺը໘Λٖࣅతʹυϥοά͠ ͯ͘ΕΔΞΫγϣϯʹͳΓ·͢ɻ UBSHFUϓϩύςΟͰυϥοά͢Δର৅Λࢦఆɺ CZϓϩύςΟʹ<Y Z>Λࢦఆ͢Δ͜ͱͰɺର৅ͷ த৺͔ΒͲͷ͘Β͍υϥοά͢Δ͔ࢦఆ͠·͢

{fullscreen: true}); t.waitForSelector('.x-container', function() { t.chain( {action: 'wait', delay: 2000}, {action: 'drag', target: '>>container[title=Welcome]', by: [0, 200]}, {action: 'wait', delay: 1000}, {action: 'drag', target: '>>container[title=Welcome]', by: [0, -200]}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .action'}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .home'}, {action: 'wait', delay: 1000} ); }); } ESBHΞΫγϣϯ͸ɺը໘Λٖࣅతʹυϥοά͠ ͯ͘ΕΔΞΫγϣϯʹͳΓ·͢ɻ UBSHFUϓϩύςΟͰυϥοά͢Δର৅Λࢦఆɺ CZϓϩύςΟʹ<Y Z>Λࢦఆ͢Δ͜ͱͰɺର৅ͷ த৺͔ΒͲͷ͘Β͍υϥοά͢Δ͔ࢦఆ͠·͢ ͜͜Ͱ͸ɺUJUMFϓϩύςΟʹ8FMDPNFͱ͍͏จ ࣈྻ͕ࢦఆ͞Ε͍ͯΔίϯϙʔωϯτʹର͠ ͯɺը໘தԝ͔ΒԼʹQYυϥοάͨ͠ޙʹ ࠓ౓͸্ʹQYυϥοά͍ͯ͠·͢ɻ

{fullscreen: true}); t.waitForSelector('.x-container', function() { t.chain( {action: 'wait', delay: 2000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, 200]}, {action: 'wait', delay: 1000}, {action: 'drag', source: '>>container[title=Welcome]', by: [0, -200]}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .action'}, {action: 'wait', delay: 1000}, {action: 'tap', target: '.x-tab .home'}, {action: 'wait', delay: 1000} ); }); } ࠷ޙʹɺ5BCͷϘλϯΛަޓʹλοϓͤ͞Δ͜ ͱͰɺը໘ͷ੾Γସ͕͑ਖ਼ৗʹߦΘΕΔ͔Λ֬ ೝ͍ͯ͠·͢ɻ

ͦΕͰ͸ɺݟͯΈ·͠ΐ͏ʂ

Ҏ্ɺ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

第9回SenchaUG@札幌「Siestaで中の人に頑張ってもらう」

第9回SenchaUG@札幌「Siestaで中の人に頑張ってもらう」

More Decks by Tanaka Yuuya

Featured

Transcript