結合テストを導入

[HosokawaR]

背景

Resolves #689

変更点

この Issue では結合テストの導入までをスコープとし、テストの追加は最小限にします。
理由は出戻りを最小限にするために、導入に問題がないかを確かめることができる最小限の変更にとどめたいからです。

• Playwright の導入
  • Introduce Playwright
  • Modify tests command
  • Make use full core in CI
  • Make CI faster
• 最小限のテストを追加
  • Add tests
• 結合テストの容易性を向上
  • Add environment variables to toggle GA and Sentry
    • NODE_ENV にとらわれず個別に GA と Sentry を有効無効できるように
  • Use <button> for toggle button's clickable parts
    • アクセスビリティ、テスタビリティの観点から <div> ではなく <button> であるべき点を修正

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
twinte-front-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 5, 2023 7:51am

[HosokawaR]

Twin:te ではソースコード中のコメントなどが英語で書かれていますが、テストではなるべく日本語で書きたいと思います。理由は以下です。

• 結合テストは UI と結びつきが強いので、UI で使われている言語と同じ言語を使うほうが便利
  • 例えば「詳細」「簡易」などは「詳細」「簡易」と書かれたボタンがあるのでわかりやすいですが、これを英語にすると UI のどの部分を指しているのかがわかりにくくなります
• テストにおいてはテスト名やコメントが重要になるので、英語の時制や主体の間違いで大きく影響がでてしまうリスクがあるので日本語で書きたい

[hayato24s]

RepositoryをInterfaceを使用して抽象化しているため、APIをモックするというよりはRepositoryをモックした方が良いと思います。つまり、InMemoryで動くRepositoryをテスト用のRepositoryとして使用するのが良いかと。

また、それに伴って、本番環境などではapiを使用したRepositoryをテスト環境ではInMemoryで動作するRepositoryを自動で割り当ててくれるようなDIツールの導入も行った方が良いかもしれません。

以上を踏まえて、実施すべきテストは主に以下の2点になるかと思います。

• RepositoryのInterfaceに対するUnit Test（jest）
• frontend全体に対する結合テスト or E2Eテスト（playwright or vitest）
  • Repositoryを切り替えることでテスト時のバックエンドとの連携の有無を設定できると思います。

vitestというvue.js公式がおすすめしているツールがあったので共有しておきます。
また、下記のリンクはvue.jsでのテストに関する記事です。

• https://ja.vuejs.org/guide/scaling-up/testing.html#component-testing

[HosokawaR]

RepositoryをInterfaceを使用して抽象化しているため、APIをモックするというよりはRepositoryをモックした方が良いと思います。つまり、InMemoryで動くRepositoryをテスト用のRepositoryとして使用するのが良いかと。

今回追加したいのはフロントエンドの範囲内においてユーザの行動フローの完遂を保証する結合テストという認識です。
そのため「フロントエンドの範囲内でなるべく結合してテストする」ことが重要だと考えています。
しかし、Repository をモックすると Production （ = Develop ではない）Repository のテストや、axios や aspida などのテストができなくなり、前述の目的が達成できないと考えています。

以上を踏まえて、実施すべきテストは主に以下の2点になるかと思います。
RepositoryのInterfaceに対するUnit Test（jest）
frontend全体に対する結合テスト or E2Eテスト（playwright or vitest）
Repositoryを切り替えることでテスト時のバックエンドとの連携の有無を設定できると思います。

そして、これらの 2 つのテストを分割するのではなく、Reposoitory も含めて結合してテストしたいと考えています。

この観点についてはいかがでしょうか？

[HosokawaR]

ありがとうございます！
いいですね、単体テスト等で使えないか見てみます！

vitestというvue.js公式がおすすめしているツールがあったので共有しておきます。
また、下記のリンクはvue.jsでのテストに関する記事です。

https://ja.vuejs.org/guide/scaling-up/testing.html#component-testing

[hayato24s]

@HosokawaR

しかし、Repository をモックすると Production （ = Develop ではない）Repository のテストや、axios や aspida などのテストができなくなり、前述の目的が達成できないと考えています。

説明が下手でした。すみません。
Repositoryをモックするのではなく、InMemoryで動作するRepositoryを使用してfrontend全体に対するテストを行うという認識です。

axiosなどを使用したRepositoryに対する動作確認はRepositoryに対する単体テストで対応しようと思っています。

ですので、playwrightを使用してモックを作成する必要は基本的にはないかと思います。