Added otp input test cases

Author: dheeraj1429

jest.config.js

@@ -17,6 +17,9 @@ module.exports = {
     '.enum.ts',
     '/config/',
     '/coverage/',
+    '.eslintrc.js',
+    '.prettierrc.js',
+    'babel.config.js',
   ],
 
   coverageReporters: ['html', 'text', 'lcov', 'text-summary'],

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

@@ -3,6 +3,8 @@ import { OTPInput } from '../src';
 import { fireEvent, render } from './test-utils';
 
 describe('OTP Component', () => {
+  const mockOtpInputTestId = 'mock-otp-input-test-id';
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -93,4 +95,20 @@ describe('OTP Component', () => {
       expect(input.props.value).toBe('');
     });
   });
+
+  it('should set the default values', () => {
+    const { getByTestId } = render(<OTPInput testID={mockOtpInputTestId} length={3} defaultValue={'123'} />);
+
+    const firstInput = getByTestId(`${mockOtpInputTestId}-0`);
+    expect(firstInput).toBeDefined();
+    expect(firstInput.props.value).toEqual('1');
+
+    const secondInput = getByTestId(`${mockOtpInputTestId}-1`);
+    expect(secondInput).toBeDefined();
+    expect(secondInput.props.value).toEqual('2');
+
+    const thirdInput = getByTestId(`${mockOtpInputTestId}-2`);
+    expect(thirdInput).toBeDefined();
+    expect(thirdInput.props.value).toEqual('3');
+  });
 });

src/packages/react-native-material-elements/__test__/styleGenerator.test.ts

@@ -76,5 +76,15 @@ describe('Style Utilities', () => {
       expect(result).toEqual({});
       consoleSpy.mockRestore();
     });
+
+    it('should warn in the console if the styles property not valid', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      const args: StylePalette = { unknown: undefined } as any;
+      const result = generateElementStyles(args);
+
+      expect(consoleSpy).toHaveBeenCalledWith('Invalid element property name: undefined, and value: undefined');
+      expect(result).toEqual({});
+      consoleSpy.mockRestore();
+    });
   });
 });

src/packages/react-native-material-elements/src/components/ActivityIndicator/ActivityIndicator.types.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActivityIndicator } from 'react-native';
-import { Theme } from '../../libraries/themes/types';
+import { Theme } from '../../libraries/types';
 import { VariantTypes } from '../../utils';
 
 export interface ActivityIndicatorProps extends React.ComponentPropsWithRef<typeof ActivityIndicator> {

src/packages/react-native-material-elements/src/components/Alert/Alert.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
 import { ColorSchemeName, StyleSheet, TextStyle, useColorScheme, View, ViewStyle } from 'react-native';
+import { ThemedIconProp, useThemedProps } from '../../hooks';
 import { useThemeColorsSelector } from '../../libraries';
-import { Theme } from '../../libraries/themes/types';
+import { Theme } from '../../libraries/types';
 import { VariantTypes } from '../../utils';
 import { Box } from '../Box';
 import { BoxProps } from '../types';
 import { Text } from '../Typography';
 import { getAlertContainerStyles, getAlertTitleStyles } from './utils';
-import { ThemedIconProp, useThemedProps } from '../../hooks';
 
 export interface AlertProps extends BoxProps {
   /** Main title text displayed in the alert */

src/packages/react-native-material-elements/src/components/Menu/Menu.tsx

@@ -12,7 +12,7 @@ import {
 import { useRestyle } from '../../hooks';
 import { useThemeColorsSelector } from '../../libraries';
 import { StyledProps } from '../../libraries/style/styleTypes';
-import { Theme } from '../../libraries/themes/types';
+import { Theme } from '../../libraries/types';
 import { MeasureElementRect, PortalProps } from '../../types';
 import { screenHeight, screenWidth } from '../../utils';
 import { Portal } from '../Portal';

src/packages/react-native-material-elements/src/components/Progress/Progress.tsx

@@ -3,7 +3,7 @@ import { Animated, ColorValue, DimensionValue, I18nManager, LayoutChangeEvent, S
 import { useRestyle } from '../../hooks';
 import { useThemeColorsSelector } from '../../libraries';
 import { StyledProps } from '../../libraries/style/styleTypes';
-import { Theme } from '../../libraries/themes/types';
+import { Theme } from '../../libraries/types';
 import { VariantTypes } from '../../utils';
 import { AnimatedView } from '../Box';
 import { getProgressBarContainerStyles, getProgressBarIndicatorStyles } from './utils';

src/packages/react-native-material-elements/src/components/SegmentedControl/SegmentedControlContainer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View, ViewProps } from 'react-native';
+import { useRestyle } from '../../hooks';
 import { useThemeColorsSelector } from '../../libraries';
 import { StyledProps } from '../../libraries/style/styleTypes';
-import { Theme } from '../../libraries/themes/types';
+import { Theme } from '../../libraries/types';
 import { generateSegmentContainerStyle, styles } from './SegmentedControl.styles';
-import { useRestyle } from '../../hooks';
 
 export interface SegmentedControlContainerProps extends ViewProps, StyledProps {}
 export interface GenerateSegmentContainerStyle {

src/packages/react-native-material-elements/src/components/TextField/OtpInput.tsx

@@ -11,7 +11,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { useThemeColorsSelector } from '../../libraries';
-import { Theme } from '../../libraries/themes/types';
+import { Theme } from '../../libraries/types';
 import { VariantTypes } from '../../utils';
 import { getOtpInputStyles } from './TextField.style';
 

src/packages/react-native-material-elements/src/utils/styleGenerator.ts

@@ -40,7 +40,9 @@ export const generateElementStyles = (args: StylePalette) => {
   for (let property of keys) {
     const elementPropertyName = property as keyof typeof styles;
     if (args[elementPropertyName] === undefined) {
-      console.warn(`Invalid element property name: ${String(args[elementPropertyName])}`);
+      console.warn(
+        `Invalid element property name: ${args[elementPropertyName]}, and value: ${String(args[elementPropertyName])}`,
+      );
       continue;
     }
     nativeStyles = {