Merge pull request #569 from shiguredo/feature/npm-latest-sdk-e2e-test

npm に登録している latest のバージョンを E2E テストで検証する仕組みを追加する
shiguredo · Oct 15, 2024 · d3b6a57 · d3b6a57
2 parents 7963f15 + 970815e
commit d3b6a57
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 5 deletions.
diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml
@@ -19,8 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        # node: ["18", "20", "22"]
-        node: ["22"]
+        node: ["18", "20", "22"]
         # browser: ["chromium", "firefox", "webkit"]
         browser: ["chromium"]
     env:
@@ -46,6 +45,12 @@ jobs:
       #     name: playwright-report
       #     path: playwright-report/
       #     retention-days: 30
+
+  slack_notify_succeeded:
+    needs: [e2e-test]
+    runs-on: ubuntu-latest
+    if: success()
+    steps:
       - name: Slack Notification
         if: success()
         uses: rtCamp/action-slack-notify@v2
@@ -55,6 +60,11 @@ jobs:
           SLACK_TITLE: Succeeded
           SLACK_ICON_EMOJI: ":star-struck:"
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+  slack_notify_failed:
+    needs: [e2e-test]
+    runs-on: ubuntu-latest
+    if: failure()
+    steps:
       - name: Slack Notification
         if: failure()
         uses: rtCamp/action-slack-notify@v2

diff --git a/.github/workflows/npm-pkg-e2e-test.yml b/.github/workflows/npm-pkg-e2e-test.yml
@@ -0,0 +1,93 @@
+name: npm-pkg-e2e-test
+
+on:
+  workflow_dispatch:
+  # push:
+  #   branches:
+  #     - develop
+  #     - feature/*
+  #   paths-ignore:
+  #     - "**.md"
+  #     - "LICENSE"
+  #     - "NOTICE"
+  schedule:
+    # UTC 時間で毎日 2:00 (JST で 11:00) に実行、月曜日から金曜日
+    - cron: "0 2 * * 1-5"
+
+jobs:
+  npm-pkg-e2e-test:
+    timeout-minutes: 20
+    continue-on-error: true
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        # メンテナンスはおてて
+        sdk_version: [
+          "2024.1.2",
+          "2023.2.0",
+          "2023.1.0",
+          "2022.3.2",
+          "2022.1.0",
+          "2021.2.3",
+        ]
+        node: ["18", "20", "22"]
+        # node: ["18"]
+        # browser: ["chromium", "firefox", "webkit"]
+        browser: ["chromium"]
+    env:
+      VITE_SORA_SIGNALING_URL: ${{ secrets.TEST_SIGNALING_URL }}
+      VITE_SORA_CHANNEL_ID_PREFIX: ${{ secrets.TEST_CHANNEL_ID_PREFIX }}
+      VITE_ACCESS_TOKEN: ${{ secrets.TEST_SECRET_KEY }}
+      NPM_PKG_E2E_TEST: true
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+      - uses: pnpm/action-setup@v4
+      # sora-js-sdk を npm からインストールする
+      - run: pnpm --version
+      - run: pnpm install
+      - run: pnpm add -E sora-js-sdk@${{ matrix.sdk_version }}
+
+        working-directory: ./examples
+      # pnpm run build しない
+      - run: pnpm exec playwright install ${{ matrix.browser }} --with-deps
+      - run: pnpm exec playwright test --project=${{ matrix.browser }}
+        env:
+          VITE_SORA_CHANNEL_ID_SUFFIX: _${{ matrix.node }}_${{ matrix.sdk_version }}
+      # - uses: actions/upload-artifact@v4
+      #   if: always()
+      #   with:
+      #     name: playwright-report
+      #     path: playwright-report/
+      #     retention-days: 30
+
+  slack_notify_succeeded:
+    needs: [npm-pkg-e2e-test]
+    runs-on: ubuntu-latest
+    if: success()
+    steps:
+      - name: Slack Notification
+        if: success()
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_CHANNEL: sora-js-sdk
+          SLACK_COLOR: good
+          SLACK_TITLE: Succeeded
+          SLACK_ICON_EMOJI: ":star-struck:"
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+  slack_notify_failed:
+    needs: [npm-pkg-e2e-test]
+    runs-on: ubuntu-latest
+    if: failure()
+    steps:
+      - name: Slack Notification
+        if: failure()
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_CHANNEL: sora-js-sdk
+          SLACK_COLOR: danger
+          SLACK_TITLE: Failed
+          SLACK_ICON_EMOJI: ":japanese_ogre:"
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
diff --git a/CHANGES.md b/CHANGES.md
@@ -35,6 +35,8 @@
 
 ### misc
 
+- [ADD] npm に登録されている stable SDK の E2E テストを追加する
+  - @voluntas
 - [FIX] RTCPeerConnection.close は Promise ではないので await しないようにする
   - @voluntas
 - [CHANGE] ビルドシステムを Vite に変更する

diff --git a/examples/messaging/main.mts b/examples/messaging/main.mts
@@ -79,6 +79,7 @@ class SoraClient {
   ) {
     this.sora = Sora.connection(signalingUrl, this.debug)
     this.channelId = `${channelIdPrefix}messaging${channelIdSuffix}`
+    console.log(channelIdPrefix)
     this.metadata = { access_token: accessToken }
 
     this.options = {

diff --git a/examples/sendonly/index.html b/examples/sendonly/index.html
@@ -8,6 +8,7 @@
 <body>
   <div class="container">
     <h1>Sendonly test</h1>
+    <h3 id="sdk-version"></h3>
     <button id="connect">connect</button>
     <button id="disconnect">disconnect</button>
     <button id="get-stats">getStats</button><br />

diff --git a/examples/sendonly/main.mts b/examples/sendonly/main.mts
@@ -17,6 +17,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     ACCESS_TOKEN,
   )
 
+  // SDK バージョンの表示
+  const sdkVersionElement = document.querySelector('#sdk-version')
+  if (sdkVersionElement) {
+    sdkVersionElement.textContent = `${Sora.version()}`
+  }
+
   document.querySelector('#connect')?.addEventListener('click', async () => {
     const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
     await client.connect(stream)

diff --git a/tests/sendonly_recvonly.spec.ts b/tests/sendonly_recvonly.spec.ts
@@ -9,6 +9,15 @@ test('sendonly/recvonly pages', async ({ browser }) => {
   await sendonly.goto('http://localhost:9000/sendonly/')
   await recvonly.goto('http://localhost:9000/recvonly/')
 
+  // SDK バージョンの表示
+  await sendonly.waitForSelector('#sdk-version')
+  const sendonlySdkVersion = await sendonly.$eval('#sdk-version', (el) => el.textContent)
+  console.log(`sendonly sdkVersion=${sendonlySdkVersion}`)
+
+  await recvonly.waitForSelector('#sdk-version')
+  const recvonlySdkVersion = await recvonly.$eval('#sdk-version', (el) => el.textContent)
+  console.log(`recvonly sdkVersion=${recvonlySdkVersion}`)
+
   await sendonly.click('#connect')
   await recvonly.click('#connect')
 

diff --git a/vite.config.mjs b/vite.config.mjs
@@ -6,9 +6,14 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   root: resolve(__dirname, 'examples'),
   resolve: {
-    alias: {
-      'sora-js-sdk': resolve(__dirname, 'dist/sora.mjs'),
-    },
+    // NPM_PKG_E2E_TEST が true の時は alias を無効化する
+    // これは .github/workflows/npm-pkg-e2e-test.yml で、
+    // E2E テストで複数のバージョンの npm の sora-js-sdk をインストールして利用するため
+    alias: process.env.NPM_PKG_E2E_TEST
+      ? {}
+      : {
+          'sora-js-sdk': resolve(__dirname, 'dist/sora.mjs'),
+        },
   },
   build: {
     rollupOptions: {