TEST of Storybook

１. visual-testing

可視性テスト (Visual Testing)

目的: コンポーネントや画面の外観やレイアウトが変更された場合に、ビジュアルの一貫性を確認します。スクリーンショットやビジュアル差分の比較を行って、デザインやUIの変更を検知します。

２. Testing composite components

ユニットテスト (Unit Testing)
統合テスト (Integration Testing)

目的: 複数のコンポーネントが組み合わさったコンポジットコンポーネントのテストを行います。各コンポーネントの単体テストや相互作用のテストを組み合わせて、結合された状態での正常な動作を確認します。

３. Testing component interactions

ユニットテスト (Unit Testing)
統合テスト (Integration Testing)

目的: コンポーネント間の相互作用やデータの流れをテストします。コンポーネントが適切に連携し、正しいデータのやり取りが行われることを確認します。

４. Accessibility testing with Storybook

可視性テスト (Visual Testing)
アクセシビリティテスト (Accessibility Testing)

目的: アクセシビリティガイドラインに基づき、コンポーネントやアプリケーションがアクセシブルな状態であるかどうかをテストします。色のコントラスト、キーボード操作、スクリーンリーダーのサポートなどが含まれます。

５. Testing user flows

統合テスト (Integration Testing)
ユーザーフローテスト (User Flow Testing)

目的: ユーザーのフロー（操作手順）を再現し、アプリケーション全体の機能やワークフローをテストします。ユーザーが特定のアクションを実行し、予想される結果を確認します。

６. How to automate UI tests with Github Actions

自動化テスト (Automated Testing)
統合テスト (Integration Testing)

目的: テストを自動化して、継続的なテストフローを確保します。ユニットテスト、統合テスト、可視性テストなど、さまざまなテストタイプを自動化することができます。

７. UI Testing Playbook (実践)

ユニットテスト (Unit Testing)
統合テスト (Integration Testing)
可視性テスト (Visual Testing)
アクセシビリティテスト (Accessibility Testing)
自動化テスト (Automated Testing)

８. Snapshot tests

目的: コンポーネントやUIの変更を追跡し、それらの変更が意図したものであるかを確認すること

※ Storyshotsは将来的に廃止され、ユーザーはテストランナーや他のオプションに移行する予定

テストと使用するツールと内容

ユニットテスト (Unit Testing):
- ツール: Jest, Mocha, Jasmine, Ava
- 内容: 単一のコンポーネントや関数などの個々のユニットが、予期した動作をするかどうかを検証します。入力と出力をテストし、コンポーネントや関数の振る舞いを確認します。
統合テスト (Integration Testing):
- ツール: Cypress, Selenium, Puppeteer
- 内容: 複数のコンポーネントや機能が結合された状態での動作をテストします。異なるコンポーネント間の相互作用やデータの流れ、APIとのやり取りなどを確認します。
可視性テスト (Visual Testing):
- ツール: Storybook Addon Visual Regression, Chromatic, Percy, Applitools
- 内容: コンポーネントや画面の外観やレイアウトが変更された場合に、ビジュアルの一貫性を確認します。スクリーンショットやビジュアル差分の比較を行って、デザインやUIの変更を検知します。
アクセシビリティテスト (Accessibility Testing):
- ツール: Axe, pa11y, Storybook Addon Accessibility
- 内容: アクセシビリティガイドラインに基づき、コンポーネントやアプリケーションがアクセシブルな状態であるかどうかをテストします。色のコントラスト、キーボード操作、スクリーンリーダーのサポートなどが含まれます。
自動化テスト (Automated Testing):
- ツール: Jest, Cypress, Selenium, Puppeteer
- 内容: テストを自動化して、継続的なテストフロ

ーを確保します。ユニットテスト、統合テスト、可視性テスト、アクセシビリティテストなど、さまざまなテストタイプを自動化することができます。

６. ユーザーフローテスト (User Flow Testing):

ツール: Cypress, Selenium, Puppeteer
内容: ユーザーのフロー（操作手順）を再現し、アプリケーション全体の機能やワークフローをテストします。ユーザーが特定のアクションを実行し、予想される結果を確認します。

７. スナップショットテスト (Snapshot Testing):

ツール: Jest, React Testing Library, Enzyme
内容: コンポーネントのレンダリング結果やUIの変化をキャプチャし、スナップショットと比較してテストします。変更があった場合には差分が表示され、テストが失敗します。