Storybook ͷ UI Testing Handbook ΛಡΜͩ 2022-01-19 ϑϩϯτΤϯυLTձ - vol.5ɹ#frontendlt

ࣗݾ঺հ Shingo Yamazaki • גࣜձࣾϩάϥε • ࡢ೥9݄͔Β University of the People Ͱ 
 ίϯϐϡʔλʔαΠΤϯεษڧத zaki-yama zaki___yama

͸͡Ίʹ

ϑϩϯτΤϯυͷςετʹର͢Δ೰Έ • ϑϩϯτΤϯυͷςετɺԿΛͲ͜·Ͱॻ͍ͨΒ͍͍΋ͷ͔… • Ͳ͏͍͏؍఺ͰςετΛॻ͍ͨΒ͍͍ͷ͔ • ࠷ۙ͸Visual Regression Testingͱ͔Α͘ฉ͘ɻͦΕҎ֎͸…ʁ • ൺֱతมߋ͕ੜ͡΍͍͢UIͷςετΛͲ͜·Ͱॻ͘΂͖͔ • Ͳ͏͍͏πʔϧʗϥΠϒϥϦΛ࢖͏ͷ͕͍͍ͷ͔ • etc. 🤔

No content

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 • ΞΫηγϏϦςΟ • User fl ow • ෳ਺ͷίϯϙʔωϯτʹ·͕ͨͬͯ׬݁͢ΔϢʔβʔૢ࡞͕ظ଴௨Γߦ͑Δ͔

ͦΕͧΕΛ࣮ݱ͢ΔͨΊͷπʔϧʗϥΠϒϥϦ • Visual • ݟͨ໨ … Chromatic • Interaction … Jest & Testing Library • ΫϦοΫ΍ϢʔβʔೖྗͳͲͷΠϕϯτ͕ద੾ʹϋϯυϦϯά͞ΕΔ͔ • Accessibility • ΞΫηγϏϦςΟ … Axe • User fl ow … 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 Λςετέʔεʹ΋࠶ར༻͠·͠ΐ͏

Interaction import { 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(); });

Interaction import { 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-axe import { 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 axe it("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 Λݺͼग़͚ͩ͢

User fl ow • ͍ΘΏΔE2Eςετ • 2ͭͷબ୒ࢶ͕ߟ͑ΒΕΔ 1. όοΫΤϯυ·ͰؚΊͨ׬શͳςετ؀ڥΛ࢖͏ʢO’ReillyνʔϜ͸ͬͪ͜ʣ 2. όοΫΤϯυ͸ϞοΫ͠ɺϑϩϯτΤϯυͷΈʢTwilioνʔϜ͸ͬͪ͜ʣ • νϡʔτϦΞϧͰ͸ޙऀɻCypress Λ࢖͏ • “ϩάΠϯը໘Ͱਖ਼͍͠Ϣʔβʔ໊&ύεϫʔυΛೖྗͨ͠ΒɺλεΫҰཡ͕։͚Δ” ͱ͍͏ςετ έʔε • ͜͜Ͱ΋ Story Λςετέʔεͱͯ͠࠶ར༻

·ͱΊ

͜͏͍ͬͨ͜ͱֶ͕΂ͯΑ͔ͬͨ☺ • ֤छςετ؍఺ͱͦΕΛ࣮ݱ͢ΔͨΊͷ۩ମతͳϥΠϒϥϦ • Chromatic, Axe, Cypress, etc. • StorybookΛத৺ʹஔ͍࣮ͨ༻తͳϫʔΫϑϩʔ • StoryΛJest΍Cypressͷςετʹ΋࠶ར༻͢Δɺͱ͍͏ߟ͑ํ • GitHub ActionsʹΑΔCIʹ͍ͭͯ΋঺հ͞Ε͍ͯΔʢ”Automate” ͷষʣ • ࣮ࡍʹίʔυॻ͍ͯಈ͘΋ͷΛݟͳ͕Βֶ΂ͨͷ΋ݸਓతʹ͸Α͔ͬͨ

Ҿ͖ଓ͖Θ͔ΒΜ😭 • ͦΕͧΕͷςετΛͲ͏͍͏ج४Ͱ૊Έ߹ΘͤͯɺΞϓϦέʔγϣϯશମͱ ͯ͠ͷ඼࣭Λ୲อ͢Δ͔ • ಛʹ Interaction ͱ User fl ow (E2E) ͷ੗Έ෼͚ • “Given this trade-off, most teams use a hybrid approach to balance effort and value. E2E tests are limited to only critical user fl ows and interaction tests are used to verify all other behavior.” • όοΫΤϯυΛϞοΫͨ͠E2Eςετ͸ͳΜͱͳ͘த్൒୺ͳͷͰ͸…ͱ͍ ͏ײ͡΋͢Δ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ࣸܦͨ͠ίʔυ͸ https://github.com/zaki-yama-labs/ui-testing-handbook ʹ͋Γ·͢