Merge pull request #527 from bounswe/feature/MB-post-stock-connection…

…-and-graphics

Feature/mb post stock connection and graphics

mobile/__tests__/Community.test.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react-native';
+import Community from '../src/pages/Community';
+import { useAuth } from '../src/pages/context/AuthContext';
+import { NavigationContainer } from '@react-navigation/native';
+
+// Mock the useAuth hook
+jest.mock('../src/pages/context/AuthContext', () => ({
+    useAuth: jest.fn(),
+}));
+
+jest.mock('../src/pages/config/config', () => ({
+    default: { baseURL: 'http://localhost:3000' },
+}));
+
+global.fetch = jest.fn();
+
+const mockNavigation = {
+    navigate: jest.fn(),
+};
+
+describe('Community Component', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        useAuth.mockReturnValue({
+            userId: 1,
+            accessToken: 'mock-access-token',
+        });
+    });
+
+    test('renders correctly', () => {
+        const { getByTestId, getByPlaceholderText, getByText }  = render(
+            <NavigationContainer>
+                <Community navigation={mockNavigation} />
+            </NavigationContainer>
+        );
+
+        expect(getByText('Community')).toBeTruthy();
+        expect(getByText('Create A Post')).toBeTruthy();
+        expect(getByPlaceholderText('Search posts...')).toBeTruthy();
+    });
+
+    test('fetches posts and users on focus', async () => {
+        fetch.mockImplementationOnce(() =>
+            Promise.resolve({
+                ok: true,
+                json: () =>
+                    Promise.resolve([
+                        { id: 1, title: 'Test Post', author: 1, content: 'Test Content', tags: [], liked_by: [], comments: 0 },
+                    ]),
+            })
+        );
+
+        fetch.mockImplementationOnce(() =>
+            Promise.resolve({
+                ok: true,
+                json: () =>
+                    Promise.resolve([
+                        { id: 1, username: 'TestUser' },
+                    ]),
+            })
+        );
+
+        const { getByText } = render(
+            <NavigationContainer>
+                <Community navigation={mockNavigation} />
+            </NavigationContainer>
+        );
+
+        await waitFor(() => {
+            expect(getByText('Test Post')).toBeTruthy();
+            expect(getByText('Test Content')).toBeTruthy();
+        });
+    });
+
+    test('navigates to CreatePost screen when "Create A Post" is clicked', () => {
+        const { getByText } = render(
+            <NavigationContainer>
+                <Community navigation={mockNavigation} />
+            </NavigationContainer>
+        );
+
+        fireEvent.press(getByText('Create A Post'));
+
+        expect(mockNavigation.navigate).toHaveBeenCalledWith('CreatePost');
+    });
+
+    test('alerts and navigates to Login when user is not logged in and tries to create a post', () => {
+        useAuth.mockReturnValueOnce({
+            userId: null,
+            accessToken: null,
+        });
+
+        const { getByText } = render(
+            <NavigationContainer>
+                <Community navigation={mockNavigation} />
+            </NavigationContainer>
+        );
+
+        fireEvent.press(getByText('Create A Post'));
+
+        expect(mockNavigation.navigate).toHaveBeenCalledWith('Login&Register');
+    });
+
+    test('handles adding a comment correctly', async () => {
+        fetch.mockImplementationOnce(() =>
+            Promise.resolve({
+                ok: true,
+                json: () => Promise.resolve({}),
+            })
+        );
+
+        const { getByTestId, getByPlaceholderText, getByText } = render(
+            <NavigationContainer>
+                <Community navigation={mockNavigation} />
+            </NavigationContainer>
+        );
+
+
+        fireEvent.press(getByTestId('add-comment-button'));
+        fireEvent.changeText(getByPlaceholderText('Write a comment...'), 'This is a test comment');
+        fireEvent.press(getByText('Submit'));
+
+
+
+        await waitFor(() => {
+            expect(fetch).toHaveBeenCalledWith(
+                'http://localhost:3000/comments/',
+                expect.objectContaining({
+                    method: 'POST',
+                })
+            );
+        });
+    });
+});

mobile/__tests__/Login-test.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Login from '../src/pages/Login';
+import { AuthProvider } from '../src/pages/context/AuthContext';
 
 test('renders correctly', () => {
-  const tree = renderer.create(<Login />).toJSON();
+  const tree = renderer.create(
+    <AuthProvider>
+      <Login />
+    </AuthProvider>
+  ).toJSON();
   expect(tree).toMatchSnapshot();
-});
+});

mobile/__tests__/Login.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react-native';
 import Login from '../src/pages/Login';
 import { Alert } from 'react-native';
+import { AuthProvider } from '../src/pages/context/AuthContext'; 
 
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); // Mock Animated for RN
 
@@ -20,7 +21,11 @@ describe('Login Component', () => {
       json: jest.fn().mockResolvedValueOnce({ message: 'Invalid credentials' }),
     });
 
-    const { getByPlaceholderText, getByText } = render(<Login navigation={mockNavigation} />);
+    const { getByPlaceholderText, getByText } = render(
+      <AuthProvider>
+        <Login navigation={mockNavigation} />
+      </AuthProvider>
+    );
 
     fireEvent.changeText(getByPlaceholderText('Username'), 'wrongUser');
     fireEvent.changeText(getByPlaceholderText('Password'), 'wrongPass');
@@ -32,15 +37,11 @@ describe('Login Component', () => {
         headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json',
-          'X-CSRFToken': expect.any(String),
         },
         body: JSON.stringify({ username: 'wrongUser', password: 'wrongPass' }),
       });
     });
 
-    expect(Alert.alert).toHaveBeenCalledWith(
-      'Login Failed',
-      'Invalid credentials'
-    );
+    expect(Alert.alert).toHaveBeenCalledWith('Login Failed', 'Invalid credentials');
   });
 });

mobile/__tests__/Profile-test.js

@@ -1,8 +1,17 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Profile from '../src/pages/Profile';
+import Profile from '../src/pages/ProfilePage';
+
+// Mock the useAuth hook
+jest.mock('../src/pages/context/AuthContext', () => ({
+    useAuth: () => ({
+        username: 'testuser',
+        userId: '12345',
+        logout: jest.fn(),
+    }),
+}));
 
 test('renders correctly', () => {
-  const tree = renderer.create(<Profile />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    const tree = renderer.create(<Profile />).toJSON();
+    expect(tree).toMatchSnapshot();
+});

mobile/package.json

@@ -40,13 +40,14 @@
     "@react-native/eslint-config": "0.75.4",
     "@react-native/metro-config": "0.75.4",
     "@react-native/typescript-config": "0.75.4",
+    "@testing-library/react-native": "^12.9.0",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
-    "jest": "^29.6.3",
+    "jest": "^29.7.0",
     "prettier": "2.8.8",
-    "react-test-renderer": "18.3.1",
+    "react-test-renderer": "^18.3.1",
     "typescript": "5.0.4"
   },
   "engines": {

mobile/src/pages/App.js

@@ -198,7 +198,7 @@ const App = () => {
 const styles = StyleSheet.create({
   customHeader: {
     height: 60,
-    backgroundColor: '#0077B6',
+    backgroundColor: '#007BFF',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',

mobile/src/pages/Community.js

@@ -175,8 +175,13 @@ const Community = ({navigation}) => {
                 <TouchableOpacity style={styles.actionButton}>
                     <Text>👍 {post.liked_by.length}</Text>
                 </TouchableOpacity>
-                <TouchableOpacity style={styles.actionButton} onPress={handleAddCommentButton}>
-                    <Text>💬 {post.comments}</Text>
+                <TouchableOpacity 
+                    style={styles.actionButton} 
+                    onPress={handleAddCommentButton} 
+                    accessibilityLabel="Add Comment Button"
+                    testID="add-comment-button"
+                >
+                    <Text>💬</Text>
                 </TouchableOpacity>
                 <TouchableOpacity 
                     style={styles.viewPostButton}