testing

Author: emon5122

.eslintrc.js

@@ -0,0 +1,5 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: 'expo',
+  ignorePatterns: ['/dist/*'],
+};

.husky/pre-commit

@@ -1 +1 @@
-pnpm tsc
+pnpm validate

.nvmrc

@@ -18,11 +18,6 @@
       },
       "package": "com.emon5122.reactnativeapp"
     },
-    "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
     "plugins": [
       "expo-router",
       [
@@ -36,9 +31,6 @@
       ],
       "expo-font"
     ],
-    "experiments": {
-      "typedRoutes": true
-    },
     "extra": {
       "router": {
         "origin": false

app.json

@@ -3,7 +3,7 @@ import { Header } from "@/components/header";
 import { Poppins_400Regular } from "@expo-google-fonts/poppins";
 import { Rubik_400Regular, Rubik_700Bold } from "@expo-google-fonts/rubik";
 import { useFonts } from "expo-font";
-import { Stack } from "expo-router";
+import { Stack, usePathname } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
 import { SafeAreaView } from "react-native";
@@ -13,6 +13,8 @@ import "../global.css";
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
+    const path = usePathname();
+
     const [loaded] = useFonts({
         Rubik_400Regular,
         Rubik_700Bold,
@@ -31,14 +33,14 @@ export default function RootLayout() {
 
     return (
         <SafeAreaView style={{ flex: 1 }}>
-            <Header />
+            <Header path={path} />
             <Stack>
                 <Stack.Screen name="index" options={{ headerShown: false }} />
                 <Stack.Screen name="news" options={{ headerShown: false }} />
                 <Stack.Screen name="chat" options={{ headerShown: false }} />
                 <Stack.Screen name="+not-found" />
             </Stack>
-            <Footer />
+            <Footer path={path} />
         </SafeAreaView>
     );
 }

app/_layout.tsx

@@ -0,0 +1,72 @@
+import renderer from "react-test-renderer";
+import { Footer } from "../footer";
+
+describe("Footer", () => {
+    it("renders when path is Game Board, News and not Chat", () => {
+        const tree = renderer.create(<Footer path="/" />).toJSON();
+        expect(tree).not.toBeNull();
+        const tree2 = renderer.create(<Footer path="/news" />).toJSON();
+        expect(tree2).not.toBeNull();
+        const tree3 = renderer.create(<Footer path="/chat" />).toJSON();
+        expect(tree3).toBeNull();
+    });
+    it("applies active state styling for the selected page", () => {
+        const homeTree = renderer.create(<Footer path="/" />).toJSON();
+        if (!homeTree || !("children" in homeTree)) {
+            throw new Error("Game Board tree not rendered correctly");
+        }
+        const homeChildren = homeTree.children as unknown as {
+            type: string;
+            props: { className: string };
+            children: { type: string; props: { className: string } }[];
+        }[];
+        const homeOpacities = homeChildren
+            .map((child) => child.children?.[0]?.props?.className || "")
+            .filter((className) => className.includes("opacity"));
+        expect(homeOpacities[0]).toContain("opacity-100");
+        expect(homeOpacities[1]).toContain("opacity-70");
+        const newsTree = renderer.create(<Footer path="/news" />).toJSON();
+        if (!newsTree || !("children" in newsTree)) {
+            throw new Error("News tree not rendered correctly");
+        }
+        const newsChildren = newsTree.children as unknown as {
+            type: string;
+            props: { className: string };
+            children: { type: string; props: { className: string } }[];
+        }[];
+        const newsOpacities = newsChildren
+            .map((child) => child.children?.[0]?.props?.className || "")
+            .filter((className) => className.includes("opacity"));
+        expect(newsOpacities[0]).toContain("opacity-70");
+        expect(newsOpacities[1]).toContain("opacity-100");
+    });
+    it("navigates to Game Board when the Game Board & News tabs are clicked", () => {
+        const tree = renderer.create(<Footer path="/" />).toJSON();
+        if (!tree || !("children" in tree)) {
+            throw new Error("Tree not rendered correctly");
+        }
+        const treeChildren = tree.children as unknown as {
+            type: string;
+            props: { onClick: () => void };
+        }[];
+        treeChildren.forEach((child) => {
+            if (child.props.onClick) {
+                child.props.onClick();
+            }
+        });
+        const newTree = renderer.create(<Footer path="/" />).toJSON();
+        if (!newTree || !("children" in newTree)) {
+            throw new Error("Tree not rendered correctly");
+        }
+        const newTreeChildren = newTree.children as unknown as {
+            type: string;
+            props: { className: string };
+            children: { type: string; props: { className: string } }[];
+        }[];
+        const newTreeOpacities = newTreeChildren
+            .map((child) => child.children?.[0]?.props?.className || "")
+            .filter((className) => className.includes("opacity"));
+        expect(newTreeOpacities[0]).toContain("opacity-100");
+        expect(newTreeOpacities[1]).toContain("opacity-70");
+    });
+});

components/__tests__/footer-test.tsx

@@ -0,0 +1,15 @@
+import renderer from "react-test-renderer";
+import { Header } from "../header";
+
+describe("Header", () => {
+    it("renders header content correctly on Game Board & News", () => {
+        const tree = renderer.create(<Header path="/" />).toJSON();
+        expect(tree).not.toBeNull();
+        const tree2 = renderer.create(<Header path="/news" />).toJSON();
+        expect(tree2).not.toBeNull();
+    });
+    it("does not render when the path is /chat", () => {
+        const tree = renderer.create(<Header path="/chat" />).toJSON();
+        expect(tree).toBeNull();
+    });
+});

components/__tests__/header-test.tsx

@@ -1,4 +1,4 @@
-import { Link, usePathname } from "expo-router";
+import { Link } from "expo-router";
 import { Text, View } from "react-native";
 import GameBoardIcon from "./icons/gameBoard";
 import NewsIcon from "./icons/news";
@@ -29,11 +29,8 @@ const TABS: TabType[] = [
     { icon: NewsIcon, label: "News", href: "/news" },
 ];
 
-export const Footer = () => {
-    const path = usePathname();
-
+export const Footer = ({ path }: { path: string }) => {
     if (path === "/chat") return null;
-
     const TabItem = ({
         icon: Icon,
         label,

components/footer.tsx

@@ -1,14 +1,8 @@
 import { loggedInUserData } from "@/constants/data/user";
-import { usePathname } from "expo-router";
 import { Image, Text, View } from "react-native";
 
-export const Header = () => {
-    const path = usePathname();
-
-    if (path === "/chat") {
-        return null;
-    }
-
+export const Header = ({ path }: { path: string }) => {
+    if (path === "/chat") return null;
     return (
         <View className="w-full h-[10%] bg-[#1F1B1B] p-4">
             <View className="flex flex-row items-center mt-2.5">

components/header.tsx

@@ -2,15 +2,16 @@
   "name": "react-native-app",
   "main": "expo-router/entry",
   "version": "1.0.0",
+  "packageManager": "[email protected]",
   "scripts": {
     "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
     "test": "jest --watchAll",
     "lint": "expo lint",
     "tsc": "tsc --noEmit",
+    "validate": "pnpm jest --passWithNoTests && pnpm lint && pnpm tsc",
     "prepare": "husky"
   },
   "jest": {
@@ -53,6 +54,8 @@
     "@types/react": "~18.3.18",
     "@types/react-test-renderer": "^18.3.1",
     "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-config-expo": "~8.0.1",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-expo": "~52.0.3",