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