adapt [email protected] (#162)

* feat: adapt [email protected]
AgoraIO-Extensions · Oct 25, 2023 · 8e7bd78 · 8e7bd78
1 parent 43ce3f7
commit 8e7bd78
Show file tree

Hide file tree

Showing 24 changed files with 2,379 additions and 2,425 deletions.
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -13,7 +13,7 @@
     "@ant-design/icons": "^5.2.4",
     "agora-rtc-react": "workspace:*",
     "agora-rtc-react-ui": "workspace:*",
-    "agora-rtc-sdk-ng": "4.18.2",
+    "agora-rtc-sdk-ng": "4.19.2",
     "antd": "^5.6.4",
     "clsx": "^1.2.1",
     "crypto-js": "^4.1.1",
@@ -29,13 +29,8 @@
     "@iconify-json/mdi": "^1.1.53",
     "@ngneat/falso": "^6.4.0",
     "@types/crypto-js": "^4.1.1",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.3",
     "sass": "^1.64.0",
     "sass-loader": "^13.3.2",
-    "typescript": "^5.1.6",
-    "unocss": "^0.53.5",
-    "vite": "^4.4.2"
+    "unocss": "^0.53.5"
   }
 }
diff --git a/examples/mobx/package.json b/examples/mobx/package.json
@@ -12,7 +12,7 @@
     "@ngneat/falso": "^6.4.0",
     "agora-rtc-react": "workspace:*",
     "agora-rtc-react-ui": "workspace:*",
-    "agora-rtc-sdk-ng": "4.18.2",
+    "agora-rtc-sdk-ng": "4.19.2",
     "clsx": "^1.2.1",
     "crypto-js": "^4.1.1",
     "mobx": "^6.10.0",
@@ -25,12 +25,7 @@
   "devDependencies": {
     "@iconify-json/mdi": "^1.1.53",
     "@types/crypto-js": "^4.1.1",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.3",
-    "typescript": "^5.1.6",
     "unocss": "^0.53.5",
-    "vite": "^4.4.2",
     "vite-plugin-externals": "^0.6.2"
   }
 }
diff --git a/package.json b/package.json
@@ -22,11 +22,15 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@hyrious/esbuild-dev": "^0.10.4",
     "@release-it/conventional-changelog": "^7.0.1",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@types/minimist": "^1.2.2",
     "@types/node": "^20.5.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.1.0",
+    "@vitest/coverage-v8": "^0.34.6",
+    "@vitest/ui": "^0.34.6",
     "agora-token": "^2.0.3",
     "commitlint": "^17.6.7",
     "cross-env": "^7.0.3",
@@ -39,11 +43,36 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "lint-staged": "^14.0.0",
     "markdown-it": "^13.0.1",
     "minimist": "^1.2.8",
     "prettier": "^2.8.8",
     "release-it": "^16.1.3",
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6",
+    "vitest-canvas-mock": "^0.3.3",
+    "@ngneat/falso": "^6.4.0",
+    "@storybook/addon-actions": "7.0.26",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-interactions": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/blocks": "^7.0.26",
+    "@storybook/builder-vite": "^7.0.26",
+    "@storybook/preview-api": "7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-vite": "^7.0.26",
+    "@types/jest": "^29.5.3",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.7",
+    "@types/testing-library__jest-dom": "^5.14.8",
+    "agora-rtc-sdk-ng": "4.19.2",
+    "agora-rtc-sdk-ng-fake": "github:AgoraIO-Extensions/agora-rtc-sdk-ng-fake#semver:^1.0.4",
+    "react-test-renderer": "^18.2.0",
+    "storybook": "^7.0.26",
+    "tsup": "^7.1.0",
+    "typedoc": "^0.24.8",
     "typescript": "^5.1.6"
   },
   "lint-staged": {

diff --git a/packages/agora-rtc-react-ui/package.json b/packages/agora-rtc-react-ui/package.json
@@ -52,34 +52,6 @@
     "react": ">=16.8"
   },
   "devDependencies": {
-    "@ngneat/falso": "^6.4.0",
-    "@storybook/addon-actions": "7.0.26",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/builder-vite": "^7.0.26",
-    "@storybook/preview-api": "7.0.26",
-    "@storybook/react": "^7.0.26",
-    "@storybook/react-vite": "^7.0.26",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.7",
-    "@types/testing-library__jest-dom": "^5.14.8",
-    "@vitejs/plugin-react": "^4.0.3",
-    "@vitest/coverage-v8": "^0.34.1",
-    "agora-rtc-react": "workspace:*",
-    "agora-rtc-sdk-ng": "4.18.2",
-    "agora-rtc-sdk-ng-fake": "github:AgoraIO-Extensions/agora-rtc-sdk-ng-fake#semver:^1.0.4",
-    "jsdom": "^22.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "storybook": "^7.0.26",
-    "tsup": "^7.1.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.2",
-    "vitest": "^0.34.1"
+    "agora-rtc-react": "workspace:*"
   }
 }
diff --git a/packages/agora-rtc-react-ui/test/setup.tsx b/packages/agora-rtc-react-ui/test/setup.tsx
@@ -2,6 +2,7 @@ import "@testing-library/jest-dom";
 import matchers from "@testing-library/jest-dom/matchers";
 import type { ReactNode } from "react";
 import { expect, vi } from "vitest";
+import "vitest-canvas-mock";
 
 expect.extend(matchers);
 

diff --git a/packages/agora-rtc-react-ui/vite.config.ts b/packages/agora-rtc-react-ui/vite.config.ts
@@ -24,6 +24,9 @@ export default defineConfig({
       exclude: ["test/**", "src/stories/*", "src/**/index.ts"],
     },
     exclude: ["**/node_modules/**"],
-    setupFiles: ["./test/setup.tsx"],
+    deps: {
+      inline: ["vitest-canvas-mock"],
+    },
+    setupFiles: ["../shared/test/setup.tsx"],
   },
 });
diff --git a/packages/agora-rtc-react/package.json b/packages/agora-rtc-react/package.json
@@ -50,42 +50,12 @@
     "typedoc": "typedoc src"
   },
   "peerDependencies": {
-    "agora-rtc-sdk-ng": ">=4.18.2",
+    "agora-rtc-sdk-ng": ">=4.19.2",
     "react": ">=16.8"
   },
   "main": "src/index.ts",
   "devDependencies": {
-    "@ngneat/falso": "^6.4.0",
-    "@storybook/addon-actions": "7.0.26",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/builder-vite": "^7.0.26",
-    "@storybook/preview-api": "7.0.26",
-    "@storybook/react": "^7.0.26",
-    "@storybook/react-vite": "^7.0.26",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.7",
-    "@types/testing-library__jest-dom": "^5.14.8",
-    "@vitejs/plugin-react": "^4.0.3",
-    "@vitest/coverage-v8": "^0.34.1",
-    "@vitest/ui": "^0.34.1",
-    "agora-rtc-react-ui": "workspace:*",
-    "agora-rtc-sdk-ng": "4.18.2",
-    "agora-rtc-sdk-ng-fake": "github:AgoraIO-Extensions/agora-rtc-sdk-ng-fake#semver:^1.0.4",
-    "jsdom": "^22.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "storybook": "^7.0.26",
-    "tsup": "^7.1.0",
-    "typedoc": "^0.24.8",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.2",
-    "vitest": "^0.34.1"
+    "agora-rtc-react-ui": "workspace:*"
   },
   "release-it": {
     "git": {

diff --git a/packages/agora-rtc-react/src/stories/LocalUser.stories.tsx b/packages/agora-rtc-react/src/stories/LocalUser.stories.tsx
@@ -43,6 +43,8 @@ export const Overview: StoryObj<OverviewArgs> = {
   render: function RenderLocalUser({ micOn, cameraOn, ...args }: OverviewArgs) {
     const [client] = useState(() =>
       FakeRTCClient.create({
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         publish: async () => {
           action("IAgoraRTCClient.publish()")();
         },

diff --git a/packages/agora-rtc-react/src/stories/TrackBoundary.stories.tsx b/packages/agora-rtc-react/src/stories/TrackBoundary.stories.tsx
@@ -48,7 +48,7 @@ const meta: Meta = {
           const subscribe = client.subscribe.bind(client);
           return {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            subscribe: async (user, mediaType): Promise<any> => {
+            subscribe: async (user, mediaType: any): Promise<any> => {
               const track = await subscribe(user, mediaType);
               logTrackStop(track, () =>
                 action(`${mediaType === "audio" ? "AudioTrack" : "VideoTrack"}.stop()`)(user.uid),

diff --git a/packages/agora-rtc-react/test/hook/useJoin.test.ts b/packages/agora-rtc-react/test/hook/useJoin.test.ts
@@ -3,10 +3,10 @@ import type { ILocalTrack, ILocalVideoTrack } from "agora-rtc-sdk-ng";
 import { FakeRTCClient } from "agora-rtc-sdk-ng-fake";
 import { expect, vi } from "vitest";
 
+import { errorMessage } from "../../../shared/test/setup/agora";
+import { createWrapper } from "../../../shared/test/setup/wrapper";
 import * as clientHook from "../../src/hooks";
 import { useJoin } from "../../src/hooks/useJoin";
-import { errorMessage } from "../setup/agora";
-import { createWrapper } from "../setup/wrapper";
 
 const mockTrack: ILocalVideoTrack = {
   close: vi.fn(),

diff --git a/packages/agora-rtc-react/test/hook/useLocalCameraTrack.test.ts b/packages/agora-rtc-react/test/hook/useLocalCameraTrack.test.ts
@@ -3,10 +3,10 @@ import AgoraRTC from "agora-rtc-sdk-ng";
 import { FakeCameraVideoTrack, FakeRTCClient } from "agora-rtc-sdk-ng-fake";
 import { expect, vi } from "vitest";
 
+import { errorMessage } from "../../../shared/test/setup/agora";
+import { createWrapper } from "../../../shared/test/setup/wrapper";
 import { useLocalCameraTrack } from "../../src/hooks/index";
 import * as clientHook from "../../src/hooks/useIsConnected";
-import { errorMessage } from "../setup/agora";
-import { createWrapper } from "../setup/wrapper";
 
 describe("useLocalCameraTrack", () => {
   test("should return null when ready is false", async () => {

diff --git a/packages/agora-rtc-react/test/hook/useLocalMicrophoneTrack.test.ts b/packages/agora-rtc-react/test/hook/useLocalMicrophoneTrack.test.ts
@@ -3,10 +3,10 @@ import AgoraRTC from "agora-rtc-sdk-ng";
 import { FakeMicrophoneAudioTrack, FakeRTCClient } from "agora-rtc-sdk-ng-fake";
 import { expect, vi } from "vitest";
 
+import { errorMessage } from "../../../shared/test/setup/agora";
+import { createWrapper } from "../../../shared/test/setup/wrapper";
 import { useLocalMicrophoneTrack } from "../../src/hooks/index";
 import * as clientHook from "../../src/hooks/useIsConnected";
-import { errorMessage } from "../setup/agora";
-import { createWrapper } from "../setup/wrapper";
 
 describe("useLocalMicrophoneTrack", () => {
   test("should return null when ready is false", async () => {

diff --git a/packages/agora-rtc-react/test/hook/useLocalScreenTrack.test.ts b/packages/agora-rtc-react/test/hook/useLocalScreenTrack.test.ts
@@ -8,10 +8,10 @@ import {
 } from "agora-rtc-sdk-ng-fake";
 import { expect, vi } from "vitest";
 
+import { errorMessage } from "../../../shared/test/setup/agora";
+import { createWrapper } from "../../../shared/test/setup/wrapper";
 import { useLocalScreenTrack } from "../../src/hooks/index";
 import * as clientHook from "../../src/hooks/useIsConnected";
-import { errorMessage } from "../setup/agora";
-import { createWrapper } from "../setup/wrapper";
 
 describe("useLocalScreenTrack", () => {
   test("should return null when ready is false", async () => {

diff --git a/packages/agora-rtc-react/test/hook/usePublish.test.ts b/packages/agora-rtc-react/test/hook/usePublish.test.ts
@@ -6,10 +6,10 @@ import {
 } from "agora-rtc-sdk-ng-fake";
 import { expect, vi } from "vitest";
 
+import { errorMessage } from "../../../shared/test/setup/agora";
+import { createWrapper } from "../../../shared/test/setup/wrapper";
 import * as clientHook from "../../src/hooks/useIsConnected";
 import { usePublish } from "../../src/hooks/usePublish";
-import { errorMessage } from "../setup/agora";
-import { createWrapper } from "../setup/wrapper";
 
 describe("usePublish", () => {
   const spy = vi.spyOn(clientHook, "useIsConnected");

diff --git a/packages/agora-rtc-react/test/hook/useRemoteAudioTracks.test.ts b/packages/agora-rtc-react/test/hook/useRemoteAudioTracks.test.ts
@@ -3,10 +3,10 @@ import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 import { FakeRTCClient, dispatchRTCEvent } from "agora-rtc-sdk-ng-fake";
 import { vi } from "vitest";
 
+import { errorMessage } from "../../../shared/test/setup/agora";
+import { createWrapper } from "../../../shared/test/setup/wrapper";
 import * as clientHook from "../../src/hooks/useIsConnected";
 import { useRemoteAudioTracks } from "../../src/hooks/useRemoteAudioTracks";
-import { errorMessage } from "../setup/agora";
-import { createWrapper } from "../setup/wrapper";
 
 describe("useRemoteAudioTracks", () => {
   test("should return audio tracks", async () => {

diff --git a/packages/agora-rtc-react/test/hook/useRemoteUserTrack.test.tsx b/packages/agora-rtc-react/test/hook/useRemoteUserTrack.test.tsx
@@ -4,10 +4,10 @@ import { FakeRTCClient, dispatchRTCEvent } from "agora-rtc-sdk-ng-fake";
 import { act } from "react-dom/test-utils";
 import { vi } from "vitest";
 
+import { errorMessage } from "../../../shared/test/setup/agora";
+import { createWrapper } from "../../../shared/test/setup/wrapper";
 import * as clientHook from "../../src/hooks/useIsConnected";
 import { useRemoteUserTrack } from "../../src/hooks/useRemoteUserTrack";
-import { errorMessage } from "../setup/agora";
-import { createWrapper } from "../setup/wrapper";
 
 const user = {
   uid: "1",

diff --git a/packages/agora-rtc-react/test/hook/useRemoteVideoTracks.test.ts b/packages/agora-rtc-react/test/hook/useRemoteVideoTracks.test.ts
@@ -3,10 +3,10 @@ import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 import { FakeRTCClient, dispatchRTCEvent } from "agora-rtc-sdk-ng-fake";
 import { vi } from "vitest";
 
+import { errorMessage } from "../../../shared/test/setup/agora";
+import { createWrapper } from "../../../shared/test/setup/wrapper";
 import * as clientHook from "../../src/hooks/useIsConnected";
 import { useRemoteVideoTracks } from "../../src/hooks/useRemoteVideoTracks";
-import { errorMessage } from "../setup/agora";
-import { createWrapper } from "../setup/wrapper";
 
 describe("useRemoteVideoTracks", () => {
   test("should return video tracks", async () => {

diff --git a/packages/agora-rtc-react/test/hook/useVolumeLevel.test.ts b/packages/agora-rtc-react/test/hook/useVolumeLevel.test.ts
@@ -11,16 +11,16 @@ const setUp = (audioTrack?: IRemoteAudioTrack | ILocalAudioTrack) =>
 describe("useVolumeLevel", () => {
   test("should return volumeLevel by getVolumeLevel", async () => {
     const audioTrack = FakeLocalAudioTrack.create();
-    audioTrack.getVolumeLevel = vi.fn().mockReturnValue(1);
+    vi.spyOn(audioTrack, "getVolumeLevel");
     vi.useFakeTimers();
     const { result } = setUp(audioTrack);
     act(() => {
       vi.advanceTimersByTime(1000);
     });
-    waitFor(() => {
+    await waitFor(() => {
       expect(audioTrack.getVolumeLevel).toHaveBeenCalled();
-      expect(audioTrack.getVolumeLevel).toHaveBeenCalledWith(1);
-      expect(result.current).toEqual(1);
+      expect(result.current).toEqual(audioTrack.getVolumeLevel());
     });
+    jest.useRealTimers();
   });
 });
diff --git a/packages/agora-rtc-react/tsconfig.json b/packages/agora-rtc-react/tsconfig.json
@@ -15,5 +15,5 @@
     "skipLibCheck": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", "test"]
+  "include": ["src", "test", "../shared/test/setup.tsx", "../shared/test/setup"]
 }
diff --git a/packages/agora-rtc-react/vite.config.ts b/packages/agora-rtc-react/vite.config.ts
@@ -32,6 +32,9 @@ export default defineConfig({
       ],
     },
     exclude: ["**/node_modules/**"],
-    setupFiles: ["./test/setup.tsx"],
+    deps: {
+      inline: ["vitest-canvas-mock"],
+    },
+    setupFiles: ["../shared/test/setup.tsx"],
   },
 });
diff --git a/packages/agora-rtc-react/test/setup.tsx → packages/shared/test/setup.tsx b/packages/agora-rtc-react/test/setup.tsx → packages/shared/test/setup.tsx
@@ -2,6 +2,7 @@ import "@testing-library/jest-dom";
 import matchers from "@testing-library/jest-dom/matchers";
 import type { ReactNode } from "react";
 import { expect, vi } from "vitest";
+import "vitest-canvas-mock";
 
 expect.extend(matchers);
 
@@ -38,3 +39,6 @@ Object.defineProperty(global.navigator, "mediaDevices", {
 export interface Props {
   children: ReactNode;
 }
+
+window.MediaStreamTrack = jest.fn();
+window.RTCIceCandidate = jest.fn();
diff --git a/...ages/agora-rtc-react/test/setup/agora.tsx → packages/shared/test/setup/agora.tsx b/...ages/agora-rtc-react/test/setup/agora.tsx → packages/shared/test/setup/agora.tsx
diff --git a/...es/agora-rtc-react/test/setup/wrapper.tsx → packages/shared/test/setup/wrapper.tsx b/...es/agora-rtc-react/test/setup/wrapper.tsx → packages/shared/test/setup/wrapper.tsx
@@ -1,7 +1,7 @@
 import type { IAgoraRTCClient } from "agora-rtc-sdk-ng";
 import type { ReactNode } from "react";
 
-import { AgoraRTCProvider } from "../../src/hooks";
+import { AgoraRTCProvider } from "../../../agora-rtc-react/src/hooks";
 import type { Props } from "../setup";
 
 export const createWrapper =