フロントエンドLT会 - vol.5 #frontendlt の登壇資料です。 https://rakus.connpass.com/event/232039/
UI Testing Handbook https://storybook.js.org/tutorials/ui-testing-handbook/
サンプルリポジトリ https://github.com/zaki-yama-labs/ui-testing-handbook
Storybook ͷUI Testing Handbook ΛಡΜͩ2022-01-19 ϑϩϯτΤϯυLTձ - vol.5ɹ#frontendlt
View Slide
ࣗݾհShingo Yamazaki• גࣜձࣾϩάϥε• ࡢ9݄͔Β University of the People Ͱ ίϯϐϡʔλʔαΠΤϯεษڧதzaki-yama zaki___yama
͡Ίʹ
ϑϩϯτΤϯυͷςετʹର͢ΔΈ• ϑϩϯτΤϯυͷςετɺԿΛͲ͜·Ͱॻ͍ͨΒ͍͍ͷ͔…• Ͳ͏͍͏؍ͰςετΛॻ͍ͨΒ͍͍ͷ͔• ࠷ۙVisual Regression Testingͱ͔Α͘ฉ͘ɻͦΕҎ֎…ʁ• ൺֱతมߋ͕ੜ͍͢͡UIͷςετΛͲ͜·Ͱॻ͖͔͘• Ͳ͏͍͏πʔϧʗϥΠϒϥϦΛ͏ͷ͕͍͍ͷ͔• etc.🤔
UI Testing Handbook• Storybook ͕ఏڙ͍ͯ͠ΔνϡʔτϦΞϧίϯςϯπͷͻͱͭ• ࡢ12݄ʹެ։͞Εͨ• Twilio, Adobe, Shopify ͳͲɺStorybookίϛϡχςΟͷ10ݸͷνʔϜΛϦαʔνͯ͠ಘΒΕͨݟΛ·ͱΊͨͷʢ”Introduction” ΑΓʣ
Handbook ͷ༰Λͬ͘͟Γհ͠·͢
αϯϓϧΞϓϦέʔγϣϯ• Α͋͘ΔTodoΞϓϦ• ΞϓϦέʔγϣϯଆͷίʔυ ΄΅͍͡Βͣɺ StorybookςετΛॻ͖ͳ͕Β ֶΜͰ͍͘ߏ
Introduction• ݱࡏͷओཁͳJavaScriptϑϨʔϜϫʔΫ͍ͣΕίϯϙʔωϯτυϦϒϯ• Unit, Integration, E2E ͱ͍ͬͨྨͰͳ͘ɺUI͕࣋ͭಛ(characteristics)ʹϑΥʔΧε͠·͠ΐ͏
ςετ͖͢UIͷಛ• Visual• ݟͨ• Interaction• ΫϦοΫϢʔβʔೖྗͳͲͷΠϕϯτ͕దʹϋϯυϦϯά͞ΕΔ͔• Accessibility• ΞΫηγϏϦςΟ• Userflow• ෳͷίϯϙʔωϯτʹ·͕ͨͬͯ݁͢ΔϢʔβʔૢ࡞͕ظ௨Γߦ͑Δ͔
ͦΕͧΕΛ࣮ݱ͢ΔͨΊͷπʔϧʗϥΠϒϥϦ• Visual• ݟͨ … Chromatic• Interaction … Jest & Testing Library• ΫϦοΫϢʔβʔೖྗͳͲͷΠϕϯτ͕దʹϋϯυϦϯά͞ΕΔ͔• Accessibility• ΞΫηγϏϦςΟ … Axe• Userflow … Cypress (or Playwright, Selenium)• ෳͷίϯϙʔωϯτʹ·͕ͨͬͯ݁͢ΔϢʔβʔૢ࡞͕ظ௨Γߦ͑Δ͔
Visual• Chromatic Λͬͨ Visual Regression Testing ͷհ• Storybook ͷ༰Λը૾ͰΩϟϓνϟ͠ɺίϛοτؒͰ͕ࠩͳ͍͔νΣοΫ͢Δ
Visual: Chromatic• Visual Regression TestingΛ؆୯ʹಋೖͰ͖ΔαʔϏε• ࣗલͰΔͱreg-suit + AWS S3ͳͲͷετϨʔδαʔϏεͰߏங•
Interaction• Jest & Testing Library (@testing-library/react)• Storybook ͷ Story Λςετέʔεʹ࠶ར༻͠·͠ΐ͏
Interactionimport { render, waitFor, cleanup, within, fireEvent, } from "@testing-library/react";import { composeStories } from "@storybook/testing-react";import * as stories from "./InboxScreen.stories";describe("InboxScreen", () => {const { Default } = composeStories(stories);it("should pin a task", async () => {const { queryByText, getByRole } = render();await waitFor(() => {expect(queryByText("You have no tasks")).not.toBeInTheDocument();});const getTask = () => getByRole("listitem", { name: "Export logo" });const pinButton = within(getTask()).getByRole("button", { name: "pin" });fireEvent.click(pinButton);const unpinButton = within(getTask()).getByRole("button", {name: "unpin",});expect(unpinButton).toBeInTheDocument();});
Interactionimport { render, waitFor, cleanup, within, fireEvent, } from "@testing-library/react";import { composeStories } from "@storybook/testing-react";import * as stories from "./InboxScreen.stories";describe("InboxScreen", () => {const { Default } = composeStories(stories);it("should pin a task", async () => {const { queryByText, getByRole } = render();await waitFor(() => {expect(queryByText("You have no tasks")).not.toBeInTheDocument();});const getTask = () => getByRole("listitem", { name: "Export logo" });const pinButton = within(getTask()).getByRole("button", { name: "pin" });fireEvent.click(pinButton);const unpinButton = within(getTask()).getByRole("button", {name: "unpin",});expect(unpinButton).toBeInTheDocument();});4UPSZΛΠϯϙʔτ͠ɺͦͷ··ςετέʔεͱͯ͠ར༻͢Δ
Accessibility• Axe ͱ͍͏ϥΠϒϥϦΛ͏ͱΞΫηγϏϦςΟΛ͋ΔఔػցతʹνΣοΫͰ͖Δ• ͞ΒʹStorybook༻ͷΞυΦϯJestͰAxeΛͬͨνΣοΫΛΒͤΔͨΊͷ jest-axe ͱ͍͏ϥΠϒϥϦ͕͋Δ
Accessibility: storybook-addon-a11yΞΫηγϏϦςΟҧՕॴ͕4UPSZCPPL্Ͱ֬ೝͰ͖Δʢ✅ೖΕΔͱ֘Օॴ͕ϋΠϥΠτʣ
Accessibility: jest-axeimport { axe, toHaveNoViolations } from "jest-axe";import { composeStories } from "@storybook/testing-react";import * as stories from "./InboxScreen.stories";expect.extend(toHaveNoViolations);describe("InboxScreen", () => {...const { Default } = composeStories(stories);// Run axeit("should have no accessibility violations", async () => {const { container, queryByText } = render();await waitFor(() => {expect(queryByText("You have no tasks")).not.toBeInTheDocument();});const results = await axe(container);expect(results).toHaveNoViolations();});UP)BWF/P7JPMBUJPOT Λݺͼग़͚ͩ͢
Userflow• ͍ΘΏΔE2Eςετ• 2ͭͷબࢶ͕ߟ͑ΒΕΔ1. όοΫΤϯυ·ͰؚΊͨશͳςετڥΛ͏ʢO’ReillyνʔϜͬͪ͜ʣ2. όοΫΤϯυϞοΫ͠ɺϑϩϯτΤϯυͷΈʢTwilioνʔϜͬͪ͜ʣ• νϡʔτϦΞϧͰޙऀɻCypress Λ͏• “ϩάΠϯը໘Ͱਖ਼͍͠Ϣʔβʔ໊&ύεϫʔυΛೖྗͨ͠ΒɺλεΫҰཡ͕։͚Δ” ͱ͍͏ςετέʔε• ͜͜Ͱ Story Λςετέʔεͱͯ͠࠶ར༻
·ͱΊ
͜͏͍ͬͨ͜ͱֶ͕ͯΑ͔ͬͨ☺• ֤छςετ؍ͱͦΕΛ࣮ݱ͢ΔͨΊͷ۩ମతͳϥΠϒϥϦ• Chromatic, Axe, Cypress, etc.• StorybookΛத৺ʹஔ͍࣮ͨ༻తͳϫʔΫϑϩʔ• StoryΛJestCypressͷςετʹ࠶ར༻͢Δɺͱ͍͏ߟ͑ํ• GitHub ActionsʹΑΔCIʹ͍ͭͯհ͞Ε͍ͯΔʢ”Automate” ͷষʣ• ࣮ࡍʹίʔυॻ͍ͯಈ͘ͷΛݟͳ͕ΒֶͨͷݸਓతʹΑ͔ͬͨ
Ҿ͖ଓ͖Θ͔ΒΜ😭• ͦΕͧΕͷςετΛͲ͏͍͏ج४ͰΈ߹ΘͤͯɺΞϓϦέʔγϣϯશମͱͯ͠ͷ࣭Λ୲อ͢Δ͔• ಛʹ Interaction ͱ Userflow (E2E) ͷΈ͚• “Given this trade-off, most teams use a hybrid approach to balance effortand value. E2E tests are limited to only critical userflows and interactiontests are used to verify all other behavior.”• όοΫΤϯυΛϞοΫͨ͠E2EςετͳΜͱͳ͘த్ͳͷͰ…ͱ͍͏ײ͢͡Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨࣸ͠ܦͨ͠ίʔυhttps://github.com/zaki-yama-labs/ui-testing-handbookʹ͋Γ·͢
zakiyama
isaoshimizu
kthrtty
bitkey
yoshikikomoriya
iwamot
ymty
chmikata
hcrane
trycycle
startree
devops_vtj
soracom
carmenintech
yeseniaperezcruz
jnunemaker
paulrobertlloyd
hannesfritz
aleyda
dotmariusz
kneath
jmmastey
thoeni
smashingmag
bluesmoon