add a sample test with playwright

config/development.json

@@ -4,5 +4,5 @@
       "url": "http://public.loki.foundation:38157/"
     }
   ],
-  "openDevTools": true
+  "openDevTools": false
 }

package.json

@@ -43,6 +43,7 @@
     "format-full": "prettier --list-different --write \"*.{css,js,json,scss,ts,tsx}\" \"./**/*.{css,js,json,scss,ts,tsx}\"",
     "transpile": "tsc --incremental",
     "transpile:watch": "tsc -w",
+    "integration-test": "mocha --recursive --exit --timeout 30000  \"./ts/test-integration/**/*.test.js\" \"./ts/test/*.test.js\"",
     "clean-transpile": "rimraf 'ts/**/*.js ts/*.js' 'ts/*.js.map' 'ts/**/*.js.map' && rimraf tsconfig.tsbuildinfo;",
     "ready": "yarn clean-transpile; yarn grunt && yarn lint-full && yarn test",
     "build:webpack:sql-worker": "cross-env NODE_ENV=production webpack -c webpack-sql-worker.config.ts",
@@ -133,6 +134,7 @@
     "uuid": "3.3.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.16.3",
     "@types/backbone": "^1.4.2",
     "@types/better-sqlite3": "5.4.1",
     "@types/blueimp-load-image": "^2.23.8",
@@ -202,6 +204,7 @@
     "mocha-testcheck": "1.0.0-rc.0",
     "node-gyp": "3.8.0",
     "node-sass-import-once": "1.2.0",
+    "playwright": "^1.16.3",
     "postinstall-prepare": "^1.0.1",
     "prettier": "1.19.0",
     "qs": "6.5.1",

ts/hooks/useVideoEventListener.ts

@@ -53,7 +53,7 @@ export function useVideoCallEventsListener(uniqueId: string, onSame: boolean) {
           localStream: lLocalStream,
           remoteStream: lRemoteStream,
           isAudioMuted,
-          currentSelectedAudioOutput,
+          currentSelectedAudioOutput: outputSelected,
         } = options;
         if (mountedState()) {
           setLocalStream(lLocalStream);
@@ -61,7 +61,7 @@ export function useVideoCallEventsListener(uniqueId: string, onSame: boolean) {
           setRemoteStreamVideoIsMuted(isRemoteVideoStreamMuted);
           setLocalStreamVideoIsMuted(isLocalVideoStreamMuted);
           setOurAudioIsMuted(isAudioMuted);
-          setCurrentSelectedAudioOutput(currentSelectedAudioOutput);
+          setCurrentSelectedAudioOutput(outputSelected);
 
           setCurrentConnectedCameras(camerasList);
           setCurrentConnectedAudioInputs(audioInputsList);

ts/test-integration/sample.test.ts

@@ -0,0 +1,80 @@
+// tslint:disable: no-console
+// tslint:disable no-implicit-dependencies
+import { expect } from 'chai';
+import { _electron as electron, ElectronApplication, Page } from 'playwright';
+
+const NODE_ENV = 'integration-test';
+
+function throwIfNoFirstInstance(
+  instanceToCastIfValid: ElectronApplication | null,
+  pageToCastIfValid: Page | null
+): { instance: ElectronApplication; page: Page } {
+  if (!instanceToCastIfValid) {
+    throw new Error('no instanceToCastIfValid');
+  }
+  if (!pageToCastIfValid) {
+    throw new Error('no pageToCastIfValid');
+  }
+  return { page: pageToCastIfValid, instance: instanceToCastIfValid };
+}
+
+async function createAppInstance(MULTI: number) {
+  // Launch Electron app.
+  process.env.NODE_ENV = NODE_ENV;
+  process.env.NODE_APP_INSTANCE = `${MULTI}`;
+  const instance = await electron.launch({
+    args: ['main.js'],
+  });
+
+  // Get the first window that the app opens, wait if necessary.
+  const page = await instance.firstWindow();
+  //   page.on('console', console.log);
+  return { instance, page };
+}
+
+async function killAppInstance(appInstance?: ElectronApplication | null) {
+  // Kill Electron app.
+  if (appInstance) {
+    await appInstance.close();
+  }
+  return null;
+}
+
+describe('quick test', () => {
+  let firstAppInstance: ElectronApplication | null = null;
+  let firstAppPage: Page | null = null;
+
+  beforeEach(async () => {
+    if (firstAppInstance) {
+      throw new Error('beforeAll cannot create first instance');
+    }
+    const { instance, page } = await createAppInstance(1);
+    firstAppInstance = instance;
+    firstAppPage = page;
+  });
+
+  afterEach(async () => {
+    firstAppInstance = await killAppInstance(firstAppInstance);
+  });
+
+  it('check "Begin your Session" is shown on app start', async () => {
+    const { instance, page } = throwIfNoFirstInstance(firstAppInstance, firstAppPage);
+    // Evaluation expression in the Electron context.
+    const appPath = await instance.evaluate(async ({ app }) => {
+      // This runs in the main Electron process, parameter here is always
+      // the result of the require('electron') in the main app script.
+      return app.getAppPath();
+    });
+    console.log(appPath);
+    // Print the title.instance
+    const title = await page.title();
+
+    const beginSessionSelector = await page.waitForSelector(
+      'div.session-content-accent-text.title'
+    );
+    const contentBeginYourSession = await beginSessionSelector.innerHTML();
+    expect(contentBeginYourSession).to.equal('Begin your Session.');
+
+    expect(title).to.eq('Session');
+  });
+});