Chat card screen

src/__tests__/components/ChatCard.test.js

@@ -3,6 +3,14 @@ import React from "react";
 import {render,fireEvent,waitFor } from "@testing-library/react-native";
 import { ChatCard } from "../../components/ChartCard/ChatCard";
 
+const mockNavigate = jest.fn();
+jest.mock("@react-navigation/native", () => ({
+  useNavigation: () => ({
+    navigate: mockNavigate,
+  }),
+}));
+
+
 const post = {
   description: "Test Description",
   date: new Date(),
@@ -13,7 +21,11 @@ const post = {
   userID:  "user1",
   activityCity: 'Mock City',
   imageURL: 'sampleImageUrl',
-  // comments:comments
+  emoji: [{ emojiName: '😊', userID: 'user1', userFirstName: 'Erik', userLastName: 'Andersson' }],
+  comments : [
+    { id: 1, comment: 'First comment', userID: 'user2', userFirstName: 'John', userLastName: 'Doe' },
+    { id: 2, comment: 'Second comment', userID: 'user3', userFirstName: 'Erik', userLastName: 'Andersson' }
+  ]
 };
 
 const loggedInUser = {
@@ -25,23 +37,30 @@ const loggedInUser = {
   statusActive: true 
 };
 
-
 describe("Testing ChatCardComponent", () => {
-
-  //TODO: add handleAddComment function when we add react function
+
+  it('Testing ChatCardDate component to ensure it renders with correct date', () => {
+    const { getByTestId } = render(
+      <ChatCard post={post} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser} />
+    );
+    const chatCardDate = getByTestId('chat-card-date');
+    expect(chatCardDate).toBeTruthy();
+    expect(chatCardDate.props.children).toEqual('Today');
+  });
 
-  test('Testing ChatCardDate component to ensure it renders with correct date', () => {
+
+  it('Testing ChatCardDate component to ensure it renders with correct date', () => {
     const { getByTestId } = render(
-      <ChatCard post={post} handleAddComment={() => {}} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser} />
+      <ChatCard post={post} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser} />
     );
     const chatCardDate = getByTestId('chat-card-date');
     expect(chatCardDate).toBeTruthy();
     expect(chatCardDate.props.children).toEqual('Today');
   });
 
-  test('Testing ChatCardHeadercomponent to ensure it renders with correct data', () => {
+  it('Testing ChatCardHeadercomponent to ensure it renders with correct data', () => {
     const { getByTestId, getByText } = render(
-      <ChatCard post={post} handleAddComment={() => {}} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser}  />
+      <ChatCard post={post} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser}  />
     );
     const chatCardHeader = getByTestId('chat-card-header');
     expect(chatCardHeader).toBeTruthy();
@@ -52,26 +71,26 @@ describe("Testing ChatCardComponent", () => {
     expect(activityImage.props.source.testUri).toBe( "../../../assets/images/activities/symbol_sport.png" )
   });
 
-  test('Testing ChatCardImage component to ensure it renders  with correct data', () => {
+  it('Testing ChatCardImage component to ensure it renders  with correct data', () => {
     const { getByTestId } = render(
-      <ChatCard post={post} handleAddComment={() => {}}  onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser}/>
+      <ChatCard post={post} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser}/>
     );
     const chatCardImage = getByTestId('chat-card-image');
     expect(chatCardImage).toBeTruthy();
     expect(chatCardImage.props.source.uri).toBe(post.imageURL);
   });
 
-  test('Testing ChatCardDescription component to ensure it renders with correct data', () => {
+  it('Testing ChatCardDescription component to ensure it renders with correct data', () => {
     const {getByText } = render(
-      <ChatCard post={post} handleAddComment={() => {}} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser} />
+      <ChatCard post={post} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser} />
     );
     expect(getByText('Test Description')).toBeTruthy();  
   });
 
-  test('Testing ChatCardEditMenu component is rendered', () => {
+  it('Testing ChatCardEditMenu component is rendered', () => {
     const onDeleteMock = jest.fn();
     const { getByTestId,getByText } = render(
-      <ChatCard post={post}  handleAddComment={() => {}} onDelete={onDeleteMock} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser}  />
+      <ChatCard post={post} onDelete={onDeleteMock} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser}  />
     );
     const chatCardEditMenu = getByTestId('chat-card-edit-menu');
     expect(chatCardEditMenu).toBeTruthy();
@@ -81,42 +100,90 @@ describe("Testing ChatCardComponent", () => {
     expect(onDeleteMock).toBeTruthy();
   });
 
-  test('Testing ChatCard does not render ChatCardEditMenu when isCurrentUser is false', () => {
+  it('Testing ChatCard does not render ChatCardEditMenu when isCurrentUser is false', () => {
     const { queryByTestId } = render(
-      <ChatCard post={post} handleAddComment={() => {}} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={!loggedInUser}  />
+      <ChatCard post={post} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={!loggedInUser}  />
     );
     const chatCardEditMenu = queryByTestId('chat-card-edit-menu');
     expect(chatCardEditMenu).toBeFalsy();
   });
 
-  test('Testing ChatCard component touchability', () => {
+  it('Testing ChatCard component touchability', () => {
     const { getByTestId } = render(
-      <ChatCard post={post} handleAddComment={() => {}} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser} />
+      <ChatCard post={post} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser} />
     );
     const chatCard= getByTestId('chat-card');
     fireEvent.press(chatCard);
   });
-
-  test('Testing ChatCardEmoji component to ensure it renders ', () => {
+  it('Rendering ChatCard with ChatCardEmoji', () => {
     const { getByTestId } = render(
-      <ChatCard post={post} handleAddComment={() => {}} onDelete={() => {}} addEmoji={() => {}} deleteEmoji={() => {}} loggedInUser={loggedInUser} />
+      <ChatCard
+        post={post}
+        onDelete={() => {}}
+        addEmoji={() => {}}
+        deleteEmoji={() => {}}
+        loggedInUser={loggedInUser}
+        commentsCount={0}
+      />
     );
-    const chatCardDate = getByTestId('chat-card-date');
-    expect(chatCardDate).toBeTruthy();
+
+    const chatCardEmoji = getByTestId('chat-card-emoji');
+    expect(chatCardEmoji).toBeTruthy();
+  });
+
+  it('Adding Emoji in ChatCardEmoji', () => {
+    const addEmojiMock = jest.fn();
+    const deleteEmojiMock = jest.fn();
+    const { getByTestId,getByText } = render(
+      <ChatCard
+        post={post}
+        onDelete={() => {}}
+        addEmoji={addEmojiMock} 
+        deleteEmoji={() => {}}
+        loggedInUser={loggedInUser}
+        commentsCount={0}
+      />
+    );
+
+    const chatCardEmoji = getByTestId('chat-card-emoji');
+    fireEvent.press(chatCardEmoji); 
+    expect(addEmojiMock).toBeTruthy();
+    expect(getByText('😊')).toBeTruthy();  
   });
 
+  it('Deleting Emoji in ChatCardEmoji', () => {
+    const deleteEmojiMock = jest.fn();
+    const addEmojiMock = jest.fn();
 
-// ToDo adapt test after creating a new ChatCardScreen and also write test for ChatCardEmoji
-  // test('Testing CommentsSection component to ensure it renders data correctly', async() => {
-  //   const { getAllByTestId,getByText,debug} = render(
-  //     <ChatCard post={post} users={users} handleAddComment={() => {}} />
-  //   );
-  //   await waitFor(() => {
-  //   const commentsSection = getAllByTestId('comment-user-name');
-  //   const commentsList = getAllByTestId('comment-text');
-  //   debug();
-  //   expect(commentsSection[0].props.children).toBe('Erik Andersson');
-  //   expect(commentsList[0].props.children).toBe('First comment');
-  //   })
-  // });
+    const { getByText,queryByText } = render(
+      <ChatCard
+        post={post}
+        onDelete={() => {}}
+        addEmoji={addEmojiMock}
+        deleteEmoji={deleteEmojiMock}
+        loggedInUser={loggedInUser}
+        commentsCount={post.comments.length}
+      />
+    );
+
+    const emojiText = getByText('😊');
+    fireEvent.press(emojiText);
+    expect(deleteEmojiMock).toHaveBeenCalled();
+    expect(queryByText('😊')).toBeNull();
+  });
+
+  it('Testing comments count in ChatCard', () => {
+    const { getByText } = render(
+      <ChatCard 
+        post={post} 
+        onDelete={() => {}} 
+        addEmoji={() => {}} 
+        deleteEmoji={() => {}} 
+        loggedInUser={loggedInUser} 
+        commentsCount={post.comments.length} 
+      />
+    );
+    const commentsCountText = getByText("2 Kommentarer");
+    expect(commentsCountText).toBeTruthy();
+  });
 });

src/assets/icons/ArrowUpward.tsx

@@ -0,0 +1,20 @@
+import { Icon } from "@rneui/base";
+import { TextStyle, TouchableOpacity, ViewStyle } from "react-native";
+
+type Props = {
+  onPress?: () => void;
+  style?: ViewStyle | TextStyle | undefined;
+};
+
+export const ArrowUpward = ({ onPress,  style }: Props) => {
+  return (
+    <TouchableOpacity  onPress={() => onPress && onPress()}>
+    <Icon
+      style={style}
+      testID={'arrow-upward'}
+      color="#5B6770"
+      name="arrow-upward" size={20}  
+    />
+    </TouchableOpacity>
+  );
+};

src/components/Buttons/GoBackButton.tsx

@@ -41,6 +41,7 @@ export const GoBackButton = ({ onPress, style, text = true }: Props) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
+    marginVertical:6
   },
   textGoBackButton: {
     marginLeft: 10,

src/components/ChartCard/ActivityListOverLay.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   View,
   StyleSheet,
   Text,
-  Image,
   ScrollView,
   TouchableOpacity,
 } from "react-native";
@@ -12,6 +11,7 @@ import { ActivityItem } from "./ActivityItem";
 import { Overlay } from "@rneui/base";
 import colors from "../../assets/theme/colors";
 import typography from "../../assets/theme/typography";
+import { UserStack } from "../../utility/routeEnums";
 
 const createPropsObject = (activity: Activity, user: User): UserPost => {
   let obj = {
@@ -40,16 +40,26 @@ type Props = {
   onActivityPress: (post: UserPost) => void;
   onBackdropPress: () => void;
   user: User;
+  navigation: any;
 };
 
 export const ActivityListOverLay = ({
-  activities,
+  activities = [],
   onActivityPress,
   visible,
   user,
   onBackdropPress,
+  navigation
 }: Props) => {
 
+  const handleNoActivityPress = () => {
+    navigation.navigate(UserStack.AddOrEditPost, {
+      post: { userFirstName: user.firstName,
+        userLastName: user.lastName,description: '', userID: user.id,  activityID: null},
+      toEdit: false,
+    });
+    onBackdropPress();
+  };
 
   return (
     <Overlay
@@ -63,6 +73,15 @@ export const ActivityListOverLay = ({
           <Text style={styles.header}>
             Vilken aktivitet vill du berätta om?
           </Text>
+          <TouchableOpacity
+            onPress={handleNoActivityPress}
+            style={styles.noActivityContainer}
+          >
+            <Text style={styles.noActivityText}>Ingen aktivitet</Text>
+          </TouchableOpacity>
+          <Text style={styles.header}>
+          Välj från dina aktiviteter.
+          </Text>
           {activities.map((activity, index) => (
             <TouchableOpacity
               onPress={() => onActivityPress(createPropsObject(activity, user))}
@@ -99,4 +118,15 @@ const styles = StyleSheet.create({
     width: "90%",
     maxHeight: "60%",
   },
+  noActivityContainer: {
+    marginBottom: 10,
+    backgroundColor: colors.background,
+    padding: 10,
+    borderRadius: 5,
+    alignItems: 'center',
+  },
+  noActivityText: {
+    ...typography.cardTitle,
+    color: colors.dark
+  },
 });