zuka-e/laravel-react-task-spa

カンバン型タスク管理アプリ (ポートフォリオ)

laravel-react-task-spa's Issues

Laravel Sail 速度改善

概要

• sailコマンド (bash vendor/bin/sailのalias) の実行速度不良 (レスポンスまで数秒程度) の解消を目指す。

背景

• ローカルでのphpコマンドとの差が顕著で不便に感じる。

対策

• 同様の問題が報告されているか調査
  => 特になし? => Dockerによる問題?
• Docker Compose の 未使用 servise を削除
• 依存パッケージディレクトリ (vendor) の名前付きボリュームを作成

Setup Vercel

https://vercel.com/{username}/{project}/settings/git

---

---

---

ref. https://vercel.com/support/articles/how-do-i-use-the-ignored-build-step-field-on-vercel#with-folders-and-workspaces

E2Eテストの導入

概要

• jsdomではテストが困難な部分のため (window, UI, etc) をE2Eテストを導入
  • "困難な部分" => 明確にするため、React Testing Library でコンポーネント毎のテストを追加
    • テスト範囲に含めるコンポーネントを明確に分離？

課題

• 入力
• 出力
• 相互不干渉
  • 各テストが前後の結果に無影響
    => DBなどを任意の状態にするためのテストデータとデータ生成の仕組み (Seeder) が必要
• モック
  • windowオブジェクト (location) やメソッド (setTimeout)、canvas等HTMLElement
    => Jestモックでは再現が困難
    => Cypressなら可、(イベント検知、ビジュアルテスト)
  • 関数内のAPIリクエスト
    => MSWで対応 (ref. Stop mocking fetch)
• 要素取得
  • getByRole (Testing Library)
    • 暗黙のroleが付与されない要素にはrole属性を設定 (テストも考慮した実装)
    • 暗黙のrole名が付与されない要素にはaria-label属性を設定
  • data-testid
    • Testing Library ではUIベースの要素取得を評価
    • Cypressでは不変の属性としてのdata-*を評価
• 認証
  • (ref. CSRF example - GitHub)

参考

• Catalog of Events | Cypress Documentation
• Visual Testing | Cypress Documentation
• Seeding Data - Testing Your App | Cypress Documentation
• cypress-io/cypress-example-recipes - GitHub
• cypress-io/cypress-example-todomvc - GitHub
• cypress-io/cypress-realworld-app - GitHub

備考

• コンポーネントテストも可能
  • Introduction | Cypress Documentation
  • https://github.com/cypress-io/cypress-component-testing-examples