Merge pull request #4 from LeleDallas/feat/layout

feat: application render layout

.eslintrc.js

@@ -7,6 +7,15 @@ module.exports = {
     'no-undef': 1,
     'no-unused-vars': 1,
     'react-native/no-inline-styles': 0,
-    'comma-dangle': ['error', 'never']
-  }
+    'comma-dangle': ['error', 'never'],
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-uses-react': 'off'
+  },
+  overrides: [
+    {
+      // Test files only
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react']
+    }
+  ]
 };

App.tsx

@@ -1,118 +1,19 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { NavigationContainer } from '@react-navigation/native';
 import React from 'react';
-import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
+import { SafeAreaView } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import MainRoute from './src/routes/MainRoute';
+import { globalStyle, theme } from './src/styles';
+
+export default () =>
+  <SafeAreaView style={globalStyle.background} >
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <NavigationContainer theme={theme}>
+        <BottomSheetModalProvider>
+          <MainRoute />
+        </BottomSheetModalProvider>
+      </NavigationContainer>
+    </GestureHandlerRootView>
+  </SafeAreaView>;
 
-export default App;

__mocks__/createNativeStackNavigator.tsx

@@ -0,0 +1,16 @@
+// src/navigation/__mocks__/createNativeStackNavigator.tsx
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+
+const createNativeStackNavigator = () => {
+  const Stack = createStackNavigator();
+
+  return {
+    ...Stack,
+    Navigator: (props: any) => (
+      <Stack.Navigator {...props} headerMode="none" screenOptions={{ animationEnabled: false }} />
+    )
+  };
+};
+
+export default createNativeStackNavigator;

__mocks__/data.ts

@@ -0,0 +1,79 @@
+import { Repository, User } from "../src/types/response";
+
+export const mockUsers: User[] = [
+    {
+        avatarUrl: 'https://avatars.githubusercontent.com/u/1?v=4',
+        bio: 'test bio',
+        id: '1',
+        login: 'test',
+        name: 'John Doe',
+        repositories: { totalCount: 5 },
+        followers: { totalCount: 5 },
+        isDeveloperProgramMember: true,
+        isGitHubStar: true,
+        hasSponsorsListing: true,
+        isBountyHunter: true,
+        isEmployee: true,
+    },
+    {
+        avatarUrl: 'https://avatars.githubusercontent.com/u/2?v=4',
+        bio: 'test bio',
+        id: '2',
+        login: 'test',
+        name: 'Jane Smith',
+        repositories: { totalCount: 5 },
+        followers: { totalCount: 5 },
+        isDeveloperProgramMember: true,
+        isGitHubStar: true,
+        hasSponsorsListing: true,
+        isBountyHunter: true,
+        isEmployee: true,
+    },
+    {
+        avatarUrl: 'https://avatars.githubusercontent.com/u/3?v=4',
+        bio: 'test bio',
+        id: '3',
+        login: 'test',
+        name: 'Alex Johnson',
+        repositories: { totalCount: 5 },
+        followers: { totalCount: 5 },
+        isDeveloperProgramMember: true,
+        isGitHubStar: true,
+        hasSponsorsListing: true,
+        isBountyHunter: true,
+        isEmployee: true,
+    }
+]
+
+export const mockRepositories: Repository[] = [
+    {
+        id: '1',
+        name: 'repo1',
+        description: 'test description',
+        stargazerCount: 5,
+        forkCount: 5,
+        primaryLanguage: { name: 'JavaScript', color: '#f1e05a' },
+        stargazers: { totalCount: 5 },
+        url: ''
+    },
+    {
+        id: '2',
+        name: 'repo2',
+        description: 'test description',
+        stargazerCount: 5,
+        forkCount: 5,
+        primaryLanguage: { name: 'JavaScript', color: '#f1e05a' },
+        stargazers: { totalCount: 5 },
+        url: ''
+    },
+    {
+        id: '3',
+        name: 'repo3',
+        description: 'test description',
+        stargazerCount: 5,
+        forkCount: 5,
+        primaryLanguage: { name: 'JavaScript', color: '#f1e05a' },
+        stargazers: { totalCount: 5 },
+        url: ''
+    }
+]

__tests__/HasIconBadge.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import HasIconBadge from '../src/components/Badge/HasIconBadge';
+import { render } from '@testing-library/react-native';
+
+describe('HasIconBadge', () => {
+    it('renders without badge when hasBadge prop is false', () => {
+        const { queryByTestId } = render(
+            <HasIconBadge hasBadge={false} name="star" />
+        );
+        expect(queryByTestId('badgeIcon')).not.toBeTruthy();
+    });
+
+    it('renders with badge when hasBadge prop is true', () => {
+        const { getByTestId } = render(
+            <HasIconBadge hasBadge={true} name="star" />
+        );
+        expect(getByTestId('badgeIcon')).toBeTruthy();
+    });
+
+    it('renders the correct icon based on the name prop', () => {
+        const { getByTestId } = render(
+            <HasIconBadge hasBadge={true} name="star" />
+        );
+        expect(getByTestId('badgeIcon').props.name).toBe('star');
+    });
+
+    it('renders the correct color based on the color prop', () => {
+        const { getByTestId } = render(
+            <HasIconBadge hasBadge={true} name="star" color="#E2B340" />
+        );
+        expect(getByTestId('badgeIcon').props.color).toBe('#E2B340');
+    });
+
+    it('renders the correct count based on the count prop', () => {
+        const { getByText } = render(
+            <HasIconBadge hasBadge={true} name="star" count={5} />
+        );
+        expect(getByText('5')).toBeTruthy();
+    });
+
+    it('renders the correct count when count is zero', () => {
+        const { queryByText } = render(
+            <HasIconBadge hasBadge={true} name="star" count={undefined} />
+        );
+        expect(queryByText('0')).toBeNull();
+    });
+
+});

__tests__/Home.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, fireEvent, userEvent } from '@testing-library/react-native';
+import Home from '../src/screens/Home';
+
+describe('Home', () => {
+    it('renders the Home component correctly', () => {
+        const { getByPlaceholderText } = render(<Home />);
+        expect(getByPlaceholderText("Search a GitHub user")).toBeTruthy();
+    });
+
+    it('trigger the onChange event', async () => {
+        const { getByPlaceholderText } = render(<Home />);
+        const textInput = getByPlaceholderText("Search a GitHub user");
+        expect(textInput).toBeTruthy();
+        await userEvent.type(textInput, 'test');
+    });
+
+    it('render disable button colors based on name', async () => {
+        const { getByTestId, getByPlaceholderText } = render(<Home />);
+        const touchableOpacity = getByTestId('touchable-opacity');
+        expect(touchableOpacity).toBeTruthy();
+        expect(touchableOpacity.props.style.backgroundColor).toBe('#46515B');
+        const textInput = getByPlaceholderText("Search a GitHub user");
+        expect(textInput).toBeTruthy();
+        await userEvent.type(textInput, 'test');
+
+    });
+
+    it('calls the API when TouchableOpacity is pressed', () => {
+        const { getByTestId } = render(<Home />);
+        const touchableOpacity = getByTestId('touchable-opacity');
+        expect(touchableOpacity).toBeTruthy();
+        fireEvent.press(touchableOpacity);
+    });
+
+    it('should call the API when TouchableOpacity is pressed', async () => {
+        const { getByTestId, getByPlaceholderText } = render(<Home />);
+        const touchableOpacity = getByTestId('touchable-opacity');
+        expect(touchableOpacity).toBeTruthy();
+        const textInput = getByPlaceholderText("Search a GitHub user");
+        expect(textInput).toBeTruthy();
+        await userEvent.type(textInput, 'test');
+        fireEvent.press(touchableOpacity);
+    });
+
+});

__tests__/MainRoute.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react-native';
+import 'react-native-gesture-handler/jestSetup';
+import MainRoute from '../src/routes/MainRoute';
+
+describe('MainRoute', () => {
+    it('renders without crashing', () => {
+        render(<MainRoute />);
+    });
+});