améliorations tests

iut-expo-starter/.expo/packager-info.json

@@ -1,6 +1,6 @@
 {
   "expoServerPort": null,
-  "packagerPort": null,
+  "packagerPort": 19000,
   "packagerPid": null,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,

iut-expo-starter/.expo/test/redux-store.test.ts

@@ -1,7 +0,0 @@
-import { getCityList } from 'redux/actions/getFavoriteCity';
-
-describe("Actions tests", () => {
-    it('should create an action with FETCH_FAVORITE_CITY type', () => {
-        expect(getFavoriteCity().toEqual({type: 'FETCH_FAVORITE_CITY'}));
-    })
-})

iut-expo-starter/package.json

@@ -48,7 +48,7 @@
       "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"
+      "**.test.ts"
     ],
     "testEnvironment": "node",
     "testEnvironmentOptions": {

iut-expo-starter/test/component.test.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import {expect} from '@jest/globals';
+import NounoursListItem from "../components/NounoursListItem";
+import {Provider} from "react-redux";
+import {configureStore} from "@reduxjs/toolkit";
+import {fireEvent, render, screen} from '@testing-library/react-native'
+import '@testing-library/jest-native/extend-expect';
+import testReducer from "./testReducer";
+
+
+// To wait for things like animation to be fully loaded.
+jest.useFakeTimers();
+
+// Configure store for testing purpose
+const store = configureStore({
+    reducer: {
+        appReducer: testReducer,
+    },
+    middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware({
+            serializableCheck: false
+        })
+});
+
+// When using a Data Provider (like redux) in your App, you will need to wrap all your tested component into a test Provider
+// You cannot use the exact same provider and store you create in App.tsx file because here you want mocked data into your store
+const Wrapper = ({children}) => (<Provider store={store}>{children}</Provider>);
+
+describe('<NounoursListItem />', () => {
+    test('Assert displayed values', () => {
+        const expectedNounoursInfos = store.getState().appReducer.nounours[0];
+
+        render(<Wrapper>
+            <NounoursListItem item={expectedNounoursInfos}/>
+        </Wrapper>)
+
+        // Get displayed text component and assert that its value contains our nounours name
+        expect(screen.getByTestId('nounours-name')).toHaveTextContent(expectedNounoursInfos.name)
+        expect(screen.getByTestId('nounours-nbPoils')).toHaveTextContent(expectedNounoursInfos.nbPoils)
+        expect(screen.getByTestId('nounours-age')).toHaveTextContent(expectedNounoursInfos.age)
+
+        expect(screen.getByTestId("nounours-image")).toHaveProp("source", {uri: expectedNounoursInfos.image})
+
+        let nounoursListSize = store.getState().appReducer.nounours.length;
+        // Use @testing-library to press our "delete" button 
+        fireEvent.press(screen.getByTestId("remove-button"))
+        // Make sure that this press action has delete our nounours from our current state (in our test store).
+        expect(store.getState().appReducer.nounours.length).toBe(nounoursListSize - 1)
+    })
+});

iut-expo-starter/test/reducers.test.ts

@@ -0,0 +1,22 @@
+import { FAVORITE_CITY_DATA, WEATHER_DATA } from "../data/stub";
+import appReducer from "../redux/reducers/appReducer"
+
+describe('test reducer', () => {
+    let initialState = {
+        weatherListSearched : [],
+        favoriteWeather : null,
+        favoriteCity : null,
+        weatherList : []
+    }
+    it('should return initial state', () => {
+        expect(appReducer(undefined, {})).toEqual(initialState);
+    })
+
+    it('should handle favorite city', () => {
+        expect(appReducer(initialState, {type : 'FETCH_FAVORITE_CITY', FAVORITE_CITY_DATA})).toEqual({weatherList : [], favoriteCity : FAVORITE_CITY_DATA})
+    })
+
+    it('should handle weather', () => {
+        expect(appReducer(initialState, {type : 'FETCH_WEATHER', WEATHER_DATA})).toEqual({weatherList : [WEATHER_DATA], favoriteCity : null})
+    })
+})

iut-expo-starter/test/redux-store.test.ts

@@ -1,5 +1,22 @@
+import { ExclusiveGesture } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition';
+import { City, FAVORITE_CITY_DATA, WEATHER_DATA } from '../data/stub';
+import { getFavoriteCity } from '../redux/actions/getFavoriteCity';
+import { setFavoriteCity } from '../redux/actions/setFavoriteCity';
+import { setWeather } from '../redux/actions/setWeather';
+
 describe("Actions tests", () => {
     it('should create an action with FETCH_FAVORITE_CITY type', () => {
-        expect(getFavoriteCity().toEqual({type: 'FETCH_FAVORITE_CITY'}));
+        const expectation = {
+            type : 'FETCH_FAVORITE_CITY',
+            payload : FAVORITE_CITY_DATA
+        }
+        expect(setFavoriteCity(FAVORITE_CITY_DATA)).toEqual(expectation);
+    })
+    it('should create an action with FETCH_WEATHER type', () => {
+        const expectation = {
+            type : 'FETCH_WEATHER',
+            payload : WEATHER_DATA
+        }
+        expect(setWeather(WEATHER_DATA)).toEqual(expectation);
     })
 })

iut-expo-starter/test/testReducer.ts

@@ -0,0 +1,14 @@
+import {WEATHER_DATA} from '../data/stub';
+import appReducer from "../redux/reducers/appReducer";
+
+// Mock values used in tests
+const initialState = {
+  weatherList: WEATHER_DATA, //Here you defined a static list loaded in the initial state. In your real store, this list is usually empty.
+  favoriteCity: [],
+}
+
+// Reducer for tests => Just call the "true" reducer with our mocked data as initial state
+// @ts-ignore
+export default testReducer = (state = initialState, action) => {
+  return appReducer(initialState, action);
+}