a couple of basic jest tests

fourhtyoz · Jan 25, 2025 · 071bd59 · 071bd59
1 parent 350c5e1
commit 071bd59
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 5 deletions.
diff --git a/components/buttons/Button.tsx b/components/buttons/Button.tsx
@@ -13,6 +13,7 @@ type Props = {
     pressedBorderColor?: string,
     textColor?: string,
     pressedTextColor?: string,
+    testID?: string
 }
 
 
@@ -26,10 +27,12 @@ export default function Button({
     pressedBorderColor = COLORS.blackTransparentBorder,
     textColor = COLORS.white,
     pressedTextColor  = COLORS.black,
+    testID = '',
 } : Props) {
 
     return (
         <Pressable 
+            testID={testID}
             onPress={onPress}
             disabled={disabled}
             style={({ pressed }) => [

diff --git a/screens/AddExerciseScreen.test.tsx b/screens/AddExerciseScreen.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import AddExerciseScreen from './AddExerciseScreen'
+
+jest.mock('mobx-react-lite', () => ({
+  observer: jest.fn((component) => component),
+}));
+
+jest.mock('react-native-toast-message', () => ({
+  show: jest.fn(),
+}));
+
+// Mock external dependencies
+jest.mock('../services/db', () => ({
+  addExercise: jest.fn(),
+}));
+
+describe('<AddExerciseScreen />', () => {
+  let navigation: any;
+
+  beforeEach(() => {
+    navigation = { navigate: jest.fn() };
+  });
+
+  it('renders correctly', () => {
+    const { getByTestId } = render(<AddExerciseScreen navigation={navigation} route={navigation.route} />);
+    expect(getByTestId('result-muscle')).toBeTruthy();
+    expect(getByTestId('result-title')).toBeTruthy();
+    expect(getByTestId('result-createExercise')).toBeTruthy();
+  });
+
+  it('disables the save button when fields are empty', () => {
+    const { getByTestId } = render(<AddExerciseScreen navigation={navigation} route={navigation.route} />);
+    const saveButton = getByTestId('result-createExercise');
+    expect(saveButton.props.accessibilityState.disabled).toBe(true);
+  });
+
+});
diff --git a/screens/AddExerciseScreen.tsx b/screens/AddExerciseScreen.tsx
@@ -73,7 +73,7 @@ const AddExerciseScreen = observer(({ navigation }: Props) => {
         <SafeAreaView style={globalStyles.wrapper}>
             {error && <View style={{ marginTop: 25 }}><ErrorMessage message={error} setError={setError} /></View>}
              <View style={globalStyles.itemWrapper}>
-                <Text style={[globalStyles.inputLabel, { color: settingsStore.isDark ? COLORS.textDarkScreen : COLORS.black }]}>{t('result.options.muscle')}:</Text>
+                <Text testID='result-muscle' style={[globalStyles.inputLabel, { color: settingsStore.isDark ? COLORS.textDarkScreen : COLORS.black }]}>{t('result.options.muscle')}:</Text>
                 <SelectDropdown
                     data={MUSCLES}
                     onSelect={(selectedItem, _) => setMuscleGroup(selectedItem.title)}
@@ -102,7 +102,7 @@ const AddExerciseScreen = observer(({ navigation }: Props) => {
                 />
             </View>
             <View style={globalStyles.itemWrapper}>
-                <Text style={[globalStyles.inputLabel, { color: settingsStore.isDark ? COLORS.textDarkScreen : COLORS.black }]}>{t('result.options.title')}:</Text>
+                <Text testID='result-title' style={[globalStyles.inputLabel, { color: settingsStore.isDark ? COLORS.textDarkScreen : COLORS.black }]}>{t('result.options.title')}:</Text>
                 <TextInput 
                     onChangeText={(value) => handleChangeTitle(value)}
                     defaultValue={title}
@@ -112,6 +112,7 @@ const AddExerciseScreen = observer(({ navigation }: Props) => {
                 />
             </View>
             <Button 
+                testID='result-createExercise'
                 onPress={handleCreateExercise} 
                 text={t('result.options.createExercise')}
                 pressedBgColor={COLORS.orange}

diff --git a/screens/EditResultScreen.test.tsx b/screens/EditResultScreen.test.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react-native';
+import EditResultScreen from './EditResultScreen';
+import { Alert } from 'react-native';
+
+// Mocking modules
+jest.mock('../services/db', () => ({
+  updateResult: jest.fn(),
+}));
+
+jest.mock('../services/db', () => ({
+  fetchExercises: jest.fn(() => Promise.resolve([{ title: 'Squats', type: 'Legs' }])),
+}));
+
+jest.mock('react-native-toast-message', () => ({
+  Toast: {
+    show: jest.fn(),
+  },
+}));
+
+jest.spyOn(Alert, 'alert');
+
+describe('EditResultScreen', () => {
+  const mockNavigation = { navigate: jest.fn() };
+  const mockRoute = {
+    params: {
+      id: '1',
+      date: new Date().toISOString(),
+      exercise: 'Squats',
+      muscleGroup: 'Legs',
+      reps: 10,
+      weight: 50,
+      units: 'kg',
+    },
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly and fetches exercises', async () => {
+    const { findByText } = render(
+      <EditResultScreen navigation={mockNavigation} route={mockRoute} />
+    );
+
+    expect(await findByText('Legs')).toBeTruthy(); // Muscle group dropdown
+    expect(await findByText('Squats')).toBeTruthy(); // Exercise dropdown
+    expect(await findByText('kg')).toBeTruthy(); // Exercise dropdown
+  });
+
+  it('displays an error for invalid reps input', async () => {
+    const { getByTestId, getByText } = render(
+      <EditResultScreen navigation={mockNavigation} route={mockRoute} />
+    );
+
+    await waitFor(() => {
+        const repsInput = getByTestId('input-reps')
+        expect(repsInput).toBeTruthy()
+    })
+
+    act(() => {
+        fireEvent.changeText(getByTestId('input-reps'), '-5')
+
+    })
+
+    await waitFor(() => {
+      expect(getByText('Error: Repetitions must be greater than 0')).toBeTruthy();
+    });
+  });
+
+  it('displays an error for invalid weight input', async () => {
+    const { getByTestId, getByText } = render(
+      <EditResultScreen navigation={mockNavigation} route={mockRoute} />
+    );
+
+    await waitFor(() => {
+        const weightInput = getByTestId('input-weight')
+        expect(weightInput).toBeTruthy()
+    })
+
+    act(() => {
+        fireEvent.changeText(getByTestId('input-weight'), 'abc');
+    })
+
+    await waitFor(() => {
+      expect(getByText('Error: Weight must be a number')).toBeTruthy();
+    });
+  });
+});
diff --git a/screens/EditResultScreen.tsx b/screens/EditResultScreen.tsx
@@ -21,7 +21,6 @@ import Loader from '@/components/Loader';
 
 
 const EditResultScreen = observer(({ navigation, route }: any) => {
-
     const [exercises, setExercises] = useState<Exercise[]>([])
     const [newDate, setNewDate] = useState(new Date())
     const [newGroup, setNewGroup] = useState<any>(null)
@@ -206,7 +205,8 @@ const EditResultScreen = observer(({ navigation, route }: any) => {
             </View>
             <View style={globalStyles.itemWrapper}>
                 <Text style={[globalStyles.inputLabel, { color: settingsStore.isDark ? COLORS.textDarkScreen : COLORS.black }]}>{t('result.options.weight')}:</Text>
-                <TextInput 
+                <TextInput
+                    testID='input-weight' 
                     style={[globalStyles.inputWithOption, { color: settingsStore.isDark ? COLORS.textDarkScreen : COLORS.black, borderColor: settingsStore.isDark ? COLORS.orange : COLORS.gray }]}
                     value={`${newWeight}`}
                     placeholder={t('result.options.whatWeight')}
@@ -234,7 +234,8 @@ const EditResultScreen = observer(({ navigation, route }: any) => {
             </View>
             <View style={globalStyles.itemWrapper}>
                 <Text style={[globalStyles.inputLabel, { color: settingsStore.isDark ? COLORS.textDarkScreen : COLORS.black }]}>{t('result.options.reps')}:</Text>
-                <TextInput 
+                <TextInput
+                    testID='input-reps' 
                     style={[globalStyles.input, { color: settingsStore.isDark ? COLORS.textDarkScreen : COLORS.black, borderColor: settingsStore.isDark ? COLORS.orange : COLORS.gray }]}
                     value={`${newReps}`}
                     placeholder={t('result.options.howManyReps')}