init

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

@@ -0,0 +1,62 @@
+import { GestureResponderEvent } from 'react-native';
+
+import { IReduxState } from '../../../app/types';
+import { isTestModeEnabled } from '../functions';
+
+/**
+ * Describes the {@link TestHint}'s properties.
+ *
+ * A test hint is meant to resemble the lack of the ability to execute
+ * JavaScript by the mobile torture tests. They are used to expose some of
+ * the app's internal state that is not always expressed in a feasible manner by
+ * the UI.
+ */
+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.
+     */
+    id: string;
+
+    /**
+     * The optional "on press" handler which can be used to bind a click handler
+     * to a {@link TestHint}.
+     */
+    onPress?: (e?: GestureResponderEvent) => void;
+
+    /**
+     * The test hint's (text) value which is to be consumed by the tests.
+     */
+    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: IReduxState) {
+    return {
+
+        /**
+         * The indicator which determines whether the test mode is enabled.
+         *
+         * @protected
+         * @type {boolean}
+         */
+        _testModeEnabled: isTestModeEnabled(state)
+    };
+}

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

@@ -0,0 +1,222 @@
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import statsEmitter from '../../../connection-indicator/statsEmitter';
+import { getLocalParticipant } from '../../participants/functions';
+import { isTestModeEnabled } from '../functions';
+
+import TestHint from './TestHint';
+
+/**
+ * Defines the TestConnectionInfo's properties.
+ */
+interface IProps {
+
+    /**
+     * The JitsiConference's connection state. It's the lib-jitsi-meet's event
+     * name converted to a string directly. At the time of this writing these
+     * are the possible values:
+     * 'conference.connectionEstablished'
+     * 'conference.connectionInterrupted'
+     * 'conference.connectionRestored'.
+     */
+    _conferenceConnectionState: string;
+
+    /**
+     * This will be a boolean converted to a string. The value will be 'true'
+     * once the conference is joined (the XMPP MUC room to be specific).
+     */
+    _conferenceJoinedState: string;
+
+    /**
+     * The local participant's ID. Required to be able to observe the local RTP
+     * stats.
+     */
+    _localUserId: string;
+
+    /**
+     * The local participant's role.
+     */
+    _localUserRole: string;
+
+    /**
+     * Indicates whether or not the test mode is currently on. Otherwise the
+     * TestConnectionInfo component will not render.
+     */
+    _testMode: boolean;
+}
+
+/**
+ * Describes the TestConnectionInfo's state.
+ */
+type State = {
+
+    /**
+     * The RTP stats section.
+     */
+    stats: {
+
+        /**
+         * The local bitrate.
+         */
+        bitrate: {
+
+            /**
+             * The local download RTP bitrate.
+             */
+            download: number;
+
+            /**
+             * The local upload RTP bitrate.
+             */
+            upload: number;
+        };
+    };
+};
+
+/**
+ * The component will expose some of the app state to the jitsi-meet-torture
+ * through the UI accessibility layer which is visible to the tests. The Web
+ * tests currently will execute JavaScript and access globals variables to learn
+ * this information, but there's no such option on React Native(maybe that's
+ * a good thing).
+ */
+class TestConnectionInfo extends Component<IProps, State> {
+
+    /**
+     * Initializes new <tt>TestConnectionInfo</tt> instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onStatsUpdated = this._onStatsUpdated.bind(this);
+
+        this.state = {
+            stats: {
+                bitrate: {
+                    download: 0,
+                    upload: 0
+                }
+            }
+        };
+    }
+
+    /**
+     * The {@link statsEmitter} callback hoked up for the local participant.
+     *
+     * @param {Object} stats - These are the RTP stats. Look in
+     * the lib-jitsi-meet for more details on the actual structure or add
+     * a console print and figure out there.
+     * @returns {void}
+     * @private
+     */
+    _onStatsUpdated(stats = { bitrate: { download: undefined,
+        upload: undefined } }) {
+        this.setState({
+            stats: {
+                bitrate: {
+                    download: stats.bitrate?.download || 0,
+                    upload: stats.bitrate?.upload || 0
+                }
+            }
+        });
+    }
+
+    /**
+     * Starts listening for the local RTP stat updates.
+     *
+     * @inheritdoc
+     * returns {void}
+     */
+    override componentDidMount() {
+        statsEmitter.subscribeToClientStats(
+            this.props._localUserId, this._onStatsUpdated);
+    }
+
+    /**
+     * Updates which user's stats are being listened to (the local participant's
+     * id changes).
+     *
+     * @inheritdoc
+     * returns {void}
+     */
+    override componentDidUpdate(prevProps: IProps) {
+        if (prevProps._localUserId !== this.props._localUserId) {
+            statsEmitter.unsubscribeToClientStats(
+                prevProps._localUserId, this._onStatsUpdated);
+            statsEmitter.subscribeToClientStats(
+                this.props._localUserId, this._onStatsUpdated);
+        }
+    }
+
+    /**
+     * Removes the local stats listener.
+     *
+     * @private
+     * @returns {void}
+     */
+    override componentWillUnmount() {
+        statsEmitter.unsubscribeToClientStats(
+            this.props._localUserId, this._onStatsUpdated);
+    }
+
+    /**
+     * Renders the component if the app is currently running in the test mode
+     * (config.testing.testMode == true).
+     *
+     * @returns {ReactElement|null}
+     */
+    override render() {
+        if (!this.props._testMode) {
+            return null;
+        }
+
+        return (
+            <Fragment>
+                <TestHint
+                    id = 'org.jitsi.meet.conference.connectionState'
+                    value = { this.props._conferenceConnectionState } />
+                <TestHint
+                    id = 'org.jitsi.meet.conference.joinedState'
+                    value = { this.props._conferenceJoinedState } />
+                <TestHint
+                    id = 'org.jitsi.meet.conference.grantModeratorAvailable'
+                    value = { 'true' } />
+                <TestHint
+                    id = 'org.jitsi.meet.conference.localParticipantRole'
+                    value = { this.props._localUserRole } />
+                <TestHint
+                    id = 'org.jitsi.meet.stats.rtp'
+                    value = { JSON.stringify(this.state.stats) } />
+            </Fragment>
+        );
+    }
+}
+
+
+/**
+ * Maps (parts of) the Redux state to the associated TestConnectionInfo's props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const conferenceJoined
+        = Boolean(state['features/base/conference'].conference);
+    const localParticipant = getLocalParticipant(state);
+
+    return {
+        _conferenceConnectionState: state['features/testing'].connectionState,
+        _conferenceJoinedState: conferenceJoined.toString(),
+        _localUserId: localParticipant?.id ?? '',
+        _localUserRole: localParticipant?.role ?? '',
+        _testMode: isTestModeEnabled(state)
+    };
+}
+
+export default connect(_mapStateToProps)(TestConnectionInfo);

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

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { Text } from 'react-native';
+import { connect } from 'react-redux';
+
+import { TestHintProps, _mapStateToProps } from './AbstractTestHint';
+
+/**
+ * The Android version of <code>TestHint</code>. It will put the identifier,
+ * as the 'accessibilityLabel'.
+ *
+ * FIXME The 'testID' attribute (which is used on iOS) does not work with
+ * the react-native as expected, because is mapped to component's tag instead of
+ * any attribute visible to the UI automation. Because of that it can not be
+ * used to find the element.
+ * On the other hand it's not possible to use 'accessibilityLabel' on the iOS
+ * for the id purpose, because it will merge the value with any text content or
+ * 'accessibilityLabel' values of it's children. So as a workaround a TestHint
+ * class was introduced in 'jitsi-meet-torture' which will accept generic 'id'
+ * attribute and then do the search 'under the hood' either by the accessibility
+ * label or the id, depending on the participant's platform. On the client side
+ * the TestHint class is to be the abstraction layer which masks the problem by
+ * exposing id and value properties.
+ */
+class TestHint extends Component<TestHintProps> {
+
+    /**
+     * Renders the test hint on Android.
+     *
+     * @returns {ReactElement}
+     */
+    override render() {
+        if (!this.props._testModeEnabled) {
+            return null;
+        }
+
+        return (
+            <Text
+                accessibilityLabel = { this.props.id }
+                onPress = { this.props.onPress } >
+                { this.props.value }
+            </Text>
+        );
+    }
+}
+
+export default connect(_mapStateToProps)(TestHint);

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

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { Text } from 'react-native';
+import { connect } from 'react-redux';
+
+import { TestHintProps, _mapStateToProps } from './AbstractTestHint';
+
+/**
+ * This is the iOS version of the TestHint.
+ *
+ * Be sure to check the description in TestHint.android and AbstractTestHint
+ * files to understand what a test hint is and why different iOS and Android
+ * components are necessary.
+ */
+class TestHint extends Component<TestHintProps> {
+    /**
+     *  Renders the test hint on Android.
+     *
+     * @returns {ReactElement}
+     */
+    override render() {
+        if (!this.props._testModeEnabled) {
+            return null;
+        }
+
+        return (
+            <Text
+                accessibilityLabel = { this.props.value }
+                onPress = { this.props.onPress }
+                testID = { this.props.id } />
+        );
+    }
+}
+
+export default connect(_mapStateToProps)(TestHint);

react/features/base/testing/components/TestHint.web.ts

@@ -0,0 +1,3 @@
+import { Component } from 'react';
+
+export default Component;