Skip to content

E2E Plan

Jump to bottom Edit New page
niryuu edited this page Jun 4, 2026 · 2 revisions

E2E テスト拡充計画（superseded）

この計画は #493 により supersede されました。 embed のコアは maps-core に置き換える方針（#491）に伴い、 機能・表示の E2E は maps-core 側（e2e/）が担保し、embed の E2E は wrapper グルー専任に縮約する。 かつてこのページにあった 57 ケースの拡充計画 / PR 分割方針は、maps-core E2E と重複するため削除した。

以下は 現状把握とテスト基盤（mock 戦略・chromium 方針・CI）の参照情報として残す。

現状 (master 時点)

テストファイル (4 spec / 10 ケース)

ファイル テスト数 内容
e2e/basic.spec.ts 4 基本表示・デフォルト中心・コンソールエラー無し・Shadow DOM 内 Attribution
e2e/map.spec.ts 2 nocontrol で地図生成・WebGL ピクセル検証
e2e/external-style.spec.ts 2 外部スタイル URL 表示・リクエスト検証
e2e/sample.spec.ts 2 PR0 helper sanity check (mockGeoloniaTiles, recordRequests)

HTML ページ (4 ファイル)

ファイル 用途
docs/e2e/basic.html scriptタグの API キー、.geolonia クラス
docs/e2e/data-key.html data-key 属性での API キー (現状未使用)
docs/e2e/nocontrol.html 全コントロール無効
docs/e2e/external-style.html 外部スタイル URL

ヘルパー (e2e/helper.ts)

PR #489 で導入された関数群:

export const TEST_URL = 'http://localhost:3000/e2e';
export const LOAD_TIMEOUT = 5000;

export async function waitForMapLoad(page, selector?);
export async function waitForStyleLoad(page, selector?);
export async function hasMapInstance(page, selector?): Promise<boolean>;
export async function getCenter(page, selector?): Promise<{lat, lng}>;
export async function getZoom(page, selector?): Promise<number>;
export async function getBearing(page, selector?): Promise<number>;
export async function getPitch(page, selector?): Promise<number>;
export async function getStyleLayerIds(page, selector?): Promise<string[]>;
export async function hasLayer(page, layerId, selector?): Promise<boolean>;
export async function hasSource(page, sourceId, selector?): Promise<boolean>;
export async function mockGeoloniaTiles(page): Promise<void>;
export function recordRequests(page, predicate?): string[];

Playwright 設定

  • playwright.config.ts: chromium のみ (firefox / webkit は削除済み)
  • 理由: embed は maplibre-gl の薄いラッパーであり、クロスブラウザ互換は maplibre 本体のテストに委ねる。e2e は iteration 速度を優先

CI

#480 (Merge PR geolonia/embed/ci/add-e2e-tests) で CI に E2E ジョブ追加済み。publish / deploy にも組み込まれている。reporter は list (CI 用)。

ネットワーク戦略

mockGeoloniaTiles(page) の動作

await page.route(/cdn\.geolonia\.com\/style\/.+\.json/, fulfillMinimalStyle);
await page.route(/cdn\.geolonia\.com\/(sprite|glyph|font)/, fulfill404);
await page.route(/tileserver\.geolonia\.com\/.*/, fulfillTileJSON);
await page.route(/(?:[^/]+\.)?tiles\.geolonia\.com\/.*\.pbf/, fulfill204);
await page.route(/api\.geolonia\.com\/.*/, fulfillEmptyJSON);

GEOLONIA_TILE_HOST = 'tiles.geolonia.com' を single source として GEOLONIA_TILE_URL_TEMPLATE と PBF 捕捉 regex を派生 (PR #489 で導入)。

テスト設計の指針

  • 認証パラメータ検証 → recordRequests(page, url => url.includes('key=')) で観測
  • DOM 検証 → page.evaluate でなるべく helper 関数 (hasLayer, getCenter 等) を使う
  • ネットワーク依存テスト → mockGeoloniaTiles を beforeEach で必ず呼ぶ
  • 外部スタイル (OpenStreetMap 等) を含むテストは実ネットワーク前提 (フェイク不可)
  • 3D など maplibre 内部実装に依存するものは、可能なら getLayoutProperty 経由で検証

chromium 限定方針

PR0 で firefox/webkit を削除 (playwright.config.ts)。理由:

  • embed は maplibre-gl の薄いラッパー → cross-browser 互換は maplibre 本体が担当
  • iteration 速度を 3 倍に
  • E2E のテスト数増加に対する実行コストを抑制

将来必要になったら戻す。

参照

  • Core-vs-Wrapper — maps-core 境界 (どのテストが lib 側で書けるか)
  • Data-Attributes — テストすべき data-* 属性
  • URL-Rewrite-Spec — 認証テストのモック設計
  • Hidden-Spec — 隠れ仕様もテスト網に入れる項目
  • E2E-for-Embed-Only-Features — embed 固有 (wrapper-only) のテスト範囲【正本】
Add a custom footer
Add a custom sidebar

Clone this wiki locally