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

by Yosuke Furukawa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

ςετॻ͍ͯ·͔͢ʁ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Testʹର͢Δίϝϯτ ͜ͷҙݟͰ'JO

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ͦͷલʹ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

test = check + explore

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

શһ໺ٿ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

{showGreeting && sayHello()}

setShowGreeting(true)}>Show Greeting

); }; 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!'); });

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

E2Eςετ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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