Loading Players, error in api call, testing api calls y Game component test

Author: teseo

.eslintrc.js

@@ -22,5 +22,8 @@ module.exports = {
     react: {
       version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
     }
+  },
+  env: {
+    jest: true
   }
 };

package-lock.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
@@ -37,6 +36,7 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^24.9.1",

package.json

@@ -16,6 +16,6 @@ describe("<CounterPanel />", () => {
         .children()
         .at(5)
         .props(),
-    ).toEqual({ children: 6, inputColor: "grey" });
+    ).toEqual({ children: 6, inputColor: "yellow" });
   });
 });

src/Components/CounterPanel/__tests__/CounterPanel.test.tsx

@@ -48,6 +48,11 @@ export const HeaderText = styled.span`
   justify-content: center;
   align-items: center;
 `;
+export const LoadingText = styled.span`
+  margin: 5px 5px 0 5px;
+  font-size: 18px;
+  color: aliceblue;
+`;
 export const BottomContainer = styled.div`
   display: flex;
   height: 25px;

src/Components/Game/StyledComponents/index.tsx

@@ -0,0 +1,11 @@
+[
+  {"first_name":"Stephen","fixture":{"_members":["112160"],"_ref":"fixtures.id"},"fppg":47.94303797468354,"id":"15475-9524","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/9524.png","width":200}},"injured":false,"injury_details":"knee","injury_status":"o","last_name":"Curry","news":{"latest":"2016-05-02T18:35:15Z"},"played":79,"player_card_url":"https://www.fanduel.com/e/Player/9524/Stats/15475","position":"PG","removed":false,"salary":10600,"starting_order":null,"team":{"_members":["687"],"_ref":"teams.id"}},
+  {"first_name":"Draymond","fixture":{"_members":["112160"],"_ref":"fixtures.id"},"fppg":38.9604938271605,"id":"15475-15860","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/15860.png","width":200}},"injured":false,"injury_details":null,"injury_status":null,"last_name":"Green","news":{"latest":"2016-05-02T01:24:54Z"},"played":81,"player_card_url":"https://www.fanduel.com/e/Player/15860/Stats/15475","position":"PF","removed":false,"salary":9300,"starting_order":null,"team":{"_members":["687"],"_ref":"teams.id"}},
+  {"first_name":"Damian","fixture":{"_members":["112160"],"_ref":"fixtures.id"},"fppg":39.37866666666667,"id":"15475-20848","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/20848.png","width":200}},"injured":false,"injury_details":null,"injury_status":null,"last_name":"Lillard","news":{"latest":"2016-05-02T01:13:36Z"},"played":75,"player_card_url":"https://www.fanduel.com/e/Player/20848/Stats/15475","position":"PG","removed":false,"salary":8400,"starting_order":null,"team":{"_members":["703"],"_ref":"teams.id"}},
+  {"first_name":"Hassan","fixture":{"_members":["112164"],"_ref":"fixtures.id"},"fppg":35.75342465753425,"id":"15475-12363","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/12363.png","width":200}},"injured":false,"injury_details":null,"injury_status":null,"last_name":"Whiteside","news":{"latest":"2016-05-02T01:04:53Z"},"played":73,"player_card_url":"https://www.fanduel.com/e/Player/12363/Stats/15475","position":"C","removed":false,"salary":8000,"starting_order":null,"team":{"_members":["693"],"_ref":"teams.id"}},
+  {"first_name":"Klay","fixture":{"_members":["112160"],"_ref":"fixtures.id"},"fppg":30.839999999999996,"id":"15475-14509","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/14509.png","width":200}},"injured":false,"injury_details":null,"injury_status":null,"last_name":"Thompson","news":{"latest":"2016-05-02T01:29:23Z"},"played":80,"player_card_url":"https://www.fanduel.com/e/Player/14509/Stats/15475","position":"SG","removed":false,"salary":8000,"starting_order":null,"team":{"_members":["687"],"_ref":"teams.id"}},
+  {"first_name":"Kyle","fixture":{"_members":["112164"],"_ref":"fixtures.id"},"fppg":38.5974025974026,"id":"15475-9535","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/9535.png","width":200}},"injured":false,"injury_details":null,"injury_status":null,"last_name":"Lowry","news":{"latest":"2016-04-30T14:04:05Z"},"played":77,"player_card_url":"https://www.fanduel.com/e/Player/9535/Stats/15475","position":"PG","removed":false,"salary":7800,"starting_order":null,"team":{"_members":["706"],"_ref":"teams.id"}},
+  {"first_name":"Dwyane","fixture":{"_members":["112164"],"_ref":"fixtures.id"},"fppg":31.43783783783784,"id":"15475-9585","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/9585.png","width":200}},"injured":false,"injury_details":null,"injury_status":null,"last_name":"Wade","news":{"latest":"2016-04-30T14:15:19Z"},"played":74,"player_card_url":"https://www.fanduel.com/e/Player/9585/Stats/15475","position":"SG","removed":false,"salary":7500,"starting_order":null,"team":{"_members":["693"],"_ref":"teams.id"}},
+  {"first_name":"DeMar","fixture":{"_members":["112164"],"_ref":"fixtures.id"},"fppg":35.26025641025641,"id":"15475-9714","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/9714.png","width":200}},"injured":false,"injury_details":null,"injury_status":null,"last_name":"DeRozan","news":{"latest":"2016-05-02T12:29:25Z"},"played":78,"player_card_url":"https://www.fanduel.com/e/Player/9714/Stats/15475","position":"SG","removed":false,"salary":7400,"starting_order":null,"team":{"_members":["706"],"_ref":"teams.id"}},
+  {"first_name":"C.J.","fixture":{"_members":["112160"],"_ref":"fixtures.id"},"fppg":31.653750000000002,"id":"15475-19067","images":{"default":{"height":200,"url":"https://d17odppiik753x.cloudfront.net/playerimages/nba/19067.png","width":200}},"injured":false,"injury_details":null,"injury_status":null,"last_name":"McCollum","news":{"latest":"2016-05-02T01:18:45Z"},"played":80,"player_card_url":"https://www.fanduel.com/e/Player/19067/Stats/15475","position":"SG","removed":false,"salary":7000,"starting_order":null,"team":{"_members":["703"],"_ref":"teams.id"}}
+]

src/Components/Game/__tests__/Data/tenPlayers.json

@@ -0,0 +1,39 @@
+import React from "react";
+import { render, cleanup, act, wait, waitForElement } from "@testing-library/react";
+import axios from "axios";
+import Game from "./../../Game";
+import tenPlayers from "./Data/tenPlayers.json";
+
+beforeEach(() => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+  // @ts-ignore
+  axios.get = jest.fn(() => Promise.resolve({ data: { players: tenPlayers } }));
+});
+afterEach(cleanup);
+describe("Game", () => {
+  it("displays text “Loading Players...” while fetching players", () => {
+    const { getByText } = render(<Game />);
+
+    getByText("Loading Players...");
+  });
+  it("removes text “Loading Players...” after fetching players", () => {
+    act(async () => {
+      const { getByText } = render(<Game />);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      await wait(() => expect(getByText("Loading Players...")).not.toBeInTheDocument());
+    });
+  });
+  it("displays error in the api call", async () => {
+    axios.get = jest.fn(() => Promise.resolve({ data: { players: [] } }));
+    const { getByText } = render(<Game />);
+    await wait(() => expect(getByText("Error Loading Players")).toBeTruthy());
+  });
+  it("displays the players received from the api call", async () => {
+    await act(async () => {
+      const { getAllByText } = render(<Game />);
+      await waitForElement(() => getAllByText("Name: Stephen Curry"));
+      getAllByText("Name: Stephen Curry");
+    });
+  });
+});

src/Components/Game/__tests__/Game.test.tsx

@@ -13,6 +13,7 @@ import {
   GlobalHeader,
   HeaderContainer,
   HeaderText,
+  LoadingText,
   PlayersCardContainer,
   RestartButtonContainer,
   TopLogoImage,
@@ -25,23 +26,14 @@ const Game: React.FC = () => {
   const initialState = {
     score: 0,
     showResult: false,
+    queryPerformed: false,
     gameOver: false,
     players: [],
     playersRaw: [],
     guessRight: PENDING_GUESS,
   };
 
   const [state, setState] = useState<StateType>(initialState);
-  const loadPlayers = async (): Promise<void> => {
-    if (state.playersRaw.length === 0) {
-      const players = await ApiService.getPlayers();
-      setState({
-        ...state,
-        players: players,
-        playersRaw: players,
-      });
-    }
-  };
   const handlePlayerClick = (
     playersToPlay: Array<Player>,
     playerOne: Player,
@@ -69,11 +61,44 @@ const Game: React.FC = () => {
     });
   };
   const handleRestartGameClick = (): void => {
-    setState(initialState);
+    setState({
+      ...state,
+      score: 0,
+      showResult: false,
+      queryPerformed: true,
+      gameOver: false,
+      players: state.playersRaw,
+      guessRight: PENDING_GUESS,
+    });
   };
   useEffect(() => {
-    loadPlayers();
-  });
+    // Basic implementation to handle race conditions
+    // When component might unmount before API call finishes
+    let isStopped = false;
+    if (!isStopped) {
+      const loadPlayers = async (): Promise<void> => {
+        try {
+          const players = await ApiService.getPlayers();
+          if (!isStopped && players) {
+            setState({
+              ...state,
+              queryPerformed: true,
+              players: players,
+              playersRaw: players,
+            });
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      };
+      loadPlayers();
+    }
+    return () => {
+      isStopped = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const playersToPlay = state.players.slice();
   const score = state.score;
   const playerOne = playersToPlay.shift();
@@ -90,6 +115,12 @@ const Game: React.FC = () => {
       </HeaderContainer>
       <CounterPanel score={state.score} />
       <PlayersCardContainer>
+        {state.players.length === 0 &&
+          (state.queryPerformed ? (
+            <LoadingText>Error Loading Players</LoadingText>
+          ) : (
+            <LoadingText>Loading Players...</LoadingText>
+          ))}
         {score < MAX_SCORE && playerOne && playerTwo && (
           <PlayerCard
             firstName={playerOne.first_name}

src/Components/Game/index.tsx

@@ -42,6 +42,7 @@ export interface StateType {
   players: Array<Player>;
   playersRaw: Array<Player>;
   showResult: boolean;
+  queryPerformed: boolean;
   guessRight: number;
   gameOver: boolean;
 }

src/Components/interfaces.tsx

@@ -5,6 +5,6 @@ import { Player } from "./interfaces";
 export default class ApiService {
   static async getPlayers(): Promise<Array<Player>> {
     const response = await axios.get(DATA_URL);
-    return response.data.players;
+    return response.data.players ? response.data.players : [];
   }
 }