コンポーネントテストの全面リファクタリングと2件のバグ修正

2026年04月15日 22:38 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2272

WebAwesomeのコアパッケージ全コンポーネントのテストが統一された構造に刷新され、同時に<wa-rating>と<wa-zoomable-frame>の2件のバグが修正された。

背景

WebAwesomeのテストコードは、複数のコントリビューターによって長期間にわたって追加されてきたため、構造・命名規則・カバレッジが一貫していなかった。PRの説明によれば、テストの標準化・簡素化・カバレッジの拡充は長期的な課題として認識されていた。

既存のテストには以下のような問題点が混在していていた:

describeのグループ化なしに直接itブロックを並べたフラットな構造
when provided no parameters、defaultsのような曖昧な説明文
@open-wc/testingのfixtureを直接インポートしていた一部ファイル（fixturesユーティリティを使わない実装）
beforeEachで共有変数elに代入する方式によるテスト間の依存

これらの課題を解消するため、本PRではすべてのコンポーネントテストを一括してリファクタリングしている。

技術的な変更

テスト構造の統一

全コンポーネントのテストがaccessibility・properties・slots・events・methodsなどのネストしたdescribeブロックで整理され、一貫した階層構造になった。

変更前（<wa-badge>の例）:

describe('<wa-badge>', () => {
  for (const fixture of fixtures) {
    describe(`with "${fixture.type}" rendering`, () => {
      describe('when provided no parameters', () => {
        it('should render the child content provided', async () => {
          const el = await fixture<WaBadge>(html` <wa-badge>Badge</wa-badge> `);
          expect(el.innerText).to.eq('Badge');
        });

        it('should pass accessibility tests with a role of status on the base part', async () => {
          const el = await fixture<WaBadge>(html` <wa-badge>Badge</wa-badge> `);
          const part = el.shadowRoot!.querySelector('[part~="base"]')!;
          expect(part.getAttribute('role')).to.eq('status');
          await expect(el).to.be.accessible({ ignoredRules });
        });
      });
    });
  }
});

変更後:

describe('<wa-badge>', () => {
  for (const fixture of fixtures) {
    describe(`with "${fixture.type}" rendering`, () => {
      describe('accessibility', () => {
        it('should pass accessibility tests', async () => {
          const el = await fixture<WaBadge>(html`<wa-badge>Badge</wa-badge>`);
          await expect(el).to.be.accessible({ ignoredRules });
        });

        it('should have role="status" on the base part', async () => {
          const el = await fixture<WaBadge>(html`<wa-badge>Badge</wa-badge>`);
          const base = el.shadowRoot!.querySelector('[part~="base"]')!;
          expect(base.getAttribute('role')).to.equal('status');
        });
      });

      describe('properties', () => {
        it('should default variant to "brand"', async () => {
          const el = await fixture<WaBadge>(html`<wa-badge>Badge</wa-badge>`);
          expect(el.variant).to.equal('brand');
          expect(el.getAttribute('variant')).to.equal('brand');
        });
      });
    });
  }
});

fixtureインポートの統一

<wa-dropdown>や<wa-dropdown-item>など一部のファイルでは、@open-wc/testingからfixtureを直接インポートし、SSR/ハイドレーションのテストパスを持たない実装になっていた。これらもfixturesユーティリティ（../../internal/test/fixture.js）に統一され、clientFixtureとhydratedFixtureの両方でテストが実行される構造になった。

変更前（<wa-dropdown>の例）:

import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
// fixturesループなしにトップレベルで直接テストを記述
it('should render a component', async () => {
  const el = await fixture(html` <wa-dropdown></wa-dropdown> `);
  expect(el).to.exist;
});

変更後:

import { fixtures } from '../../internal/test/fixture.js';
// ...
for (const fixture of fixtures) {
  describe(`with "${fixture.type}" rendering`, () => {
    // ...
  });
}

expectEventヘルパーの導入

イベント検証にexpectEvent（../../internal/test/expect-event.js）が多数のコンポーネントで新たに利用されるようになった。<wa-avatar>・<wa-button>・<wa-checkbox>・<wa-dialog>・<wa-drawer>・<wa-dropdown>・<wa-icon>など広範なコンポーネントでインポートが追加されており、イベント検証ロジックの一元化が図られている。

軽微な削除・整理

いくつかのファイルで未使用のインポートや過剰な空白・コメントが削除されている。<wa-animation>ではunsafeHTMLのインポートが削除され、SSR非対応の制約がコード上のコメントとして明示された。<wa-format-date>ではテストの日時依存による不安定さを防ぐため、固定日時new Date(2023, 0, 15, 14, 30, 45)を使うアプローチが導入されている。

バグ修正

リファクタリングの過程で2件のバグが発見・修正された:

<wa-rating>: <fieldset>経由で無効化した後、fieldsetを再有効化しても有効状態が復元されないバグ
<wa-zoomable-frame>: ズームレベルのパース後にズームコントロールボタンのdisabled状態が正しく更新されないバグ

いずれもchangelogに記載されており、本PRの範囲内で修正されている。

設計判断

テストの独立性を優先するため、beforeEachによる共有変数パターンが廃止された。 変更前の<wa-avatar>テストではlet el: WaAvatarをスコープ外で宣言しbeforeEachで代入していたが、変更後は各itブロック内で独立してフィクスチャを生成する方式に統一された。これによりテスト間の状態汚染リスクが排除される一方、フィクスチャ生成のコードが繰り返されるトレードオフがある。

<wa-animation>は引き続きclientFixtureのみを使用している。SSR/ハイドレーション環境でアニメーションのPromiseが正しく解決されない既知の問題（lit/issues/4739）があるためで、制約の理由がコメントとして明示されるようになった。

<wa-carousel>では以前スキップ（it.skip）されていた自動スクロールのテストが削除され、テストスイートから除外されている。手動検証で動作確認済みとされていたが、自動テストとしては維持されない判断がなされた。

まとめ

本PRは、長期間にわたり断片的に追加されてきたテストコードを一貫した設計原則のもとに再構築したものだ。accessibility・properties・events・slots・methodsという明確なカテゴリでテストを整理することで、今後のコントリビューターが同じ構造に従ってテストを追加・維持しやすくなる。同時に発見された2件のバグ修正は、テストの充実がコードベースの品質向上に直結することを示している。