feat(tooling): firefox compatibility for journey tests

Author: moriahmaney

.gitignore

@@ -8,3 +8,4 @@ package-lock.json
 npm-debug*
 packages/**/es/*
 packages/**/cjs/*
+.tmp/*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciscospark/react-ciscospark",
-  "version": "0.1.209",
+  "version": "0.1.211",
   "description": "The Cisco Spark for React library allows developers to easily incorporate Spark functionality into an application.",
   "scripts": {
     "build": "./scripts/build/index.js",
@@ -71,6 +71,9 @@
     "core-decorators": "^0.20.0",
     "custom-event-polyfill": "^0.3.0",
     "file-saver": "^1.3.3",
+    "firefox-profile": "^1.0.0",
+    "fs-promise": "^2.0.2",
+    "glob": "^7.1.1",
     "highlight.js": "^9.12.0",
     "howler": "^2.0.2",
     "immutable": "^3.8.1",
@@ -167,10 +170,11 @@
     "stylelint-config-standard": "^17.0",
     "stylelint-order": "^0.7.0",
     "wdio-dot-reporter": "0.0.9",
+    "wdio-firefox-profile-service": "^0.1.0",
     "wdio-junit-reporter": "^0.3.1",
     "wdio-mocha-framework": "^0.5.9",
-    "wdio-sauce-service": "^0.4.0",
-    "wdio-selenium-standalone-service": "0.0.8",
+    "wdio-sauce-service": "^0.4.6",
+    "wdio-selenium-standalone-service": "0.0.9",
     "wdio-spec-reporter": "^0.1.0",
     "wdio-static-server-service": "^1.0.1",
     "webdriverio": "4.9.11",

scripts/tests/async.js

@@ -0,0 +1,7 @@
+const denodeify = require('denodeify');
+
+exports.rimraf = denodeify(require('rimraf'));
+exports.glob = denodeify(require('glob'));
+exports.mkdirp = denodeify(require('mkdirp'));
+exports.transformFile = denodeify(require('babel-core').transformFile);
+exports.exec = denodeify(require('child_process').exec);

scripts/tests/openh264.js

@@ -0,0 +1,99 @@
+/*!
+ * Copyright (c) 2015-2017 Cisco Systems, Inc. See LICENSE file.
+ */
+const path = require('path');
+
+const denodeify = require('denodeify');
+const FirefoxProfile = require('firefox-profile');
+const {stat} = require('fs-promise');
+
+const spawn = require('../utils/spawn');
+
+const {rimraf} = require('./async');
+
+const PROFILE_DIR = './.tmp/selenium';
+
+const copy = denodeify(FirefoxProfile.copy);
+/**
+ * denodeifies FirefoxProfile.encode
+ * @param {FirefoxProfile} fp
+ * @returns {Promise<string>}
+ */
+function encode(fp) {
+  return new Promise((resolve, reject) => {
+    fp.encode((err, encoded) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve(encoded);
+    });
+  });
+}
+
+/**
+ * Determines the switchabale platform name from a sauce definition or the
+ * output of os.platform()
+ * @param {string} platform
+ * @returns {string}
+ */
+function platformToShortName(platform) {
+  if (platform.toLowerCase().includes('os x') || platform === 'darwin') {
+    return 'mac';
+  }
+
+  return undefined;
+}
+
+/**
+ * Injects a gzipped, base64-encoded firefox profile directory into a firefox browser definition
+ * @param {Object} def
+ * @returns {Promise}
+ */
+async function injectProfile(def) {
+  if (def.browserName.toLowerCase().includes('firefox')) {
+    const platform = platformToShortName(def.platform);
+    if (platform !== 'mac') {
+      throw new Error(`No tooling implemented for injecting h264 into ${platform} (${def.platform})`);
+    }
+
+    const dir = path.resolve(process.cwd(), `${PROFILE_DIR}/${platform}`);
+    const profile = await copy(dir);
+    const encoded = await encode(profile);
+    // eslint-disable-next-line
+    def.firefox_profile = encoded;
+  }
+}
+
+/**
+ * Determines if a given file/directory already exists
+ * @param {string} dir
+ * @returns {Promise<boolean>}
+ */
+async function exists(dir) {
+  try {
+    const s = await stat(dir);
+    return s.isDirectory();
+  }
+  catch (err) {
+    return false;
+  }
+}
+
+exports.download = async function download() {
+  await rimraf(`${PROFILE_DIR}/mac`);
+  await spawn(`${__dirname}/openh264.sh`, []);
+};
+
+exports.inject = async function inject(browsers) {
+  if (!await exists(`${PROFILE_DIR}/mac`)) {
+    await exports.download();
+  }
+
+  for (const key of Object.keys(browsers)) {
+    const def = browsers[key];
+    // eslint-disable-next-line no-await-in-loop
+    await injectProfile(def);
+  }
+};
+

scripts/tests/openh264.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+MOZ_GMP_PATH=./.tmp/selenium/mac/gmp-gmpopenh264/1.6
+
+curl -O http://ciscobinary.openh264.org/libopenh264-1.6.0-osx64.dylib.bz2
+bzip2 -d libopenh264-1.6.0-osx64.dylib.bz2
+mkdir -p "${MOZ_GMP_PATH}"
+mv libopenh264-1.6.0-osx64.dylib "${MOZ_GMP_PATH}/libgmpopenh264.dylib"
+echo 'Name: gmpopenh264' > "${MOZ_GMP_PATH}/gmpopenh264.info"
+echo 'Description: GMP Plugin for OpenH264.' >> "${MOZ_GMP_PATH}/gmpopenh264.info"
+echo 'Version: 1.6' >> "${MOZ_GMP_PATH}/gmpopenh264.info"
+echo 'APIs: encode-video[h264], decode-video[h264]' >> "${MOZ_GMP_PATH}/gmpopenh264.info"
+echo 'user_pref("media.gmp-gmpopenh264.abi", "x86_64-gcc3");' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp-gmpopenh264.lastUpdate", 1494528046);' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp-gmpopenh264.version", "1.6");' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp-manager.buildID", "20170504105526");' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp-manager.lastCheck", 1494528044);' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp-provider.enabled", true);' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp-widevinecdm.abi", "x86_64-gcc3");' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp-widevinecdm.lastUpdate", 1494528048);' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp-widevinecdm.version", "1.4.8.903");' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.gmp.storage.version.observed", 1);' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.peerconnection.video.h264_enabled", true);' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("dom.webnotifications.enabled", false);' >> "./.tmp/selenium/mac/user.js"
+echo 'user_pref("media.navigator.streams.fake", true);' >> "./.tmp/selenium/mac/user.js"

scripts/utils/spawn.js

@@ -0,0 +1,37 @@
+const cp = require('child_process');
+
+module.exports = function spawn(cmd, args, options) {
+  return new Promise((resolve, reject) => {
+    if (!cmd) {
+      return reject(new Error('`cmd` is required'));
+    }
+
+    options = Object.assign({detached: false}, options);
+
+    const child = cp.spawn(cmd, args, Object.assign({stdio: 'inherit'}, options));
+
+    let data = '';
+    if (child.stderr) {
+      child.stderr.on('data', (d) => {
+        data += d;
+      });
+    }
+
+    child.on('close', (code) => {
+      if (code) {
+        const e = new Error(code);
+        e.data = data;
+        return reject(e);
+      }
+      return resolve();
+    });
+
+    if (options && options.detached) {
+      child.unref();
+      /* eslint no-param-reassign: [0] */
+      options.child = child;
+    }
+
+    return null;
+  });
+};

test/journeys/lib/test-helpers/index.js

@@ -0,0 +1,31 @@
+import uuid from 'uuid';
+
+/**
+ * Move mouse a specified amount of pixels
+ * Origin is set to the element that matches the selector passed
+ * Mouse is then moved from the origin by the x and y offset
+ * @param {Object} aBrowser
+ * @param {string} selector
+ * @param {integer} [x=100]
+ * @param {integer} [y=100]
+ * @returns {void}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function moveMouse(aBrowser, selector, x = 100, y = 100) {
+  const element = aBrowser.element(selector);
+  if (aBrowser.desiredCapabilities.browserName.toLowerCase().includes('firefox')) {
+    aBrowser.actions([{
+      type: 'pointer',
+      id: `mouse-${uuid.v4()}`,
+      parameters: {pointerType: 'mouse'},
+      actions: [
+        {
+          type: 'pointerMove', element: element.value, duration: 0, x, y
+        }
+      ]
+    }]);
+  }
+  else {
+    aBrowser.moveToObject(selector);
+  }
+}

test/journeys/lib/test-helpers/space-widget/meet.js

@@ -18,16 +18,13 @@ export const elements = {
   callControls: '.call-controls',
   remoteVideo: '.remote-video video'
 };
-
-
 /**
  * @typedef {object} TestObject
  * @param {object} browser - browser for test
  * @param {object} user - user object for test
  * @param {object} displayName - name used to identify test object
  */
 
-
 /**
  * Answers call on specified browser
  * @param {Object} aBrowser
@@ -48,7 +45,6 @@ export function answer(aBrowser) {
  * @returns {void}
  */
 export function call(caller, reciever) {
-  caller.moveToObject(elements.meetWidget);
   caller.element(elements.meetWidget).element(elements.callButton).waitForVisible();
   caller.element(elements.meetWidget).element(elements.callButton).click();
   // wait for call to establish
@@ -72,8 +68,8 @@ export function decline(aBrowser) {
  */
 export function hangup(aBrowser) {
   // Call controls currently has a hover state
-  aBrowser.moveToObject(elements.meetWidget);
   aBrowser.waitForVisible(elements.callControls);
+  aBrowser.element(elements.meetWidget).element(elements.hangupButton).waitForVisible();
   aBrowser.element(elements.meetWidget).element(elements.hangupButton).click();
 }
 

test/journeys/specs/multiple/index.js

@@ -7,6 +7,7 @@ import CiscoSpark from '@ciscospark/spark-core';
 import testUsers from '@ciscospark/test-helper-test-users';
 
 import waitForPromise from '../../lib/wait-for-promise';
+import {moveMouse} from '../../lib/test-helpers/index';
 import {elements as spaceElements} from '../../lib/test-helpers/space-widget/main';
 import {sendMessage, verifyMessageReceipt} from '../../lib/test-helpers/space-widget/messaging';
 
@@ -189,7 +190,7 @@ describe('Multiple widgets on a page', () => {
 
     it('displays a call button on hover', () => {
       displayIncomingMessage(browserLocal, lorraine, oneOnOneConversation, 'Can you call me?', true);
-      browserLocal.moveToObject(recentsElements.firstSpace);
+      moveMouse(browserLocal, recentsElements.firstSpace, 10, 10);
       browserLocal.waitUntil(() =>
         browserLocal.element(`${recentsElements.callButton}`).isVisible(),
       1500,

test/journeys/specs/oneOnOne/dataApi/startup-settings.js

@@ -1,7 +1,8 @@
 import testUsers from '@ciscospark/test-helper-test-users';
 
+import {moveMouse} from '../../../lib/test-helpers/index.js';
 import {elements} from '../../../lib/test-helpers/space-widget/main.js';
-import {answer, hangup} from '../../../lib/test-helpers/space-widget/meet.js';
+import {answer, hangup, elements as meetElements} from '../../../lib/test-helpers/space-widget/meet.js';
 
 describe('Widget Space: One on One', () => {
   describe('Data API Settings', () => {
@@ -122,6 +123,7 @@ describe('Widget Space: One on One', () => {
 
       it('starts call when set to true', () => {
         answer(browserRemote);
+        moveMouse(browserLocal, meetElements.callContainer);
         hangup(browserLocal);
       });