Add light-dismiss behavior tests and changelog entry for dialog and drawer components
この PR は、<wa-dialog> と <wa-drawer> の lightDismiss 挙動を検証するテストを追加し、同時に変更履歴を記録する changelog エントリを導入します。テストの追加により、コンポーネントが期待通りに動作することを CI で検証でき、将来的な回帰を防止します。
背景
lightDismiss は、バックドロップ（オーバーレイ）をクリックした際にコンポーネントを閉じるかどうかを制御する Boolean 属性です。Web Awesome の貢献ガイドラインでは、Boolean 属性はデフォルトで false とし、属性の有無で true/false を判定することが推奨されています[^1]。この規則は wa-dialog では既にテストで保証されていましたが、wa-drawer についてはテストが不足していたため、実装の正確性を自動的に確認できませんでした。
技術的な変更
テストスイートに lightDismiss のシナリオを 3 つ追加しました。各コンポーネントで共通するテストは次の通りです。
- バックドロップをクリックしたとき、属性が付与されていなければ閉じないことを確認。
-
light-dismiss属性が付与されている場合、バックドロップクリックで閉じることを確認。 - コンポーネント内部（ボディ領域）をクリックしたときは属性の有無に関わらず閉じないことを確認。
@@ -184,6 +184,42 @@ describe('<wa-dialog>', () => {
});
});
+ describe('light dismiss', () => {
+ it('should not close when clicking the backdrop by default', async () => {
+ const el = await fixture<WaDialog>(html`<wa-dialog open>Content</wa-dialog>`);
+ const dialog = el.shadowRoot!.querySelector<HTMLDialogElement>('.dialog')!;
+ dialog.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+ await aTimeout(250);
+ expect(el.open).to.be.true;
+ });
+
+ it('should close when clicking the backdrop when light-dismiss is enabled', async () => {
+ const el = await fixture<WaDialog>(html`<wa-dialog open light-dismiss>Content</wa-dialog>`);
+ const dialog = el.shadowRoot!.querySelector<HTMLDialogElement>('.dialog')!;
+ await expectEvent(el, 'wa-after-hide', () => {
+ dialog.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+ });
+ expect(el.open).to.be.false;
+ });
+
+ it('should not close when clicking inside the dialog even when light-dismiss is enabled', async () => {
+ const el = await fixture<WaDialog>(html`<wa-dialog open light-dismiss>Content</wa-dialog>`);
+ const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
+ body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+ await aTimeout(250);
+ expect(el.open).to.be.true;
+ });
+ });
*** End Patch
@@ -209,6 +209,42 @@ describe('<wa-drawer>', () => {
});
});
+ describe('light dismiss', () => {
+ it('should not close when clicking the backdrop by default', async () => {
+ const el = await fixture<WaDrawer>(html`<wa-drawer open>Content</wa-drawer>`);
+ const drawer = el.shadowRoot!.querySelector<HTMLDialogElement>('.drawer')!;
+ drawer.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+ await aTimeout(250);
+ expect(el.open).to.be.true;
+ });
+
+ it('should close when clicking the backdrop when light-dismiss is enabled', async () => {
+ const el = await fixture<WaDrawer>(html`<wa-drawer open light-dismiss>Content</wa-drawer>`);
+ const drawer = el.shadowRoot!.querySelector<HTMLDialogElement>('.drawer')!;
+ await expectEvent(el, 'wa-after-hide', () => {
+ drawer.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+ });
+ expect(el.open).to.be.false;
+ });
+
+ it('should not close when clicking inside the drawer even when light-dismiss is enabled', async () => {
+ const el = await fixture<WaDrawer>(html`<wa-drawer open light-dismiss>Content</wa-drawer>`);
+ const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
+ body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+ await aTimeout(250);
+ expect(el.open).to.be.true;
+ });
+ });
*** End Patch
changelog にもエントリを追加し、light-dismiss オプションに関するバグ修正を明示しました。
- Fixed a bug in `<wa-drawer>` that caused the `light-dismiss` option not work as intended [pr:2437]
設計判断
テスト追加は、コンポーネントの公開 API と HTML 標準の挙動を CI で保証するための防御的設計です。Boolean 属性のデフォルトが false であることは仕様上の制約であり、属性を付与したときのみ true になることをテストで明示しています。これにより、将来的に属性の実装が変わった場合でもテストが失敗し、すぐに問題を検出できます。
まとめ
本 PR は <wa-dialog> と <wa-drawer> の lightDismiss 挙動を検証するテストと changelog エントリを追加し、コンポーネントが Web Awesome の Boolean 属性規約に沿って正しく動作することを CI で保証します。テストの導入により回帰リスクが低減され、ライブラリの品質が向上します。