feat: add take a photo button in profile (#5524)

* take new photo added for avatar

* code optimization

* Update app/views/ChangeAvatarView/index.tsx

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

* improvements

* Update .detoxrc.js

* Update jest.config.js

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

app/views/ChangeAvatarView/ImagePicker.mock.ts

@@ -31,6 +31,31 @@ export function openPicker(_options: any): Promise<any> {
 	});
 }
 
+export function openCamera(_options: any): Promise<any> {
+	return Promise.resolve({
+		exif: null,
+		filename: 'IMG_0007.PNG',
+		path: `/tmp/react-native-image-crop-picker/${random(20)}.jpg`,
+		height: 152,
+		width: 152,
+		data: mockImageRocketBase64,
+		modificationDate: null,
+		localIdentifier: 'CEEE9916-81FD-4544-9D86-7044DB6C4374/L0/001',
+		size: 5006,
+		sourceURL: `/tmp/react-native-image-crop-picker/${random(20)}.jpg`,
+		mime: 'image/jpeg',
+		cropRect: {
+			width: 152,
+			height: 152,
+			x: 134,
+			y: 0
+		},
+		duration: null,
+		creationDate: '1679327100'
+	});
+}
+
 export default {
-	openPicker
+	openPicker,
+	openCamera
 };

app/views/ChangeAvatarView/index.tsx

@@ -130,7 +130,7 @@ const ChangeAvatarView = () => {
 		return navigation.goBack();
 	};
 
-	const pickImage = async () => {
+	const pickImage = async (isCam = false) => {
 		const options = {
 			cropping: true,
 			compressImageQuality: 0.8,
@@ -138,10 +138,11 @@ const ChangeAvatarView = () => {
 			cropperAvoidEmptySpaceAroundImage: false,
 			cropperChooseText: I18n.t('Choose'),
 			cropperCancelText: I18n.t('Cancel'),
-			includeBase64: true
+			includeBase64: true,
+			useFrontCamera: isCam
 		};
 		try {
-			const response: Image = await ImagePicker.openPicker(options);
+			const response: Image = isCam === true ? await ImagePicker.openCamera(options) : await ImagePicker.openPicker(options);
 			dispatchAvatar({
 				type: AvatarStateActions.CHANGE_AVATAR,
 				payload: { url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' }
@@ -217,6 +218,14 @@ const ChangeAvatarView = () => {
 							}
 						/>
 					) : null}
+					<Button
+						title={I18n.t('Take_a_photo')}
+						type='secondary'
+						disabled={saving}
+						backgroundColor={colors.editAndUploadButtonAvatar}
+						onPress={() => pickImage(true)}
+						testID='change-avatar-view-take-a-photo'
+					/>
 					<Button
 						title={I18n.t('Upload_image')}
 						type='secondary'

e2e/tests/assorted/15-change-avatar.spec.ts

@@ -90,5 +90,31 @@ describe('Profile screen', () => {
 				throw new Error('Failed to update the avatar');
 			}
 		});
+
+		it('should change the avatar taking a photo using a base64 image mocked', async () => {
+			await element(by.type(scrollViewType)).atIndex(1).swipe('down');
+			await element(by.id('avatar-edit-button')).tap();
+			const previousUserInfo = await getProfileInfo({ userId });
+			const previousAvatarEtag = previousUserInfo.avatarETag;
+			await sleep(500);
+			await waitFor(element(by.id('change-avatar-view-upload-image')))
+				.toBeVisible()
+				.withTimeout(2000);
+			await element(by.id('change-avatar-view-upload-image')).tap();
+			await waitFor(element(by.id('change-avatar-view-submit')))
+				.toBeVisible()
+				.withTimeout(2000);
+			await element(by.id('change-avatar-view-submit')).tap();
+			await waitFor(element(by.id('profile-view')))
+				.toBeVisible()
+				.withTimeout(2000);
+			await sleep(300);
+			const newUserInfo = await getProfileInfo({ userId });
+			const newAvatarEtag = newUserInfo.avatarETag;
+			await sleep(500);
+			if (previousAvatarEtag === newAvatarEtag) {
+				throw new Error('Failed to update the avatar');
+			}
+		});
 	});
 });