ZOZOTOWNアプリにスナップショットテストを導入してみました

ZOZOTOWNアプリ開発の際、いつも遠隔距離のデザインチェックで苦労しています。デザインをアプリに適応した後、画面キャプチャーをデザイナーにチェックしてもらって、指摘を対応して再確認してもらう、という繰り返す作業を行っています。また、コードレビューでデザインチェック済みの画面の実装を変更した後、デザイナーのチェックなしでQAに出してしてデグレが発生してしまうこともありました。少しても表示確認の手間を減らし、フローを改善して、品質が担保されたアプリを提供したいので、スナップショットテストを導入してみました。

Transcript

1. ;0;0508/ΞϓϦʹεφοϓγϣο τςετΛಋೖͯ͠Έ·ͨ͠ "GUFS
   J04%$ גࣜձࣾ;0;0ςΫϊϩδʔζ ։ൃ෦ ྛ ߒஐ $PQZSJHIU
   ˜
   ;0;0
   5FDIOPMPHJFT
   *OD
2. ˜
   ;0;0
   5FDIOPMPHJFT
   *OD l ྛ ߒஐ !DIJDIJMBN l தࠃग़਎ l J04։ൃྺ೥ l גࣜձࣾ;0;0ςΫϊϩδʔζ ։ൃ෦ l ;0;0508/
   J04ΞϓϦνʔϜ 2 ࣗݾ঺հ
3. ˜
   ;0;0
   5FDIOPMPHJFT
   *OD 3 ΞδΣϯμ l εφοϓγϣοτςετ l ;0;0508/ΞϓϦͷ։ൃ՝୊ l ;0;0508/ΞϓϦʹεφοϓγϣο τςετΛಋೖ l ಋೖͨ݁͠Ռٴͼ՝୊
4. ˜
   ;0;0
   5FDIOPMPHJFT
   *OD 4 εφοϓγϣοτςετ
5. ˜
   ;0;0
   5FDIOPMPHJFT
   *OD 5 https://speakerdeck.com/imaizume/practical-snapshot-testing
6. ˜
   ;0;0
   5FDIOPMPHJFT
   *OD 6 εφοϓγϣοτςετ࣮ઓ౤ೖ l ΞϓϦͷදࣔ֬ೝ࡞ۀͰۤ࿑ͨ͜͠ͱ͕͋Δ l ༧ظͤ͵ද่ࣔΕ΍දࣔόάʹ೰·͞Εͨ͜ͱ ͕͋Δ l εφοϓγϣοτςετʹ͍ͭͯ஌Βͳ͍஌Γ ͍ͨ 【スナップショットテスト実戦投入】の資料より
7. ˜
   ;0;0
   5FDIOPMPHJFT
   *OD 7 ;0;0508/ΞϓϦͷ։ൃ՝୊
8. ˜
   ;0;0
   5FDIOPMPHJFT
   *OD 8 ;0;0508/ΞϓϦͷ։ൃ՝୊ l ଟڌ఺Ͱ։ൃɾ֬ೝʢນுɺ੨ࢁɺϦϞʔτʣ l ίʔυϨϏϡʔޙɺσβΠϯͷσάϨʔυͷ๷ ࢭࡦ͕ͳ͍
9. ˜
   ;0;0
   5FDIOPMPHJFT
   *OD 9 ྨࣅΞΠςϜݕࡧը໘
10. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 10 σβΠϯ֬ೝͷखॱ 青山・開発チーム 幕張・デザインチーム デザインファイル ・デザインを反映 画面キャプチャ 修正依頼 デザイン確認用の アプリ 実機確認 ・XDで確認 Pull Request
11. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 11 σβΠϯ֬ೝͷ՝୊ l ࡉ෦·Ͱͩ͜Θͬͯௐ੔͢Δ l मਖ਼͝ͱʹը໘Ωϟϓνϟͷख͕͔͔ؒΔ l ࣮૷ͷૣ͍ஈ֊Ͱ֬ೝ͢ΔͨΊɺϞοΫσ ʔλͷ࡞੒͕ඞཁ l ௚ײతʹ఻͑ͮΒ͍ l ෳ਺ͷ୺຤ͷ֬ೝ͕ඞཁ
12. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 12 ίʔυϨϏϡʔޙͷσάϨʔυ UI実装修正 QA確認 デザイン確認 特定端末の不具合 確認済のデザイン と異なる
13. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 13 ίʔυϨϏϡʔޙͷσάϨʔυ l ͢΂ͯͷରԠ୺຤Λ֬ೝ͍ͯ͠ͳ͍ l 6*࣮૷Λमਖ਼ͨ͠ޙʹσβΠϯνΣοΫ ࡁΈͷը໘ͱൺֱखஈ͕ͳ͍
14. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 14 εφοϓγϣοτςετΛಋೖͯ͠ ظ଴͢Δ݁Ռ l σβΠϯνΣοΫͷखؒΛݮΒ͢ l εφοϓγϣοτͰ΋͢΂ͯͷରԠ୺຤ ΛҰ௨Γ֬ೝͰ͖Δ l 6*पΓͷίʔυΛमਖ਼ͯ͠΋σάϨʔυ ͷෆ͕҆ͳ͍
15. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 15 ;0;0508/ΞϓϦʹ εφοϓγϣοτςετΛಋೖ
16. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 16 ςετର৅
17. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 17 ςετํ਑ l ݩͷίʔυΛഁյͨ͘͠ͳ͍ l ͢΂ͯͷରԠ୺຤͕ࣗಈͰςετͯ͘͠ ΕΔ
18. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 18 ಋೖͷεςοϓ 4UFQ
    JPTTOBQTIPUUFTUDBTFΛಋೖ 4UFQ
    0))5514UVCTΛಋೖ 4UFQ
    [P[P4OBQTIPU5FTUTઃఆ 4UFQ
    'BTUMBOFઃఆ
19. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 19 4UFQ
    JPTTOBQTIPUUFTUDBTF l $BSUIBHFͰΠϯετʔϧ l ը૾อଘઌΛઃఆ https://github.com/uber/ios-snapshot-test-case
20. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 20 4UFQ
    0))5514UVCT l ίʔυΛมߋ͠ͳͯ͘Α͍ l ϩʔΧϧͷKTPOϑΝΠϧΛฤू͢Δͩ ͚Ͱɺը໘ද͕ࣔมߋͰ͖Δ https://github.com/AliSoftware/OHHTTPStubs
21. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 21 4UFQ
    [P[P4OBQTIPU5FTUT l 5"3(&54ʹ[P[P4OBQTIPU5FTUTΛ௥Ճ l 'SBNFXPSLΛ௥Ճ
22. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 22 4UFQ
    [P[P4OBQTIPU5FTUT l JPTTOBQTIPUUFTUDBTFͷॳظઃఆ
23. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 23 4UFQ
    [P[P4OBQTIPU5FTUT l JPTTOBQTIPUUFTUDBTFͷॳظઃఆ
24. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 24 4UFQ
    [P[P4OBQTIPU5FTUT l 4UVCઃఆ
25. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 25 4UFQ
    [P[P4OBQTIPU5FTUT l εφοϓγϣοτςετΛߦ͏
26. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 26 4UFQ
    [P[P4OBQTIPU5FTUT l εφοϓγϣοτςετΛߦ͏
27. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 27 4UFQ
    [P[P4OBQTIPU5FTUT l εφοϓγϣοτςετΛߦ͏
28. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 28 4UFQ
    [P[P4OBQTIPU5FTUT l εφοϓγϣοτςετΛߦ͏
29. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 29 4UFQ
    'BTUMBOF l 'BTUpMFઃఆ https://github.com/folio-sec/Fastfile テストしたい端末を追加
30. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 30 4UFQ
    'BTUMBOF l 'BTUMBOFΛ࣮ߦ iPhone X iPhone SE
31. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 31 ࠩ෼͕ଘࡏ͢Δ৔߹ l 'BJMVSF%JGGTϑΥϧμʹࠩ෼ը૾͕อଘ͞ΕΔ
32. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 32 ಋೖͨ݁͠Ռٴͼ՝୊
33. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 33 εφοϓγϣοτςετΛಋೖͯ͠ ظ଴͢Δ݁Ռ l σβΠϯνΣοΫͷखؒΛݮΒ͢ l εφοϓγϣοτͰ΋͢΂ͯͷରԠ୺຤ ΛҰ௨Γ֬ೝͰ͖Δ l 6*पΓͷίʔυΛमਖ਼ͯ͠΋σάϨʔυ ͷෆ͕҆ͳ͍
34. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 34 ಋೖͨ݁͠Ռٴͼ՝୊ l ը໘Ωϟϓνϟ͕ศརʹͳΔ l 6*ͷ࣮૷Λมߋͯ͠΋ෆ҆ʹͳΒͳ͍ l ☹දࣔঢ়ଶΛมߋ͍ͨ͠৔߹ɺ࣮૷Λ࠶ ઃܭ͢Δඞཁ͕͋Δ l ☹Ξχϝʔγϣϯͷ֬ೝ͕Ͱ͖ͳ͍
35. ˜
    ;0;0
    5FDIOPMPHJFT
    *OD 35 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·͢