feat(chat/polls/native): added ids for tests (#14994)

* feat(chat/polls/navigation): added ids for tests and removed some unused helpers

react/features/base/react/types.ts

@@ -5,6 +5,7 @@ export interface IIconButtonProps {
     accessibilityLabel?: string;
     color?: string;
     disabled?: boolean;
+    id?: string;
     onPress?: (e?: GestureResponderEvent) => void;
     size?: number | string;
     src: Function;

react/features/base/ui/components/native/Button.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { TouchableHighlight } from 'react-native';
+import { StyleProp, TouchableHighlight } from 'react-native';
 import { Button as NativePaperButton, Text } from 'react-native-paper';
+import { IconSource } from 'react-native-paper/lib/typescript/components/Icon';
 
 import { BUTTON_MODES, BUTTON_TYPES } from '../../constants.native';
 import BaseTheme from '../BaseTheme.native';
@@ -13,6 +14,7 @@ import styles from './buttonStyles';
 export interface IProps extends IButtonProps {
     color?: string | undefined;
     contentStyle?: Object | undefined;
+    id?: string;
     labelStyle?: Object | undefined;
     mode?: any;
     style?: Object | undefined;
@@ -24,6 +26,7 @@ const Button: React.FC<IProps> = ({
     contentStyle,
     disabled,
     icon,
+    id,
     labelKey,
     labelStyle,
     mode = BUTTON_MODES.CONTAINED,
@@ -74,16 +77,17 @@ const Button: React.FC<IProps> = ({
             <TouchableHighlight
                 accessibilityLabel = { accessibilityLabel }
                 disabled = { disabled }
+                id = { id }
                 onPress = { onPress }
                 style = { [
                     buttonStyles,
                     style
-                ] }>
+                ] as StyleProp<object> }>
                 <Text
                     style = { [
                         buttonLabelStyles,
                         labelStyle
-                    ] }>{ t(labelKey ?? '') }</Text>
+                    ] as StyleProp<object> }>{ t(labelKey ?? '') }</Text>
             </TouchableHighlight>
         );
     }
@@ -96,21 +100,20 @@ const Button: React.FC<IProps> = ({
             contentStyle = { [
                 styles.buttonContent,
                 contentStyle
-            ] }
+            ] as StyleProp<object> }
             disabled = { disabled }
-
-            // @ts-ignore
-            icon = { icon }
+            icon = { icon as IconSource | undefined }
+            id = { id }
             labelStyle = { [
                 buttonLabelStyles,
                 labelStyle
-            ] }
+            ] as StyleProp<object> }
             mode = { mode }
             onPress = { onPress }
             style = { [
                 buttonStyles,
                 style
-            ] } />
+            ] as StyleProp<object> } />
     );
 };
 

react/features/base/ui/components/native/IconButton.tsx

@@ -12,6 +12,7 @@ const IconButton: React.FC<IIconButtonProps> = ({
     accessibilityLabel,
     color: iconColor,
     disabled,
+    id,
     onPress,
     size,
     src,
@@ -52,6 +53,7 @@ const IconButton: React.FC<IIconButtonProps> = ({
         <TouchableHighlight
             accessibilityLabel = { accessibilityLabel }
             disabled = { disabled }
+            id = { id }
             onPress = { onPress }
             style = { [
                 iconButtonContainerStyles,

react/features/base/ui/components/native/Switch.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorValue } from 'react-native';
+import { ColorValue, StyleProp } from 'react-native';
 import { Switch as NativeSwitch } from 'react-native-paper';
 
 import { ISwitchProps } from '../types';
@@ -12,6 +12,12 @@ import {
 
 interface IProps extends ISwitchProps {
 
+    /**
+     * Id for the switch.
+     */
+
+    id?: string;
+
     /**
      * Custom styles for the switch.
      */
@@ -31,6 +37,7 @@ interface IProps extends ISwitchProps {
 const Switch = ({
     checked,
     disabled,
+    id,
     onChange,
     thumbColor = THUMB_COLOR,
     trackColor = {
@@ -41,9 +48,10 @@ const Switch = ({
 }: IProps) => (
     <NativeSwitch
         disabled = { disabled }
+        id = { id }
         ios_backgroundColor = { DISABLED_TRACK_COLOR }
         onValueChange = { onChange }
-        style = { style }
+        style = { style as StyleProp<object> }
         thumbColor = { thumbColor }
         trackColor = { trackColor }
         value = { checked } />

react/features/chat/components/native/ChatInputBar.tsx

@@ -84,6 +84,7 @@ class ChatInputBar extends Component<IProps, IState> {
 
         return (
             <View
+                id = 'chat-input'
                 style = { [
                     inputBarStyles,
                     this.state.addPadding ? styles.extraBarPadding : null
@@ -91,6 +92,7 @@ class ChatInputBar extends Component<IProps, IState> {
                 <Input
                     blurOnSubmit = { false }
                     customStyles = {{ container: styles.customInputContainer }}
+                    id = 'chat-input-messagebox'
                     multiline = { false }
                     onBlur = { this._onFocused(false) }
                     onChange = { this._onChangeText }
@@ -101,6 +103,7 @@ class ChatInputBar extends Component<IProps, IState> {
                     value = { this.state.message } />
                 <IconButton
                     disabled = { !this.state.message }
+                    id = { this.props.t('chat.sendButton') }
                     onPress = { this._onSubmit }
                     src = { IconSend }
                     type = { BUTTON_TYPES.PRIMARY } />

react/features/chat/components/native/ChatMessage.tsx

@@ -76,7 +76,9 @@ class ChatMessage extends Component<IChatMessageProps> {
         const messageText = getMessageText(this.props.message);
 
         return (
-            <View style = { styles.messageWrapper as ViewStyle } >
+            <View
+                id = { message.messageId }
+                style = { styles.messageWrapper as ViewStyle } >
                 { this._renderAvatar() }
                 <View style = { detailsWrapperStyle }>
                     <View style = { messageBubbleStyle }>

react/features/chat/components/native/GifMessage.tsx

@@ -17,6 +17,7 @@ const GifMessage = ({ message }: IProps) => {
     const url = message.substring(GIF_PREFIX.length, message.length - 1);
 
     return (<View
+        id = 'gif-message'
         style = { styles.gifContainer }>
         <Image
             source = {{ uri: url }}

react/features/chat/components/native/MessageContainer.tsx

@@ -78,7 +78,9 @@ class MessageContainer extends AbstractMessageContainer<IProps, any> {
         const { t } = this.props;
 
         return (
-            <View style = { styles.emptyComponentWrapper as ViewStyle }>
+            <View
+                id = 'no-messages-message'
+                style = { styles.emptyComponentWrapper as ViewStyle }>
                 <Text style = { styles.emptyComponentText as TextStyle }>
                     { t('chat.noMessagesMessage') }
                 </Text>

react/features/chat/components/native/MessageRecipient.tsx

@@ -102,7 +102,9 @@ class MessageRecipient extends AbstractMessageRecipient<IProps> {
 
         if (isLobbyChatActive) {
             return (
-                <View style = { styles.lobbyMessageRecipientContainer as ViewStyle }>
+                <View
+                    id = 'chat-recipient'
+                    style = { styles.lobbyMessageRecipientContainer as ViewStyle }>
                     <Text style = { styles.messageRecipientText }>
                         { t('chat.lobbyChatMessageTo', {
                             recipient: lobbyMessageRecipient?.name
@@ -123,13 +125,16 @@ class MessageRecipient extends AbstractMessageRecipient<IProps> {
         }
 
         return (
-            <View style = { styles.messageRecipientContainer as ViewStyle }>
+            <View
+                id = 'message-recipient'
+                style = { styles.messageRecipientContainer as ViewStyle }>
                 <Text style = { styles.messageRecipientText }>
                     { t('chat.messageTo', {
                         recipient: privateMessageRecipient.name
                     }) }
                 </Text>
                 <TouchableHighlight
+                    id = 'message-recipient-cancel-button'
                     onPress = { this._onResetPrivateMessageRecipient }
                     underlayColor = { 'transparent' }>
                     <Icon

react/features/mobile/navigation/components/HeaderNavigationButton.tsx

@@ -21,6 +21,11 @@ interface IProps {
      */
     disabled?: boolean;
 
+    /**
+     * ID of the header navigation button.
+     */
+    id?: string;
+
     /**
      * Label of the button.
      */
@@ -47,7 +52,7 @@ interface IProps {
     twoActions?: boolean;
 }
 
-const HeaderNavigationButton = ({ color, disabled, label, onPress, src, style, twoActions }: IProps) => {
+const HeaderNavigationButton = ({ color, id, disabled, label, onPress, src, style, twoActions }: IProps) => {
 
     let btnStyle;
     let labelStyle;
@@ -70,6 +75,7 @@ const HeaderNavigationButton = ({ color, disabled, label, onPress, src, style, t
                 src ? (
                     <IconButton
                         color = { color }
+                        id = { id }
                         onPress = { onPress }
                         size = { 24 }
                         src = { src }
@@ -80,6 +86,7 @@ const HeaderNavigationButton = ({ color, disabled, label, onPress, src, style, t
                 ) : (
                     <Button
                         disabled = { disabled }
+                        id = { id }
                         labelKey = { label }
                         labelStyle = { labelStyle }
                         onClick = { onPress }

react/features/mobile/navigation/components/welcome/functions.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { GestureResponderEvent } from 'react-native';
-
-import { IconArrowBack } from '../../../../base/icons/svg';
-import HeaderNavigationButton
-    from '../HeaderNavigationButton';
-
-/**
- * Render header arrow back button for navigation.
- *
- * @param {Function} onPress - Callback for when the button is pressed
- * function.
- * @returns {ReactElement}
- */
-export function renderArrowBackButton(onPress: (e?: GestureResponderEvent | MouseEvent) => void) {
-    return (
-        <HeaderNavigationButton
-            onPress = { onPress }
-            src = { IconArrowBack } />
-    );
-}

react/features/mobile/navigation/functions.tsx

@@ -11,7 +11,7 @@ import { getFeatureFlag } from '../../base/flags/functions';
 import { IconCloseLarge } from '../../base/icons/svg';
 import { toState } from '../../base/redux/functions';
 import { cancelKnocking } from '../../lobby/actions.native';
-import { isPrejoinEnabledInConfig } from '../../prejoin/functions';
+import { isPrejoinEnabledInConfig } from '../../prejoin/functions.native';
 
 import HeaderNavigationButton from './components/HeaderNavigationButton';
 
@@ -28,6 +28,7 @@ export function screenHeaderCloseButton(goBack: (e?: GestureResponderEvent | Rea
     if (Platform.OS === 'ios') {
         return (
             <HeaderNavigationButton
+                id = { 'close-screen-button' }
                 label = { t('dialog.close') }
                 onPress = { goBack } />
         );
@@ -35,6 +36,7 @@ export function screenHeaderCloseButton(goBack: (e?: GestureResponderEvent | Rea
 
     return (
         <HeaderNavigationButton
+            id = { 'close-screen-button' }
             onPress = { goBack }
             src = { IconCloseLarge } />
     );
@@ -71,6 +73,7 @@ export function lobbyScreenHeaderCloseButton() {
     if (Platform.OS === 'ios') {
         return (
             <HeaderNavigationButton
+                id = { 'close-screen-button' }
                 label = { t('dialog.close') }
                 onPress = { goBack } />
         );
@@ -78,27 +81,8 @@ export function lobbyScreenHeaderCloseButton() {
 
     return (
         <HeaderNavigationButton
+            id = { 'close-screen-button' }
             onPress = { goBack }
             src = { IconCloseLarge } />
     );
 }
-
-/**
- * Returns true if we should auto-knock in case prejoin is enabled for the room.
- *
- * @param {Function|Object} stateful - The redux state or {@link getState}
- * function.
- * @returns {boolean}
- */
-export function shouldEnableAutoKnock(stateful: IStateful) {
-    const state = toState(stateful);
-    const { displayName } = state['features/base/settings'];
-
-    if (isPrejoinPageEnabled(state)) {
-        if (displayName) {
-            return true;
-        }
-    } else {
-        return false;
-    }
-}

react/features/polls/components/native/PollAnswer.tsx

@@ -50,7 +50,9 @@ const PollAnswer = (props: AbstractProps) => {
                         src = { IconCloseLarge } />
                 }
             </View>
-            <View style = { pollsStyles.answerContent as ViewStyle }>
+            <View
+                id = 'answer-content'
+                style = { pollsStyles.answerContent as ViewStyle }>
                 {
                     poll.answers.map((answer, index: number) => (
                         <View
@@ -59,6 +61,7 @@ const PollAnswer = (props: AbstractProps) => {
                             <Switch
                                 checked = { checkBoxStates[index] }
                                 disabled = { poll.saved }
+                                id = 'answer-switch'
                                 onChange = { state => setCheckbox(index, state) } />
                             <Text style = { pollsStyles.switchLabel as TextStyle }>
                                 { answer.name }
@@ -72,6 +75,7 @@ const PollAnswer = (props: AbstractProps) => {
                     ? <View style = { pollsStyles.buttonRow as ViewStyle }>
                         <Button
                             accessibilityLabel = 'polls.answer.edit'
+                            id = { t('polls.answer.edit') }
                             labelKey = 'polls.answer.edit'
                             onClick = { () => {
                                 setCreateMode(true);
@@ -81,6 +85,7 @@ const PollAnswer = (props: AbstractProps) => {
                             type = { SECONDARY } />
                         <Button
                             accessibilityLabel = 'polls.answer.send'
+                            id = { t('polls.answer.send') }
                             labelKey = 'polls.answer.send'
                             onClick = { sendPoll }
                             style = { pollsStyles.pollCreateButton }
@@ -89,6 +94,7 @@ const PollAnswer = (props: AbstractProps) => {
                     : <View style = { pollsStyles.buttonRow as ViewStyle }>
                         <Button
                             accessibilityLabel = 'polls.answer.skip'
+                            id = { t('polls.answer.skip') }
                             labelKey = 'polls.answer.skip'
                             onClick = { changingVote ? skipChangeVote : skipAnswer }
                             style = { pollsStyles.pollCreateButton }
@@ -96,6 +102,7 @@ const PollAnswer = (props: AbstractProps) => {
                         <Button
                             accessibilityLabel = 'polls.answer.submit'
                             disabled = { isSubmitAnswerDisabled(checkBoxStates) }
+                            id = { t('polls.answer.submit') }
                             labelKey = 'polls.answer.submit'
                             onClick = { submitAnswer }
                             style = { pollsStyles.pollCreateButton }

react/features/polls/components/native/PollCreate.tsx

@@ -87,6 +87,7 @@ const PollCreate = (props: AbstractProps) => {
     /* eslint-disable react/no-multi-comp */
     const createRemoveOptionButton = (onPress: () => void) => (
         <Button
+            id = { t('polls.create.removeOption') }
             labelKey = 'polls.create.removeOption'
             labelStyle = { dialogStyles.optionRemoveButtonText }
             onClick = { onPress }
@@ -107,6 +108,7 @@ const PollCreate = (props: AbstractProps) => {
 
         return (
             <View
+                id = 'option-container'
                 style = { dialogStyles.optionContainer as ViewStyle }>
                 <Input
                     blurOnSubmit = { false }
@@ -142,6 +144,7 @@ const PollCreate = (props: AbstractProps) => {
                 autoFocus = { true }
                 blurOnSubmit = { false }
                 customStyles = {{ container: dialogStyles.customContainer }}
+                id = { t('polls.create.pollQuestion') }
                 label = { t('polls.create.pollQuestion') }
                 maxLength = { CHAR_LIMIT }
                 onChange = { setQuestion }
@@ -169,6 +172,7 @@ const PollCreate = (props: AbstractProps) => {
                     <Button
                         accessibilityLabel = 'polls.create.addOption'
                         disabled = { answers.length >= ANSWERS_LIMIT }
+                        id = { t('polls.create.addOption') }
                         labelKey = 'polls.create.addOption'
                         onClick = { () => {
                             // adding and answer
@@ -181,6 +185,7 @@ const PollCreate = (props: AbstractProps) => {
                         style = { pollsStyles.buttonRow as ViewStyle }>
                         <Button
                             accessibilityLabel = 'polls.create.cancel'
+                            id = { t('polls.create.cancel') }
                             labelKey = 'polls.create.cancel'
                             onClick = { () => {
                                 setCreateMode(false);
@@ -193,6 +198,7 @@ const PollCreate = (props: AbstractProps) => {
                         <Button
                             accessibilityLabel = 'polls.create.save'
                             disabled = { isSubmitDisabled }
+                            id = { t('polls.create.save') }
                             labelKey = 'polls.create.save'
                             onClick = { onSubmit }
                             style = { pollsStyles.pollCreateButton }

react/features/polls/components/native/PollItem.tsx

@@ -27,6 +27,7 @@ const PollItem = ({ pollId, setCreateMode }: IProps) => {
 
     return (
         <View
+            id = 'poll-item-container'
             style = { pollsStyles.pollItemContainer as ViewStyle }>
             { showResults
                 ? <PollResults

react/features/polls/components/native/PollResults.tsx

@@ -92,8 +92,12 @@ const PollResults = (props: AbstractProps) => {
     /* eslint-disable react/jsx-no-bind */
     return (
         <View>
-            <Text style = { dialogStyles.questionText as TextStyle } >{ question }</Text>
-            <Text style = { dialogStyles.questionOwnerText as TextStyle } >
+            <Text
+                id = 'question-text'
+                style = { dialogStyles.questionText as TextStyle } >{ question }</Text>
+            <Text
+                id = 'poll-owner-text'
+                style = { dialogStyles.questionOwnerText as TextStyle } >
                 { t('polls.by', { name: creatorName }) }
             </Text>
             <FlatList
@@ -102,6 +106,11 @@ const PollResults = (props: AbstractProps) => {
                 renderItem = { answer => renderRow(answer.item) } />
             <View style = { pollsStyles.bottomLinks as ViewStyle }>
                 <Button
+                    id = {
+                        showDetails
+                            ? t('polls.results.hideDetailedResults')
+                            : t('polls.results.showDetailedResults')
+                    }
                     labelKey = {
                         showDetails
                             ? 'polls.results.hideDetailedResults'
@@ -111,6 +120,11 @@ const PollResults = (props: AbstractProps) => {
                     onClick = { toggleIsDetailed }
                     type = { BUTTON_TYPES.TERTIARY } />
                 <Button
+                    id = {
+                        haveVoted
+                            ? t('polls.results.changeVote')
+                            : t('polls.results.vote')
+                    }
                     labelKey = {
                         haveVoted
                             ? 'polls.results.changeVote'

react/features/polls/components/native/PollsList.tsx

@@ -47,7 +47,9 @@ const PollsList = ({ setCreateMode }: IPollListProps) => {
                         color = { BaseTheme.palette.icon03 }
                         size = { 160 }
                         src = { IconMessage } />
-                    <Text style = { pollsStyles.noPollText as TextStyle } >
+                    <Text
+                        id = 'no-polls-text'
+                        style = { pollsStyles.noPollText as TextStyle } >
                         {
                             t('polls.results.empty')
                         }

react/features/polls/components/native/PollsPane.tsx

@@ -57,6 +57,7 @@ const PollsPane = (props: AbstractProps) => {
                         <PollsList setCreateMode = { setCreateMode } />
                         <Button
                             accessibilityLabel = 'polls.create.create'
+                            id = { t('polls.create.create') }
                             labelKey = 'polls.create.create'
                             onClick = { onCreate }
                             style = { createPollButtonStyles }