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

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

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

Twitter
https://twitter.com/__sakito__

Transcript

1. ໌೔͔Β͸͡ΊΔςετͷ͋Δ
 ϑϩϯτΤϯυ։ൃ
   ϑϩϯτΤϯυΧϯϑΝϨϯε෱Ԭ
2. /BNF
   
   
   
   
   4BLJUP
   .VLBJ
   5XJUUFS

   
   
   
   !@@TBLJUP@@
   $PNQBOZ
   
   
   
   
   $ZCP[V
   JOD
   

   
   
   
   'SPOUFOE
   &YQFSU
   5FBN "CPVU
   NF
3. "HFOEB wͳͥςετ͕ඞཁͳͷ͔
   w5FTUJOH
   5SPQIZ
   w6OJU
   5FTU
   w*OUFHSBUJPO
   5FTU
   w&&
   5FTU
   w·ͱΊ
4. ͳͥςετ͕ඞཁͳͷ͔ʁ
5. ࠷ॳ͸៉ྷͳϓϩδΣΫτ
6. ίʔυ͸ৗʹมԽ͍ͯ͘͠ wػೳͷ௥Ճ
   wϦϑΝΫλϦϯά
   wύοέʔδͷߋ৽
   wόάͷमਖ਼
   wFUDʜ
7. ஈʑͱ௥Ճ͕೉͘͠ͳ͍ͬͯ͘
8. ςετΛॻ͘͜ͱͰίʔυʹࣗ৴Λ࣋ͭ wϦϑΝΫλϦϯάΛͯ͠΋ɺ
 յΕΔՕॴ͕͙͢ʹΘ͔Δ
   wมߋ
   
   ςετ࣮ߦ
   
   όάൃ֮·Ͱ
 ͙͢ʹΘ͔Δ
9. ςετΛॻ͘͜ͱͰ
 ίʔυΛมߋ͢ΔڪාΛͳ͘͢
10. ͲͷΑ͏ʹςετΛॻ͍͍ͯ͘ͷ͔ʁ
11. ςετͷ۠෼ w6OJU
    5FTU ؔ਺΍ϝιου୯Ґͷςετ
    w*OUFHSBUJPO
    5FTU ػೳςετ
    w&OE
    5P
    &OE
    5FTU ΞϓϦέʔγϣϯͷςετ
12. ςετͷόϥϯεͱίετ 6OJU
    5FTU *OUFHSBUJPO
    5FTU ࣮ߦอकίετ
    ։ൃ࣮ߦ଎౓ &&
    5FTU ςετͷྔ
13. ςετͷόϥϯεͱίετΛ
 ϑϩϯτΤϯυ͚ͩʹϑΥʔΧεͯ͠ΈΔ
14. 5FTUJOH
    5SPQIZ
15. 5FTUJOH
    5SPQIZ Ҿ༻ݩɿ5FTUJOH
    +BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN
16. 5FTUJOH
    5SPQIZ Ҿ༻ݩɿ5FTUJOH
    +BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w,FOU
    $
    %PEET
    ߟҊ
    wΧόϨοδΛ໨ࢦ͢ͷͰ͸ͳ͍
    wίετɺ଎౓ɺ৴པੑͷόϥϯε
17. 8SJUF
    UFTUT
    /PU
    UPP
    NBOZ
    .PTUMZ
    JOUFHSBUJPO IUUQTLFOUDEPEETDPNCMPHXSJUFUFTUT
18. 5FTUJOH
    5SPQIZ
    
    4UBUJD૚
     Ҿ༻ݩɿ5FTUJOH
    +BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w-JOU 1SFUUJFS 5ZQF4DSJQU
    ͳͲΛ࢖༻
    wλΠϓϛεɺߏจνΣοΫͳͲΛ୲͏૚
19. Ҿ༻ݩɿ5FTUJOH
    +BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w+FTU
    ΍
    UFTUJOHMJCSBSZ
    Λ࢖༻
    wͭͷؔ਺ɺϩδοΫʹରͯ͠ςετΛ ॻ͘૚ 5FTUJOH
    5SPQIZ
    
    6OJU૚
    
20. Ҿ༻ݩɿ5FTUJOH
    +BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w6OJUςετͰ͸Χόʔͮ͠Β͍ෳ਺ͷ
 ίϯϙʔωϯτ΍ػೳΛ૊ΈΘͤͨςε τΛ͢Δ૚
    wϞοΫΛՄೳͳݶΓ࢖༻ͤͣɺ
 ຊདྷͷػೳ௨ΓͷςετΛ໨ࢦ͢
    w6OJU
    5FTU
    ͱͷ໌֬ͳ۠෼͸ͳ͍ͷͰɺ
 νʔϜͰͲͷػೳൣғ͕
    *OUFHSBUJPO
    ૚ͳͷ͔ٞ࿦͢ΔͱΑ͍ 5FTUJOH
    5SPQIZ
    
    *OUFHSBUJPO૚
    
21. Ҿ༻ݩɿ5FTUJOH
    +BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w$ZQSFTTͳͲͷ
 &&ϑϨʔϜϫʔΫΛ࢖༻
    wαʔόʔͱͷ௨৴ΛڬΉςετͳͲ
 ΞϓϦέʔγϣϯ্Ͱόά͕͋ͬͯ͸ࠔ ΔॏཁͳػೳΛςετ͢Δ૚ 5FTUJOH
    5SPQIZ
    
    &OE
    UP
    &OE૚
    
22. 5FTUJOH
    8PSLTIPQ IUUQTHJUIVCDPNLFOUDEPEETUFTUJOHXPSLTIPQ w,FOU
    $
    %PEET
    ͕࡞੒ͨ͠ϨϙδτϦ
23. Ҿ༻ݩɿ5FTUJOH
    +BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN ࠓճ͸্Ґ૚Λίʔυͱڞʹઆ໌͍ͯ͘͠
24. 6OJU
    5FTU
25. Ҿ༻ݩɿ5FTUJOH
    +BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w+FTU
    w'BDFCPPL
    ੡ͷ
    044
    ϥΠϒϥϦ
    w6OJU
    5FTU
    ʹඞཁͳ
    "TTFSU
    .PDL
    $PWFSBHF
    ͳͲ ͷػೳΛ΋͍ͬͯΔ
    w5FTUJOH
    -JCSBSZ
    w,FOU
    $
    %PEET
    ͕࡞੒ͨ͠ϥΠϒϥϦ
    w%0.
    Λૢ࡞͢Δ
    "1*
    Λఏڙ
    w%0.
    5FTUJOH
    -JCSBSZ
    ΍
    3FBDU
    5FTUJOH
    -JCSBSZ
    ͕͋Δ +FTU
    ͱ
    5FTUJOH
    -JCSBSZ
26. +FTUΛ༻͍ͨίʔυ
    
    ੒ޭ
    
    wKFTU
    UTKFTU
    Λ࢖༻
27. +FTUΛ༻͍ͨίʔυ
    
    ੒ޭ
    
    
28. +FTUΛ༻͍ͨίʔυ
    
    ࣦഊ
    
    wظ଴͢Δ݁Ռͱࠓͷ݁Ռͷҧ͍͸ɺ͙͢ʹΘ͔Δ
29. +FTUΛ༻͍ͨίʔυ
    
    ࣦഊ
    
    
30. +FTUΛ༻͍ͨίʔυ
    
    .PDLͷ࢖༻
    
    wϥϯμϜͷ݁ՌΛऔಘ͢ΔͷͰ҆ఆ͠ͳ͍ςετ
31. +FTUΛ༻͍ͨίʔυ
    
    .PDLͷ࢖༻
    
    
32. +FTUΛ༻͍ͨίʔυ
    
    .PDLͷ࢖༻
    
    w.PDL
    ͢Δ͜ͱʹΑΓ݁Ռ͕҆ఆ͢Δ
33. +FTUΛ༻͍ͨίʔυ
    
    .PDLͷ࢖༻
    
    
34. 3FBDUͷςετ৔߹ w!UFTUJOHMJCSBSZSFBDU
    Λ࢖༻
35. 3FBDUͷςετ৔߹
36. 3FBDUͷςετ৔߹
37. 3FBDU
    $VTUPN
    )PPLT
    ͷςετ৔߹ w!UFTUJOHMJCSBSZSFBDUIPPLT
    Λ࢖༻
38. 3FBDU
    $VTUPN
    )PPLT
    ͷςετ৔߹
39. 3FBDU
    $VTUPN
    )PPLT
    ͷςετ৔߹
40. 5FTUJOH
    3FDJQFT IUUQTSFBDUKTPSHEPDTUFTUJOHSFDJQFTIUNM
41. *OUFHSBUJPO
    5FTU
42. 5FTUJOH
    8PSLTIPQ
    ͷ
    5FTU
    Λݟ͍ͯ͘
    
43. ࣮ࡍʹςετ͍ͯ͠Δ
    MPHJO
    ػೳ
    
44. ϩάΠϯػೳͷςετίʔυ
    
45. ϩάΠϯػೳͷςετίʔυ
    
46. ϩάΠϯػೳͷςετίʔυ
    
47. ϩάΠϯػೳͷςετίʔυ
    
48. &OE
    UP
    &OE
    5FTU
49. $ZQSFTT Ҿ༻ݩɿDZQSFTTJP
 IUUQTXXXDZQSFTTJP
50. $ZQSFTTʹ͍ͭͯ w&OE
    UP
    &OE
    ςετϑϨʔϜϫʔΫ
    w044
    IUUQTHJUIVCDPNDZQSFTTJPDZQSFTT
    wෳ਺ͷϒϥ΢βΛαϙʔτ
    wಈ࡞͕ૣ͍
    w࿥ը΍Ωϟϓνϟ͕Ͱ͖Δ
    w$*Ͱ΋ಈ͔͢͜ͱ͕Ͱ͖Δ
    wৄ͘͠͸͜͜
 IUUQTEPDTDZQSFTTJPHVJEFTPWFSWJFXXIZDZQSFTTIUNM

51. $ZQSFTTͷಈ࡞
52. $ZQSFTTͷίʔυ
53. $ZQSFTTͰ௨৴Λςετ
54. $ZQSFTTͷઃఆ wDZQSFTTKTPO
    ʹઃఆΛهड़Ͱ͖Δ
    wϒϥ΢β෯΍ߴ͞ɺςετϑΥϧμͷࢦఆͳͲ
55. $ZQSFTTΛศརʹ͢Δπʔϧ w$ZQSFTT
    5FTUJOH
    -JCSBSZ
 $ZQSFTT
    ͷ
    DZ
    ίϚϯυΛ֦ுͯ͘͠ΕΔ
    w$ZQSFTT
    &4-JOU
    1MVHJO
 $ZQSFTT
    ͷ
    5FTU
    ϑΝΠϧʹద༻Ͱ͖Δ
56. ·ͱΊ
57. ·ͱΊ w໌೔͔ΒςετΛॻ͍͍ͯ͜͏ʂ
    wςετͰίʔυʹ৴པΛ࣋ͬͯɺ
 ։ൃ͍ͯ͘͠
    wςετ΋όϥϯεͱύϑΥʔϚϯεΛ
 ҙࣝ͢Δ
    w5FTUJOH
    5SPQIZ
    ͸ϑϩϯτΤϯυͷͭͷ
    5FTU
    ख๏
    w*OUFHSBUJPO
    5FTU
    ΍
    6OJU
    5FTU
    Ͳ͏෼͚Δ ͷ͔νʔϜͰ࿩͠߹͏ͷ͕େࣄ
58. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠