持續整合 (CI)

為了協助驗證您的擴充功能並確保其功能正常，Extension SDK 提供了工具來協助您為擴充功能設定持續整合。

重要
Docker Desktop Action 與 extension-test-helper 程式庫皆處於實驗性階段。

使用 GitHub Actions 設定 CI 環境

您需要 Docker Desktop 才能安裝並驗證您的擴充功能。您可以透過在工作流程檔案 (workflow file) 中加入以下內容，在 GitHub Actions 中啟動 Docker Desktop：

steps:
  - id: start_desktop
    uses: docker/desktop-action/start@v0.1.0

注意
此動作目前僅支援 GitHub Action 的 macOS 執行器 (runners)。您需要在端對端 (end-to-end) 測試中指定 runs-on: macOS-latest。

一旦步驟執行完畢，接下來的步驟會使用 Docker Desktop 和 Docker CLI 來安裝並測試該擴充功能。

使用 Puppeteer 驗證您的擴充功能

一旦 Docker Desktop 在 CI 中啟動，您就可以使用 Jest 和 Puppeteer 來建置、安裝及驗證您的擴充功能。

首先，從您的測試中建置並安裝該擴充功能

import { DesktopUI } from "@docker/extension-test-helper";
import { exec as originalExec } from "child_process";
import * as util from "util";

export const exec = util.promisify(originalExec);

// keep a handle on the app to stop it at the end of tests
let dashboard: DesktopUI;

beforeAll(async () => {
  await exec(`docker build -t my/extension:latest .`, {
    cwd: "my-extension-src-root",
  });

  await exec(`docker extension install -f my/extension:latest`);
});

接著開啟 Docker Desktop 儀表板，並在您的擴充功能介面上執行一些測試

describe("Test my extension", () => {
  test("should be functional", async () => {
    dashboard = await DesktopUI.start();

    const eFrame = await dashboard.navigateToExtension("my/extension");

    // use puppeteer APIs to manipulate the UI, click on buttons, expect visual display and validate your extension
    await eFrame.waitForSelector("#someElementId");
  });
});

最後，關閉 Docker Desktop 儀表板並解除安裝您的擴充功能

afterAll(async () => {
  dashboard?.stop();
  await exec(`docker extension uninstall my/extension`);
});

接下來

建置一個進階前端擴充功能。
了解更多關於擴充功能架構的資訊。
了解如何發佈您的擴充功能。