Feat/int testing mobile

frontend/occupi-mobile4/.eslintrc.js

@@ -1,4 +1,8 @@
 // https://docs.expo.dev/guides/using-eslint/
+// .estlint.js
 module.exports = {
   extends: 'expo',
-};
+  env: {
+    jest: true, // Add this line
+  },
+};

frontend/occupi-mobile4/__mocks__/expo-vector-icons.js

@@ -0,0 +1,9 @@
+// __mocks__/expo-vector-icons.js
+const mockIcon = () => 'Icon';
+// export const Feather = mockIcon;
+export const FontAwesome6 = mockIcon;
+export const Ionicons = mockIcon;
+// Add other icon sets as needed
+module.exports = {
+    FontAwesome6: 'FontAwesome6',
+  };

frontend/occupi-mobile4/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

frontend/occupi-mobile4/__mocks__/gluestack-ui-themed.js

@@ -0,0 +1,42 @@
+// __mocks__/gluestack-ui-themed.js
+
+import React from 'react';
+
+const mockComponent = (name) => {
+  return function(props) {
+    return React.createElement(name, props, props.children);
+  };
+};
+
+  module.exports = {
+    Box: mockComponent('Box'),
+    Center: mockComponent('Center'),
+    useToast: () => ({
+      show: jest.fn(),
+    }),
+    Text: mockComponent('Text'),
+    Button: mockComponent('Button'),
+    Input: mockComponent('Input'),
+    Icon: mockComponent('Icon'),
+    Image: mockComponent('Image'),
+    Spinner: mockComponent('Spinner'),
+    ScrollView: mockComponent('ScrollView'),
+    FlatList: mockComponent('FlatList'),
+
+  };
+
+  module.exports = {
+    Text: 'Text',
+    View: 'View',
+    Image: 'Image',
+    Card: 'Card',
+    Toast: 'Toast',
+    useToast: () => ({
+      show: jest.fn(),
+    }),
+    ToastTitle: 'ToastTitle',
+    Button: 'Button',
+    ButtonText: 'ButtonText',
+  };
+
+  export default mockComponent;

frontend/occupi-mobile4/__mocks__/imageMock.js

@@ -0,0 +1,2 @@
+// __mocks__/imageMock.js
+module.exports = 'test-file-stub';

frontend/occupi-mobile4/__mocks__/react-native-chart-kit.js

@@ -0,0 +1,3 @@
+module.exports = {
+    LineChart: 'LineChart',
+  };

frontend/occupi-mobile4/babel.config.js

@@ -1,6 +1,21 @@
-module.exports = function (api) {
+module.exports = function(api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      'babel-preset-expo',
+      '@babel/preset-env',
+      '@babel/preset-react',
+      '@babel/preset-flow',
+      '@babel/preset-typescript',
+    ],
+    plugins: [
+      '@babel/plugin-proposal-export-namespace-from',
+      '@babel/plugin-transform-react-jsx',
+      ["@babel/plugin-transform-class-properties", { "loose": true }],
+      ["@babel/plugin-transform-private-methods", { "loose": true }],
+      ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+      '@babel/plugin-transform-runtime',
+      'react-native-reanimated/plugin', // Add this if you're using reanimated
+    ],
   };
-};
+};

frontend/occupi-mobile4/components/GradientButton.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Heading } from '@gluestack-ui/themed';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 
-const GradientButton = ({ onPress, text }) => {
+const GradientButton = ({ onPress, text,testID }) => {
   return (
     <LinearGradient
       testID="gradient-button"

frontend/occupi-mobile4/components/ThemedText.tsx

@@ -1,5 +1,5 @@
-import { Text, type TextProps, StyleSheet } from 'react-native';
-
+import React from 'react';
+import { Text, TextProps, StyleSheet } from 'react-native';
 import { useThemeColor } from '@/hooks/useThemeColor';
 
 export type ThemedTextProps = TextProps & {

frontend/occupi-mobile4/components/__tests__/ThemedText-test.tsx

@@ -1,10 +1,14 @@
-import * as React from 'react';
+import React from 'react';
 import renderer from 'react-test-renderer';
-
 import { ThemedText } from '../ThemedText';
 
-it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+jest.mock('@/hooks/useThemeColor', () => ({
+  useThemeColor: jest.fn().mockReturnValue('#000000'),
+}));
 
-  expect(tree).toMatchSnapshot();
-});
+describe('ThemedText', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

frontend/occupi-mobile4/components/__tests__/__snapshots__/ThemedText-test.tsx.snap

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ThemedText renders correctly 1`] = `
+<div
+  className="css-text-146c3p1"
+  dir="auto"
+  style={
+    {
+      "color": "rgba(0,0,0,1.00)",
+      "fontSize": "16px",
+      "lineHeight": "24px",
+    }
+  }
+>
+  Snapshot test!
+</div>
+`;
+
 exports[`renders correctly 1`] = `
 <Text
   style={

frontend/occupi-mobile4/jest.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  preset: 'jest-expo',
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|react-native-modal-datetime-picker|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@gluestack-ui|expo-blur|expo-linear-gradient|expo-router|react-native-chart-kit|@ui-kitten/.*)'
+  ],
+  moduleNameMapper: {
+    '^react-native$': 'react-native-web',
+    '^@/(.*)$': '<rootDir>/$1',
+    '^react-native-chart-kit$': '<rootDir>/__mocks__/react-native-chart-kit.js',
+    '^@gluestack-ui/themed$': '<rootDir>/__mocks__/gluestack-ui-themed.js',
+    '^@expo/vector-icons$': '<rootDir>/__mocks__/expo-vector-icons.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/imageMock.js'
+  },
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  globals: {
+    'ts-jest': {
+      babelConfig: true,
+    },
+  },
+};

frontend/occupi-mobile4/jest.setup.js

@@ -0,0 +1,192 @@
+import 'react-native-gesture-handler/jestSetup';
+import '@testing-library/jest-native/extend-expect';
+jest.mock('@react-navigation/stack', () => {
+  return {
+    createStackNavigator: jest.fn(() => ({
+      Navigator: 'Navigator',
+      Screen: 'Screen',
+    })),
+  };
+});
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: jest.fn(),
+      goBack: jest.fn(),
+    }),
+  };
+});
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+  return {
+    ...RN,
+    NativeModules: {
+      ...RN.NativeModules,
+      SettingsManager: {
+        settings: { AppleLocale: 'en_US' },
+        get: jest.fn(),
+        set: jest.fn(),
+      },
+      StatusBarManager: {
+        getHeight: jest.fn(),
+      },
+    },
+    StyleSheet: {
+      ...RN.StyleSheet,
+      create: (styles) => styles,
+      hairlineWidth: 1,
+    },
+    Dimensions: {
+      get: jest.fn().mockImplementation((dim) => {
+        switch (dim) {
+          case 'window':
+            return { width: 360, height: 640, scale: 2, fontScale: 2 };
+          case 'screen':
+            return { width: 360, height: 640, scale: 2, fontScale: 2 };
+          default:
+            return { width: 360, height: 640, scale: 2, fontScale: 2 };
+        }
+      }),
+      set: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      screen: {
+        width: 360,
+        height: 640,
+        scale: 2,
+        fontScale: 2,
+      },
+      window: {
+        width: 360,
+        height: 640,
+        scale: 2,
+        fontScale: 2,
+      },
+    },
+    PixelRatio: {
+      get: jest.fn(() => 2),
+      getFontScale: jest.fn(() => 2),
+      getPixelSizeForLayoutSize: jest.fn((size) => size * 2),
+      roundToNearestPixel: jest.fn((size) => Math.round(size)),
+    },
+  };
+});
+
+jest.mock('react-native-gesture-handler', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    GestureHandlerRootView: View,
+    Swipeable: View,
+    DrawerLayout: View,
+    State: {},
+    ScrollView: View,
+    Slider: View,
+    Switch: View,
+    TextInput: View,
+    ToolbarAndroid: View,
+    ViewPagerAndroid: View,
+    DrawerLayoutAndroid: View,
+    WebView: View,
+    NativeViewGestureHandler: View,
+    TapGestureHandler: View,
+    FlingGestureHandler: View,
+    ForceTouchGestureHandler: View,
+    LongPressGestureHandler: View,
+    PanGestureHandler: View,
+    PinchGestureHandler: View,
+    RotationGestureHandler: View,
+    RawButton: View,
+    BaseButton: View,
+    RectButton: View,
+    BorderlessButton: View,
+    FlatList: View,
+    gestureHandlerRootHOC: jest.fn(),
+    Directions: {},
+  };
+});
+
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+  Reanimated.default.call = () => {};
+  return Reanimated;
+});
+
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+jest.mock('@expo/vector-icons', () => {
+  const React = require('react');
+  const PropTypes = require('prop-types');
+
+  const MockIcon = (props) => {
+    return React.createElement('svg', {
+      ...props,
+      children: props.children || 'icon',
+    });
+  };
+
+  MockIcon.propTypes = {
+    name: PropTypes.string,
+  };
+
+  return {
+    Ionicons: MockIcon,
+    Octicons: MockIcon,
+    Feather: MockIcon,
+    FontAwesome6: MockIcon,
+  };
+});
+
+jest.mock('react-native-safe-area-context', () => ({
+  SafeAreaProvider: ({ children }) => children,
+  useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
+}));
+
+jest.mock('expo-blur', () => {
+  const React = require('react');
+  const MockBlurView = (props) => {
+    return React.createElement('view', props, props.children);
+  };
+  return {
+    BlurView: MockBlurView,
+  };
+});
+
+jest.mock('react-native-responsive-screen', () => ({
+  widthPercentageToDP: jest.fn(),
+  heightPercentageToDP: jest.fn(),
+}));
+
+jest.mock('expo-router', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+jest.mock('@gluestack-ui/themed', () => ({
+  ...jest.requireActual('@gluestack-ui/themed'),
+  useToast: () => ({
+    show: jest.fn(),
+  }),
+}));
+
+jest.mock('@react-native-async-storage/async-storage', () => require('@react-native-async-storage/async-storage/jest/async-storage-mock'));
+jest.mock('expo-linear-gradient', () => ({
+  LinearGradient: 'LinearGradient',
+}));
+
+jest.mock('react-native/Libraries/Settings/Settings', () => ({
+  get: jest.fn(),
+  set: jest.fn(),
+}));
+
+jest.mock('react-native/Libraries/TurboModule/TurboModuleRegistry', () => ({
+  getEnforcing: jest.fn(() => ({
+    getConstants: () => ({}),
+    get: jest.fn(),
+    set: jest.fn(),
+  })),
+}));
+