E2Eテスト実行環境とComponentのテストを追加

[keitakn]

issueURL

#351

関連 URL

なし

このPRで対応すること / このPRで対応しないこと

• E2Eテストの実行環境の構築
• Componentテストの追加

E2EテストのCIへの組み込みは実施しません。

Storybook の URL もしくはスクリーンショット

UI変更はないのでなし。

変更点概要

最初は以下の記事で紹介されている @storybook/experimental-addon-test を試す予定でしたが上手く動作しなかったので playwright の実行環境を用意して最低限のE2Eテストを追加しました。

https://azukiazusa.dev/blog/storybook-and-vitest-integration/

また最低限のアクセシビリティを担保する為にComponentのテストも追加しています。

レビュアーに重点的にチェックして欲しい点

特になし

補足情報

E2Eテストの実行はCIには組み込んでいません。組み込むかどうかはデザイン変更が完了してから一旦考えます。

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
lgtm-cat-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 8, 2024 2:56pm

[codecov]

Codecov Report

Attention: Patch coverage is 58.49057% with 44 lines in your changes missing coverage. Please review.

Project coverage is 33.78%. Comparing base (3008ecc) to head (a677ae7).
Report is 4 commits behind head on release/epic36/design-renewal-2024.

Files with missing lines	Patch %	Lines
playwright.config.ts	0.00%	42 Missing and 1 partial ⚠️
vitest.config.mts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@                           Coverage Diff                           @@
##           release/epic36/design-renewal-2024     #352       +/-   ##
=======================================================================
+ Coverage                                9.62%   33.78%   +24.16%     
=======================================================================
  Files                                      72       75        +3     
  Lines                                    1871     1977      +106     
  Branches                                   96      147       +51     
=======================================================================
+ Hits                                      180      668      +488     
+ Misses                                   1628     1260      -368     
+ Partials                                   63       49       -14     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.