明日からはじめるテストのあるフロントエンド開発 ~ テスティングトロフィー ~

フロントエンドカンファレンス福岡の登壇資料
https://frontend-conf.fukuoka.jp

セッション概要
https://frontend-conf.fukuoka.jp/sessions#b-3

Twitter
https://twitter.com/__sakito__

Transcript

1. ໌೔͔Β͸͡ΊΔςετͷ͋Δ

   ϑϩϯτΤϯυ։ൃ
   ϑϩϯτΤϯυΧϯϑΝϨϯε෱Ԭ
   

   View Slide

2. /BNF
   4BLJUP.VLBJ
   5XJUUFS

   !@@TBLJUP@@
   $PNQBOZ
   $ZCP[VJOD

   'SPOUFOE&YQFSU5FBN
   "CPVUNF
   

   View Slide

3. "HFOEB
   wͳͥςετ͕ඞཁͳͷ͔
   w5FTUJOH5SPQIZ
   w6OJU5FTU
   w*OUFHSBUJPO5FTU
   w&&5FTU
   w·ͱΊ
   

   View Slide

4. ͳͥςετ͕ඞཁͳͷ͔ʁ
   

   View Slide

5. ࠷ॳ͸៉ྷͳϓϩδΣΫτ
   

   View Slide

6. ίʔυ͸ৗʹมԽ͍ͯ͘͠
   wػೳͷ௥Ճ
   wϦϑΝΫλϦϯά
   wύοέʔδͷߋ৽
   wόάͷमਖ਼
   wFUDʜ
   

   View Slide

7. ஈʑͱ௥Ճ͕೉͘͠ͳ͍ͬͯ͘
   

   View Slide

8. ςετΛॻ͘͜ͱͰίʔυʹࣗ৴Λ࣋ͭ
   wϦϑΝΫλϦϯάΛͯ͠΋ɺ

   յΕΔՕॴ͕͙͢ʹΘ͔Δ
   wมߋςετ࣮ߦόάൃ֮·Ͱ

   ͙͢ʹΘ͔Δ
   

   View Slide

9. ςετΛॻ͘͜ͱͰ

   ίʔυΛมߋ͢ΔڪාΛͳ͘͢
   

   View Slide

10. ͲͷΑ͏ʹςετΛॻ͍͍ͯ͘ͷ͔ʁ
    

    View Slide

11. ςετͷ۠෼
    w6OJU5FTU ؔ਺΍ϝιου୯Ґͷςετ
    
    w*OUFHSBUJPO5FTU ػೳςετ
    
    w&OE5P&OE5FTU ΞϓϦέʔγϣϯͷςετ
    
    

    View Slide

12. ςετͷόϥϯεͱίετ
    6OJU5FTU
    *OUFHSBUJPO5FTU
    ࣮ߦอकίετ
    ։ൃ࣮ߦ଎౓
    &&5FTU
    ςετͷྔ
    

    View Slide

13. ςετͷόϥϯεͱίετΛ

    ϑϩϯτΤϯυ͚ͩʹϑΥʔΧεͯ͠ΈΔ
    

    View Slide

14. 5FTUJOH5SPQIZ
    

    View Slide

15. 5FTUJOH5SPQIZ
    Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    

    View Slide

16. 5FTUJOH5SPQIZ
    Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w,FOU$%PEETߟҊ
    wΧόϨοδΛ໨ࢦ͢ͷͰ͸ͳ͍
    wίετɺ଎౓ɺ৴པੑͷόϥϯε
    

    View Slide

17. 8SJUFUFTUT/PUUPPNBOZ.PTUMZJOUFHSBUJPO
    IUUQTLFOUDEPEETDPNCMPHXSJUFUFTUT
    

    View Slide

18. 5FTUJOH5SPQIZ4UBUJD૚
    Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w-JOU 1SFUUJFS 5ZQF4DSJQUͳͲΛ࢖༻
    wλΠϓϛεɺߏจνΣοΫͳͲΛ୲͏૚
    

    View Slide

19. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w+FTU΍UFTUJOHMJCSBSZΛ࢖༻
    wͭͷؔ਺ɺϩδοΫʹରͯ͠ςετΛ
    ॻ͘૚
    5FTUJOH5SPQIZ6OJU૚
    

    View Slide

20. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w6OJUςετͰ͸Χόʔͮ͠Β͍ෳ਺ͷ

    ίϯϙʔωϯτ΍ػೳΛ૊ΈΘͤͨςε
    τΛ͢Δ૚
    wϞοΫΛՄೳͳݶΓ࢖༻ͤͣɺ

    ຊདྷͷػೳ௨ΓͷςετΛ໨ࢦ͢
    w6OJU5FTUͱͷ໌֬ͳ۠෼͸ͳ͍ͷͰɺ

    νʔϜͰͲͷػೳൣғ͕*OUFHSBUJPO
    ૚ͳͷ͔ٞ࿦͢ΔͱΑ͍
    5FTUJOH5SPQIZ*OUFHSBUJPO૚
    

    View Slide

21. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w$ZQSFTTͳͲͷ

    &&ϑϨʔϜϫʔΫΛ࢖༻
    wαʔόʔͱͷ௨৴ΛڬΉςετͳͲ

    ΞϓϦέʔγϣϯ্Ͱόά͕͋ͬͯ͸ࠔ
    ΔॏཁͳػೳΛςετ͢Δ૚
    5FTUJOH5SPQIZ&OEUP&OE૚
    

    View Slide

22. 5FTUJOH8PSLTIPQ
    IUUQTHJUIVCDPNLFOUDEPEETUFTUJOHXPSLTIPQ
    w,FOU$%PEET͕࡞੒ͨ͠ϨϙδτϦ
    

    View Slide

23. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    ࠓճ͸্Ґ૚Λίʔυͱڞʹઆ໌͍ͯ͘͠
    

    View Slide

24. 6OJU5FTU
    

    View Slide

25. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w+FTU
    w'BDFCPPL੡ͷ044ϥΠϒϥϦ
    w6OJU5FTUʹඞཁͳ"TTFSU .PDL $PWFSBHFͳͲ
    ͷػೳΛ΋͍ͬͯΔ
    w5FTUJOH-JCSBSZ
    w,FOU$%PEET͕࡞੒ͨ͠ϥΠϒϥϦ
    w%0.Λૢ࡞͢Δ"1*Λఏڙ
    w%0.5FTUJOH-JCSBSZ΍3FBDU5FTUJOH-JCSBSZ
    ͕͋Δ
    +FTUͱ5FTUJOH-JCSBSZ
    

    View Slide

26. +FTUΛ༻͍ͨίʔυ੒ޭ
    wKFTU UTKFTUΛ࢖༻
    

    View Slide

27. +FTUΛ༻͍ͨίʔυ੒ޭ
    

    View Slide

28. +FTUΛ༻͍ͨίʔυࣦഊ
    wظ଴͢Δ݁Ռͱࠓͷ݁Ռͷҧ͍͸ɺ͙͢ʹΘ͔Δ
    

    View Slide

29. +FTUΛ༻͍ͨίʔυࣦഊ
    

    View Slide

30. +FTUΛ༻͍ͨίʔυ.PDLͷ࢖༻
    wϥϯμϜͷ݁ՌΛऔಘ͢ΔͷͰ҆ఆ͠ͳ͍ςετ
    

    View Slide

31. +FTUΛ༻͍ͨίʔυ.PDLͷ࢖༻
    

    View Slide

32. +FTUΛ༻͍ͨίʔυ.PDLͷ࢖༻
    w.PDL͢Δ͜ͱʹΑΓ݁Ռ͕҆ఆ͢Δ
    

    View Slide

33. +FTUΛ༻͍ͨίʔυ.PDLͷ࢖༻
    

    View Slide

34. 3FBDUͷςετ৔߹
    w!UFTUJOHMJCSBSZSFBDUΛ࢖༻
    

    View Slide

35. 3FBDUͷςετ৔߹
    

    View Slide

36. 3FBDUͷςετ৔߹
    

    View Slide

37. 3FBDU$VTUPN)PPLTͷςετ৔߹
    w!UFTUJOHMJCSBSZSFBDUIPPLTΛ࢖༻
    

    View Slide

38. 3FBDU$VTUPN)PPLTͷςετ৔߹
    

    View Slide

39. 3FBDU$VTUPN)PPLTͷςετ৔߹
    

    View Slide

40. 5FTUJOH3FDJQFT
    IUUQTSFBDUKTPSHEPDTUFTUJOHSFDJQFTIUNM
    

    View Slide

41. *OUFHSBUJPO5FTU
    

    View Slide

42. 5FTUJOH8PSLTIPQͷ5FTUΛݟ͍ͯ͘
    
    

    View Slide

43. ࣮ࡍʹςετ͍ͯ͠ΔMPHJOػೳ
    
    

    View Slide

44. ϩάΠϯػೳͷςετίʔυ
    
    

    View Slide

45. ϩάΠϯػೳͷςετίʔυ
    
    

    View Slide

46. ϩάΠϯػೳͷςετίʔυ
    
    

    View Slide

47. ϩάΠϯػೳͷςετίʔυ
    
    

    View Slide

48. &OEUP&OE5FTU
    

    View Slide

49. $ZQSFTT
    Ҿ༻ݩɿDZQSFTTJP

    IUUQTXXXDZQSFTTJP
    

    View Slide

50. $ZQSFTTʹ͍ͭͯ
    w&OEUP&OEςετϑϨʔϜϫʔΫ
    w044 IUUQTHJUIVCDPNDZQSFTTJPDZQSFTT
    
    wෳ਺ͷϒϥ΢βΛαϙʔτ
    wಈ࡞͕ૣ͍
    w࿥ը΍Ωϟϓνϟ͕Ͱ͖Δ
    w$*Ͱ΋ಈ͔͢͜ͱ͕Ͱ͖Δ
    wৄ͘͠͸͜͜

    IUUQTEPDTDZQSFTTJPHVJEFTPWFSWJFXXIZDZQSFTTIUNM

    

    View Slide

51. $ZQSFTTͷಈ࡞
    

    View Slide

52. $ZQSFTTͷίʔυ
    

    View Slide

53. $ZQSFTTͰ௨৴Λςετ
    

    View Slide

54. $ZQSFTTͷઃఆ
    wDZQSFTTKTPOʹઃఆΛهड़Ͱ͖Δ
    wϒϥ΢β෯΍ߴ͞ɺςετϑΥϧμͷࢦఆͳͲ
    

    View Slide

55. $ZQSFTTΛศརʹ͢Δπʔϧ
    w$ZQSFTT5FTUJOH-JCSBSZ

    $ZQSFTTͷDZίϚϯυΛ֦ுͯ͘͠ΕΔ
    w$ZQSFTT&4-JOU1MVHJO

    $ZQSFTTͷ5FTUϑΝΠϧʹద༻Ͱ͖Δ
    

    View Slide

56. ·ͱΊ
    

    View Slide

57. ·ͱΊ
    w໌೔͔ΒςετΛॻ͍͍ͯ͜͏ʂ
    wςετͰίʔυʹ৴པΛ࣋ͬͯɺ

    ։ൃ͍ͯ͘͠
    wςετ΋όϥϯεͱύϑΥʔϚϯεΛ

    ҙࣝ͢Δ
    w5FTUJOH 5SPQIZ ͸ϑϩϯτΤϯυͷͭͷ
    5FTUख๏
    w*OUFHSBUJPO5FTU΍6OJU5FTUͲ͏෼͚Δ
    ͷ͔νʔϜͰ࿩͠߹͏ͷ͕େࣄ
    

    View Slide

58. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide