Merge pull request 'adding test and ui to home page' (#6) from unitTesting into master

Reviewed-on: #6

__mocks__/@react-native-community/async-storage.js

@@ -0,0 +1,9 @@
+// somewhere in your configuration files
+import AsyncStorageMock from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+
+AsyncStorageMock.multiGet = jest.fn(([keys], callback) => {
+  // do something here to retrieve data
+  callback([]);
+});
+
+export default AsyncStorageMock;

components/ListItemComponent.tsx

@@ -22,8 +22,8 @@ export default function Item(props: CardProps){ // a mettre dans components et d
 
         /* dispatch , */
     <View style={styles.item}>
-        <ImageBackground  source={{uri:item.img}} style={{flex:1, minHeight:250, minWidth:180}}>
+        <ImageBackground testID="card-url"  source={{uri:item.img}} style={{flex:1, minHeight:250, minWidth:180}}>
-             <TouchableHighlight style={item.fav?styles.favoriteButtonFav:styles.favoriteButtonNonFav} onPress={() => HandleAddFav(props)} >
+             <TouchableHighlight testID="button" style={item.fav?styles.favoriteButtonFav:styles.favoriteButtonNonFav} onPress={() => HandleAddFav(props)} >
                 <FontAwesome name="heart-o" size={50} color="#fff" />
             </TouchableHighlight>
         </ImageBackground>

package.json

@@ -6,17 +6,41 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "test": "jest"
+  },
+  "jest": {
+    "setupFiles": ["./test/setup/jestSetupFile.js"],
+    "preset": "jest-expo",
+    "verbose": true,
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
+    ],
+    "testMatch": [
+      "**.test.js"
+    ],
+    "testEnvironment": "node",
+    "testEnvironmentOptions": {
+      "browsers": [
+        "chrome",
+        "firefox",
+        "safari"
+      ]
+    }
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@jest/globals": "^29.5.0",
     "@react-navigation/bottom-tabs": "^6.5.5",
     "@react-navigation/native": "^6.1.4",
     "@react-navigation/native-stack": "^6.9.10",
     "@react-navigation/stack": "^6.3.14",
     "@reduxjs/toolkit": "^1.9.3",
+    "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-native": "^12.0.1",
     "expo": "^48.0.0",
     "expo-status-bar": "~1.4.4",
+    "jest": "^29.2.1",
+    "jest-expo": "^48.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.71.3",
@@ -28,6 +52,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@react-native-async-storage/async-storage": "^1.18.1",
+    "@types/jest": "^29.5.0",
     "@types/react": "~18.0.27",
     "@types/react-native": "~0.70.6",
     "typescript": "^4.9.4"

redux/actions/actionSelection.tsx

@@ -61,7 +61,7 @@ export const getAllCards = () => {
         //'pageSize':'100'
       };
       //! Actualisation de l'API (16/03) :
-      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EUe6p4N9uLm8BbsHyYVZXIa4DDBP2hMR05', options);
+      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EUo8Snb09AfE3zQR4CoaB71gq1q3qvSmgL', options);
       //const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options);
       //console.log("FETCH")
       //console.log(CardsPromise)

redux/actions/action_setCardsList.tsx

@@ -5,7 +5,7 @@ import {Card} from '../../models/Card'
 
 export const setCardsList = (List: Card[]) => {
     return {
-        type: FETCH_DATA,
+        type: "FETCH_DATA",
         payload: List,
     };
 }

redux/reducers/appReducer.tsx

@@ -1,5 +1,3 @@
-import AsyncStorage from '@react-native-async-storage/async-storage'
-import { Card } from '../../models/Card'
 import { CardProps } from '../../props/favprops'
 import {FETCH_DATA, ADD_FAVORITE_DATA, SET_FAVS} from '../constants'
 import StorageHeart from '../../service/AsyncStorage'

screens/HomeScreen.tsx

@@ -1,5 +1,5 @@
 
-import { StyleSheet, Text, View, TouchableNativeFeedback } from 'react-native';
+import { StyleSheet, Text, View, TouchableNativeFeedback, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationContainer } from '@react-navigation/native';
 import StackNavigation from '../navigation/StackNavigation' 
@@ -54,25 +54,22 @@ export default function HomeScreen({navigation}) {
     return (
         <View style={styles.container}>
             <View style={styles.centered}>
-                <Text style={styles.title}>Mes super Nounours !</Text>
+                <Text style={styles.title}>DeckStone</Text>
             </View>
-            <Text>Mon super texte ...</Text>
+            <Text style={styles.txt}>Votre gestionnaire de cartes Hearthstone </Text>
             {/* <MyCustomComponent /> */}
             <View style={styles.MidArea}>
-                <Text style={styles.textStyle}>Nous sommes actuellement dans l'écran d'accueil !</Text>
+                <Image source={require("../assets/logo.png")} style={styles.ige} resizeMode='cover' ></Image>
             </View>
         
-            <View>
+            <View style={styles.butContain}>
-                <Text style={styles.t3}> Vous cherchez une entités ? </Text>
+                
                 <TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
-                    <Text style={styles.ButtonStyle}> Consulter la liste global !</Text>
+                    <Text style={styles.ButtonStyle}>List</Text>
                 </TouchableNativeFeedback>
-            </View>
                 
-            <View>
-                <Text style={styles.t3}> Vous avez des entités favorites ? </Text>
                 <TouchableNativeFeedback onPress={() => navigation.navigate("ListFav")}>
-                    <Text style={styles.ButtonStyle}>Aller sur la page de favoris !</Text>
+                    <Text style={styles.ButtonStyle}>Favoris</Text>
                 </TouchableNativeFeedback>
             </View>
         </View>
@@ -82,38 +79,43 @@ export default function HomeScreen({navigation}) {
     const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: "darksalmon",
+        backgroundColor: "#ac9585",
         alignItems: "center"
     },
     centered: {
         alignItems: "center"
     },
     title: {
-        fontSize: 20,
+        fontSize: 56,
         fontWeight: 'bold',
+        
     },
     MidArea: {
         justifyContent: "center", 
-        backgroundColor: "white",
+        
-        paddingTop: 50,
-        paddingBottom: 50,
-        margin: 40,
-        borderRadius: 15,
     },
-    textStyle: {
+    txt: {
-        textAlign: "center",
         fontSize: 20,
     },
+    butContain: {
+        flexDirection: 'row'
+
+    },
+    ige:{
+        maxWidth: "110%",
+        maxHeight: 400,
+    },
+
     ButtonStyle :{
         backgroundColor: "#2E8AE6",
         borderRadius: 15,
         padding: 20,
         color: "white",
-        fontSize : 20,
+        fontSize : 36,
+        width: "45%",
+        textAlign: 'center',
+        margin: 10,
         fontWeight: 'bold',
     },
-    t3 :{
+
-        fontSize : 20,
-        fontWeight: 'bold',
-    }
 });

test/UI/listItem.test.js

@@ -0,0 +1,36 @@
+import { configureStore } from "@reduxjs/toolkit";
+import testReducer from "../setup/testReducer";
+import { Provider } from "react-redux";
+import { render } from "react-dom";
+import Item from "../../components/ListItemComponent";
+
+jest.useFakeTimers();
+
+const store = configureStore({
+    reducer: {
+        appReducer: testReducer,
+    },
+    middleware: (getDefaultMiddleWare) =>
+        getDefaultMiddleWare({
+            serializableCheck: false
+        })
+});
+
+const Wrapper = ({children}) => (<Provider store={store}>{children}</Provider>);
+
+describe('<Item/>', ()=> {
+    test('Assert displayed values', () =>{
+        const expectedCardInfos = store.getState().appReducer.cards[0];
+
+        render(<Wrapper>
+            <Item route={{
+                card: expectedCardInfos,
+                bool: false
+            }} ></Item>
+        </Wrapper>)
+
+        expect(screen.getByTestId('card-url')).toHaveProperty("source", {uri: expectedCardInfos.img})
+        
+        
+    })
+})

test/UI/listItemFav.test.js

@@ -0,0 +1,44 @@
+import { configureStore } from "@reduxjs/toolkit";
+import testReducer from "../setup/testReducer";
+import { Provider } from "react-redux";
+import { render } from "react-dom";
+import Item from "../../components/ListItemComponent";
+import { fireEvent } from "@testing-library/react-native";
+import AsyncStorageMock from "../../__mocks__/@react-native-community/async-storage";
+
+
+jest.useFakeTimers();
+
+const store = configureStore({
+    reducer: {
+        appReducer: testReducer,
+    },
+    middleware: (getDefaultMiddleWare) =>
+        getDefaultMiddleWare({
+            serializableCheck: false
+        })
+});
+
+const Wrapper = ({children}) => (<Provider store={store}>{children}</Provider>);
+
+describe('<Item/>', ()=> {
+    test('Assert displayed values for fav list', () =>{
+        const expectedCardInfos = store.getState().appReducer.favoriteCards[0];
+
+        render(<Wrapper>
+            <Item route={{
+                card: expectedCardInfos,
+                bool: true,
+            }} ></Item>
+        </Wrapper>)
+
+        expect(screen.getByTestId('card-url')).toHaveProperty("source", {uri: expectedCardInfos.img})
+            
+        let size = store.getState().appReducer.favoriteCards.length;
+
+        fireEvent.press(screen.getByTestId("button"))
+
+        expect(store.getState().appReducer.favoriteCards.length).toBe(size - 1)
+        
+    })
+});

test/action/setCardsList.test.js

@@ -0,0 +1,14 @@
+import { Card } from "../../models/Card";
+import { setCardsList } from "../../redux/actions/action_setCardsList";
+
+describe('setCardLIst',() => {
+    it('should take the list', () => {
+        const payload = [new Card("1","test1","",""),new Card("2","test2","","",true)];
+        const expectation = {
+            type: "FETCH_DATA",
+            payload: payload,
+        };
+
+        expect(setCardsList(payload)).toEqual(expectation);
+    })
+})

test/action/setFavs.test.js

@@ -0,0 +1,16 @@
+import { Card } from "../../models/Card";
+import { setFavList } from "../../redux/actions/action_setFavList";
+import { setList } from "../../redux/actions/action_setFavs";
+
+
+describe('setFavs',() => {
+    it('should take the list', () => {
+        const payload = [new Card("1","test1","",""),new Card("2","test2","","",true)];
+        const expectation = {
+            type: "SET_FAVS",
+            payload: payload,
+        };
+
+        expect(setList(payload)).toEqual(expectation);
+    })
+})

test/reducer/appReducer.test.js

@@ -0,0 +1,25 @@
+import appReducer from "../../redux/reducers/appReducer";
+
+describe('Test Reducer', () => {
+    let initialState = {
+        cards: [],
+        favoriteCards: []
+    }
+
+    it('should return initial state', () => {
+        expect(appReducer(undefined, {})).toEqual(initialState);
+    });
+
+    it('should handle FETCH_DATA', () => {
+        const payload = [new Card("1","test1","",""),new Card("2","test2","","",true)];
+        expect(
+            appReducer(initialState, {
+                type: "FETCH_DATA",
+                payload,
+            })
+        ).toEqual({
+            cards: payload,
+            favoriteCards: [],
+        });
+    });
+});

test/setup/jestSetupFile.js

@@ -0,0 +1,3 @@
+import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+
+jest.mock('@react-native-community/async-storage', () => mockAsyncStorage);

test/setup/testReducer.ts

@@ -0,0 +1,13 @@
+import { Card } from "../../models/Card";
+import appReducer from "../../redux/reducers/appReducer"
+
+const initialState = {
+    cards: [new Card("1","test1","url1","urlGold2")],
+    favoriteCards: [new Card("1","test1","url1","urlGold2")]
+}
+
+//@ts-ignore
+export default testReducer = (state = initialState, action) => {
+    //@ts-ignore
+    return appReducer(initialState,action);
+}