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

Transcript

1. SiestaΛ࢖ͬͯɺதͷਓʹؤுͬͯ΋Β͓͏ גࣜձࣾθϊϑΟ খఅ Ұ߂
2. SiestaͬͯԿʁ w +4ΦϒδΣΫτͷൺֱ w %0.্ͷΤϨϝϯτͷଘࡏ֬ೝ w ϑΥʔϜͳͲͷೖྗςετ w υϥοάυϩοϓͳͲͷϢʔβૢ࡞ w ͦͷଞFUD ؆୯ʹઆ໌͢Δͱɺ+4্ͷίʔυ͕ਖ਼ৗʹ ಈ࡞͍ͯ͠Δ͔Ͳ͏͔ΛࣗಈͰςετͯ͠ ͘ΕΔπʔϧͰ͢ɻ βοΫϦઆ໌͢ΔͱɺҎԼͷΑ͏ͳ͜ͱ͕ ग़དྷ·͢ɻ
3. ʮඦฉ͸Ұݟʹ͔ͣ͠ʯͰ͢
4. ࠓճ͸ ࠓճ͸
   4FODIB
   &YU
   +4
   ͱɺ͜ͷͱͬͯ΋ૉఢͳ
   4JFTUB
   Λ࢖ͬͯ؆୯ ͳΞϓϦέʔγϣϯΛ࡞Γɺ࣮ࡍʹͦͷΞϓϦέʔγϣϯͷࣗಈςετΛ͢ ΔҝͷςετέʔεΛ࡞͍͖ͬͯ·͢
   
5. αϯϓϧΞϓϦέʔγϣϯ
   
6. ࠓճ࢖͏ΞϓϦέʔγϣϯ ͔ͤͬ͘ͳͷͰɺ4FODIB
   $NEΛ࢖ͬ ͯΞϓϦέʔγϣϯΛ࡞͍͖ͬͯ·͠ΐ ͏ɻ 4FODIB
   $NEͰϓϩδΣΫτΛ࡞੒͢ ΔલͷσΟϨΫτϦߏ੒͸࣍ͷ௨Γɻ TELσΟϨΫτϦ͸ɺ&YU+4ͷ4%,͕ ೖ͍ͬͯΔσΟϨΫτϦʹͳΓ·͢ɻ
7. ࠓճ࢖͏ΞϓϦέʔγϣϯ ४උ͕ग़དྷͨΒɺΈΜͳେ޷͖ࠇ͍ը໘ ʢλʔϛφϧʣ͔ΒίϚϯυͰϓϩδΣ ΫτΛੜ੒͠·͢
    $ 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 ੜ੒͢ΔϓϩδΣΫτσΟϨΫτϦ ࣍ͷΑ͏ʹ Λࢦఆͯ͋͛͠Δ͜ͱʹΑΓɺεέϧτ ϯͷΞϓϦέʔγϣϯ͕ੜ੒͞Ε·͢ɻ
8. ࠓճ࢖͏ΞϓϦέʔγϣϯ ࠓճ࢖༻͢ΔαϯϓϧΞϓϦέʔγϣ ϯ͸ɺӈͷΑ͏ͳ΋ͷΛ࢖༻͠·͢ɻ ߏ੒ͱͯ͠͸ w ೖྗϑΥʔϜʢ&YUGPSN1BOFMʣ w σʔλΛදࣔ͢Δ(SJEʢ&YUHSJE1BOFMʣ ʹͳΓ·͢ɻ
9. ࠓճ࢖͏ΞϓϦέʔγϣϯ ࣮ࡍ͸ɺ'PSNʹೖྗͨ͠஋Λ(SJEʹ ௥Ճ͢ΔͷͰ͕͢ɺࠓճ͸ςετέʔ εΛಈ͔͢ҝʹ࢖༻͢ΔͷͰɺ(SJE΁ ͷ௥ՃͳͲͷॲཧ͸ೖΕͯ͋Γ·ͤ Μɻ อଘϘλϯΛԡͨ͠ࡍ͸ɺ୯७ʹอଘ ࣌ͷΠϕϯτ͕ൃՐ͢Δ͚ͩʹͳͬͯ ͍·͢ɻ
10. 4JFTUBͷ४උ
    
11. ·ͣ͸ɺμ΢ϯϩʔυ 4JFTUBΛ࢖͏ʹ͸ɺ੡඼Λμ΢ϯϩ ʔυ͢Δඞཁ͕͋Γ·͢ɻ ʢࠓճ͸ແྉ൛Λ࢖͍͖ͬͯ·͢ʣ ແྉ൛ͷμ΢ϯϩʔυ͸ɺฐࣾ੡඼ϖ ʔδʹϦϯΫ͕ுͬͯ͋ΔͷͰɺͦͪ Β͔Βμ΢ϯϩʔυ͠·͢ɻ http://www.xenophy.com/product/ bryntum/siesta
12. ઃஔ͢Δ μ΢ϯϩʔυͯ͠ղౚͨ͠ΒɺσΟϨ ΫτϦ໊ΛʮTJFTUBʯͳͲʹϦωʔ Ϝͯ͠ɺΞϓϦέʔγϣϯͷϧʔτσ ΟϨΫτϦʹઃஔ͠·͢ɻ
13. ςετը໘ͷ४උ ςετͷى఺ͱͳΔϖʔδͷ४උΛ͢ ΔҝʹɺUFTU@IBSOFTTIUNMΛ࡞ ੒͠·͢ɻ
14. ςετը໘ͷ४උ த਎͸͜Μͳײ͡Ͱɺදࣔʹඞཁͳ$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>
15. ςετը໘ͷ४උ ଓ͍ͯɺઌ΄Ͳͷ)5.-ͰಡΈࠐ· ͍ͤͯͨɺςετέʔεͷى఺ͱͳΔ UFTU@IBSOFTTKTΛ࡞੒͠·͢ɻ
16. ςετը໘ͷ४උ ͪ͜Βͷத਎͸ɺ4JFTUBͷॳظ ઃఆͱɺ͜Ε͔Β֎෦ϑΝΠϧͰ هड़͢Δ֤ςετέʔεͷఆٛΛ ߦ͍·͢ɻ var Harness = Siesta.Harness.Browser.ExtJS; Harness.configure({ 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' ] });
17. ςετը໘ͷ४උ ςετͷ࣮ߦʹ༻͍ΔΠϯελϯ εͷऔಘ var Harness = Siesta.Harness.Browser.ExtJS; Harness.configure({ 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' ] });
18. ςετը໘ͷ४උ ଓ͍ͯɺ4JFTUBຊମͷઃఆΛߦ ͍͖ͬͯ·͢ɻ var Harness = Siesta.Harness.Browser.ExtJS; Harness.configure({ 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ͱಉ༷ͷઃఆʣ
19. ςετը໘ͷ४උ ଓ͍ͯɺQSFMPBEͷઃఆ var Harness = Siesta.Harness.Browser.ExtJS; Harness.configure({ 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ϑΝΠϧ܈
20. ςετը໘ͷ४උ ֎෦ϑΝΠϧʹఆ͍ٛͯ͠Δɺ֤ ςετέʔεͷಡΈࠐΈઃఆ var Harness = Siesta.Harness.Browser.ExtJS; Harness.configure({ 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  ֎෦ϑΝΠϧʹఆ͍ٛͯ͠Δςετ έʔε܈
21. ςετը໘ͷ४උ ࠷ޙʹɺ࣮ࡍͷςετέʔεೖΕ͓ͯ ͘UFTUTσΟϨΫτϦΛ࡞੒͠ɺ·ͣ w UFTUT@TBNQMFUKT Λ࡞੒͍͖ͯ͠·͢ɻ
22. ςετը໘ͷ४උ @TBNQMFUKT಺ͷίʔυ ͸࣍ͷΑ͏ͳܗʹͳΓ·͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); });
23. ςετը໘ͷ४උ ςετίʔυ͸ݪଇ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); }); StartTest(function(t) { ... }); Ͱϥοϓͯ͠هड़͍͖ͯ͠·͢ɻ
24. ςετը໘ͷ४උ 4UBSU5FTUʹ౉͞ΕΔҾ਺ͷ
    U
    ͸ɺ4JFTUB5FTUͷΠϯελϯε Ͱ͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); }); ͜ͷ4JFTUB5FTUΠϯελϯε͸ ͍͔ͭ͘ͷΞαʔγϣϯϝιου ͕༻ҙ͞Ε͓ͯΓɺͦΕΒΛ࢖༻ ͯ͠ςετίʔυΛهड़͍͖ͯ͠ ·͢ɻ
25. ςετը໘ͷ४උ EJBHϝιου͸ɺςετέʔε Λ࣮ߦͨ͠ࡍͷɺ݁Ռදࣔ෦෼ʹ λΠτϧͷΑ͏ͳܗͰจࣈྻΛද ࣔͤ͞ΔҝͷϝιουͰ͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); });
26. ςετը໘ͷ४උ PLϝιου͸ɺୈҾ਺ʹ༩͑ͨ ஋͕
    USVF
    ͷ৔߹ςετΛύε ͠ɺୈҾ਺ʹ༩͑ͨจࣈྻΛς ετ݁Ռʹग़ྗ͠·͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); }); ӈͷίʔυͷ৔߹ɺ&YUΦϒδΣ Ϋτ͕ଘࡏ͢Ε͹ςετΛύε͠ ·͢ɻ
27. ςετը໘ͷ४උ SFRVJSF0Lϝιου͸ɺͦͷΫϥ ε͕ਖ਼ৗʹSFRVJSF͞ΕΕ͹ςε τΛύε͠·͢ɻ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); }); ·ͨɺ͜ͷޙ৮Ε͍͖ͯ·͕͢ɺ ୈҾ਺ʹίʔϧόοΫؔ਺Λη οτ͢Δ͜ͱͰɺΫϥεΛϩʔυ ޙॲཧΛ࣮ߦ͢Δ͜ͱ΋ग़དྷ·͢
28. ςετը໘ͷ४උ ͜ͷଞʹ΋ StartTest(function(t) { t.diag(‘Hello World!!’); t.ok(Ext, ‘ExtJS is here’); t.requireOk(‘Siesta.controller.Main’); }); w EPOFϝιου w JTϝιου౳ ͍͔ͭ͘ͷϝιου͕༻ҙ͞Εͯ ͍·͕͢ɺ͜͜Ͱ͸·ͣӈͷίʔ υΛ࣮ߦͯ͠Έ·͠ΐ͏ɻ
29. 4JFTUBΛಈ͔ͯ͠ΈΔ
    
30. ઃஔͨ͠63-ʹΞΫηε ४උͷࡍʹ࡞੒ͨ͠ɺ UFTU@IBSOFTTIUNMʹΞΫηε͢ Δ͜ͱͰɺ4JFTUBͷςετը໘Λ։ ͘͜ͱ͕ग़དྷ·͢ɻ IUUQ\QSPKFDU3PPU%JS^UFTU@IBSOFTTIUNM
31. 4JFTUB࣮ߦը໘ ΞΫηε͢ΔͱӈͷΑ͏ͳը໘͕։͖ ·͢ɻࠨͷπϦʔϏϡʔʹදࣔ͞Εͯ ͍Δͷ͕ɺ४උͷࡍʹ࡞੒ͨ͠ɺ UFTU@IBSOFTTKTʹهड़ͨ͠ɺςε τέʔεҰཡͰ͢ɻ
32. 4JFTUB࣮ߦը໘ ςετΛ࣮ߦ͢Δʹ͸ɺπϦʔϏϡʔ ʹදࣔ͞Ε͍ͯΔςετέʔεΛμϒ ϧΫϦοΫ͢Δ͜ͱͰ࣮ߦͰ͖·͢ɻ
33. 4JFTUB࣮ߦը໘ ςετΛ࣮ߦ͢Δͱɺઌ΄Ͳهड़ͨ͠ ςετέʔε͕૸ΓӈͷΑ͏ͳ߲໨͕ ग़ྗ͞Ε·͢ɻ
34. 4JFTUB࣮ߦը໘ t.diag(‘Hello World!!’);
35. 4JFTUB࣮ߦը໘ t.ok(Ext, ‘ExtJS is here’);
36. 4JFTUB࣮ߦը໘ t.requireOk('Siesta.controller.Main');
37. 4JFTUB࣮ߦը໘ ͜Ε͕؆୯ͳςετͷํ๏ʹͳΓ· ͢ɻͦΕͰ͸ɺ๯಄Ͱ৮Εͨαϯϓϧ ΞϓϦέʔγϣϯΛݩʹɺ·ͣ͸σʔ λ.PEFMͷςετέʔεΛॻ͍ͯΈ ·͠ΐ͏ɻ
38. .PEFMͷςετέʔεΛॻ͍ͯΈΔ
    
39. ςετέʔεͷ௥Ճ UFTU@IBSOFTTKTʹ৽ͨʹ߲໨ Λ௥Ճ͠·͢ɻ ... Harness.start({ group: 'Sample', items: [ 'tests/010_sanity.t.js' ] }, { group: ‘Model’, items: [ ‘tests/021_product.t.js’ ] });
40. .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!!'); }); });
41. 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); } }); });
42. ଓ͍ͯ7JFXͷςετέʔεͰ͢
    
43. ςετέʔεͷ௥Ճ 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’ ] });
44. 7JFXͷςετέʔε 7JFXͷςετέʔεΛߦ͏ͨΊʹ͸ʢࠓճ͸(SJEͷέʔεʣ w දࣔʹඞཁͳΫϥεͷSFRVJSFνΣοΫ w දࣔʹඞཁͳΠϯελϯεͷੜ੒ʢࠓճ͸(SJEͳͷͰ4UPSF͕ඞཁʣ  4UPSFੜ੒࣌ʹTUPSF*EϓϩύςΟΛઃఆ͢Δඞཁ༗ w 7JFXͷੜ੒  SFOEFS5PϓϩύςΟͰඳըઌΛ&YUHFU#PEZ ʹઃఆ w ্ه׬ྃޙʹ֤ςετॲཧΛهड़ ίʔυ͕গ͠௕͘ͳΔͷͰɺ࣍ͷεϥΠυʹࡌͤ·͢ɻ
45. 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.first().get('name'), 'Found full name in first cell'); }); }); });
46. 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.first().get('name'), 'Found full name in first cell'); }); }); }); (SJEΛදࣔ͢ΔͷʹඞཁͳΫϥεͷSFRVJSFν ΣοΫΛߦ͍·͢ɻ
47. 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.first().get('name'), 'Found full name in first cell'); }); }); }); (SJEʹදࣔ͢ΔͨΊͷ4UPSFΛੜ੒͠·͢ɻ ͜ͷࡍʹɺ(SJEʹఆٛͨ͠4UPSF*%ͷઃఆΛ ߦΘͳ͍ͱ(SJEʹσʔλ͕දࣔͰ͖ͳ͍ͷͰ ஫ҙ͍ͯͩ͘͠͞ɻ
48. 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.first().get('name'), 'Found full name in first cell'); }); }); }); (SJEͦͷ΋ͷΛੜ੒͠·͢ɻ ඳըઌΛɺ&YUHFU#PEZϝιουͰઃఆ͠· ͢ɻ
49. 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.first().get('name'), 'Found full name in first cell'); }); }); }); (SJEͷ͕දࣔ͞ΕΔ·Ͱ଴ػ͢ΔϝιουͰ ͢ɻ͜ΕΛར༻ͯ͠ɺ(SJEͷ಺༰͕දࣔ͞Ε ͔ͯΒςετΛߦ͍·͢ɻ
50. 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.first().get('name'), 'Found full name in first cell'); }); }); }); ͜͜Ͱߦ͍ͬͯΔͷ͸ɺ4UPSF಺ͷσʔλ਺ ͱɺ(SJEʹ࣮ࡍදࣔ͞Ε͍ͯΔσʔλ਺͕ಉ ͔͡Ͳ͏͔ΛνΣοΫ͍ͯ͠·͢ɻ
51. 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.first().get('name'), 'Found full name in first cell'); }); }); }); ˞͜͜͸ޙͰॻ͘
52. ͓଴͔ͪͶͷϢʔβೖྗγϛϡϨʔτ
    
53. function() { function() { function() { function() { // ... } } } } Ϣʔβૢ࡞γϛϡϨʔτͷྲྀΕ 4JFTUBͰߦ͑ΔϢʔβૢ࡞ͷ γϛϡϨʔτ͸ɺ 4JFTUB5FTU4JNVMBUF഑Լͷ ϝιου΍ɺ 4JFTUB5FTU"DUJPOΫϥε͕ ৭ʑͱߦͬͯ͘Ε·͢ɻ ಈ࡞ͷྲྀΕͱͯ͠͸ɺ֤ΞΫγ ϣϯ׬ྃޙʹίʔϧόοΫΛݺ ͼग़͢ͱ͍͏ඇಉظͳܗʹͳΓ ·͢ɻ ਂ͘ͳͬͯ·͏ŋŋŋ
    
54. ͦΜͳ͋ͳͨʹ 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 } });
55. ͦΜͳ͋ͳͨʹ ·ͨɺ͜ͷDIBJOϝιου͸"DUJPO ͱݺ͹ΕΔΦϒδΣΫτΛ౉ͯ͋͛͠ Δ͜ͱͰ΋ɺςετέʔεΛ࡞Δ͜ͱ ͕ग़དྷ·͢ɻ t.chain({ action : 'type', target : userNameField, text : 'username' },{ action : 'type', target : passwordField, text : 'secret' },{ action : 'click', target : loginButton });
56. ͦΜͳ͋ͳͨʹ ࢦఆͰ͖Δ಺༰ͱͯ͠͸ 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  BDUJPO
    UZQF
    ͷ৔߹ɺςΩετϑΟʔϧ υʹೖྗ͢Δจࣈྻɺ͜ͷଞʹ΋BDUJPO ຖʹࢦఆͰ͖ΔΦϓγϣϯ౳΋͋Γ·͢ ͕ɺৄ͘͠͸"1*υΩϡϝϯτΛ͝ཡ͘ ͍ͩ͞ɻ
57. 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  BDUJPO
    UZQF
    ͷ৔߹ɺςΩετϑΟʔϧ υʹೖྗ͢Δจࣈྻɺ͜ͷଞʹ΋BDUJPO ຖʹࢦఆͰ͖ΔΦϓγϣϯ౳΋͋Γ·͢
58. 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ͷΠϯελϯε  ίϯϙδοτΫΤϦʔจࣈྻ  ίϯϙʔωϯτΫΤϦʔจࣈྻ ʢ͜ΕͰࢦఆ͢Δ৔߹͸ɺઌ಄ʹ
    ʠʡΛ͚ͭΔඞཁ͕͋Γ·͢ʣ
59. Ϣʔβૢ࡞ΛγϛϡϨʔτ͢Δςετίʔυ 4JFTUBͰߦ͑ΔϢʔβૢ࡞ͷγϛϡϨʔτ͸ɺ4JFTUB5FTU4JNVMBUF഑ Լͷϝιου΍ɺ4JFTUB5FTU"DUJPOΫϥε͕৭ʑͱߦͬͯ͘Ε·͢ɻ શମΛࡌͤΔͱ௕͘ͳͬͯ͠·͏ͷͰɺϙΠϯτຖʹઆ໌͍͖ͯ͠·͢ɻ ࠓճͷϢʔβૢ࡞Ͱߦ͍ͷ͸ҎԼ఺ w ͭͷUFYUpFMEʹ஋Λೖྗͤ͞Δ w ೖྗͨ͠஋Λอଘ͢ΔͨΊʹɺอଘϘλϯΛΫϦοΫͤ͞Δ w อଘϘλϯ͕ΫϦοΫ͞ΕͨࡍͷΠϕϯτΛर͍ɺೖྗͨ͠஋ͷνΣοΫΛߦ͏
60. γϛϡϨʔτ ·ͣɺඞཁͳΫϥεͷಡΈࠐΈ͓ Αͼੜ੒͕׬ྃͨ͠ΒɺGPSNί ϯϙʔωϯτ಺ͷɺςετέʔε ʹ࢖͏ཁૉΛલ΋ͬͯऔಘ͓ͯ͠ ͖·͢ɻ ... Ext.create('Siesta.store.Products', { storeId: 'Products' }); form = Ext.create('Siesta.view.Form', { width: 500, renderTo: Ext.getBody() }); nameFld = form.down('textfield[name=name]'); idFld = form.down('textfield[name=id]'); saveButton = form.down('button[text=อଘ]'); ...
61. γϛϡϨʔτ ͜ͷ෦෼Ͱ͢Ͷɻ ੜ੒ͨ͠GPSN͔ΒEPXOϝιου Λར༻ͯ͠ɺͦΕͧΕͷίϯϙʔ ωϯτΛऔಘ͓͖ͯ͠·͢ɻ ... Ext.create('Siesta.store.Products', { storeId: 'Products' }); form = Ext.create('Siesta.view.Form', { width: 500, renderTo: Ext.getBody() }); nameFld = form.down('textfield[name=name]'); idFld = form.down('textfield[name=id]'); saveButton = form.down('button[text=อଘ]'); ...
62. γϛϡϨʔτ ଓ͍ͯɺอଘϘλϯΛΫϦοΫ͞ ΕͨࡍͷςετॲཧΛॻ͍͓͖ͯ ·͢ɻ ... nameFld = form.down('textfield[name=name]'); idFld = form.down('textfield[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); ...
63. γϛϡϨʔτ POϝιουΛར༻ͯ͠ɺGPSN͕ ൃՐ͍ͯ͠Δɺอଘ࣌ͷ TBWF$PNNBOEΠϕϯτΛϦ οεϯ͠·͢ɻ ͦͯ͠ɺͦͷதͰߦ͍ͬͯΔͷ͸ GPSNʹೖྗ͞Εͨ஋͕߹͍ͬͯ Δ͔Ͳ͏͔ͷνΣοΫͰ͢ɻ ... nameFld = form.down('textfield[name=name]'); idFld = form.down('textfield[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); ...
64. γϛϡϨʔτ GPSNʹରͯ͠ɺ࠷ॳʹ࡞͓ͬͯ ͍ۭͨͷ.PEFMΛϩʔυͤͯ͞ ͓͖·͢ɻ ... nameFld = form.down('textfield[name=name]'); idFld = form.down('textfield[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); ...
65. γϛϡϨʔτ ͦͯ͠ɺ࠷ޙʹ֤ΞΫγϣϯΛఆ ͍͖ٛͯ͠·͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld, text: idValue }, { action: 'type', target: nameFld, text: nameValue }, { action: 'click', target: saveButton // fire ‘saveCommand’ }) ...
66. γϛϡϨʔτ ·ͣ࠷ॳ͸ɺ*%ͷUFYUpFMEʹ஋ Λೖྗ͠·͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld, text: idValue }, { action: 'type', target: nameFld, text: nameValue }, { action: 'click', target: saveButton // fire ‘saveCommand’ }) ...
67. γϛϡϨʔτ ࣍ʹɺ໊લͷUFYUpFMEʹ஋Λೖ ྗ͠·͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld, text: idValue }, { action: 'type', target: nameFld, text: nameValue }, { action: 'click', target: saveButton // fire ‘saveCommand’ }) ...
68. γϛϡϨʔτ ͦͯ͠ɺ࠷ޙʹ֤ΞΫγϣϯΛఆ ͍͖ٛͯ͠·͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld, text: idValue }, { action: 'type', target: nameFld, text: nameValue }, { action: 'click', target: saveButton // fire ‘saveCommand’ }) ...
69. γϛϡϨʔτ ࠷ޙʹɺอଘϘλϯΛΫϦοΫ͞ ͤΔΞΫγϣϯΛೖΕͨΒςετ έʔε͸׬੒Ͱ͢ɻ ... form.loadRecord(rec); t.chain({ action: 'type', target: idFld, text: idValue }, { action: 'type', target: nameFld, text: nameValue }, { action: 'click', target: saveButton // fire ‘saveCommand’ }) ...
70. ݟͯΈΑ͏ʂ
    
71. 4JFTUBΛར༻ͨ͠4FODIB5PVDIͷςετέʔε
    
72. ςετը໘ͷ४උ ४උ͢ΔϑΝΠϧʹ͍ͭͯ͸ɺ &YU+4ͱԿΒมΘΓ͸ͳ͍ͷͰ w UFTU@IBSOFTTIUNM w UFTU@IBSOFTTKT ্هͭͷۭϑΝΠϧΛઌʹ௥Ճͯ͠ ͓͖·͠ΐ͏ɻ
73. αϯϓϧΞϓϦέʔγϣϯ ͜͜Ͱςετʹ࢖༻͢ΔΞϓϦέʔγ ϣϯ͸ɺ4FODIB5PVDIͰॳظϓϩδ ΣΫτΛ࡞੒ͨ͠ࡍʹੜ੒͞ΕΔΞϓ ϦέʔγϣϯΛɺςετ༻ͷαϯϓϧ ΞϓϦέʔγϣϯͱͯ͠ར༻͠·͢ɻ
74. ςετը໘ͷ४උ 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>
75. ςετը໘ͷ४උ ࣍͸ɺUFTU@IBSOFTTKTͷத਎Λ ॻ͍͍͖ͯ·͢ɻ ߏ੒͸&YU+4ͱಉ͡Ͱɺͪ͜Β ΋Ϧιʔε͕มΘ͙ͬͨΒ͍Ͱ ͢ɻ var Harness = Siesta.Harness.Browser.SenchaTouch; Harness.configure({ 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' ] });
76. ςετέʔεΛॻ͍ͯΈΔ ॳظϓϩδΣΫτͰੜ੒͞ΕΔΞϓϦέʔγϣϯ͸ɺ୯७ͳ7JFX͕༻ҙ͞ Ε͍ͯΔλϒߏ੒ͷΞϓϦέʔγϣϯʹͳ͍ͬͯ·͢ɻ ࠓճ͸ɺॳظͰੜ੒͞ΕΔΞϓϦέʔγϣϯͷεΫϩʔϧͷ֬ೝͱɺλϒ੾ Γସ͕͑ਖ਼ৗʹߦ͑Δ͔Ͳ͏͔ͷςετΛ΍ͬͯΈ͍ͨͱࢥ͍·͢ɻ
77. ςετέʔεΛॻ͍ͯΈΔ 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} ); }); }
78. ςετέʔεΛॻ͍ͯΈΔ 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} ); }); } ςετʹ࢖༻͢Δ7JFXΛੜ੒͠·͢ɻ
79. ςετέʔεΛॻ͍ͯΈΔ 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} ); }); } ࢦఆͨ͠ηϨΫλΛࢀরͰ͖Δঢ়ଶʹͳΔ· Ͱɺ଴ػͯ͘͠ΕΔXBJU'PS4FMFDUPSϝιο υΛར༻ͯ͠ɺඞཁͳηϨΫλʔΛࢦఆ͠· ͢ɻ
80. ςετέʔεΛॻ͍ͯΈΔ 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} ); }); } &YU+4ଆͰ΋࢖༻ͨ͠ɺॱ࣍"DUJPOΛ࣮ߦ͢Δ ͨΊͷɺDIBJOϝιουΛར༻֤ͯ͠ςετέ ʔεΛ௥Ճ͍͖ͯ͠·͢ɻ
81. ςετέʔεΛॻ͍ͯΈΔ 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}, //  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ϓϩύςΟʹϛϦඵ Λࢦఆ͢Δ͜ͱͰɺ࣍ͷΞΫγϣϯΛ࣮ߦ͢Δ ·Ͱ଴ػΛߦ͏ΞΫγϣϯʹͳΓ·͢ɻ
82. ςετέʔεΛॻ͍ͯΈΔ 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', 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>Λࢦఆ͢Δ͜ͱͰɺର৅ͷ த৺͔ΒͲͷ͘Β͍υϥοά͢Δ͔ࢦఆ͠·͢
83. ςετέʔεΛॻ͍ͯΈΔ 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', 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υϥοά͍ͯ͠·͢ɻ
84. ςετέʔεΛॻ͍ͯΈΔ 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} ); }); } ࠷ޙʹɺ5BCͷϘλϯΛަޓʹλοϓͤ͞Δ͜ ͱͰɺը໘ͷ੾Γସ͕͑ਖ਼ৗʹߦΘΕΔ͔Λ֬ ೝ͍ͯ͠·͢ɻ
85. ͦΕͰ͸ɺݟͯΈ·͠ΐ͏ʂ
86. Ҏ্ɺ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠