add chat-screen.spec, add testIDs and fix chat-screen issues

jhipster · Jul 28, 2019 · 781ceef · 781ceef
1 parent abe3460
commit 781ceef
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 20 deletions.
diff --git a/boilerplate/app/modules/chat/chat-screen.js b/boilerplate/app/modules/chat/chat-screen.js
@@ -5,9 +5,10 @@ import { connect } from 'react-redux'
 
 import { Colors } from '../../shared/themes'
 import WebsocketService from '../../shared/websockets/websocket.service'
-import { getLogin } from '../login/account.reducer'
-import ChatActions from '../chat/chat.reducer'
+import { getLogin } from '../../shared/reducers/account.reducer'
+import ChatActions from './chat.reducer'
 import styles from './chat-screen.styles'
+import RoundedButton from '../../shared/components/rounded-button/rounded-button'
 
 class ChatScreen extends React.PureComponent {
   constructor (props) {
@@ -60,14 +61,14 @@ class ChatScreen extends React.PureComponent {
   // The default function if no Key is provided is index
   // an identifiable key is important if you plan on
   // item reordering.  Otherwise index is fine
-  keyExtractor = (item, index) => index
+  keyExtractor = (item, index) => `${index}`
 
   // How many items should be kept im memory as we scroll?
   oneScreensWorth = 20
 
   render () {
     return (
-      <View style={styles.container}>
+      <View style={styles.container} testID='chatScreen'>
         <KeyboardAwareScrollView style={styles.scrollView} scrollEnabled={false}>
           <FlatList
             ref='chatList'
@@ -77,21 +78,26 @@ class ChatScreen extends React.PureComponent {
             renderItem={this.renderRow}
             keyExtractor={this.keyExtractor}
             initialNumToRender={this.oneScreensWorth}
+            testID='chatScreenFlatList'
           />
-          <TextInput
-            ref='messageText'
-            placeholder='Type a message...'
-            placeholderTextColor={Colors.snow}
-            underlineColorAndroid='transparent'
-            style={styles.messageInput}
-            value={this.state.message}
-            onChangeText={this.updateMessage}
-            autoCapitalize='none'
-            onSubmitEditing={this.sendMessage}
-            returnKeyType={'send'}
-            autoCorrect={false}
-            selectionColor={Colors.snow}
-          />
+          <View style={styles.inputContainer}>
+            <TextInput
+              ref='messageText'
+              placeholder='Type a message...'
+              placeholderTextColor={Colors.snow}
+              underlineColorAndroid='transparent'
+              style={styles.messageInput}
+              value={this.state.message}
+              onChangeText={this.updateMessage}
+              autoCapitalize='none'
+              onSubmitEditing={this.sendMessage}
+              returnKeyType={'send'}
+              autoCorrect={false}
+              selectionColor={Colors.snow}
+              testID='chatScreenInput'
+            />
+            <RoundedButton style={{ flex: 1 }} onPress={this.sendMessage} text={'Send'} testID='chatScreenSendButton' />
+          </View>
         </KeyboardAwareScrollView>
       </View>
     )

diff --git a/boilerplate/app/modules/chat/chat-screen.styles.js b/boilerplate/app/modules/chat/chat-screen.styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet, Platform } from 'react-native'
+import { StyleSheet } from 'react-native'
 
 import { ApplicationStyles, Metrics, Colors } from '../../shared/themes'
 
@@ -32,18 +32,27 @@ export default StyleSheet.create({
     color: Colors.snow
   },
   list: {
-    height: Metrics.screenHeight - ((Platform.OS === 'ios') ? 110 : 130)
+    flex: 1
+    // todo replace with flex styling
+    // height: Metrics.screenHeight - ((Platform.OS === 'ios') ? 110 : 130)
   },
   listContent: {
     left: 0,
     right: 0
   },
   messageInput: {
+    flex: 1,
     padding: 10,
     color: 'white',
     alignItems: 'flex-end',
     bottom: 0,
     left: 0,
     right: 0
+  },
+  inputContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 })
diff --git a/boilerplate/e2e/chat-screen.spec.js b/boilerplate/e2e/chat-screen.spec.js
@@ -0,0 +1,38 @@
+const Utils = require('./utils')
+
+describe('Chat Screen Tests', () => {
+  before(async () => {
+    await device.reloadReactNative()
+    await Utils.loginAsUser()
+  })
+  after(async () => {
+    await element(by.type('_UIBackButtonContainerView')).tap()
+    await Utils.logout()
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToChatScreen()
+  })
+
+  const navigateToChatScreen = async () => {
+    await expect(element(by.id('launchScreen'))).toBeVisible()
+    await element(by.id('menuButton')).tap()
+    await element(by.id('chatDrawerButton')).tap()
+  }
+
+  const sendChat = async (message) => {
+    await element(by.id('chatScreenInput')).replaceText(message)
+    await element(by.id('chatScreenSendButton')).tap()
+  }
+
+  it('should display the chat screen and message input', async () => {
+    await expect(element(by.id('chatScreen'))).toBeVisible()
+    await expect(element(by.id('chatScreenInput'))).toBeVisible()
+  })
+
+  it('should send a chat message then display it', async () => {
+    await sendChat('Java Hipster')
+    await expect(element(by.text('Java Hipster'))).toBeVisible()
+  })
+})
diff --git a/src/boilerplate/files.js b/src/boilerplate/files.js
@@ -56,6 +56,10 @@ module.exports = async function (context, props, jhipsterConfig) {
       await filesystem.remove(`${process.cwd()}/e2e/settings-screen.spec.js`)
       await filesystem.remove(`${process.cwd()}/e2e/change-password-screen.spec.js`)
     }
+    // remove websocket ChatScreen test if unused
+    if (!props.websockets) {
+      await filesystem.remove(`${process.cwd()}/e2e/chat-screen.spec.js`)
+    }
   }
   spinner.stop()