Install React SDK for test demo from local instead of npm (#791)

Author: xuesichao

.github/workflows/roster-integration.yml

@@ -23,16 +23,6 @@ jobs:
         uses: actions/checkout@v2
         with:
           fetch-depth: 0
-      - name: Pack the React Components Library and install the tarball into the Test Demo
-        run: |
-          current_version=$(.github/script/get-current-version)
-          echo "Packing current version:" $current_version
-          npm ci
-          npm run build
-          npm pack
-          cd integration/app/test-demo
-          npm uninstall amazon-chime-sdk-component-library-react
-          npm install ../../../amazon-chime-sdk-component-library-react-$current_version.tgz
       - name: Create a Job ID
         id: create-job-id
         uses: filipstefansson/uuid-action@ce29ebbb0981ac2448c2e406e848bfaa30ddf04c

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Improve "Handle Device Permission" guide in Quick Starts.
 - Upgrade `storybook` to a fixed `6.5.0-alpha.64` with `webpack v5` to fix security vulnerabilities and issues with external HTTP link rendering.
+- Update integration test demo to install `amazon-chime-sdk-component-library-react` from local instead of from npm. Update corresponding GitHub Action and scripts.
 
 ### Fixed
 

integration/app/test-demo/package-lock.json

@@ -2,8 +2,7 @@
   "name": "test-demo",
   "version": "0.1.0",
   "dependencies": {
-    "amazon-chime-sdk-component-library-react": "^2.15.0",
-    "amazon-chime-sdk-js": "^3.0.0-beta.1",
+    "amazon-chime-sdk-component-library-react": "file:../../..",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.3",
@@ -28,8 +27,10 @@
   },
   "scripts": {
     "build": "webpack",
+    "preinstall": "cd ../../.. && npm install && npm run build",
     "start:client": "webpack-dev-server",
     "start:backend": "node server.js",
-    "start": "concurrently \"npm run start:client\" \"npm run start:backend\""
+    "start:fast": "concurrently \"npm run start:client\" \"npm run start:backend\"",
+    "start": "npm install && npm run start:fast"
   }
-}
+}

integration/app/test-demo/package.json

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useEffect, useState } from 'react';
-import { BackgroundBlurOptions, LogLevel } from 'amazon-chime-sdk-js';
+import { BackgroundBlurOptions, isVideoTransformDevice, LogLevel } from 'amazon-chime-sdk-js';
 import {
   MeetingProvider,
   useBackgroundBlur,
@@ -59,19 +59,28 @@ const Meeting: React.FC<Props> = ({ onBlurStrengthChanged }) => {
 
   useEffect(() => {
     const addBackgroundBlur = async () => {
+      console.log('Creating background blur device called');
+      let current = selectedDevice;
+      if (
+        !isBackgroundBlurSupported ||
+        meetingStatus !== MeetingStatus.Succeeded ||
+        current === undefined
+      ) {
+        console.log('Does not meet the conditions of use');
+        return;
+      }
+
       try {
-        if (
-          isBackgroundBlurSupported &&
-          meetingStatus === MeetingStatus.Succeeded &&
-          selectedDevice
-        ) {
-          console.log('Creating background blur device called');
-          const chosenVideoTransformDevice = await createBackgroundBlurDevice(selectedDevice);
-          console.log(chosenVideoTransformDevice);
-          await meetingManager.startVideoInputDevice(chosenVideoTransformDevice);
-          toggleVideo();
+        if (isVideoTransformDevice(current)) {
+          const intrinsicDevice = await current.intrinsicDevice();
+          await current.stop();
+          current = intrinsicDevice;
         }
-      } catch (error) {
+        current = await createBackgroundBlurDevice(current);
+        await meetingManager.startVideoInputDevice(current);
+        toggleVideo();
+      }
+      catch (error) {
         console.error('Failed to add Background Blur');
       }
     };

integration/app/test-demo/src/pages/VideoFilterTestApp.tsx

@@ -18,6 +18,11 @@ module.exports = {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
+    alias: {
+      react: path.resolve('./node_modules/react'),
+      'styled-components': path.resolve('./node_modules/styled-components'),
+      'react-dom': path.resolve('./node_modules/react-dom'),
+    },
   },
   output: {
     path: path.join(__dirname, 'dist'),

integration/app/test-demo/webpack.config.js

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "chromedriver": "^98.0.1",
+    "chromedriver": "^100.0.0",
     "fs-extra": "^10.0.0",
     "geckodriver": "^3.0.1",
     "minimist": "^1.2.6",

integration/package-lock.json

@@ -86,7 +86,7 @@ const setTestTarget = (target) => {
 };
 
 // Run the command asynchronously without blocking the Node.js event loop.
-function runAsync(command, args, options) {
+const runAsync = (command, args, options) => {
   options = {
     ...options,
     shell: true
@@ -108,11 +108,11 @@ function runAsync(command, args, options) {
   });
 
   return child.pid;
-}
+};
 
 // Run the command synchronously with blocking the Node.js event loop
 // until the spawned process either exits or is terminated.
-function runSync(command, args, options, printOutput = true) {
+const runSync = (command, args, options, printOutput = true) => {
   options = {
     ...options,
     shell: true
@@ -134,7 +134,7 @@ function runSync(command, args, options, printOutput = true) {
   }
 
   return output;
-}
+};
 
 const checkIfPortIsInUse = async port =>
   new Promise(resolve => {
@@ -149,15 +149,15 @@ const checkIfPortIsInUse = async port =>
       });
   });
 
-function startTestDemo() {
+const startTestDemo = () => {
   console.log(green, 'Installing dependencies in test demo');
   runSync('npm', ['install'], { cwd: pathToTestDemoFolder });
 
   console.log(green, ' Starting the test demo');
   // The test demo will keep running until the process is terminated,
   // so we should execute this command asynchronously without blocking other commands.
-  runAsync('npm', ['run', 'start'], { cwd: pathToTestDemoFolder });
-}
+  runAsync('npm', ['run', 'start:fast'], { cwd: pathToTestDemoFolder });
+};
 
 const waitUntilTestDemoStarts = async () => {
   console.log(green, ' Waiting for test demo to start');