feat: Adds id to the notifications and buttons so we can check for them in the integration tests.

react/features/base/avatar/components/Avatar.js

@@ -58,6 +58,11 @@ export type Props = {
      */
     status?: ?string,
 
+    /**
+     * TestId of the element, if any.
+     */
+    testId?: string,
+
     /**
      * URL of the avatar, if any.
      */
@@ -122,6 +127,7 @@ class Avatar<P: Props> extends PureComponent<P, State> {
             id,
             size,
             status,
+            testId,
             url
         } = this.props;
         const { avatarFailed } = this.state;
@@ -134,6 +140,7 @@ class Avatar<P: Props> extends PureComponent<P, State> {
             onAvatarLoadError: undefined,
             size,
             status,
+            testId,
             url: undefined
         };
 

react/features/base/avatar/components/web/StatelessAvatar.js

@@ -25,7 +25,12 @@ type Props = AbstractProps & {
     /**
      * One of the expected status strings (e.g. 'available') to render a badge on the avatar, if necessary.
      */
-    status?: ?string
+    status?: ?string,
+
+    /**
+     * TestId of the element, if any.
+     */
+    testId?: string
 };
 
 /**
@@ -45,6 +50,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
             return (
                 <div
                     className = { `${this._getAvatarClassName()} ${this._getBadgeClassName()}` }
+                    data-testid = { this.props.testId }
                     id = { this.props.id }
                     style = { this._getAvatarStyle(this.props.color) }>
                     <Icon
@@ -59,6 +65,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
                 <div className = { this._getBadgeClassName() }>
                     <img
                         className = { this._getAvatarClassName() }
+                        data-testid = { this.props.testId }
                         id = { this.props.id }
                         onError = { this.props.onAvatarLoadError }
                         src = { url }
@@ -71,6 +78,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
             return (
                 <div
                     className = { `${this._getAvatarClassName()} ${this._getBadgeClassName()}` }
+                    data-testid = { this.props.testId }
                     id = { this.props.id }
                     style = { this._getAvatarStyle(this.props.color) }>
                     <svg
@@ -97,6 +105,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
             <div className = { this._getBadgeClassName() }>
                 <img
                     className = { this._getAvatarClassName('defaultAvatar') }
+                    data-testid = { this.props.testId }
                     id = { this.props.id }
                     src = { this.props.defaultAvatar || 'images/avatar.png' }
                     style = { this._getAvatarStyle() } />

react/features/base/premeeting/components/web/ActionButton.js

@@ -26,6 +26,11 @@ type Props = {
      */
     hasOptions?: boolean,
 
+    /**
+     * TestId of the button. Can be used to locate element when testing UI.
+     */
+    testId?: string,
+
     /**
      * The type of th button: primary, secondary, text.
      */
@@ -52,6 +57,7 @@ function ActionButton({
     className = '',
     disabled,
     hasOptions,
+    testId,
     type = 'primary',
     onClick,
     onOptionsClick
@@ -59,6 +65,7 @@ function ActionButton({
     return (
         <div
             className = { `action-btn ${className} ${type} ${disabled ? 'disabled' : ''}` }
+            data-testid = { testId ? testId : undefined }
             onClick = { disabled ? undefined : onClick }>
             {children}
             {hasOptions && <div

react/features/base/premeeting/components/web/InputField.js

@@ -11,6 +11,11 @@ type Props = {
      */
     className?: string,
 
+    /**
+     * TestId of the button. Can be used to locate element when testing UI.
+     */
+    testId?: string,
+
     /**
      * Callback for the onChange event of the field.
      */
@@ -105,6 +110,7 @@ export default class InputField extends PureComponent<Props, State> {
         return (
             <input
                 className = { `field ${this.state.focused ? 'focused' : ''} ${this.props.className || ''}` }
+                data-testid = { this.props.testId ? this.props.testId : undefined }
                 onBlur = { this._onBlur }
                 onChange = { this._onChange }
                 onFocus = { this._onFocus }

react/features/lobby/components/web/KnockingParticipantList.js

@@ -48,25 +48,28 @@ class KnockingParticipantList extends AbstractKnockingParticipantList<Props> {
                             <Avatar
                                 displayName = { p.name }
                                 size = { 48 }
+                                testId = 'knockingParticipant.avatar'
                                 url = { p.loadableAvatarUrl } />
                             <div className = 'details'>
-                                <span>
+                                <span data-testid = 'knockingParticipant.name'>
                                     { p.name }
                                 </span>
                                 { p.email && (
-                                    <span>
+                                    <span data-testid = 'knockingParticipant.email'>
                                         { p.email }
                                     </span>
                                 ) }
                             </div>
                             <button
                                 className = 'primary'
+                                data-testid = 'lobby.allow'
                                 onClick = { this._onRespondToParticipant(p.id, true) }
                                 type = 'button'>
                                 { t('lobby.allow') }
                             </button>
                             <button
                                 className = 'borderLess'
+                                data-testid = 'lobby.reject'
                                 onClick = { this._onRespondToParticipant(p.id, false) }
                                 type = 'button'>
                                 { t('lobby.reject') }

react/features/lobby/components/web/LobbyScreen.js

@@ -97,6 +97,7 @@ class LobbyScreen extends AbstractLobbyScreen {
                     <InputField
                         onChange = { this._onChangeDisplayName }
                         placeHolder = { t('lobby.nameField') }
+                        testId = 'lobby.nameField'
                         value = { displayName } />
                 </div>
             </div>
@@ -117,6 +118,7 @@ class LobbyScreen extends AbstractLobbyScreen {
                     className = { _passwordJoinFailed ? 'error' : '' }
                     onChange = { this._onChangePassword }
                     placeHolder = { _passwordJoinFailed ? t('lobby.invalidPassword') : t('lobby.passwordField') }
+                    testId = 'lobby.password'
                     type = 'password'
                     value = { this.state.password } />
             </div>
@@ -136,11 +138,13 @@ class LobbyScreen extends AbstractLobbyScreen {
                 <ActionButton
                     disabled = { !this.state.password }
                     onClick = { this._onJoinWithPassword }
+                    testId = 'lobby.passwordJoinButton'
                     type = 'primary'>
                     { t('lobby.passwordJoinButton') }
                 </ActionButton>
                 <ActionButton
                     onClick = { this._onSwitchToKnockMode }
+                    testId = 'lobby.backToKnockModeButton'
                     type = 'secondary'>
                     { t('lobby.backToKnockModeButton') }
                 </ActionButton>
@@ -161,11 +165,13 @@ class LobbyScreen extends AbstractLobbyScreen {
                 { _knocking || <ActionButton
                     disabled = { !this.state.displayName }
                     onClick = { this._onAskToJoin }
+                    testId = 'lobby.knockButton'
                     type = 'primary'>
                     { t('lobby.knockButton') }
                 </ActionButton> }
                 <ActionButton
                     onClick = { this._onSwitchToPasswordMode }
+                    testId = 'lobby.enterPasswordButton'
                     type = 'secondary'>
                     { t('lobby.enterPasswordButton') }
                 </ActionButton>

react/features/notifications/components/web/Notification.js

@@ -62,6 +62,7 @@ class Notification extends AbstractNotification<Props> {
                 id = { uid }
                 isDismissAllowed = { isDismissAllowed }
                 onDismissed = { onDismissed }
+                testId = { titleKey }
                 title = { title || t(titleKey, titleArguments) } />
         );
     }
@@ -84,7 +85,7 @@ class Notification extends AbstractNotification<Props> {
 
         // the id is used for testing the UI
         return (
-            <div id = { this._getDescriptionKey() || description || this.props.titleKey || this.props.title } >
+            <div data-testid = { this._getDescriptionKey() } >
                 { description }
             </div>
         );

react/features/prejoin/components/Prejoin.js

@@ -313,6 +313,7 @@ class Prejoin extends Component<Props, State> {
                                         hasOptions = { true }
                                         onClick = { joinConference }
                                         onOptionsClick = { _onOptionsClick }
+                                        testId = 'prejoin.joinMeeting'
                                         type = 'primary'>
                                         { t('prejoin.joinMeeting') }
                                     </ActionButton>