GAS開発のJestによるモック入り結合テスト仕立て / The way to develop GAS with mocking integration test by Jest

by Aqui TSUCHIDA

Slide 1

Slide 1 text

~ ࣮༻ྫΛఴ͑ͯ ~ GAS։ൃͷ JestʹΑΔϞοΫೖΓ ݁߹ςετ࢓ཱͯ 2018-10-17 Google Apps Script ׆༻ϛʔτΞοϓ #3 @AquiTCD

Slide 2

Slide 2 text

GAS ྑ͍Ͱ͢ΑͶʂ ͓खܰͰྑ͍Ͱ͢ΑͶʂ

Slide 3

Slide 3 text

Ͱ΋ ಈ࡞֬ೝπϥ͘ͳ͍ʁ

Slide 4

Slide 4 text

ίʔυΛมߋ GASʹద༻ ϙνϙνΫϦοΫͯ͠ຊ൪Խ ͏·͘ಈ͔͘ͳ…ʁ

Slide 5

Slide 5 text

໘౗͗͘͢͞Δʂ ϙνϙνΫϦοΫͨ͠Γ… ϒϥ΢βૢ࡞ͨ͠Γ…

Slide 6

Slide 6 text

͔ͩΒ ࣗಈςετͰ ָ͠·͠ΐ͏Αʂ

Slide 7

Slide 7 text

ࣗݾ঺հ Aqui TSUCHIDA ౔ా ໌৴ @AquiTCD αʔόʔαΠυΤϯδχΞ at झຯ: ϑϩϯτΤϯυ։ൃ #ྉཧ #ےτϨ #ήʔϚʔ #ݩόοΫύοΧʔ https://aquitcd.github.io/Pentazemin/ja/ Pentazemin: Electron੡λεΫ؅ཧΞϓϦ https://aquitcd.github.io/yantan/ja/ YANTAN: Chrome֦ு Rubyist, JSer

Slide 8

Slide 8 text

ΞδΣϯμ - ࠓ೔࿩͢͜ͱ • ςετΛՄೳʹ͢Δ؀ڥ • ࣮ࡍͷέʔεΛྫͱͯ͠঺հ • ݁߹ςετͷͨΊʹ΍Δ͜ͱ ※͜͜Ͱ͸ೖྗ͔Βग़ྗ·Ͱͷςετͱ͠·͢ ࠓ೔࿩͞ͳ͍͜ͱ • ؀ڥߏஙͷࡉ͔͍࿩(clasp, webpackͷಋೖํ๏ͳͲʣ • JestͰͷςετίʔυͷॻ͖ํ αϯϓϧίʔυͷGist: https://gist.github.com/AquiTCD/81294f568b823e5eecca11a182a69e14

Slide 9

Slide 9 text

؀ڥ ϩʔΧϧ։ൃͰ͖ΔΑ͏ʹ ES6 + Module ςετ؀ڥ Φεεϝ͸3ͭͷηοτ • Clasp https://github.com/google/clasp • Webpack https://webpack.js.org/ • Jest https://jestjs.io/ja/

Slide 10

Slide 10 text

Clasp is Կʁ ϩʔΧϧͰ։ൃͰ͖ΔͱԿ͕͍͍ͷʁ • Git؅ཧͰ͖Δ • Linter, Formatter͕ޮ͘ • ES6ͷه๏Ͱॻ͚Δ • ςετ͕ॻ͚ͯճͤΔ $ clasp push $ clasp deploy ͳͲͰຊ൪ద༻Ͱ͖ͪΌ͏ ϩʔΧϧ؀ڥͰGASΛ։ൃͰ͖ΔCLIπʔϧ = εΫϦϓτΤσΟλ಺Ͱॻ͔ͳ͍͍ͯ͘

Slide 11

Slide 11 text

Webpack ͱ Jest • JSͷ͋Ε΍͜Ε΍ΛΨονϟϯί • ඞਢͰ͸ͳ͍ͷͰผͷπʔϧͰ΋Մ • Jest • facebook੡ͷςετπʔϧ • ΦʔϧΠϯϫϯ • ڧྗͳϞοΫϥΠϒϥϦΛ಺ଂ

Slide 12

Slide 12 text

ྫ IF GitHubʹ ϓϧϦΫΤετ͕Ͱ͖ͨΒ THEN Chatworkʹ ௨஌͍ͤͨ͞

Slide 13

Slide 13 text

GitHub Chatwork GAS Webhook: JSON API: TEXT Sheets 設定を参照 doPost(e)

Slide 14

Slide 14 text

GASͷಈ࡞Λςετʹ͢Δ 1. Jestʹάϩʔόϧࢦఆ 2. GASͷ૊ΈࠐΈΫϥεΛϞοΫ 3. GAS༻ϥΠϒϥϦͷ୅ସͱϞοΫ 4. ্هΛςετ༻ͷηοτΞοϓͱͯ͠·ͱΊΔ 5. WebhookΛςετϑΟΫενϟͱͯ͠༻ҙ 6. ςετͷ࠷ॳͰಡΈࠐΉ 7. ςετΛॻ͍ͯճ͢

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Jestʹάϩʔόϧࢦఆ • package.json ͷ Jest conﬁg

Slide 17

Slide 17 text

Jestʹάϩʔόϧࢦఆ • package.json ͷ Jest conﬁg globals ʹ ࢖༻ͯ͠Δ ૊ΈࠐΈΫϥεΛ એݴ͢Δ

Slide 18

Slide 18 text

Slide 19

Slide 19 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ SpreadSheet ͷ ֤ Sheet ΛϞοΫίʔυͰදݱ͢Δʹ͸

Slide 20

Slide 20 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ

Slide 21

Slide 21 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ globals Ͱઃఆͨ͠ SpreadSheetApp ͷ getActiveSpreadSheet ϝιουͰ SpreadSheet ΠϯελϯεΛฦ͢Α͏ʹ Jest.fn() ͰϞοΫ

Slide 22

Slide 22 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ SpreadSheet Λ new ͨ͠Β Sheet ʹ໊લΛ͚ͭͯ new ͢ΔΑ͏ʹϞοΫ

Slide 23

Slide 23 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ getSheetByName() ϝιου͸ sheet ΠϯελϯεΛฦ͢ϞοΫ࣮૷

Slide 24

Slide 24 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ • repos γʔτ

Slide 25

Slide 25 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ • members γʔτ

Slide 26

Slide 26 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ

Slide 27

Slide 27 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ 1ߦ͸1ͭͷ഑ྻ ෳ਺ߦ͸ߦͷ഑ྻͷ഑ྻ

Slide 28

Slide 28 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ 1ߦ͸1ͭͷ഑ྻ ෳ਺ߦ͸ߦͷ഑ྻͷ഑ྻ

Slide 29

Slide 29 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ 1ߦ͸1ͭͷ഑ྻ ෳ਺ߦ͸ߦͷ഑ྻͷ഑ྻ

Slide 30

Slide 30 text

GASͷ૊ΈࠐΈΫϥεΛϞοΫ Sheet Ϋϥεʹ ࢖༻ͯ͠ΔϝιουΛ γϛϡϨʔτͨ͠ϞοΫ࣮૷Λ͢Δ

Slide 31

Slide 31 text

Slide 32

Slide 32 text

GAS༻ϥΠϒϥϦͷ୅ସͱϞοΫ • package.json ͷ Jest conﬁg globals ʹ ࢖༻ͯ͠Δ ϥΠϒϥϦͷ ΫϥεΛએݴ͢Δ

Slide 33

Slide 33 text

GAS༻ϥΠϒϥϦͷ୅ସͱϞοΫ

Slide 34

Slide 34 text

GAS༻ϥΠϒϥϦͷ୅ସͱϞοΫ Underscore ͸ lodash ΛಡΈࠐΉ͜ͱͰ୅ସ Moment ͸ Moment.moment ͱͳΔΑ͏ʹ एׯ࢖͍ํ͕ҟͳΔͷͰɺҾ਺Λ౉͢Α͏ʹ୅ସ

Slide 35

Slide 35 text

GAS༻ϥΠϒϥϦͷ୅ସͱϞοΫ APIΛ sendMessage Λ୯७ʹreturn͢ΔΑ͏ϞοΫ → ͜ͷ໭Δ `msgObj` ΛΞαʔγϣϯʹ͔͚Δ͜ͱͰ ςετ͕ՄೳʹͳΔ ChatWorkClient ͷ Client ΛϞοΫ࣮૷

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

WebhookΛςετϑΟΫενϟͱͯ͠༻ҙ • ྫ: test/ﬁxtures/gh_pr.json ҎԼུ

Slide 39

Slide 39 text

Slide 40

Slide 40 text

ςετʹ·ͱΊΔ

Slide 41

Slide 41 text

ςετʹ·ͱΊΔ require Ͱςετίʔυͷ࠷ॳͰ ϞοΫ࣮૷͕·ͱ·ͬͨϑΝΠϧΛಡΈࠐΉ

Slide 42

Slide 42 text

ςετʹ·ͱΊΔ Webhook ͷJSONΛ૝ఆͨ͠ϑΟΫενϟΛηοτ

Slide 43

Slide 43 text

ςετʹ·ͱΊΔ doPost(e) ͷ࠷ޙ͸ChatworkͷsendMessage → ϞοΫͯ͠ΔͷͰ௨஌ͷத਎͸ ςετதͰ͸୯७ʹreturn͞ΕΔ͸ͣ → ͭ·ΓฦΓ஋ΛΞαʔγϣϯʹ͔͚Ε͹OK

Slide 44

Slide 44 text

΋͏ ίʔυมߋ → σϓϩΠ ͏ʔΜ…ಈ͍ͯͳ͍ ·ͨมߋ → σϓϩΠ ͠ͳ͍͍ͯ͘ʂ

Slide 45

Slide 45 text

ςετΛಋೖͯ͠ ຊ౰ʹ͓ؾָͳ GAS։ൃΛ!!