[TESTS] Add E2E tests to discussions (#2970)

* [E2E TEST] Discussions

* fix error Cannot find UI elemen

* Fix tests

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/containers/UIKit/MultiSelect/Items.js

@@ -16,22 +16,26 @@ const keyExtractor = item => item.value.toString();
 // RectButton doesn't work on modal (Android)
 const Item = ({
 	item, selected, onSelect, theme
-}) => (
-	<Touchable
-		key={item}
-		onPress={() => onSelect(item)}
-		style={[
-			styles.item,
-			{ backgroundColor: themes[theme].backgroundColor }
-		]}
-	>
-		<>
-			{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
-			<Text style={{ color: themes[theme].titleText }}>{textParser([item.text])}</Text>
-			{selected ? <Check theme={theme} /> : null}
-		</>
-	</Touchable>
-);
+}) => {
+	const itemName = item.value.name || item.text.text.toLowerCase();
+	return (
+		<Touchable
+			testID={`multi-select-item-${ itemName }`}
+			key={item}
+			onPress={() => onSelect(item)}
+			style={[
+				styles.item,
+				{ backgroundColor: themes[theme].backgroundColor }
+			]}
+		>
+			<>
+				{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
+				<Text style={{ color: themes[theme].titleText }}>{textParser([item.text])}</Text>
+				{selected ? <Check theme={theme} /> : null}
+			</>
+		</Touchable>
+	);
+};
 Item.propTypes = {
 	item: PropTypes.object,
 	selected: PropTypes.number,

app/containers/UIKit/MultiSelect/index.js

@@ -112,6 +112,7 @@ export const MultiSelect = React.memo(({
 			<View style={[styles.modal, { backgroundColor: themes[theme].backgroundColor }]}>
 				<View style={[styles.content, { backgroundColor: themes[theme].backgroundColor }]}>
 					<TextInput
+						testID='multi-select-search'
 						onChangeText={onSearch || onSearchChange}
 						placeholder={I18n.t('Search')}
 						theme={theme}

app/presentation/RoomItem/index.js

@@ -27,7 +27,6 @@ class RoomItemContainer extends React.Component {
 		onPress: PropTypes.func,
 		username: PropTypes.string,
 		avatarSize: PropTypes.number,
-		testID: PropTypes.string,
 		width: PropTypes.number,
 		status: PropTypes.string,
 		toggleFav: PropTypes.func,
@@ -123,7 +122,6 @@ class RoomItemContainer extends React.Component {
 			toggleFav,
 			toggleRead,
 			hideChannel,
-			testID,
 			theme,
 			isFocused,
 			avatarSize,
@@ -134,6 +132,7 @@ class RoomItemContainer extends React.Component {
 			swipeEnabled
 		} = this.props;
 		const name = getRoomTitle(item);
+		const testID = `rooms-list-view-item-${ name }`;
 		const avatar = getRoomAvatar(item);
 		const isRead = getIsRead(item);
 		const date = item.roomUpdatedAt && formatDate(item.roomUpdatedAt);

app/views/CreateDiscussionView/index.js

@@ -179,6 +179,7 @@ class CreateChannelView extends React.Component {
 						/>
 						<TextInput
 							label={I18n.t('Discussion_name')}
+							testID='multi-select-discussion-name'
 							placeholder={I18n.t('A_meaningful_name_for_the_discussion_room')}
 							containerStyle={styles.inputStyle}
 							defaultValue={name}

app/views/RoomsListView/index.js

@@ -908,7 +908,6 @@ class RoomsListView extends React.Component {
 				username={username}
 				showLastMessage={StoreLastMessage}
 				onPress={this.onPressItem}
-				testID={`rooms-list-view-item-${ item.name }`}
 				width={isMasterDetail ? MAX_SIDEBAR_WIDTH : width}
 				toggleFav={this.toggleFav}
 				toggleRead={this.toggleRead}

e2e/tests/room/04-discussion.spec.js

@@ -0,0 +1,139 @@
+const {
+	expect, element, by, waitFor
+} = require('detox');
+const { navigateToLogin, login, mockMessage, tapBack, searchRoom } = require('../../helpers/app');
+const data = require('../../data');
+
+const channel = data.groups.private.name;
+
+const navigateToRoom = async() => {
+	await searchRoom(channel);
+	await waitFor(element(by.id(`rooms-list-view-item-${ channel }`))).toExist().withTimeout(60000);
+	await element(by.id(`rooms-list-view-item-${ channel }`)).tap();
+	await waitFor(element(by.id('room-view'))).toBeVisible().withTimeout(5000);
+}
+
+describe('Discussion', () => {
+	before(async() => {
+		await device.launchApp({ permissions: { notifications: 'YES' }, newInstance: true, delete: true });
+		await navigateToLogin();
+		await login(data.users.regular.username, data.users.regular.password)
+	});
+
+	it('should create discussion from NewMessageView', async() => {
+		const discussionName = `${data.random} Discussion NewMessageView`;
+		await element(by.id('rooms-list-view-create-channel')).tap();
+		await waitFor(element(by.id('new-message-view'))).toExist().withTimeout(2000);
+		await element(by.label('Create Discussion')).tap();
+		await waitFor(element(by.id('create-discussion-view'))).toExist().withTimeout(60000);
+		await expect(element(by.id('create-discussion-view'))).toExist();
+		await element(by.label('Select a Channel...')).tap();
+		await element(by.id('multi-select-search')).replaceText(`${channel}`);
+		await waitFor(element(by.id(`multi-select-item-${channel}`))).toExist().withTimeout(10000);
+		await element(by.id(`multi-select-item-${channel}`)).tap();
+		await element(by.id('multi-select-discussion-name')).replaceText(discussionName);
+		await waitFor(element(by.id(`create-discussion-submit`))).toExist().withTimeout(10000);
+		await element(by.id('create-discussion-submit')).tap();
+		await waitFor(element(by.id('room-view'))).toExist().withTimeout(10000);
+		await waitFor(element(by.id(`room-view-title-${ discussionName }`))).toExist().withTimeout(5000);
+		await tapBack();
+		await waitFor(element(by.id(`rooms-list-view-item-${ discussionName }`))).toExist().withTimeout(5000);
+	});
+
+	it('should create discussion from action button', async() => {
+		const discussionName = `${data.random} Discussion Action Button`;
+		await navigateToRoom();
+		await element(by.id('messagebox-actions')).tap();
+		await waitFor(element(by.id('action-sheet'))).toExist().withTimeout(2000);
+		await element(by.label('Create Discussion')).tap();
+		await waitFor(element(by.id('create-discussion-view'))).toExist().withTimeout(2000);
+		await element(by.id('multi-select-discussion-name')).replaceText(discussionName);
+		await waitFor(element(by.id(`create-discussion-submit`))).toExist().withTimeout(10000);
+		await element(by.id('create-discussion-submit')).tap();
+		await waitFor(element(by.id('room-view'))).toExist().withTimeout(10000);
+		await waitFor(element(by.id(`room-view-title-${ discussionName }`))).toExist().withTimeout(5000);
+	});
+
+	describe('Create Discussion from action sheet', async() => {
+		it('should send a message', async() => {
+			await waitFor(element(by.id('messagebox'))).toBeVisible().withTimeout(60000);
+			await mockMessage('message');
+		});
+
+		it('should create discussion', async() => {
+			const discussionName = `${ data.random }message`;
+			await element(by.label(discussionName)).atIndex(0).longPress();
+			await waitFor(element(by.id('action-sheet'))).toExist().withTimeout(2000);
+			await element(by.label(`Start a Discussion`)).atIndex(0).tap();
+			await waitFor(element(by.id('create-discussion-view'))).toExist().withTimeout(2000);
+			await element(by.id('create-discussion-submit')).tap();
+			await waitFor(element(by.id('room-view'))).toExist().withTimeout(10000);
+			await waitFor(element(by.id(`room-view-title-${ discussionName }`))).toExist().withTimeout(5000);
+		});
+	});
+
+	describe('Check RoomActionsView render', async() => {
+		it('should navigete to RoomActionsView', async() => {
+			await waitFor(element(by.id('room-view-header-actions'))).toBeVisible().withTimeout(5000);
+			await element(by.id('room-view-header-actions')).tap();
+			await waitFor(element(by.id('room-actions-view'))).toBeVisible().withTimeout(5000);
+		});
+
+		it('should have room actions screen', async() => {
+			await expect(element(by.id('room-actions-view'))).toBeVisible();
+		});
+
+		it('should have info', async() => {
+			await expect(element(by.id('room-actions-info'))).toBeVisible();
+		});
+
+		it('should have members', async() => {
+			await expect(element(by.id('room-actions-members'))).toBeVisible();
+		});
+
+		it('should have files', async() => {
+			await expect(element(by.id('room-actions-files'))).toBeVisible();
+		});
+
+		it('should have mentions', async() => {
+			await expect(element(by.id('room-actions-mentioned'))).toBeVisible();
+		});
+
+		it('should have starred', async() => {
+			await expect(element(by.id('room-actions-starred'))).toBeVisible();
+		});
+
+		it('should have search', async() => {
+			await expect(element(by.id('room-actions-search'))).toBeVisible();
+		});
+
+		it('should have share', async() => {
+			await element(by.type('UIScrollView')).atIndex(1).swipe('up');
+			await expect(element(by.id('room-actions-share'))).toBeVisible();
+		});
+
+		it('should have pinned', async() => {
+			await expect(element(by.id('room-actions-pinned'))).toBeVisible();
+		});
+
+		it('should not have notifications', async() => {
+			await expect(element(by.id('room-actions-notifications'))).toBeVisible();
+		});
+
+		it('should not have leave channel', async() => {
+			await expect(element(by.id('room-actions-leave-channel'))).toBeVisible();
+		});
+
+		it('should navigate to RoomActionView', async() => {
+			await element(by.type('UIScrollView')).atIndex(1).swipe('down');
+			await expect(element(by.id('room-actions-info'))).toBeVisible();
+			await element(by.id('room-actions-info')).tap();
+			await waitFor(element(by.id('room-info-view'))).toExist().withTimeout(60000);
+			await expect(element(by.id('room-info-view'))).toExist();
+		});
+
+		it('should not have edit button', async() => {
+			await expect(element(by.id('room-info-view-edit-button'))).toBeNotVisible();
+		});
+	});
+});