Ionic（Angular）初心者のテスト奮闘記

テストの必要性、IonicとAngularのテスト環境の比較、Nativeのテストなどを話します。

Transcript

1. IonicʢAngularʣॳ৺ऀ ͷςετฃಆه by @kuwahara_ngv4 2017/08/06 ʲHTML5ͰΞϓϦΛ࡞ΔʳIonic 2+ ϛʔτΞοϓ౦ژ
2. ࣗݾ঺հ
3. Basic information ɹlet my_info = { ɹɹɹtwitter: ‘@kuwahara_ngv4’, ɹɹɹGitHub: ’k-kuwahara’, ɹɹɹQiita: ’clown0082’, ɹɹɹWorkplace: ‘Ϩϓϥϗʔϯגࣜձࣾ’ ɹ}
4. Skill Sets • PHP • JavaScript • Ruby
5. Agenda • ςετͷඞཁੑ • Ionic Appͷςετ 1. Angularͷςετ؀ڥ 2. Ionic TeamͷϢχοτςεταϯϓϧ 3. Nativeػೳͷςετ • ·ͱΊ
6. Topics not told today • E2Eςετʹ͍ͭͯ • Ionicʹ͓͚ΔςετͷTips • AoTʹ͍ͭͯ
7. ςετͷඞཁੑ
8. γεςϜ΍ΞϓϦέʔγϣϯ ͚ͩͰͳ͘
9. ࣗಈൢചػ΋ CLI ΞϓϦέʔγϣϯ΋ ՈͷυΞ΋ Զઐ༻twitter ΫϥΠΞϯτ΋
10. ඞͣςετʢಈ࡞ݕূʣ͸ ͞Ε͍ͯΔ
11. ҿΈ෺ങ͑Δʁ ίϚϯυ࣮ߦͰ͖Δʁ ։͘ or ด͡Δʁ πΠʔτͰ͖Δʁ λΠϜϥΠϯදࣔ͞ΕΔʁ
12. ҿΈ෺ങ͑Δʁ ίϚϯυ࣮ߦͰ͖Δʁ ։͘ or ด͡Δʁ πΠʔτͰ͖Δʁ λΠϜϥΠϯදࣔ͞ΕΔʁ ಈ࡞͠ͳ͚Ε͹࢖ΘΕͳ͍
13. ͲΜͳϓϩμΫτͰ΋ ςετʢಈ࡞ݕূʣ͸ඞཁ
14. Q.Ͱ͸ʮςετίʔυʯ͸ ඞཁͳͷ͔ʁ ※Ҏ߱ɺςετίʔυ => ςετ
15. A. ઈରʹඞཁͱ͸ݶΒͳ͍ ͨͩɺ༨༟͕͋ΔͳΒ͹ ॻ͍ͨ΄͏͕ྑ͍
16. Necessity of test code • ਓ͕΍Βͳͯ͘ྑ͍ςετΛࣗಈԽͰ͖Δ • ࢓༷ͷ֬ೝ࿙ΕɺόάΛݟ͚ͭΔ͜ͱ͕͋Δ • ίʔυͷ࣭ΛߴΊΔ͜ͱʹܨ͕Δ
17. Ionic Appͷςετ
18. $ ionic start hoge (tabs)
19. package.jsonͷҰ෦ൈਮ
20. ςετ༻ͷ΋ͷ͕Կ΋ Πϯετʔϧ͞Εͳ͍ʜͩͱʁ
21. ͭ·Γɺςετ؀ڥ͸ࣗ෼Ͱ ༻ҙ͢Δ͔͠ͳ͍ͷ͔
22. ͱ͸ݴ͑ɺ͜͏͍͏ؔ܎ͩ͠ʜ
23. ·ͣ͸angular-cliͰ༻ҙ͞ΕΔ ςετ؀ڥΛݟͯΈΔ
24. 1. Angularͷςετ؀ڥ
25. package.jsonͷҰ෦ൈਮ
26. package.jsonͷҰ෦ൈਮ
27. Tools • ςετϑϨʔϜϫʔΫ㱺ɹ • E2EςετϑϨʔϜϫʔΫ㱺ɹ • ςετϥϯφʔɹ㱺ɹ • ର৅ϒϥ΢βɹ㱺ɹ ※ ର৅ϒϥ΢β͸௥ՃՄೳ
28. ؆୯ʹղઆ͠·͢
29. • ςετϑϨʔϜϫʔΫ㱺ɹ • E2EςετϑϨʔϜϫʔΫ㱺ɹ • ςετϥϯφʔɹ㱺ɹ • ର৅ϒϥ΢βɹ㱺ɹ ※ ର৅ϒϥ΢β͸௥ՃՄೳ Tools
30. • ςετϑϨʔϜϫʔΫ㱺ɹ • E2EςετϑϨʔϜϫʔΫ㱺ɹ • ςετϥϯφʔɹ㱺ɹ • ର৅ϒϥ΢βɹ㱺ɹ ※ ର৅ϒϥ΢β͸௥ՃՄೳ Tools
31. Tools • ςετϑϨʔϜϫʔΫ㱺ɹ • E2EςετϑϨʔϜϫʔΫ㱺ɹ • ςετϥϯφʔɹ㱺ɹ • ର৅ϒϥ΢βɹ㱺ɹ ※ ର৅ϒϥ΢β͸௥ՃՄೳ
32. How to write test, or policy • جຊ͸componentຖʹςετΛॻ͘ • ςετίʔυͷϑΝΠϧ໊͸ʮ*.spec.tsʯ • Service Class΋serviceຖʹςετΛॻ͘ • UIʢσβΠϯʣʹ͍ͭͯ͸ςετ͸ॻ͔ͳ͍
33. Test File Name Example ֤ίϯϙʔωϯτຖ ʹ.spec.tsϑΝΠϧΛ࡞Δɻ
34. Component Class Test Example ಄ͰඞཁͳϞδϡʔ ϧΛಡΈࠐΈɺς ετίʔυͷલʹ DIͨ͠ΓίϯύΠϧ ͢Δ
35. Service Class Example ServiceΫϥε͸ͳΔ΂͘ γϯϓϧʹɻ Angularʹґଘ͠ͳ͍ ͱɺී௨ͷΦϒδΣΫτ ͱͯ͠ςετ͕ॻ͚Δɻ
36. Service Class Test Example ςετ͸͜Μͳײ͡ɻ
37. ৭ʑπʔϧͷ࿩Λ͕ͨ͠
38. ͜ͷࢠΛར༻͢Δ͚ͩͰ΋ ςετ଍Γ͏Δ
39. Feature of TypeScript • ܕ͕͋Δ • Objectͷத਎ΛఆٛͰ͖Δ ɹˠɹίϯύΠϧ࣌ʹΤϥʔΛݴͬͯ͘ΕΔ͔Β
40. 2. Ionic Teamͷ Ϣχοτςεταϯϓϧ
41. Ionic Team͕Githubʹ ςετ༻ͷαϯϓϧϦϙδτϦ Λެ։͍ͯ͠Δɻ
43. ىಈͯ͠ΈΔͱ͜Μͳײ͡ɻ
44. ionic-unit-testing-example
45. ionic-unit-testing-example
46. ςετ؀ڥ͸ʁ
47. package.jsonͷҰ෦ൈਮ
48. ͍͍ͩͨAngularͱಉ͡
49. Comparison of Angular and Ionic app/ ᵓ … ᵓ package.json ᵓ e2e/ ᵓ karma.conf.js ᵋ src/ ɹᵋ app/ app/ ᵓ … ᵓ package.json ᵓ e2e/ ᵓ test-config ɹᵋ karma.conf.js ଞ ᵋ src/ ɹᵋ app/ Angular Ionic
50. Comparison of Angular and Ionic Angular
51. Comparison of Angular and Ionic Ionic
52. Comparison of Angular and Ionic Ionic Ionic ಠࣗͷϞδϡʔϧɺίϯϙʔωϯτΛ ಡΈࠐΉඞཁ͕͋Δ
53. 3. Nativeػೳͷςετ
55. ࠓ͸Ionic Nativeͱͯ͠ ػೳ͕࣮૷͞Ε͍ͯΔ❗
56. Usage native module # install $ ionic cordova plugin add cordova-plugin-camera $ npm i —save @ionic-native/camera
57. ͔͠͠ɺNativeͷػೳ͸ ࣮ػͰςετͤ͟ΔΛಘͳ͍ʜ
58. Example: Camera Plugin ϒϥ΢βͰ͸Nativeͷػೳ͕ͳ͍ͨΊɺͲ͏ͯ͠ ΋࣮ػͰͷ֬ೝ͕ඞཁʜ ʁ
59. ղܾࡦ͋Δํ͝ڭࣔئ͍·͢❗
60. sample application
61. IonicͰ؆୯ͳΞϓϦΛ ̍ͭ࡞Γ·ͨ͠ɻ
62. Pick Lunch Menu https://k-kuwahara.github.io/pick- lunch-menu/
63. Pick Lunch Menu
64. Summary
65. Summary • ςετ͸ॻ͚ΔͳΒॻ͍ͨ΄͏͕ྑ͍ • ࠔͬͨΒAngularͷςετΛਅࣅ͢Δ ɹ˞ڊਓͷݞʹ͸৐ͬͨ΄͏ָ͕ • ωΠςΟϒػೳ͸Ionic NativeΛ࢖͓͏
66. Reference URL • ʮionic-unit-testing-exampleʯ ɹɹhttps://github.com/ionic-team/ionic-unit-testing-example • ʮionicͷςετ؀ڥΛௐ΂ͨʯ ɹɹhttp://qiita.com/bnosuke/items/7f14c169429c9196f7fb • ʮIonic + Typescript + Protractor Ͱe2eςετΛ͢Δʯ ɹɹhttp://qiita.com/takeo-asai/items/ee7c15e5c5cfc9cf3124 • ʮTesting Angular Appʯ ɹɹhttps://speakerdeck.com/quramy/ng-japan-testing-angular-app
67. Ҏ্ɺ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠❗