[workflow/test] Working on test cases

Author: dheeraj1429

package.json

@@ -10,16 +10,11 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "@hookform/resolvers": "^5.1.1",
-    "@testing-library/react-native": "^12.9.0",
     "lodash": "^4.17.21",
     "react": "18.3.1",
-    "react-hook-form": "^7.58.0",
     "react-native": "0.76.3",
-    "react-native-phone-number-input": "^2.1.0",
     "react-native-vector-icons": "^10.2.0",
-    "use-context-selector": "^2.0.0",
-    "yup": "^1.6.1"
+    "use-context-selector": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -43,7 +38,8 @@
     "jest": "^29.6.3",
     "prettier": "2.8.8",
     "react-test-renderer": "18.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "@testing-library/react-native": "^12.9.0"
   },
   "engines": {
     "node": ">=18"

src/packages/react-native-material-elements/__test__/InputLabel.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { gray, InputLabel } from '../src';
+import { fireEvent, render } from './test-utils';
+
+describe('InputLabel', () => {
+  it('updates textLayoutRect state when onLayout is called', () => {
+    const { getByText } = render(<InputLabel placeholder="Test Label" labelAnimatedValue={new Animated.Value(0)} />);
+
+    const textElement = getByText('Test Label');
+
+    fireEvent(textElement, 'layout', {
+      nativeEvent: {
+        layout: {
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 20,
+        },
+      },
+    });
+
+    expect(textElement.props.style).toEqual({ color: gray[800], fontSize: 14 });
+  });
+});

src/packages/react-native-material-elements/__test__/OtpInput.test.tsx

@@ -5,6 +5,8 @@ import { fireEvent, render } from './test-utils';
 describe('OTP Component', () => {
   const mockOtpInputTestId = 'mock-otp-input-test-id';
 
+  const mockOnChange = jest.fn();
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -25,7 +27,6 @@ describe('OTP Component', () => {
   });
 
   it('calls onChange with the correct OTP value', () => {
-    const mockOnChange = jest.fn();
     const { getByTestId } = render(<OTPInput length={3} onChange={mockOnChange} />);
 
     const firstInput = getByTestId('otp-input-0');
@@ -111,4 +112,49 @@ describe('OTP Component', () => {
     expect(thirdInput).toBeDefined();
     expect(thirdInput.props.value).toEqual('3');
   });
+
+  it('ignores text input when length > 1', () => {
+    const { getByTestId } = render(<OTPInput length={4} onChange={mockOnChange} />);
+    const firstInput = getByTestId('otp-input-0');
+
+    fireEvent.changeText(firstInput, '12');
+
+    expect(mockOnChange).not.toHaveBeenCalled();
+    expect(firstInput.props.value).toBe('');
+  });
+
+  it('calls onChange when a single character is entered', () => {
+    const { getByTestId } = render(<OTPInput length={4} onChange={mockOnChange} />);
+    const firstInput = getByTestId('otp-input-0');
+
+    fireEvent.changeText(firstInput, '1');
+
+    expect(mockOnChange).toHaveBeenCalledWith('1');
+    expect(firstInput.props.value).toBe('1');
+  });
+
+  it('throws error when defaultValue length > OTP length', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation();
+    expect(() => render(<OTPInput length={3} defaultValue="12345" />)).toThrow(
+      'Default value must be equal or less then otp length',
+    );
+    spy.mockRestore();
+  });
+
+  it('applies defaultValue when valid', () => {
+    const { getByTestId } = render(<OTPInput length={4} defaultValue="12" />);
+    expect(getByTestId('otp-input-0').props.value).toBe('1');
+    expect(getByTestId('otp-input-1').props.value).toBe('2');
+    expect(getByTestId('otp-input-2').props.value).toBe('');
+    expect(getByTestId('otp-input-3').props.value).toBe('');
+  });
+
+  it('focus handler is called on focus event', () => {
+    const { getByTestId } = render(<OTPInput length={4} />);
+    const secondInput = getByTestId('otp-input-1');
+
+    fireEvent(secondInput, 'focus');
+
+    expect(secondInput.props.selectTextOnFocus).toBe(true);
+  });
 });

src/packages/react-native-material-elements/__test__/SegmentedControl.test.tsx

@@ -0,0 +1,89 @@
+import { SegmentedControl } from '../src';
+import { SegmentedControlContainer } from '../src/components/SegmentedControl/SegmentedControlContainer';
+import { SegmentedControlItem } from '../src/components/SegmentedControl/SegmentedControlItem';
+import { fireEvent, render } from './test-utils';
+
+describe('SegmentedControl component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { toJSON } = render(<SegmentedControl data={['']} selectedIndex={0} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('SegmentedControlContainer component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { toJSON } = render(<SegmentedControlContainer />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('SegmentedControlItem component', () => {
+  const mockTestId = 'segmented-item-test-id';
+
+  const mockOnPress = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { toJSON } = render(<SegmentedControlItem data={''} index={0} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render the data when data passed as string', () => {
+    const { getByText } = render(<SegmentedControlItem data={'First'} index={0} />);
+
+    const text = getByText('First');
+    expect(text).toBeDefined();
+  });
+
+  it('should render the data when data passed as number', () => {
+    const { getByText } = render(<SegmentedControlItem data={1000} index={0} />);
+
+    const text = getByText('1000');
+    expect(text).toBeDefined();
+  });
+
+  it('should called the onPress function when click on the SegmentedControlItem', () => {
+    const { getByTestId } = render(<SegmentedControlItem data={''} testID={mockTestId} index={0} onPress={mockOnPress} />);
+
+    const item = getByTestId(mockTestId);
+
+    fireEvent(item, 'press', { nativeEvent: {} });
+
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should called the onPress function with string data when click on the SegmentedControlItem', () => {
+    const { getByTestId } = render(<SegmentedControlItem data={'data'} testID={mockTestId} index={0} onPress={mockOnPress} />);
+
+    const item = getByTestId(mockTestId);
+
+    fireEvent(item, 'press', { nativeEvent: {} });
+
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+    expect(mockOnPress).toHaveBeenCalledWith('data', 0);
+  });
+
+  it('should called the onPress function with object data when click on the SegmentedControlItem', () => {
+    const { getByTestId } = render(
+      <SegmentedControlItem data={{ title: 'label' }} testID={mockTestId} index={0} onPress={mockOnPress} />,
+    );
+
+    const item = getByTestId(mockTestId);
+
+    fireEvent(item, 'press', { nativeEvent: {} });
+
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+    expect(mockOnPress).toHaveBeenCalledWith({ title: 'label' }, 0);
+  });
+});

src/packages/react-native-material-elements/__test__/Skeleton.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { gray, Skeleton } from '../src';
+import { render } from './test-utils';
+
+describe('Skeleton component', () => {
+  let colorSchemeSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    colorSchemeSpy = jest.spyOn(require('react-native'), 'useColorScheme');
+  });
+
+  afterEach(() => {
+    colorSchemeSpy.mockRestore();
+  });
+
+  it('renders with default background in light mode', () => {
+    colorSchemeSpy.mockReturnValue('light');
+    const { getByTestId } = render(<Skeleton testID="skeleton" />);
+    const skeleton = getByTestId('skeleton');
+    expect(skeleton.props.style.backgroundColor).toBe(gray[400]);
+  });
+
+  it('renders with default background in dark mode', () => {
+    colorSchemeSpy.mockReturnValue('dark');
+    const { getByTestId } = render(<Skeleton testID="skeleton" />);
+    const skeleton = getByTestId('skeleton');
+    expect(skeleton.props.style.backgroundColor).toBe(gray[800]);
+  });
+
+  it('uses the custom backgroundColor when provided', () => {
+    colorSchemeSpy.mockReturnValue('light');
+    const { getByTestId } = render(<Skeleton testID="skeleton" backgroundColor="red" />);
+    const skeleton = getByTestId('skeleton');
+    expect(skeleton.props.style.backgroundColor).toBe('red');
+  });
+
+  it('starts shimmer animation on mount', () => {
+    const loopSpy = jest.spyOn(Animated, 'loop');
+    render(<Skeleton testID="skeleton" />);
+    expect(loopSpy).toHaveBeenCalled();
+  });
+});

src/packages/react-native-material-elements/__test__/Snackbar.test.tsx

@@ -1,11 +1,17 @@
 import { DeviceEventEmitter } from 'react-native';
-import { HIDE_SNACK_BAR_MESSAGE, SHOW_SNACK_BAR_MESSAGE, snackbar, SnackbarProperties } from '../src';
+import { HIDE_SNACK_BAR_MESSAGE, SHOW_SNACK_BAR_MESSAGE, Snackbar, snackbar, SnackbarProperties } from '../src';
+import { render } from './test-utils';
 
 describe('snackbar utils', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
+  it('should render with default props', () => {
+    const { toJSON } = render(<Snackbar />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   it('should called the snack bar show method with config', () => {
     snackbar.show({} as any);
     expect(DeviceEventEmitter.emit).toHaveBeenCalled();

src/packages/react-native-material-elements/__test__/Switch.test.tsx

@@ -1,15 +1,28 @@
 import React from 'react';
+import { View } from 'react-native';
 import {
+  getSwitchSizes,
   Switch,
+  SWITCH_CONTAINER_ANDROID_MODE_HEIGHT_LARGE,
+  SWITCH_CONTAINER_ANDROID_MODE_HEIGHT_MEDIUM,
+  SWITCH_CONTAINER_ANDROID_MODE_HEIGHT_SMALL,
+  SWITCH_CONTAINER_ANDROID_MODE_WIDTH_LARGE,
+  SWITCH_CONTAINER_ANDROID_MODE_WIDTH_MEDIUM,
+  SWITCH_CONTAINER_ANDROID_MODE_WIDTH_SMALL,
   SWITCH_CONTAINER_HEIGHT_LARGE,
   SWITCH_CONTAINER_HEIGHT_MEDIUM,
   SWITCH_CONTAINER_HEIGHT_SMALL,
   SWITCH_CONTAINER_WIDTH_LARGE,
   SWITCH_CONTAINER_WIDTH_MEDIUM,
   SWITCH_CONTAINER_WIDTH_SMALL,
+  SWITCH_THUMB_HEIGHT_LARGE,
+  SWITCH_THUMB_HEIGHT_MEDIUM,
+  SWITCH_THUMB_HEIGHT_SMALL,
+  SWITCH_THUMB_WIDTH_LARGE,
+  SWITCH_THUMB_WIDTH_MEDIUM,
+  SWITCH_THUMB_WIDTH_SMALL,
 } from '../src';
 import { fireEvent, render, waitFor } from './test-utils';
-import { View } from 'react-native';
 
 describe('Switch Component', () => {
   const switchMockTestId = 'switch-test-id';
@@ -73,3 +86,56 @@ describe('Switch Component', () => {
     expect(switchComponent.props.style.height).toBe(SWITCH_CONTAINER_HEIGHT_SMALL);
   });
 });
+
+describe('getSwitchSizes', () => {
+  const sizes = ['small', 'medium', 'large'] as const;
+  const types = ['ios', 'android'] as const;
+
+  sizes.forEach(size => {
+    types.forEach(type => {
+      it(`returns correct styles for size=${size} and type=${type}`, () => {
+        const { thumbStyles, thumbContainerStyles } = getSwitchSizes({ size, type });
+
+        // check thumb styles
+        if (size === 'small') {
+          expect(thumbStyles.width).toBe(SWITCH_THUMB_WIDTH_SMALL);
+          expect(thumbStyles.height).toBe(SWITCH_THUMB_HEIGHT_SMALL);
+        }
+        if (size === 'medium') {
+          expect(thumbStyles.width).toBe(SWITCH_THUMB_WIDTH_MEDIUM);
+          expect(thumbStyles.height).toBe(SWITCH_THUMB_HEIGHT_MEDIUM);
+        }
+        if (size === 'large') {
+          expect(thumbStyles.width).toBe(SWITCH_THUMB_WIDTH_LARGE);
+          expect(thumbStyles.height).toBe(SWITCH_THUMB_HEIGHT_LARGE);
+        }
+
+        // check container styles
+        if (size === 'small') {
+          expect(thumbContainerStyles.width).toBe(
+            type === 'android' ? SWITCH_CONTAINER_ANDROID_MODE_WIDTH_SMALL : SWITCH_CONTAINER_WIDTH_SMALL,
+          );
+          expect(thumbContainerStyles.height).toBe(
+            type === 'android' ? SWITCH_CONTAINER_ANDROID_MODE_HEIGHT_SMALL : SWITCH_CONTAINER_HEIGHT_SMALL,
+          );
+        }
+        if (size === 'medium') {
+          expect(thumbContainerStyles.width).toBe(
+            type === 'android' ? SWITCH_CONTAINER_ANDROID_MODE_WIDTH_MEDIUM : SWITCH_CONTAINER_WIDTH_MEDIUM,
+          );
+          expect(thumbContainerStyles.height).toBe(
+            type === 'android' ? SWITCH_CONTAINER_ANDROID_MODE_HEIGHT_MEDIUM : SWITCH_CONTAINER_HEIGHT_MEDIUM,
+          );
+        }
+        if (size === 'large') {
+          expect(thumbContainerStyles.width).toBe(
+            type === 'android' ? SWITCH_CONTAINER_ANDROID_MODE_WIDTH_LARGE : SWITCH_CONTAINER_WIDTH_LARGE,
+          );
+          expect(thumbContainerStyles.height).toBe(
+            type === 'android' ? SWITCH_CONTAINER_ANDROID_MODE_HEIGHT_LARGE : SWITCH_CONTAINER_HEIGHT_LARGE,
+          );
+        }
+      });
+    });
+  });
+});