Fix Button component, updated tests and added Jest Native

jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-native/extend-expect';

package.json

@@ -65,6 +65,7 @@
     "@evilmartians/lefthook": "1.2.2",
     "@react-native-community/eslint-config": "3.2.0",
     "@release-it/conventional-changelog": "5.0.0",
+    "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "12.1.2",
     "@types/color": "^3.0.3",
     "@types/jest": "29.5.2",
@@ -104,6 +105,7 @@
     "modulePaths": [
       "<rootDir>/src"
     ],
+    "setupFilesAfterEnv": ["./jest-setup.ts"],
     "transformIgnorePatterns": [
       "node_modules/(?!(@react-native|react-native|react-native-vector-icons))"
     ]

src/components/button/button.spec.tsx

@@ -6,7 +6,8 @@ import {
 } from '@testing-library/react-native';
 import React from 'react';
 import { Button } from './button.component';
-import { ActivityIndicator } from 'react-native';
+import { ActivityIndicator, View } from 'react-native';
+import { defaultTheme } from '../../theme/theme.default';
 
 afterEach(cleanup);
 
@@ -19,14 +20,12 @@ describe('Button component', () => {
     ).toBeTruthy();
   });
 
-  it('should button onPress trigger event', () => {
+  it('should pressing trigger event', () => {
     const onPressMock = jest.fn();
 
-    const { getByText } = render(
-      <Button onPress={onPressMock}>Click Me</Button>
-    );
+    render(<Button onPress={onPressMock}>Click Me</Button>);
 
-    const button = getByText('Click Me');
+    const button = screen.getByText('Click Me');
 
     fireEvent.press(button);
 
@@ -36,26 +35,72 @@ describe('Button component', () => {
   it('should be disabled when isDisabled is true', () => {
     const onPressMock = jest.fn();
 
-    const { getByText } = render(
+    render(
       <Button onPress={onPressMock} isDisabled>
         Click Me
       </Button>
     );
 
     expect(onPressMock).not.toHaveBeenCalled();
 
-    const button = getByText('Click Me');
+    const button = screen.getByText('Click Me');
 
     fireEvent.press(button);
 
     expect(onPressMock).not.toHaveBeenCalled();
   });
 
   it('should render ActivityIndicator component if loading', () => {
-    const { UNSAFE_getByType } = render(<Button isLoading />);
+    render(<Button isLoading />);
 
-    const activityIndicator = UNSAFE_getByType(ActivityIndicator);
+    const activityIndicator = screen.UNSAFE_getByType(ActivityIndicator);
 
     expect(activityIndicator).toBeTruthy();
   });
+
+  it('should have background color of bg prop value', () => {
+    const defaultColorButtonId = 'defaultColorButton';
+    const specificHueButtonId = 'specificHueButton';
+
+    render(
+      <View>
+        <Button testID={defaultColorButtonId} bg="red" />
+        <Button testID={specificHueButtonId} bg="red.600" />
+      </View>
+    );
+
+    const defaultColorButton = screen.getByTestId(defaultColorButtonId);
+    const specificHueButton = screen.getByTestId(specificHueButtonId);
+
+    expect(defaultColorButton).toBeVisible();
+    expect(defaultColorButton).toHaveProp('style');
+    expect(defaultColorButton.props.style[0]).toHaveProperty('backgroundColor');
+    expect(defaultColorButton.props.style[0].backgroundColor).toEqual(
+      defaultTheme?.colors?.red[500]
+    );
+
+    expect(specificHueButton).toBeVisible();
+    expect(specificHueButton).toHaveProp('style');
+    expect(specificHueButton.props.style[0]).toHaveProperty('backgroundColor');
+    expect(specificHueButton.props.style[0].backgroundColor).toEqual(
+      defaultTheme?.colors?.red[600]
+    );
+  });
+
+  it('should render text with color', () => {
+    const buttonId = 'button';
+
+    render(
+      <Button testID={buttonId} color="black">
+        This is the button
+      </Button>
+    );
+
+    const text = screen.getByText('This is the button');
+
+    expect(text).toBeVisible();
+    expect(text).toHaveProp('style');
+    expect(text.props.style).toHaveProperty('color');
+    expect(text.props.style.color).toEqual('black');
+  });
 });

src/theme/theme.service.ts

@@ -134,8 +134,8 @@ export const getThemeColor = (
       themeColors.hasOwnProperty(value) &&
       typeof themeColors[value] !== 'undefined'
     ) {
-      const colorValue: string | String = themeColors[value] as string;
-      return colorValue as string;
+      const colorValue = themeColors[value];
+      return colorValue[500];
     }
 
     let colorValue: string | String = 'transparent';

tsconfig.json

@@ -22,7 +22,7 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
-    "types": ["react-native", "jest"]
+    "types": ["react-native", "jest", "@testing-library/jest-native"]
   },
   "include": ["src"],
   "exclude": ["./**/*.spec.ts", "./**/*.spec.tsx"]

yarn.lock

@@ -2243,6 +2243,17 @@
   dependencies:
     defer-to-connect "^2.0.1"
 
+"@testing-library/jest-native@^5.4.3":
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-5.4.3.tgz#9334c68eaf45db9eb20d0876728cc5d7fc2c3ea2"
+  integrity sha512-/sSDGaOuE+PJ1Z9Kp4u7PQScSVVXGud59I/qsBFFJvIbcn4P6yYw6cBnBmbPF+X9aRIsTJRDl6gzw5ZkJNm66w==
+  dependencies:
+    chalk "^4.1.2"
+    jest-diff "^29.0.1"
+    jest-matcher-utils "^29.0.1"
+    pretty-format "^29.0.3"
+    redent "^3.0.0"
+
 "@testing-library/[email protected]":
   version "12.1.2"
   resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.1.2.tgz#1935affe1106aeddf0087dff31a6d7414917c098"