지속적 통합

지속적 통합 (Continuous Integration, CI)

확장을 위한 CI 환경을 GitHub Actions로 설정하고 Puppeteer로 검증하는 방법을 설명하는 문서예요.

출처: 문서

본문

확장을 검증하고 기능적인지 확인하는 데 도움을 주기 위해, Extension SDK는 확장을 위한 지속적 통합을 설정하는 데 도움이 되는 도구를 제공해요.

중요: Docker Desktop Action과 extension-test-helper 라이브러리는 모두 실험적이에요.

GitHub Actions로 CI 환경 설정하기 (Setup CI environment with GitHub Actions)

확장을 설치하고 검증하려면 Docker Desktop이 필요해요.

Docker Desktop Action을 사용해 GitHub Actions에서 Docker Desktop을 시작할 수 있어요. 워크플로 파일에 다음을 추가하세요:

steps:
- id: start_desktop
  uses: docker/desktop-action/[email protected]

참고: 이 action은 현재 GitHub Actions macOS 러너만 지원해요. 엔드 투 엔드 테스트를 위해 runs-on: macOS-latest를 지정해야 해요.

단계가 실행된 후, 다음 단계는 Docker Desktop과 Docker CLI를 사용해 확장을 설치하고 테스트해요.

Puppeteer로 확장 검증하기 (Validating your extension with 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 Dashboard를 열고 확장 UI에서 몇 가지 테스트를 실행하세요:

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 Dashboard를 닫고 확장을 제거하세요:

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

다음은 무엇인가요?

고급 프론트엔드 확장 빌드하기.
확장 아키텍처에 대해 자세히 알아보기.
확장 게시 방법 알아보기.

지속적 통합