Merge pull request #466 from geolonia/fix-fail-e2e-test

fix: E2Eテストが失敗する問題を修正

Author: bougan1160

e2e/external-style.html docs/e2e/external-style.htmle2e/external-style.html renamed to docs/e2e/external-style.html

@@ -1,74 +1,25 @@
 import { test, expect } from '@playwright/test';
+import { TEST_URL, waitForMapLoad } from './helper';
 
-test.describe('External Style Support', () => {
-  test('should render map with external OSM Bright style', async ({ page }) => {
-    await page.goto('/e2e/external-style.html');
+const EXTERNAL_STYLE_URL = 'https://tile.openstreetmap.jp/styles/osm-bright/style.json';
 
-    // Wait for map to be loaded
-    await page.waitForFunction(() => {
-      const container = document.querySelector('#map');
-      return container && (container as any).geoloniaMap;
-    });
+test.describe('External Style Support', () => {
+  test('data-style で外部スタイルを指定しても地図が表示されること', async ({ page }) => {
+    await page.goto(`${TEST_URL}/external-style.html`);
+    await waitForMapLoad(page, '#map');
 
-    // Check if map is rendered
-    const mapCanvas = await page.locator('#map canvas.maplibregl-canvas');
+    const mapCanvas = page.locator('#map canvas.maplibregl-canvas');
     await expect(mapCanvas).toBeVisible();
-
-    // Verify that the map has loaded
-    const isMapLoaded = await page.evaluate(() => {
-      const container = document.querySelector('#map') as any;
-      const map = container.geoloniaMap;
-      return map && map.loaded();
-    });
-
-    expect(isMapLoaded).toBe(true);
   });
 
-  test('should warn about missing API key but still work with external style', async ({
-    page,
-  }) => {
-    const consoleMessages: string[] = [];
-    page.on('console', (msg) => {
-      if (msg.type() === 'warning') {
-        consoleMessages.push(msg.text());
-      }
-    });
-
-    await page.goto('/e2e/external-style.html');
-
-    // Wait for map to be loaded
-    await page.waitForFunction(() => {
-      const container = document.querySelector('#map');
-      return container && (container as any).geoloniaMap;
-    });
-
-    // Check if warning about API key was shown
-    const hasApiKeyWarning = consoleMessages.some((msg) =>
-      msg.includes('API key not found'),
+  test('data-style で指定した外部スタイルURLにアクセスしていること', async ({ page }) => {
+    const styleRequest = page.waitForRequest((req) =>
+      req.url().includes(EXTERNAL_STYLE_URL),
     );
-    expect(hasApiKeyWarning).toBe(true);
-  });
-
-  test('should log external style loading info', async ({ page }) => {
-    const consoleMessages: string[] = [];
-    page.on('console', (msg) => {
-      if (msg.type() === 'log') {
-        consoleMessages.push(msg.text());
-      }
-    });
 
-    await page.goto('/e2e/external-style.html');
+    await page.goto(`${TEST_URL}/external-style.html`);
 
-    // Wait for map to be loaded
-    await page.waitForFunction(() => {
-      const container = document.querySelector('#map');
-      return container && (container as any).geoloniaMap;
-    });
-
-    // Check if external style loading log was shown
-    const hasExternalStyleLog = consoleMessages.some((msg) =>
-      msg.includes('Loading external style from'),
-    );
-    expect(hasExternalStyleLog).toBe(true);
+    const req = await styleRequest;
+    expect(req.url()).toBe(EXTERNAL_STYLE_URL);
   });
 });