Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドテストプラクティス in open 8

フロントエンドテストプラクティス in open 8

2021/09/13

Open8 で発表したフロントエンドテストプラクティスの話です。

Yosuke Furukawa

September 13, 2021
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. ϑϩϯτΤϯυςετ
    ϓϥΫςΟε
    2021/09/13 @ Open8

    View full-size slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View full-size slide

  3. ςετॻ͍ͯ·͔͢ʁ

    View full-size slide

  4. খωλ
    ͜Εॻ͍ͨͷ๻ͳΜͰ͢ɻ

    View full-size slide

  5. Testʹର͢Δίϝϯτ
    ఆྔతʹޮՌΛଌΓ͍ͨ

    View full-size slide

  6. Testʹର͢Δίϝϯτ
    ͜ͷҙݟͰ'JO

    View full-size slide

  7. ऴΘΓͰ͸͋Δ΋ͷͷɺ΋͏
    গ͠ิ଍͍͖͍ͤͯͨͩͨ͞

    View full-size slide

  8. ͦ΋ͦ΋ςετͱ͸Կ͔
    • ඼࣭Λ্͛Δ΋ͷʢʁʣ
    • কདྷͷมߋΛ༰қʹͯ͘͠ΕΔ΋ͷʢʁʣ
    • ෆ۩߹Λݟ͚ͭͯ͘ΕΔͨΊͷະདྷ΁ͷ౤ࢿ
    ʢʁʣ
    ͲΕ΋ਖ਼ղ

    View full-size slide

  9. ιϑτ΢ΣΞͷςετ͸ɺϓ
    ϩμΫτ·ͨ͸αʔϏεͷ඼
    ࣭ʹؔ͢Δ৘ใΛεςʔΫϗ
    ϧμʔʹఏڙ͢ΔͨΊʹߦΘ
    ΕΔௐࠪͰ͋Δɻ
    Cem Kaner
    "Exploratory Testing"

    View full-size slide

  10. ࿨ా͞Μͷݴ༿
    https://www.slideshare.net/t_wada/jasst-2014-hokkaidotwadatdd
    Test Yourself - ςετΛॻ͘ͱԿ͕Ͳ͏มΘΔ͔

    View full-size slide

  11. ࿨ా͞Μͷݴ༿
    https://www.slideshare.net/t_wada/jasst-2014-hokkaidotwadatdd
    Test Yourself - ςετΛॻ͘ͱԿ͕Ͳ͏มΘΔ͔

    View full-size slide

  12. ςετ = ମॏܭ
    • ͜ͷϝλϑΝʔΛ͏·͘ҙࣝ͢Δͱ৭ʑཧղ͠΍͍͢
    • QA = ਓؒυοΫ
    • ຖ೔ਓؒυοΫʹߦͬͯຖ೔ϝσΟΧϧνΣοΫΛड
    ͚Δਓ͸͍ͳ͍
    • ମॏܭʹ৐ͬͨΓɺ݂ѹܭͰଌͬͨΓ͢Δ͘Β͍͕ຖ
    ೔΍Δ͜ͱͱͯ͠ஸ౓͍͍ൣғͩͬͨΓ͢Δ

    View full-size slide

  13. ςετ = ମॏܭ
    • ຖ೔ମॏܭ৐ͬͯΔ͚ͩ͡Ό૫ͤͳ͍ͷͱҰॹͰຖ೔CI
    ճͯ͠Δ͚ͩ͡Ό඼࣭͸ྑ͘ͳΒͳ͍
    • ݱঢ়͕೺ѲͰ͖Δͷ͕ମॏܭͷ໾ׂɺ໨ඪΛݟਾ͑ͯվ
    ળΛ͢Δʹ͸৯ੜ׆ݟ௚ͨ͠Γɺӡಈͨ͠Γ͢Δඞཁ͕
    ͋Δɻ
    • ඼࣭΋ಉ༷ɺ࣮ࡍʹϦϑΝΫλϦϯάͨ͠Γɺෆ۩߹ʹ
    ͳΓͦ͏ͳՕॴΛݟ͚ͭͯमਖ਼ͨ͠Γ͠ͳ͍ͱྑ͘ͳΒ
    ͳ͍ɻ

    View full-size slide

  14. ςετ = ମॏܭ
    • ͜͜·ͰདྷͨΒΘ͔Δͱࢥ͏͚Ͳɺʮ૫͍͔ͤͨΒମ
    ॏܭΛങ͍͍ͨʯ͍ͬͯ͏࣌ʹʮମॏܭͷ౤ࢿରޮՌ
    ͸ʁʯͱฉ͔͘Β͓͔͘͠ͳΔɻ
    • ମॏܭ͸͋͘·Ͱݱঢ়೺ѲͷͨΊͷπʔϧɺ૫ͤΔͷ
    ͸৯ੜ׆ݟ௚ͨ͠Γɺӡಈ͢Δ͔Βɻ
    • ମॏܭ৐Βͳͯ͘΋૫ͤΔਓ΋͍Δ͚Ͳكɻ
    • ମॏܭ͸ങΘͳ͍ͱ૫ͤͳ͍ɻ

    View full-size slide

  15. ͪͳΈʹຖ೔ηϧϑνΣοΫ
    ͢Δ΂͖݈߁߲໨

    View full-size slide

  16. ιϑτ΢ΣΞͷςετ΋Ұॹ
    Logic UT E2E Test
    Visual Reg Test A11Y

    View full-size slide

  17. ඼্࣭͛Δͷʹςετ͚ͩͰ͍
    ͍Θ͚Ͱ΋ͳ͍
    • ຖ೔ηϧϑνΣοΫΛ͍ͯͯ͠΋೤Λग़ͨ͠
    Γɺ෩अΛҾ͍ͨΓ͢Δࣄ΋͋Δ
    • ؂ࢹ΋ॏཁ
    • ԿΛͨ͠Βࣄ৅͕ى͖ͨͷ͔Λه࿥͢ΔͨΊ
    ʹϩά΋ग़͞ͳ͍ͱ͍͚ͳ͍

    View full-size slide

  18. ςετͱ͸ࣗ෼ͨͪͷݱ࣌఺
    Ͱͷ඼࣭ΛνΣοΫ͢ΔͨΊ
    ͷݱঢ়෼ੳख๏
    ඼࣭վળ͸৭ʑͳΞϓϩʔν
    ͕༗ΓɺͦͷதͷҰख๏

    View full-size slide

  19. ͍ΖΜͳख๏͕͋Δͱݴͬͨ
    ͕ɺଞͷ΋ͷ΋঺հ

    View full-size slide

  20. ςεςΟϯάͱνΣοΩϯά

    View full-size slide

  21. ςεςΟϯάͱνΣοΩϯά
    • ςετۦಈ։ൃ
    • https://www.amazon.co.jp/dp/B077D2L69C/

    View full-size slide

  22. checking
    • ࣗ෼ͨͪͷ಄ͷதͰʮਖ਼͍͠ʯͱࢥ͍ͬͯΔ͜
    ͱΛ֬ೝ͢Δ͜ͱ
    • ֬ೝɾݕূɾଥ౰͔Ͳ͏͔
    • ίʔυΛมߋͯ͠΋ಉ͡Α͏ʹಈ࡞͢Δ͔ͱ͔
    ͸͜ͷ checking
    • ։ൃऀ͕΍Δςετ͸େମ͜Ε

    View full-size slide

  23. testing
    • ࣗ෼ͨͪͷϓϩμΫτʹରͯ͠৽͍͠৘ใΛ
    ݟ͚ͭΔ୳ࡧߦಈ
    • ૝ఆ֎ͷ໰୊Λݟ͚ͭΔΑ͏ͳ΋ͷ
    • ୳ࡧɾൃݟɾڀ໌ɾֶश
    • QAΤϯδχΞ͕࣮ࢪ͢Δςετ͸େମͬͪ͜

    View full-size slide

  24. test = check + explore

    View full-size slide

  25. ։ൃऀ΍QAͷ྆ํ͕check͠
    ͔ͯ͠ͳ͍ঢ়ଶͩͱ test ʹͳ
    Βͳ͍ɻ୳ࡧͯ͠ൃݟ͢Δϓ
    ϩηεΛೖΕΔඞཁ͕͋Δɻɹ

    View full-size slide

  26. ୳ࡧ
    ࢓༷ͷൣғʹॻ͍ͯ͋Δ͚ͩ
    ͡Όͳ͘ɺͦͷ֎ଆʹ͍Δ
    Ϣʔβʔͷͭ΋ΓͰධՁ͢Δ

    View full-size slide

  27. ։ൃऀ͚͕ͩ୲อ͢Δ΋ͷͰ
    ͸ͳ͍ɻ

    View full-size slide

  28. QA͚͕ͩ୲อ͢Δ΋ͷͰ͸ͳ
    ͍ɻ

    View full-size slide

  29. ͜͜·Ͱͷ·ͱΊ
    • ςετ͸ମॏܭ
    • ςετͷίεύΛฉ͍ͯΔͷ͸ʮମॏܭങͬͨΒͲΕ͘
    Β͍૫ͤ·͔͢ʁʯͬͯฉ͍ͯΔͷͱҰॹ
    • ཧ૝ͷςετ͸֬ೝ(check)ͱ୳ࡧ(explore)ཱ͕͍྆ͯ͠
    Δςετ
    • ͦΕΛ࣮ݱ͢ΔͨΊʹQAͱ։ൃͱϓϩδΣΫτΦʔφʔ
    ΋ҰؙʹͳΔඞཁ͕͋Δ

    View full-size slide

  30. ຋ͬͯϑϩϯτΤϯυͷ
    ςετͷ࿩

    View full-size slide

  31. ϑϩϯτΤϯυςετ
    • ։ൃऀͷҙਤ௨ΓʹϢʔβʔ͕ΞϓϦέʔγϣϯ΍
    αʔϏεΛӾཡ͠ɺػೳ͕ར༻Ͱ͖͍ͯΔͷ͔Λݕ
    ূ͢ΔͨΊͷ΋ͷ
    • όοΫΤϯυͷςετ͸σʔλϕʔεʹ࣮ࡍʹҙਤ
    ௨Γʹσʔλ͕ετΞ͞ΕͯΔ͔ɺ໭Γ஋ͷJSONͷ
    ߏ଄͕͋ͬͯΔ͔ͳͲ͕ͩɺϑϩϯτΤϯυ͸
    ʮʢओʹʣΫϥΠΞϯταΠυͰى͖ΔΤϥʔΛൃ
    ݟ͠ɺσϓϩΠલʹमਖ਼͢Δ͜ͱʯ͕ॏཁʹͳΔ

    View full-size slide

  32. ϑϩϯτΤϯυςετ
    • Ϣχοτςετ
    • ݁߹ςετ
    • E2Eςετ
    • a11yςετ
    • ύϑΥʔϚϯεςετ
    • ϏδϡΞϧϦάϨογϣϯςετ

    View full-size slide

  33. Ϣχοτςετ
    • ୯ମͷίϯϙʔωϯτɺٴͼ୯Ұػೳͷؔ਺
    ͷ in / out ΛνΣοΫ͢Δςετ
    function doSomething(name) {
    if (name) {
    return name;
    }
    return "no name";
    }
    // ୯ମςετ෦෼
    test("doSomething", () => {
    assert("test", doSomething("test"));
    });

    View full-size slide

  34. Why Ϣχοτςεπʁ
    • ΤοδέʔεʹΑͬͯϩδοΫ͕ഁ୼͍ͯ͠ͳ
    ͍͔ΛνΣοΫ͢ΔͨΊ
    • E2E΍Integration TestͰ͸࣮ݱͰ͖ͳ͍͕ɺ
    কདྷతͳมߋʹΑͬͯΤοδέʔε͕ೖΕΒ
    Εͨ࣌Ͱ΋ਖ਼ͦ͘͠ͷ୯ମίϯϙʔωϯτ͕
    ಈ͔͘Ͳ͏͔Λ֬ೝ͢ΔͨΊ

    View full-size slide

  35. ݁߹ςετ
    • "୯ମ"Λ௒͑ͯෳ਺ͷίϯϙʔωϯτΛ૊Έ߹
    Θͤͨςετͷ͜ͱ
    export const Greeting = () => {
    const [showGreeting, setShowGreeting] = useState(false);
    return (

    {showGreeting &&
    sayHello()}
    onClick={() => setShowGreeting(true)}>Show Greeting
    button>

    );
    };
    test('shows correct greeting', () => {
    const screen = render();
    const greeting = screen.getByTestId('greeting');
    const button = screen.getByTestId('show-greeting-
    button');
    expect(greeting.textContent).toBe('');
    fireEvent.click(button);
    expect(greeting.textContent).toBe('Hello
    human!');
    });

    View full-size slide

  36. Why ݁߹ςετ
    • Ϣχοτςετ͕୯ମͷϩδοΫΛݕূ͢Δ
    ΋ͷʹରͯ͠ɺ݁߹ςετ͸ϢχοτΛෳ਺
    ݁߹ͨ͠ࡍͷৼΔ෣͍Λݕূ͍ͯ͠Δ
    • Ϣʔβʔ͕ΞϓϦέʔγϣϯΛ࢖͏ࡍʹ͸ෳ
    ਺ͷϢχοτ͕ؔΘΔͨΊɺ͜ͷํ͕Ϣʔ
    βʔͷಈ࡞ʹ͍ۙ

    View full-size slide

  37. E2Eςετ
    • ࣮ࡍʹϒϥ΢βΛىಈͤͯ͞ϒϥ΢βϨϕϧͰͷ
    ৼΔ෣͍ɾΠϯλϥΫγϣϯΛݕূ͢Δ
    • ίʔυͷϩδοΫ΍ίϯϙʔωϯτͷৼΔ෣͍Ͱ
    ͸ͳ͘ɺϢʔβʔ͕ͲͷΑ͏ʹૢ࡞͢Δ͔Λ໛฿
    ͨ͠ςετ
    • ͋Γͱ͋ΒΏΔύλʔϯΛ໢ཏ͠Α͏ͱ͢Δͱര
    ൃతʹ͕͔͔࣌ؒΔ

    View full-size slide

  38. Why E2E ςετ
    • Ϣχοτςετ΍݁߹ςετΛͨ͠ͱͯ͠΋ͦ͜
    ͔Β࿙Εͯ͠·͏έʔε͕͋ΓಘΔ
    • ࣮૷΍ίʔυ͚ͩͰ͸ͳ͘ɺnginx΍CDNͳͲͷ
    ϛυϧ΢ΣΞΛט·ͤͨΓ͢Δͱ݁Ռ͕ҟͳΔ
    έʔε΋
    • ࣮ࡍʹຊ൪ʹ͍ۙ؀ڥͰ࣮ࢪ͢Ε͹໰୊ͷະવൃ
    ੜ͕๷͗΍͍͢

    View full-size slide

  39. ͲΕ͘Β͍ͷׂ߹Ͱ΍Δͷ͕͍
    ͍͔ʁ
    • Google ͸
    • 10% E2E
    • 20% Integration
    • 70% Unit
    • ͱ͍͏ϐϥϛουΛܗ੒ͯ͠Δ
    https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html

    View full-size slide

  40. a11y ςετ
    • ࠷ۙྲྀߦΓͷΞΫηγϏϦςΟ·ͰؚΊͨςετ
    • εΫϦʔϯϦʔμʔͰͪΌΜͱಡΊΔͷ͔౳ͷΞ
    Ϋηγϒϧ͔Ͳ͏͔Λ֬ೝ͢Δ΋ͷ
    • ͪΌΜͱ΍Ζ͏ͱ͢Δͱେม͕ͩɺ࠷ۙͩͱ
    lighthouse ͳͲͷ؆қπʔϧͰݕূͰ͖ͨΓ͢
    Δɻ

    View full-size slide

  41. Why a11y tests?
    • ϙΠϯςΟϯάσόΠε͕ͪΌΜͱ࢖͑ͯɺ͸ͬ
    ͖Γͱ໨͕ݟ͑Δਓ͹͔ΓͰ͸ͳ͍ɻ
    • ৭ऑ΋͋ͬͨΓɺ৭໡΋͋ͬͨΓɺ໨͕ݟ͑ΔΘ
    ͚͡Όͳ͔ͬͨΓɺख͕͋ΔΘ͚͡Όͳ͔ͬͨΓ
    ͢Δɻ
    • ΧδϡΞϧʹ΍ΔͳΒlighthouseͰ఺਺͕ग़ͯϚΠ
    φεཁҼ͕෼͔ͬͨΓ͢Δɻ

    View full-size slide

  42. Why a11y tests?
    • Lighthouse ͷ݁Ռ
    • ͪͳΈʹ͜Ε΋ puppeteer ͰऔΕΔ

    View full-size slide

  43. Why a11y tests?
    • test ͡Όͳͯ͘ lint ͕ͩɺ accesslint ΍ axe-
    core(LH͕தͰ࢖ͬͯΔ΍ͭ) ͱ͔ͷνΣοΫ
    πʔϧ΋͋Δ

    View full-size slide

  44. ύϑΥʔϚϯεςετ
    • ࣮ࡍʹϖʔδΛ։͍ͯදࣔ͞ΕΔ·ͰͩͬͨΓɺΠϯλ
    ϥΫγϣϯ͕ߦΘΕΔ·Ͱͷ࣌ؒΛܭଌͯ͠ݕূ͢Δͨ
    Ίͷςετ
    • ͜Ε΋ a11y ·Ͱͱಉ༷ʹΧδϡΞϧʹ΍ΔͳΒ
    Lighthouse Ͱ΍Δखஈ΋͋Δ
    • ҰํͰͪΌΜͱ΍Ζ͏ͱ͢Δͱେมɺ͜ͷ͋ͨΓ͸
    a11y ςετͱࣅ͍ͯΔ

    View full-size slide

  45. Why ύϑΥʔϚϯεςετ?
    • ΞϓϦέʔγϣϯ͕ظ଴௨Γͷ଎౓͕ग़ͯΔͷ͔ɺ࣮ࡍʹ֬ೝ͠
    ͍ͨɻ
    • ࡢࠓ͸ύϑΥʔϚϯε΋Ϗδωεʹͱͬͯ༗ޮͳ৔߹͕͋Γɺͦ
    ΕʹΑͬͯSEOͷ݁ՌʹӨڹ͢ΔͳͲͷঢ়گ΋͋ͬͯԹ౓ײ͕ߴ
    ͘ͳ͍ͬͯΔɻ

    View full-size slide

  46. Why ύϑΥʔϚϯεςετ?
    • ύϑΥʔϚϯεʹؔ͢Δ΋ͷ΋࣮ࡍ͸ଟذʹΘͨΔ
    • όϯυϧαΠζ
    • ϖʔδಡΈࠐΈ࣌ؒ
    • ը૾αΠζ
    • ͳͲͳͲ
    • ͜ΕΒͷཁҼΛ·Δͬͱ͍͍ײ͡ʹධՁͯ͘͠ΕΔͷ͕Core Web Vitals
    • ҰํͰύϑΥʔϚϯε΋ຊདྷ͸໨త͕͋ΔͷͰࣗ෼ͨͪͰKPIΛ࡞ͬͯݕূΛ
    ࣮ࢪ͢Δͷ͕ϕετɻ

    View full-size slide

  47. ϏδϡΞϧϦάϨογϣϯςε
    τ
    • ࠓճͷຊ୊
    • ͜Ε·Ͱ͕"ૢ࡞"ʹରͯ͠ͷ"ৼΔ෣͍"Λςετ͍ͯ͠
    ͨͷʹରͯ͠ɺVRT͸"ݟͨ໨"Λςετ͢Δ
    • ࣮ࡍ"ݟͨ໨"͸Ұ൪มߋ͕ଟ͍ͱ͜ΖͳͷͰɺ೉͍͠ɻ
    • ݟͨ໨͕มΘΔ͔Β view ͷςετ͸౤ࢿରޮՌ͕ѱ͍
    ͱݴΘΕͨΓ΋͢Δɻ

    View full-size slide

  48. ϏδϡΞϧϦάϨογϣϯςε
    τ
    • ݟͨ໨্ͷࠩ෼Λݕग़ͯ͠ɺݟͤΔ΋ͷ
    • E2EͰ΋͢Γൈ͚ͯ͠·͏Α͏ͳݟͨ໨ͷ่Ε
    ͱ͔Λݕग़Ͱ͖Δɻ

    View full-size slide

  49. ϏδϡΞϧϦάϨογϣϯςε
    τ
    • ӡ༻࢝͠ΊΔͱେมͦ͏
    • େମ߹ͬͯΔ
    • ࠩ෼͕ͲΕ͘Β͍ग़Δ͔Λ͖͍͠஋ͱͯ͠ઃఆ͢Δ
    • ಛʹ͖͍͠஋Λద੾ʹܾΊͯӡ༻͢Δͷ͕େม
    • ڊେͳϖʔδͰ΍Δͱ͍͍͖͍ͩͨ͠஋ͷઃఆ͕
    ϖʔδ͝ͱʹҧ͍ͬͯͨΓͰେม

    View full-size slide

  50. ϏδϡΞϧϦάϨογϣϯςε
    τ
    • ӡ༻࢝͠ΊΔͱେมͦ͏
    • ͨͩҰํͰ΍ΕΔͱඇৗʹॿ͔Δଆ໘͕͋Δ
    • ಛʹݟͨ໨ʹΑͬͯCSSͷෆ۩߹Λݟ͚ͭΒ
    ΕΔ
    • ܦݧ্CSSͷෆ۩߹͕Ұ൪ΊΜͲ͍

    View full-size slide

  51. ϏδϡΞϧϦάϨογϣϯςε
    τ
    • Ͳͷ͘Β͍ͷཻ౓Ͱ΍Δͱ͍͍ͷ͔ʁ
    • StoryBook ͰίϯϙʔωϯτΛ·ͱΊΔ͜ͱ͕͋Δͱࢥ͏͕ɺͦͷ୯
    Ґ͘Βׂ͍͕ͱྑ͍ɻ
    • ཻ౓͕େ͖͍ͱ৭Μͳෆ֬ఆཁૉ͕བྷΉͷͰɺςετ͕ flaky ʹͳΓ͕
    ͪ
    • ฐࣾͩͱ׬શʹίϯϙʔωϯτ୯ҐͰ StoryBook Λ࡞Γͳ͕Βɺ reg-
    suit ͱ૊Έ߹ΘͤͯσβΠϯ่ΕΛࣄલݕ஌͍ͯ͠Δ
    • StoryBook ۦಈ։ൃͱ͔ݺ͹ΕͯΔɻ

    View full-size slide

  52. ϏδϡΞϧϦάϨογϣϯςε
    τ
    • Ͳͷ͘Β͍ͷཻ౓Ͱ΍Δͱ͍͍ͷ͔ʁ
    • ཻ౓͕େ͖͍ͱ͜Ζ͸ Autify ͱ͔ೖΕͯΔ
    • ͜ͷ͋ͨΓ͸׬શʹ༧ࢉͱͷউෛ
    • ମॏܭͱ͍ͬͨ΋ͷͷɺͳΜͰ΋͔ΜͰ΋
    πʔϧೖΕΕ͹͍͍ͱ͍͏΋ͷͰ΋ͳ͍

    View full-size slide

  53. ςετϕετϓϥΫςΟε
    • ϢχοτςετͱΠϯςάϨʔγϣϯςετ͸ؤுͬͯॻ͍͓ͯ
    ͘ɻ
    • E2E͸Ұ൪ҰൠతͳϩάΠϯ͔ͯ͠Β࠷ॳͷϖʔδϙνϙν͢Δ
    ͘Β͍·Ͱ͸΍Γ͍ͨɻ
    • a11y / performance ͸Lighthouseͱ͔Ͱ࠷ॳ͸ΧδϡΞϧʹɺ
    ঃʑʹࣗ෼ͨͪͷ໨తʹ߹Θ͍ͤͯ͘
    • VRT ͸ StoryBook ϕʔεͰ࣮ࢪͭͭ͠ɺ͜Ε΋໨తʹ߹Θͤͯ૿
    ΍͍ͯ͘͠

    View full-size slide

  54. ϑϩϯτΤϯυͷ·ͱΊ
    • ୯ମςετ
    • ΠϯςάϨʔγϣϯςετ
    • E2Eςετ
    • a11yςετ
    • ύϑΥʔϚϯεςετ
    • Visual Regression Test

    View full-size slide