Storybookのテストランナー
はじめに Storybook test runner turns all of your stories into executable tests. https://github.com/storybookjs/test-runner Storybookの全てのStoryをテスト可能にする@storybook/test-runnerについてのメモ。 Storybookの公式ドキュメントではv6.5からテストランナーについてのページが設けられている。 何をテストするものか テスト対象についてはplay関数の有無によって異なる。 For those without a play function: it verifies whether the story renders without any errors. For those with a play function: it also
Storybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組み - ZOZO TECH BLOG
こんにちは、FAANS部の田中です。普段は、WebのフロントエンドエンジニアとしてFAANSの開発を行なっています。 FAANSの由来は「Fashion Advisors are Neighbors」で、「ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツール」です。現在正式リリースに向けて、WEARと連携したコーディネート投稿機能やその成果を確認できる機能など開発中です。プラットフォームとしてはWeb、iOS、Androidが存在し、今回取り上げるWebはショップ店長をはじめとした管理者向けツールという立ち位置です。 本記事では、FAANSのWebにおけるStorybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組みを紹介します。 はじめに FAANSのWebはReact、TypeScriptで構成されています。設計に関しては、ロ
ぼくたちがかんがえたさいきょうのStorybook 〜より高品質なコンポーネントを求めて〜
この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され
共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components
Vue Fes Japan 2022 の発表内容です https://vuefes.jp/2022/sessions/KushibikiMashu ■ 概要 社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入して、見た目のデグレを防止している話をします。 ■ 詳細 Chromaticとは、Storybookのメンテナーが作成しているStorybook用のツールです。 ストーリーごとのスクリーンショットを撮影し、差分を画像で比較してくれる機能を備えています。 以下の課題を解決することを目的にして Chromatic を導入しました。 既存のコンポーネントを改修した際に発生する DOM、CSS に起因する表示崩れを自動で検知できないこと 依存モジュールのバージョンアップに時間がかかること その結果、両方の課題を解決できた上に作業が
今さら聞けないビジュアルリグレッションテストをChromaticで始める - Sansan Tech Blog
Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing
ビジュアルリグレッションテストにChromaticを導入したらデザインレビューが捗った話 - Money Forward Developers Blog
マネーフォワード関西開発拠点エンジニアの @uenoY4 です。 現在、私のチームではフロントエンドに Next.js を使用したプロダクトの開発をしています。 その中でリファクタリングなど既存実装に修正を加えた際に、意図しないUIの崩れが起きることを防ぎたいという思いから、ビジュアルリグレッションテストを行うようにしました。今回はビジュアルリグレッションテストを行うために導入したChromaticについてお話しします。 目次 ビジュアルリグレッションテストとは Chromaticとは Chromatic導入のきっかけ 実際導入してみて まとめ ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、ページの見た目をテストする仕組みで、変更前のページやコンポーネントの画像と変更後の画像を比較して検証を行います。要素のサイズや配置などのピクセルレベルの変更やテキスト色、背景色
How Storybook helps designers & developers stay in sync
Shipping UIs is lossy. It requires constant back and forth between design and development. Designs help you get an overview of the UX, but are often limited to the happy path. It’s up to developers to hunt for all the un-specced edge cases. Meanwhile, development is never perfect the first time around. It’s up to designers to give feedback and sign off on the implementation before it ships. We res
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
