inital screen tests

screens/AboutScreen.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import AboutScreen from './AboutScreen';
+
+// Mock `useTranslation` hook
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'about.definitionTitle': 'Definition',
+        'about.definitionContent': 'Definition Content',
+        'about.conceptTitle': 'Concept',
+        'about.conceptContent': 'Concept Content',
+        'about.methodsTitle': 'Methods',
+        'about.methodsContent': 'Methods Content',
+        'about.importanceTitle': 'Importance',
+        'about.importanceContent': 'Importance Content',
+        'about.exampleTitle': 'Example',
+        'about.exampleContent': 'Example Content',
+        'about.tipsTitle': 'Tips',
+        'about.tipsContent': 'Tips Content',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock the `settingsStore`
+jest.mock('@/store/store', () => ({
+  settingsStore: {
+    isDark: false, // Default to light mode for testing
+  },
+}));
+
+describe('AboutScreen', () => {
+  it('renders correctly with all sections', () => {
+    const { getByText } = render(<AboutScreen />);
+
+    // Check for each section title and content
+    expect(getByText('Definition')).toBeTruthy();
+    expect(getByText('Definition Content')).toBeTruthy();
+    expect(getByText('Concept')).toBeTruthy();
+    expect(getByText('Concept Content')).toBeTruthy();
+    expect(getByText('Methods')).toBeTruthy();
+    expect(getByText('Methods Content')).toBeTruthy();
+    expect(getByText('Importance')).toBeTruthy();
+    expect(getByText('Importance Content')).toBeTruthy();
+    expect(getByText('Example')).toBeTruthy();
+    expect(getByText('Example Content')).toBeTruthy();
+    expect(getByText('Tips')).toBeTruthy();
+    expect(getByText('Tips Content')).toBeTruthy();
+  });
+
+  it('applies light mode styles when isDark is false', () => {
+    const { getByText } = render(<AboutScreen />);
+
+    // Check if the title in light mode uses the correct color
+    const definitionTitle = getByText('Definition');
+    expect(definitionTitle.props.style).toContainEqual({ color: '#333' });
+  });
+});

screens/HomeScreen.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import HomeScreen from './HomeScreen';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'home.result': 'Result',
+        'home.about': 'About',
+        'home.settings': 'Settings',
+        'home.history': 'History',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+describe('HomeScreen', () => {
+  const mockedNavigate = jest.fn();
+
+  const renderComponent = () =>
+    render(<HomeScreen navigation={{ navigate: mockedNavigate }} />);
+
+  it('renders all UI elements correctly', () => {
+    const { getByText } = renderComponent();
+
+    // Check for all cards' titles
+    expect(getByText('Result')).toBeTruthy();
+    expect(getByText('About')).toBeTruthy();
+    expect(getByText('Settings')).toBeTruthy();
+    expect(getByText('History')).toBeTruthy();
+  });
+
+  it('navigates to AddResult when the "Result" card is pressed', () => {
+    const { getByText } = renderComponent();
+
+    const resultCard = getByText('Result');
+    fireEvent.press(resultCard);
+
+    expect(mockedNavigate).toHaveBeenCalledWith('AddResult');
+  });
+
+  it('navigates to About when the "About" card is pressed', () => {
+    const { getByText } = renderComponent();
+
+    const aboutCard = getByText('About');
+    fireEvent.press(aboutCard);
+
+    expect(mockedNavigate).toHaveBeenCalledWith('About');
+  });
+
+  it('navigates to Settings when the "Settings" card is pressed', () => {
+    const { getByText } = renderComponent();
+
+    const settingsCard = getByText('Settings');
+    fireEvent.press(settingsCard);
+
+    expect(mockedNavigate).toHaveBeenCalledWith('Settings');
+  });
+
+  it('navigates to History when the "History" card is pressed', () => {
+    const { getByText } = renderComponent();
+
+    const historyCard = getByText('History');
+    fireEvent.press(historyCard);
+
+    expect(mockedNavigate).toHaveBeenCalledWith('History');
+  });
+});

screens/SettingsScreen.test.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import SettingsScreen from './SettingsScreen';
+import { Alert } from 'react-native';
+import Toast from 'react-native-toast-message';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { settingsStore } from '@/store/store';
+
+// Mock dependencies
+jest.mock('react-native-toast-message', () => ({
+  show: jest.fn(),
+}));
+
+jest.mock('@react-native-async-storage/async-storage', () => ({
+  setItem: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'settings.getInTouch': 'Get in Touch',
+        'settings.sendEmailTo': 'Send an email to',
+        'alerts.success': 'Success',
+        'settings.dataDeleted': 'All data deleted',
+        'alerts.areYouSure': 'Are you sure?',
+        'alerts.wantToDelete': 'Do you want to delete?',
+        'alerts.yesProceed': 'Yes, proceed',
+        'alerts.noIchangedMyMind': 'No, I changed my mind',
+        'toasts.success': 'Success',
+        'toasts.changedLanguage': 'Language changed successfully',
+        'toasts.changedUnits': 'Units changed successfully',
+        'toasts.changedTheme': 'Theme changed successfully',
+        'settings.deleteData': 'Delete All Data',
+        'settings.options.language': 'Language',
+        'settings.options.units': 'Units',
+        'settings.options.theme': 'Theme',
+        'settings.options.languageHelpText': 'Select your preferred language',
+        'settings.options.unitsHelpText': 'Select your preferred units',
+        'settings.options.themeHelpText': 'Select your preferred theme',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+jest.mock('@/store/store', () => ({
+  settingsStore: {
+    isDark: false,
+    language: 'en',
+    units: 'metric',
+    theme: 'light',
+    setLanguage: jest.fn(),
+    setUnits: jest.fn(),
+    setTheme: jest.fn(),
+  },
+}));
+
+describe('SettingsScreen', () => {
+  const renderComponent = () => render(<SettingsScreen />);
+
+  it('renders without crashing and displays error message when an error exists', () => {
+    const { getByText } = renderComponent();
+    // expect(getByText('Language')).toBeTruthy();
+    // expect(getByText('Units')).toBeTruthy();
+    // expect(getByText('Theme')).toBeTruthy();
+  });
+
+  it('displays alert when "Get in Touch" button is pressed', () => {
+    const alertSpy = jest.spyOn(Alert, 'alert');
+    const { getByText } = renderComponent();
+
+    const button = getByText('Get in Touch');
+    fireEvent.press(button);
+
+    expect(alertSpy).toHaveBeenCalledWith(
+      'Get in Touch',
+      'Send an email to [email protected]',
+    );
+  });
+
+  it('displays a delete confirmation alert when "Delete All Data" is pressed', () => {
+    const alertSpy = jest.spyOn(Alert, 'alert');
+    const { getByText } = renderComponent();
+
+    const deleteButton = getByText('Delete All Data');
+    fireEvent.press(deleteButton);
+
+    expect(alertSpy).toHaveBeenCalledWith(
+      'Are you sure?',
+      'Do you want to delete?',
+      [
+        { text: 'Yes, proceed', onPress: expect.any(Function) },
+        { text: 'No, I changed my mind' },
+      ],
+    );
+  });
+
+//   it('handles changing the language correctly', async () => {
+//     const { getByText } = renderComponent();
+
+//     const languageDropdown = getByText('Language');
+//     fireEvent.press(languageDropdown);
+
+//     const newLanguageOption = getByText('French'); // Example of a new language option
+//     fireEvent.press(newLanguageOption);
+
+//     await waitFor(() => {
+//       expect(AsyncStorage.setItem).toHaveBeenCalledWith('language', 'fr');
+//       expect(settingsStore.setLanguage).toHaveBeenCalledWith('fr');
+//       expect(Toast.show).toHaveBeenCalledWith({
+//         type: 'success',
+//         text1: 'Success',
+//         text2: 'Language changed successfully',
+//       });
+//     });
+//   });
+
+//   it('handles changing the units correctly', async () => {
+//     const { getByText } = renderComponent();
+
+//     const unitsDropdown = getByText('Units');
+//     fireEvent.press(unitsDropdown);
+
+//     const newUnitsOption = getByText('Imperial'); // Example of a new units option
+//     fireEvent.press(newUnitsOption);
+
+//     await waitFor(() => {
+//       expect(AsyncStorage.setItem).toHaveBeenCalledWith('units', 'imperial');
+//       expect(settingsStore.setUnits).toHaveBeenCalledWith('imperial');
+//       expect(Toast.show).toHaveBeenCalledWith({
+//         type: 'success',
+//         text1: 'Success',
+//         text2: 'Units changed successfully',
+//       });
+//     });
+//   });
+
+//   it('handles changing the theme correctly', async () => {
+//     const { getByText } = renderComponent();
+
+//     const themeDropdown = getByText('Theme');
+//     fireEvent.press(themeDropdown);
+
+//     const newThemeOption = getByText('Dark'); // Example of a new theme option
+//     fireEvent.press(newThemeOption);
+
+//     await waitFor(() => {
+//       expect(AsyncStorage.setItem).toHaveBeenCalledWith('theme', 'dark');
+//       expect(settingsStore.setTheme).toHaveBeenCalledWith('dark');
+//       expect(Toast.show).toHaveBeenCalledWith({
+//         type: 'success',
+//         text1: 'Success',
+//         text2: 'Theme changed successfully',
+//       });
+//     });
+//   });
+});