feat(chat/polls): added ids for tests

jitsi · Aug 9, 2024 · 3fb954e · 3fb954e
1 parent fa6dc29
commit 3fb954e
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 19 deletions.
diff --git a/react/features/base/react/types.ts b/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;

diff --git a/react/features/base/ui/components/native/Button.tsx b/react/features/base/ui/components/native/Button.tsx
@@ -1,6 +1,6 @@
 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 { BUTTON_MODES, BUTTON_TYPES } from '../../constants.native';
@@ -13,6 +13,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 +25,7 @@ const Button: React.FC<IProps> = ({
     contentStyle,
     disabled,
     icon,
+    id,
     labelKey,
     labelStyle,
     mode = BUTTON_MODES.CONTAINED,
@@ -74,16 +76,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 +99,20 @@ const Button: React.FC<IProps> = ({
             contentStyle = { [
                 styles.buttonContent,
                 contentStyle
-            ] }
+            ] as StyleProp<object> }
             disabled = { disabled }
-
-            // @ts-ignore
             icon = { icon }
+            id = { id }
             labelStyle = { [
                 buttonLabelStyles,
                 labelStyle
-            ] }
+            ] as StyleProp<object> }
             mode = { mode }
             onPress = { onPress }
             style = { [
                 buttonStyles,
                 style
-            ] } />
+            ] as StyleProp<object> } />
     );
 };
 

diff --git a/react/features/base/ui/components/native/IconButton.tsx b/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,

diff --git a/react/features/base/ui/components/native/Switch.tsx b/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,11 +48,12 @@ 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 }
+        trackColor = { trackColor as ColorValue }
         value = { checked } />
 );
 

diff --git a/react/features/chat/components/native/ChatInputBar.tsx b/react/features/chat/components/native/ChatInputBar.tsx
@@ -84,13 +84,15 @@ class ChatInputBar extends Component<IProps, IState> {
 
         return (
             <View
+                id = 'chat-input'
                 style = { [
                     inputBarStyles,
                     this.state.addPadding ? styles.extraBarPadding : null
                 ] as ViewStyle[] }>
                 <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 } />

diff --git a/react/features/chat/components/native/ChatMessage.tsx b/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 }>

diff --git a/react/features/chat/components/native/GifMessage.tsx b/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 }}

diff --git a/react/features/chat/components/native/MessageContainer.tsx b/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>

diff --git a/react/features/chat/components/native/MessageRecipient.tsx b/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

diff --git a/react/features/polls/components/native/PollAnswer.tsx b/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,13 +94,15 @@ 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 }
                             type = { SECONDARY } />
                         <Button
                             accessibilityLabel = 'polls.answer.submit'
                             disabled = { isSubmitAnswerDisabled(checkBoxStates) }
+                            id = { t('polls.answer.submit') }
                             labelKey = 'polls.answer.submit'
                             onClick = { submitAnswer }
                             style = { pollsStyles.pollCreateButton }

diff --git a/react/features/polls/components/native/PollCreate.tsx b/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 }

diff --git a/react/features/polls/components/native/PollItem.tsx b/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

diff --git a/react/features/polls/components/native/PollResults.tsx b/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'

diff --git a/react/features/polls/components/native/PollsList.tsx b/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')
                         }

diff --git a/react/features/polls/components/native/PollsPane.tsx b/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 }