E2Eテスト実行時に、 `npm run build` を実行していないとExternal Style Support関連のテストが失敗する

[sanak]

概要

E2Eテスト実行時に、 npm run build を実行していないとExternal Style Support関連のテストが失敗します。

$ npm run e2e
  6 failed
    [chromium] › e2e/external-style.spec.ts:7:7 › External Style Support › data-style で外部スタイルを指定しても地図が表示されること
    [chromium] › e2e/external-style.spec.ts:15:7 › External Style Support › data-style で指定した外部スタイルURLにアクセスしていること
    [firefox] › e2e/external-style.spec.ts:7:7 › External Style Support › data-style で外部スタイルを指定しても地図が表示されること
    [firefox] › e2e/external-style.spec.ts:15:7 › External Style Support › data-style で指定した外部スタイルURLにアクセスしていること
    [webkit] › e2e/external-style.spec.ts:7:7 › External Style Support › data-style で外部スタイルを指定しても地図が表示されること
    [webkit] › e2e/external-style.spec.ts:15:7 › External Style Support › data-style で指定した外部スタイルURLにアクセスしていること
  15 passed (48.8s)

背景・前提条件

以下のPR #467 でコメントしていた内容の件で、
#467 (review)

#467 のPRブランチ(fix-invalid-ulr-for-dev)にmasterブランチをマージした状態が前提となります

再現手順

1. masterブランチをプル後、fix: すべてのURLを書き直していた問題を修正 #467 のPRブランチ(fix-invalid-ulr-for-dev)から作業用ブランチを作成

   $ git checkout master
   $ git pull
   $ git checkout fix-invalid-ulr-for-dev
   $ git checkout -b fix-invalid-ulr-for-dev-working

2. git clean -Xdf でビルド済モジュールなどを削除 (※ ~/.gitignore_global などに追加の設定(*.code-workspace など)をしている場合は削除されるので注意してください。)

   $ git clean -Xdf
   Removing docs/embed
   Removing docs/embed-chunks/
   Removing docs/embed.js
   Removing embed.code-workspace
   Removing node_modules/
   Removing playwright-report/
   Removing src/version.ts
   Removing test-results/

3. npm install 実行後に、 npm run e2e を実行

   $ npm install
   $ npm run e2e

原因

少し調べたところ、以下が原因のようでした。

• docs/e2e フォルダ内のHTMLファイルで、 external-style.html のみが <script src="../embed.js"></script> でembedを拡張子(.js)付きで読み込んでいる
  • ※他のHTML(basic.html など)は <script src="../embed?geolonia-api-key=YOUR-API-KEY"></script> でembedを拡張子なしで読んでいる
• E2Eテスト実行時に、 docs/e2e/webpack.config.js で embed をホストされていて、他のHTMLは問題がない(と思われる)

  const config = require('../webpack.config')
  
  module.exports = {
    ...config,
    output: {
      ...config.output,
      path: __dirname,
      filename: 'embed'
    },
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
      static: {
        directory: __dirname
      },
      open: true,
      port: 3000,
    },
  }

対応案

以下のいずれかが必要の見込みです。

1. ドキュメント(README.md)に、E2Eテスト実行前には npm run build が必要となることを明記する
2. E2Eテスト実行時に、webpackで embed.js もホストする
   • ※VSCode Copilotに質問したところでは、webpack.config.js がもう一つ必要のようでした。
3. docs/e2e/external-style.html でembedを拡張子なしで読み込む

   --- a/docs/e2e/external-style.html
   +++ b/docs/e2e/external-style.html
   @@ -24,6 +24,6 @@
          style="width: 100%; height: 400px"
        ></div>
    
   -    <script src="../embed.js"></script>
   +    <script src="../embed"></script>
      </body>
    </html>

[yuiseki]

@sanak 個人的には、最小の差分で解決できそうな 案3 に一票です

[sanak]

@yuiseki 上記、案3での対応について、承知しました。
PR #467 のマージ後となると思いますが、私の方でPRを作成するようにします。
確認頂き、ありがとうございます！🙇