chore: Dropdown コンポーネントの E2E テストを単体テストで書き直す #4963
Conversation
commit: |
| @@ -40,6 +40,7 @@ | |||
| "@storybook/test-runner": "^0.19.1", | |||
| "@storybook/theming": "^8.3.4", | |||
| "@swc/core": "^1.7.26", | |||
| "@testing-library/jest-dom": "^6.5.0", | |||
There was a problem hiding this comment.
Jest から Vitest に移行したばかりですが、Vitest の組み込みアサーションだとちょっと表現力不足というか、特にE2Eで見ていたようなチェックを簡易的に書くには表現力不足だったので @testing-library/jest-dom を追加しました。
これで、本PRでいう toHaveFocus() みたいな便利アサーションを利用できるようになります。
jest-dom ってパッケージ名ですが、vitest はじめ Jest 互換のあるテストフレームワークで使用可能です。
| @@ -0,0 +1 @@ | |||
| import '@testing-library/jest-dom/vitest' | |||
There was a problem hiding this comment.
この辺は以下の手順通りの対応。
https://github.com/testing-library/jest-dom#with-vitest
| @@ -173,6 +173,9 @@ importers: | |||
| '@swc/core': | |||
| specifier: ^1.7.26 | |||
| version: 1.7.26(@swc/[email protected]) | |||
| '@testing-library/jest-dom': | |||
| specifier: ^6.5.0 | |||
| version: 6.5.0 | |||
There was a problem hiding this comment.
no dependencies で助かる。
s-sasaki-0529
requested review from
oti,
yt-ymmt,
misako0927,
Qs-F and
hiroki0525
and removed request for
a team
| it('トリガーボタンがクリックされるとドロップダウンが開くこと', () => { | ||
| render(template) | ||
|
|
||
| act(() => screen.getByText('Trigger').click()) |
There was a problem hiding this comment.
すでに試されている気はするんですが、getByRoleだとうまくうごかなさそうでしたか？
optionでexpanded: falseとかを渡すとついでにアクセシビリティのテストにもなりそうで良いかな (複数の観点を1つのテストでやらないほうがいいはそれはそうなんですが)、と思って聞いてる感じです！
There was a problem hiding this comment.
おぉ、getByRole のオプションで expanded 使えるのは知らなかったです！
可能な限り単体テスト内ではアクセシビリティの担保もしたいので修正します！
| ) | ||
|
|
||
| act(() => screen.getByRole('button', { name: 'Trigger', expanded: false }).click()) | ||
| act(() => screen.getByRole('button', { name: 'Open Dialog' }).click()) |
There was a problem hiding this comment.
（理解不足かもしれません）ドロップダウンからダイアログを開いたときフォーカスが移動することというテストなのでフォーカスがあるかどうかみるのかなと思ったのですがクリックだけでテストできていますでしょうか・・？
There was a problem hiding this comment.
全然大丈夫じゃないです！！
これE2Eから移植作業してる中で、ダイアログは Portal で外側に描画されるから testing-library でフォーカス確認するの無理では〜って一旦保留したまま忘れてコミット・プッシュしてました！
ので一旦再確認します 🙏
There was a problem hiding this comment.
確認しました。
ダイアログが開いた際にダイアログ内の(任意の)要素にフォーカスを入れられるのは Dialog コンポーネントの機能であって、Dropdown は一切関与しないため、 Dialog の単体テストでカバーしようと思います！
関連URL
概要
Dropdown コンポーネントには E2E テストがありますが、単体テストで十分なテストであるため、単体テスト(testing-library) に移植します。
これによって、 CI で時間がかかっている E2E テストのコスト削減及び、暗黙に発生している Storybook への依存の削減、自動テスト全体のポリシー整備を行います。
変更内容
確認方法
テストコードのみなのでCIが通ればOKです。
備考
基本的にはすべての E2E テストを移植し、E2Eテスト基盤ごと一度削除し、Next.js を使用すると行った本質的に E2E テストが向いている場面用に作り直します。
今回は
@testign-library/jest-domの追加が混ざってるのでDropdownコンポーネントの移行だけでPRを作成してますが、今後は複数コンポーネントの対応を１PRにまとめるかもしれません。