Library Page Tests

__tests__/Library.test.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react-native';
+import Library from '../lib/screens/Library';
+import { useTheme } from '../lib/components/ThemeProvider';
+import ApiService from '../lib/utils/api_calls';
+import ToastMessage from 'react-native-toast-message';
+import { onAuthStateChanged } from 'firebase/auth';
+import configureStore from 'redux-mock-store';
+import { AddNoteProvider } from '../lib/context/AddNoteContext';
+import moxios from 'moxios'
+
+
+jest.mock('firebase/database', () => ({
+    getDatabase: jest.fn(),
+  }));
+
+  jest.mock('firebase/auth', () => ({
+    getAuth: jest.fn(),
+    initializeAuth: jest.fn(),
+    getReactNativePersistence: jest.fn(),
+    onAuthStateChanged: jest.fn(),
+  }));
+
+  jest.mock('expo-font', () => ({
+    loadAsync: jest.fn(() => Promise.resolve()),
+    isLoaded: jest.fn(() => true),
+  }));
+
+  jest.mock('react-native/Libraries/Image/Image', () => ({
+    ...jest.requireActual('react-native/Libraries/Image/Image'),
+    resolveAssetSource: jest.fn(() => ({ uri: 'mocked-asset-uri' })),
+  }));
+
+  jest.mock('react-native/Libraries/Settings/NativeSettingsManager', () => ({
+    settings: {},
+    setValues: jest.fn(),
+    getConstants: jest.fn(() => ({
+      settings: {},
+    })),
+  }));
+
+  //mock carousel
+  jest.mock('react-native-reanimated-carousel', () => {
+    const React = require('react');
+    const { View } = require('react-native');
+    return (props) => <View>{props.children}</View>;
+  });
+
+  const mockStore = configureStore([]);
+  const store = mockStore({
+    navigation: {
+      navState: 'more',
+    },
+    theme: {
+      darkMode: false,
+    },
+  });
+
+  const mockToggleDarkmode = jest.fn();
+
+  jest.mock('../lib/components/ThemeProvider', () => ({
+    useTheme: jest.fn(() => ({
+      theme: {
+        primaryColor: '#ffffff',
+        text: '#000000',
+        secondaryColor: '#f0f0f0',
+        logout: '#ff0000',
+        logoutText: '#ffffff',
+      },
+      isDarkmode: false,
+      toggleDarkmode: mockToggleDarkmode,
+    })),
+  }));
+
+  // Mock expo-location module with TypeScript type support
+  jest.mock('expo-location', () => ({
+    getForegroundPermissionsAsync: jest.fn(),
+    requestForegroundPermissionsAsync: jest.fn(),
+    getCurrentPositionAsync: jest.fn(),
+  }));
+
+
+// Silence console warnings during the test
+beforeEach(() => {
+    jest.clearAllMocks();
+
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+    moxios.install()
+  });
+
+  afterEach(() => {
+    moxios.uninstall()
+  });
+
+describe('Library Component', () => {
+  it('renders without crashing', async () => {
+    const navigationMock = {
+        navigate: jest.fn(),
+        goBack: jest.fn(),
+        push: jest.fn(),
+      };    
+    const routeMock = { params: {} }; // Mock route prop
+    const { getByTestId } = render(
+            <Library navigation={navigationMock as any} route={routeMock as any} /> 
+    );
+    await waitFor(() => expect(getByTestId('Library')).toBeTruthy());
+  });
+
+
+  it('renders search bar', async () => {
+    const navigationMock = {
+        navigate: jest.fn(),
+        goBack: jest.fn(),
+        push: jest.fn(),
+      };    
+    const routeMock = { params: {} }; // Mock route prop
+    const { getByTestId } = render(
+            <Library navigation={navigationMock as any} route={routeMock as any} /> 
+    );
+    await waitFor(() => expect(getByTestId('SearchBar')).toBeTruthy());
+  });
+
+  it('renders filter bar', async () => {
+    const navigationMock = {
+        navigate: jest.fn(),
+        goBack: jest.fn(),
+        push: jest.fn(),
+      };    
+    const routeMock = { params: {} }; // Mock route prop
+    const { getByTestId } = render(
+            <Library navigation={navigationMock as any} route={routeMock as any} /> 
+    );
+    await waitFor(() => expect(getByTestId('Filter')).toBeTruthy());
+  });
+
+});

lib/screens/Library.tsx

@@ -60,7 +60,6 @@ const Library = ({ navigation, route }) => {
   const [isModalVisible, setModalVisible] = useState(false);
   const [userName, setUserName] = useState('')
   const { theme, isDarkmode } = useTheme();
-  const { setNavigateToAddNote } = useAddNoteContext();
   const [isSearchVisible, setIsSearchVisible] = useState(false);
   const [isSortOpened, setIsSortOpened] = useState(false);
   const [selectedSortOption, setSelectedSortOption] = useState(1);
@@ -289,7 +288,7 @@ const Library = ({ navigation, route }) => {
   }
 
   return (
-    <View style={{ flex: 1, backgroundColor: isDarkmode ? 'black' : '#e4e4e4' }}>
+    <View testID = "Library" style={{ flex: 1, backgroundColor: isDarkmode ? 'black' : '#e4e4e4' }}>
       <StatusBar translucent backgroundColor="transparent" />
       <View style={styles(theme, width).container}>
         <View style={styles(theme, width).topView}>
@@ -327,7 +326,7 @@ const Library = ({ navigation, route }) => {
 
         </View>
 
-        <View style={[styles(theme, width).toolContainer, { marginHorizontal: 20 }]}>
+        <View testID= "Filter" style={[styles(theme, width).toolContainer, { marginHorizontal: 20 }]}>
           {
             !isSearchVisible && (
               <View>
@@ -347,7 +346,7 @@ const Library = ({ navigation, route }) => {
               </View>
             )
           }
-          <View style={[styles(theme, width).searchParentContainer, { width: isSearchVisible ? '95%' : 40 }]}>
+          <View testID="SearchBar" style={[styles(theme, width).searchParentContainer, { width: isSearchVisible ? '95%' : 40 }]}>
 
             {/* Search Container */}
             {isSearchVisible && (