ref(TestHint): render only in test mode

Adds the logic to render TestHint only when the test mode is enabled
in order to be able to put independent TestHints in other places than
the TestConnectionInfo component.

react/features/base/testing/components/AbstractTestHint.js

@@ -1,5 +1,7 @@
 /* @flow */
 
+import { isTestModeEnabled } from '../functions';
+
 /**
  * Describes the {@link TestHint}'s properties.
  *
@@ -10,6 +12,13 @@
  */
 export type TestHintProps = {
 
+    /**
+     * The indicator which determines whether the test mode is enabled.
+     * {@link TestHint} components are rendered only if this flag is set to
+     * {@code true}.
+     */
+    _testModeEnabled: boolean,
+
     /**
      * The test hint's identifier string. Must be unique in the app instance
      * scope.
@@ -21,3 +30,26 @@ export type TestHintProps = {
      */
     value: string
 }
+
+/**
+ * Maps (parts of) the redux state to {@link TestHint}'s React {@code Component}
+ * props.
+ *
+ * @param {Object} state - The redux store/state.
+ * @private
+ * @returns {{
+ *     _testModeEnabled: boolean
+ * }}
+ */
+export function _mapStateToProps(state: Object) {
+    return {
+
+        /**
+         * The indicator which determines whether the test mode is enabled.
+         *
+         * @protected
+         * @type {boolean}
+         */
+        _testModeEnabled: isTestModeEnabled(state)
+    };
+}

react/features/base/testing/components/TestConnectionInfo.js

@@ -11,6 +11,7 @@ import { getLocalParticipant } from '../../participants';
 import { statsEmitter } from '../../../connection-indicator';
 
 import { TestHint } from './index';
+import { isTestModeEnabled } from '../functions';
 
 /**
  * Defines the TestConnectionInfo's properties.
@@ -209,14 +210,11 @@ function _mapStateToProps(state) {
         = Boolean(state['features/base/conference'].conference);
     const localParticipant = getLocalParticipant(state);
 
-    const testingConfig = state['features/base/config'].testing;
-    const testMode = Boolean(testingConfig && testingConfig.testMode);
-
     return {
         _conferenceConnectionState: state['features/testing'].connectionState,
         _conferenceJoinedState: conferenceJoined.toString(),
         _localUserId: localParticipant && localParticipant.id,
-        _testMode: testMode
+        _testMode: isTestModeEnabled(state)
     };
 }
 

react/features/base/testing/components/TestHint.android.js

@@ -1,9 +1,11 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { Text } from 'react-native';
 
 import type { TestHintProps } from './AbstractTestHint';
+import { _mapStateToProps } from './AbstractTestHint';
 
 /**
  * The Android version of <code>TestHint</code>. It will put the identifier,
@@ -22,7 +24,7 @@ import type { TestHintProps } from './AbstractTestHint';
  * the TestHint class is to be the abstraction layer which masks the problem by
  * exposing id and value properties.
  */
-export default class TestHint extends Component<TestHintProps> {
+class TestHint extends Component<TestHintProps> {
 
     /**
      * Renders the test hint on Android.
@@ -30,6 +32,10 @@ export default class TestHint extends Component<TestHintProps> {
      * @returns {ReactElement}
      */
     render() {
+        if (!this.props._testModeEnabled) {
+            return null;
+        }
+
         return (
             <Text accessibilityLabel = { this.props.id } >
                 { this.props.value }
@@ -37,3 +43,5 @@ export default class TestHint extends Component<TestHintProps> {
         );
     }
 }
+
+export default connect(_mapStateToProps)(TestHint);

react/features/base/testing/components/TestHint.ios.js

@@ -1,9 +1,11 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { Text } from 'react-native';
 
 import type { TestHintProps } from './AbstractTestHint';
+import { _mapStateToProps } from './AbstractTestHint';
 
 /**
  * This is the iOS version of the TestHint.
@@ -12,13 +14,17 @@ import type { TestHintProps } from './AbstractTestHint';
  * files to understand what a test hint is and why different iOS and Android
  * components are necessary.
  */
-export default class TestHint extends Component<TestHintProps> {
+class TestHint extends Component<TestHintProps> {
     /**
      *  Renders the test hint on Android.
      *
      * @returns {ReactElement}
      */
     render() {
+        if (!this.props._testModeEnabled) {
+            return null;
+        }
+
         return (
             <Text
                 accessibilityLabel = { this.props.value }
@@ -26,3 +32,5 @@ export default class TestHint extends Component<TestHintProps> {
         );
     }
 }
+
+export default connect(_mapStateToProps)(TestHint);

react/features/base/testing/functions.js

@@ -0,0 +1,15 @@
+// @flow
+
+/**
+ * Indicates whether the test mode is enabled. When it's enabled
+ * {@link TestHint} and other components from the testing package will be
+ * rendered in various places across the app to help with automatic testing.
+ *
+ * @param {Object} state - The redux store state.
+ * @returns {boolean}
+ */
+export function isTestModeEnabled(state: Object): boolean {
+    const testingConfig = state['features/base/config'].testing;
+
+    return Boolean(testingConfig && testingConfig.testMode);
+}

react/features/base/testing/index.js

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './functions';
 
 import './middleware';
 import './reducer';