From 9934d90fff196ae561a109297ce3d836cb9f7fb2 Mon Sep 17 00:00:00 2001
From: Oleksandr Zhurbenko <xaerok.od.ua@gmail.com>
Date: Sat, 4 Nov 2017 00:38:44 -0700
Subject: [PATCH] Integrated babel-plugin-react-remove-properties for Selenium
 tests

---
 bigbluebutton-html5/.babelrc                  |  9 +++++++
 bigbluebutton-html5/.meteor/packages          |  2 +-
 bigbluebutton-html5/.meteor/release           |  2 +-
 bigbluebutton-html5/.meteor/versions          | 25 ++++++++++---------
 .../audio/audio-modal/component.jsx           | 18 +++++++------
 .../components/dropdown/content/component.jsx |  5 +++-
 .../dropdown/list/item/component.jsx          |  7 ++++--
 .../nav-bar/settings-dropdown/component.jsx   |  2 ++
 bigbluebutton-html5/package.json              |  1 +
 .../specs/visual-regression/modals.spec.js    | 24 +++++++++---------
 10 files changed, 59 insertions(+), 36 deletions(-)
 create mode 100644 bigbluebutton-html5/.babelrc

diff --git a/bigbluebutton-html5/.babelrc b/bigbluebutton-html5/.babelrc
new file mode 100644
index 0000000000..1139a0d563
--- /dev/null
+++ b/bigbluebutton-html5/.babelrc
@@ -0,0 +1,9 @@
+{
+  "env": {
+    "production": {
+      "plugins": [
+        "react-remove-properties"
+      ]
+    }
+  }
+}
diff --git a/bigbluebutton-html5/.meteor/packages b/bigbluebutton-html5/.meteor/packages
index 4e0798450f..88b5c634e2 100644
--- a/bigbluebutton-html5/.meteor/packages
+++ b/bigbluebutton-html5/.meteor/packages
@@ -15,7 +15,7 @@ cfs:power-queue
 cfs:reactive-list
 cfs:micro-queue
 reactive-var@1.0.11
-ecmascript@0.8.1
+ecmascript@0.8.2
 react-meteor-data
 standard-minifier-css@1.3.4
 standard-minifier-js@2.1.1
diff --git a/bigbluebutton-html5/.meteor/release b/bigbluebutton-html5/.meteor/release
index 1e7fc5b564..47c31abcf4 100644
--- a/bigbluebutton-html5/.meteor/release
+++ b/bigbluebutton-html5/.meteor/release
@@ -1 +1 @@
-METEOR@1.5.1
+METEOR@1.5.2
diff --git a/bigbluebutton-html5/.meteor/versions b/bigbluebutton-html5/.meteor/versions
index bb0f238f9d..a7df188782 100644
--- a/bigbluebutton-html5/.meteor/versions
+++ b/bigbluebutton-html5/.meteor/versions
@@ -4,13 +4,13 @@ allow-deny@1.0.6
 amplify@1.0.0
 arunoda:npm@0.2.6
 autoupdate@1.3.12
-babel-compiler@6.19.4
+babel-compiler@6.20.0
 babel-runtime@1.0.1
 base64@1.0.10
 binary-heap@1.0.10
 blaze@2.3.2
 blaze-tools@1.0.10
-boilerplate-generator@1.1.1
+boilerplate-generator@1.2.0
 caching-compiler@1.1.9
 caching-html-compiler@1.1.2
 callback-hook@1.0.10
@@ -23,17 +23,17 @@ check@1.2.5
 clinical:nightwatch@2.0.1
 coffeescript@1.12.6_1
 ddp@1.3.0
-ddp-client@2.0.0
+ddp-client@2.1.0
 ddp-common@1.2.9
 ddp-server@2.0.0
 deps@1.0.12
 diff-sequence@1.0.7
 dynamic-import@0.1.1
-ecmascript@0.8.2
+ecmascript@0.8.3
 ecmascript-runtime@0.4.1
 ecmascript-runtime-client@0.4.3
 ecmascript-runtime-server@0.4.1
-ejson@1.0.13
+ejson@1.0.14
 fastclick@1.0.13
 francocatena:status@1.5.3
 geojson-utils@1.0.10
@@ -46,24 +46,25 @@ launch-screen@1.1.1
 livedata@1.0.18
 logging@1.1.17
 mdg:validation-error@0.5.1
-meteor@1.7.0
+meteor@1.7.1
 meteor-platform@1.2.6
 meteorblackbelt:underscore-deep@0.0.4
 meteorspark:util@0.2.0
 minifier-css@1.2.16
-minifier-js@2.1.1
-minimongo@1.2.1
+minifier-js@2.1.2
+minimongo@1.3.0
 mizzao:timesync@0.5.0
 mobile-status-bar@1.0.14
-modules@0.9.2
+modules@0.10.0
 modules-runtime@0.8.0
-mongo@1.1.22
+mongo@1.2.0
+mongo-dev-server@1.0.1
 mongo-id@1.0.6
 nathantreid:css-modules@2.7.3
 npm-mongo@2.2.30
 observe-sequence@1.0.16
 ordered-dict@1.0.9
-promise@0.8.9
+promise@0.9.0
 raix:eventemitter@0.1.3
 random@1.0.10
 react-meteor-data@0.2.15
@@ -90,5 +91,5 @@ udondan:yml@3.2.2_1
 ui@1.0.13
 underscore@1.0.10
 url@1.1.0
-webapp@1.3.17
+webapp@1.3.18
 webapp-hashing@1.0.9
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
index c063971081..7cae7388de 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
@@ -157,17 +157,17 @@ class AudioModal extends Component {
         <Button
           className={styles.audioBtn}
           label={intl.formatMessage(intlMessages.microphoneLabel)}
-          icon={'unmute'}
+          icon="unmute"
           circle
-          size={'jumbo'}
+          size="jumbo"
           onClick={this.handleGoToEchoTest}
         />
         <Button
           className={styles.audioBtn}
           label={intl.formatMessage(intlMessages.listenOnlyLabel)}
-          icon={'listen'}
+          icon="listen"
           circle
-          size={'jumbo'}
+          size="jumbo"
           onClick={this.handleJoinListenOnly}
         />
       </span>
@@ -257,17 +257,21 @@ class AudioModal extends Component {
         onRequestClose={this.closeModal}
       >
         { isConnecting ? null :
-        <header className={styles.header}>
+        <header
+          data-test="audioModalHeader"
+          className={styles.header}
+        >
           <h3 className={styles.title}>
             { content ?
               this.contents[content].title :
               intl.formatMessage(intlMessages.audioChoiceLabel)}
           </h3>
           <Button
+            data-test="modalBaseCloseButton"
             className={styles.closeBtn}
             label={intl.formatMessage(intlMessages.closeLabel)}
-            icon={'close'}
-            size={'md'}
+            icon="close"
+            size="md"
             hideLabel
             onClick={this.closeModal}
           />
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/content/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/content/component.jsx
index 70f2e4d6e8..304953ca91 100644
--- a/bigbluebutton-html5/imports/ui/components/dropdown/content/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/content/component.jsx
@@ -25,7 +25,9 @@ const defaultProps = {
 
 export default class DropdownContent extends Component {
   render() {
-    const { placement, className, children, style } = this.props;
+    const {
+      placement, className, children, style,
+    } = this.props;
     const { dropdownToggle, dropdownShow, dropdownHide } = this.props;
 
     const placementName = placement.split(' ').join('-');
@@ -40,6 +42,7 @@ export default class DropdownContent extends Component {
       <div
         style={style}
         aria-expanded={this.props['aria-expanded']}
+        data-test="dropdownContent"
         className={cx(styles.content, styles[placementName], className)}
       >
         <div className={styles.scrollable}>
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx
index 901bebf5c6..7e5a59e96e 100644
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx
@@ -35,8 +35,10 @@ export default class DropdownListItem extends Component {
   }
 
   render() {
-    const { id, label, description, children, injectRef, tabIndex, onClick, onKeyDown,
-      className, style } = this.props;
+    const {
+      id, label, description, children, injectRef, tabIndex, onClick, onKeyDown,
+      className, style,
+    } = this.props;
 
     return (
       <li
@@ -50,6 +52,7 @@ export default class DropdownListItem extends Component {
         className={cx(styles.item, className)}
         style={style}
         role="menuitem"
+        data-test={this.props['data-test']}
       >
         {
           children || this.renderDefault()
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
index 7454a183b9..ac3fff3c58 100644
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
@@ -111,6 +111,7 @@ class SettingsDropdown extends Component {
       >
         <DropdownTrigger tabIndex={0}>
           <Button
+            data-test="settingsDropdownTrigger"
             label={intl.formatMessage(intlMessages.optionsLabel)}
             icon="more"
             ghost
@@ -149,6 +150,7 @@ class SettingsDropdown extends Component {
               label={intl.formatMessage(intlMessages.leaveSessionLabel)}
               description={intl.formatMessage(intlMessages.leaveSessionDesc)}
               onClick={() => mountModal(<LogoutConfirmationContainer />)}
+              data-test="settingsDropdownLogoutButton"
             />
           </DropdownList>
         </DropdownContent>
diff --git a/bigbluebutton-html5/package.json b/bigbluebutton-html5/package.json
index 487986e469..0588239d33 100644
--- a/bigbluebutton-html5/package.json
+++ b/bigbluebutton-html5/package.json
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "autoprefixer": "~7.1.6",
+    "babel-plugin-react-remove-properties": "~0.2.5",
     "chai": "~4.1.2",
     "eslint": "~4.9.0",
     "eslint-config-airbnb": "~16.1.0",
diff --git a/bigbluebutton-html5/tests/webdriverio/specs/visual-regression/modals.spec.js b/bigbluebutton-html5/tests/webdriverio/specs/visual-regression/modals.spec.js
index 10c770cc16..8b3ef02b80 100644
--- a/bigbluebutton-html5/tests/webdriverio/specs/visual-regression/modals.spec.js
+++ b/bigbluebutton-html5/tests/webdriverio/specs/visual-regression/modals.spec.js
@@ -8,30 +8,30 @@ function expectImageMatch(results, errorMessage) {
 }
 
 describe('Screenshots:', function() {
-
+  browser.windowHandleSize({width: 1920, height: 1200});
   it('Join Audio modal looks good', function() {
     HomePage.login('testuser', 'Demo Meeting');
-    browser.element('.ReactModal__Content--after-open').waitForExist(7000);
-    expectImageMatch(browser.checkElement('.ReactModal__Content--after-open'), 'Join Audio modal isn\'t the same');
+    browser.element('[data-test=audioModalHeader]').waitForExist(7000);
+    expectImageMatch(browser.checkElement('.ReactModal__Content--after-open._imports_ui_components_audio_audio_modal__styles__modal'), 'Join Audio modal isn\'t the same');
   });
 
   it('Home page viewport looks good', function() {
-    $('._imports_ui_components_audio_audio_modal__styles__closeBtn').click();
+    $('[data-test=modalBaseCloseButton]').click();
     expectImageMatch(browser.checkViewport(), 'Home page viewport isn\'t the same');
   });
 
   it('Settings dropdown looks good', function() {
-    browser.element('.icon-bbb-more').waitForExist(2000);
-    $('.icon-bbb-more').click();
-    browser.element('._imports_ui_components_nav_bar__styles__right ._imports_ui_components_dropdown__styles__dropdown ._imports_ui_components_dropdown__styles__content[aria-expanded="true"]').waitForExist(2000);
-    expectImageMatch(browser.checkElement('._imports_ui_components_nav_bar__styles__right ._imports_ui_components_dropdown__styles__dropdown ._imports_ui_components_dropdown__styles__content[aria-expanded="true"]'), 'Settings dropdown isn\'t the same');
+    browser.element('[data-test=settingsDropdownTrigger]').waitForExist(2000);
+    $('[data-test=settingsDropdownTrigger]').click();
+    browser.element('[data-test=settingsDropdownTrigger] + [data-test=dropdownContent][aria-expanded="true"]').waitForExist(2000);
+    expectImageMatch(browser.checkElement('[data-test=settingsDropdownTrigger] + [data-test=dropdownContent][aria-expanded="true"]'), 'Settings dropdown isn\'t the same');
   });
 
   it('Logout popup looks good', function() {
-    browser.element('.icon-bbb-logout').waitForExist(2000);
-    $('.icon-bbb-logout').click();
-    browser.element('._imports_ui_components_modal_fullscreen__styles__modal').waitForExist(2000);
-    expectImageMatch(browser.checkElement('._imports_ui_components_modal_fullscreen__styles__modal'));
+    browser.element('[data-test=settingsDropdownLogoutButton]').waitForExist(2000);
+    $('[data-test=settingsDropdownLogoutButton]').click();
+    browser.element('.ReactModal__Content--after-open._imports_ui_components_modal_fullscreen__styles__modal').waitForExist(2000);
+    expectImageMatch(browser.checkElement('.ReactModal__Content--after-open._imports_ui_components_modal_fullscreen__styles__modal'));
   });
 
 });