Changed Node version to 20 in CI.yml

.github/workflows/ci.yml

@@ -17,12 +17,15 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '20'
+
+      - name: Navigate to AugmentedSpace directory
+        run: cd AugmentedSpace && ls
 
       - name: Install dependencies
-        run: npm install
+        run: cd AugmentedSpace && npm install
 
       - name: Run Jest tests
-        run: npm test
+        run: cd AugmentedSpace && npm test

AugmentedSpace/.gitignore

@@ -40,4 +40,7 @@ yarn-error.*
 
 expo-env.d.ts
 # @end expo-cli
-.mono/
+.mono/
+
+#jest coverage
+coverage/

AugmentedSpace/components/ItemCard.tsx

@@ -1,6 +1,5 @@
 import {
   Image,
-  ImageSourcePropType,
   Pressable,
   Text,
   View,
@@ -25,7 +24,7 @@ type ItemCardProps = {
 
 export default function ItemCard(props: ItemCardProps) {
   const { colors } = useTheme();
-  const [imageUrl, setImageUrl] = useState("");
+  const [imageUrl, setImageUrl] = useState("https://example.com/image.jpg");
   const { currentUser } = getAuth();
 
   useEffect(() => {
@@ -52,11 +51,13 @@ export default function ItemCard(props: ItemCardProps) {
           shadowOpacity: 1,
         }}
       >
-        <Pressable onPress={props.onPress}>
+        <Pressable onPress={props.onPress}
+          testID="card-button">
           <View>
             <Image
               className="self-center h-32 w-32 my-2"
               source={{ uri: imageUrl }}
+              testID="item-image"
             />
           </View>
           <View className="m-1">
@@ -77,7 +78,8 @@ export default function ItemCard(props: ItemCardProps) {
 
         {/* Quick Action Buttons */}
         <View className="flex w-full flex-row">
-          <Pressable className="bg-red-500 flex-grow py-2">
+          <Pressable className="bg-red-500 flex-grow py-2"
+            testID="ar-button">
             <Text
               className="align-middle text-center justify-center items-center"
               style={{ color: colors.text }}
@@ -89,7 +91,8 @@ export default function ItemCard(props: ItemCardProps) {
               />
             </Text>
           </Pressable>
-          {/* <Pressable className="bg-blue-500 flex-grow py-2">
+          <Pressable className="bg-blue-500 flex-grow py-2"
+            testID="cart-button">
             <Text
               className="align-middle text-center justify-center items-center"
               style={{ color: colors.text }}

AugmentedSpace/components/__tests__/ItemCard.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import ItemCard from '../ItemCard';
+import FavButton from '../favButton';
+import { router } from 'expo-router';
+
+// Mock firebase functions
+jest.mock('@firebase/storage', () => ({
+  getStorage: jest.fn(),
+  ref: jest.fn(),
+  getDownloadURL: jest.fn().mockResolvedValue('https://example.com/image.jpg'),
+}));
+
+jest.mock('@firebase/auth', () => ({
+  getAuth: jest.fn().mockReturnValue({ currentUser: {} }),
+  onAuthStateChanged: () => jest.fn(),
+}));
+
+jest.mock('@firebase/firestore', () => ({
+    collection: jest.fn().mockReturnValue({
+      doc: jest.fn().mockReturnValue({
+        get: jest.fn().mockResolvedValue({
+          data: () => ({
+            // Mock data you expect to retrieve from Firestore
+            itemName: 'Mock Item',
+            brandName: 'Mock Brand',
+            itemCost: 20,
+          }),
+        }),
+      }),
+    }),
+  }));
+
+describe('ItemCard', () => {
+    //props for each test
+    const mockProps = {
+        UUID: '123',
+        itemName: 'Item Name',
+        brandName: 'Brand Name',
+        itemCost: 10,
+        imagePath: 'path/to/image',
+        onPress: jest.fn(),
+      };
+
+  test('renders', async () => {
+    render(<ItemCard {...mockProps} />);
+  });
+
+  //test vital card functions operate    
+  test('card renders correctly', async () => {
+
+    const { getByText, getByTestId } = render(<ItemCard {...mockProps} />);
+
+    // Check if item details are rendered correctly
+    expect(getByText('Item Name')).toBeTruthy();
+    expect(getByText('Brand Name')).toBeTruthy();
+    expect(getByText('10')).toBeTruthy();
+
+  });
+
+  test('card button renders correctly', async () => {
+    const { getByText, getByTestId } = render(<ItemCard {...mockProps} />);
+    const cardButton = getByTestId('card-button');
+    fireEvent.press(cardButton);
+    expect(mockProps.onPress).toHaveBeenCalled();
+  });
+
+  test('ar button renders correctly', async () => {
+    const { getByText, getByTestId } = render(<ItemCard {...mockProps} />);
+    const onPress = jest.fn();
+    // Simulate press on Quick Action Button
+    const arButton = getByTestId('ar-button');
+    fireEvent.press(arButton);
+    expect(mockProps.onPress).toHaveBeenCalled();
+  });
+
+  test('cart button renders correctly', async () => {
+    const { getByText, getByTestId } = render(<ItemCard {...mockProps} />);
+    const cartButton = getByTestId('cart-button');
+    fireEvent.press(cartButton);
+    expect(mockProps.onPress).toHaveBeenCalled();
+
+  });
+
+  //test whether uri of image matches uri set by props
+  test('image renders correctly', async () => {
+    const { getByText, getByTestId } = render(<ItemCard {...mockProps} />);
+
+    // Check if image is rendered correctly
+    const image = getByTestId('item-image');
+    expect(image.props.source).toEqual({ uri: 'https://example.com/image.jpg' });
+
+  });
+});

AugmentedSpace/components/__tests__/__snapshots__/StyledText-test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Text
+  style={
+    [
+      {
+        "color": "#000",
+      },
+      [
+        undefined,
+        {
+          "fontFamily": "SpaceMono",
+        },
+      ],
+    ]
+  }
+>
+  Snapshot test!
+</Text>
+`;

AugmentedSpace/components/favButton.tsx

@@ -11,6 +11,7 @@ type FavButtonProps = {
   onPress?: () => void;
   className?: string;
   itemUUID: string;
+  //testID?: string
 };
 
 export default function FavButton(props: FavButtonProps) {
@@ -91,7 +92,8 @@ export default function FavButton(props: FavButtonProps) {
         shadowOpacity: 1,
       }}
     >
-      <Pressable onPress={handleFavoriteItem}>
+      <Pressable onPress={handleFavoriteItem}
+        testID="fav-button">
         <MaterialCommunityIcons
           name={liked ? "heart" : "heart-outline"}
           size={30}