Open2

何度も見返したいMDN

TaiyoTaiyo

eventPhase

そのようにイベントなどが起きるか、フェーズなどを知りたい時に見返す

  • キャプチャフェーズ
  • ダーゲットフェーズ
  • バブリングフェーズ

https://developer.mozilla.org/ja/docs/Web/API/Event/eventPhase

MutationObserver

属性値の変化を監視したいときに使用する。
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

matchMedia

画面サイズを取得する際に使用する。~px以下になったら特定の処理を走らせたいときなど
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

defineProperty

既存の標準オブジェクトを変更したいときなどに使う。vitestでは、node上で仮想的なJSDOMという環境をエミュレートする。matchMediaなどはその環境にはなくイベントのみが存在している？つまり、それと同等の関数をモックすることで、テストが可能

Object.defineProperty(window, "matchMedia", {
  writable: true,
  value: (query: string) => ({
    matches: query.includes(`max-width: ${breakpoint.mobile}px`),
    media: query,
    onchange: null,
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  }),
});

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

showModal

モーダルのテストを書くときに見返す
https://developer.mozilla.org/ja/docs/Web/API/HTMLDialogElement/showModal