test(app): add home card & table test

src/components/card/Card.tsx

@@ -4,7 +4,7 @@ import { ISinglePokemonParsed } from 'src/types';
 import './card.scss';
 
 interface ICardProps {
-  pokemon: ISinglePokemonParsed;
+  pokemon: ISinglePokemonParsed | undefined;
 }
 
 export const Card: React.FC<ICardProps> = ({ pokemon }): JSX.Element => {

src/components/hooks/useSinglePokemon.ts

@@ -1,8 +1,12 @@
 import { useQuery, QueryFunctionContext } from 'react-query';
 import { capitalizeFirstLetter } from '@utils/utils';
-import { ISinglePokemonParsed, IUseSinglePokemonResponse } from '../../types';
+import {
+  ISinglePokemonParsed,
+  IUseSinglePokemonResponse,
+  ISinglePokemonAPI
+} from '../../types';
 
-const parsePokemonData = (data: any): ISinglePokemonParsed => {
+const parsePokemonData = (data: ISinglePokemonAPI): ISinglePokemonParsed => {
   return {
     id: data.id,
     name: capitalizeFirstLetter(data.name),

src/types.ts

@@ -1,5 +1,5 @@
 export interface ISinglePokemonParsed {
-  id: string;
+  id: number;
   name: string;
   imageSrc: string;
   height: number;
@@ -27,14 +27,50 @@ export interface IPokemonsAPI {
   results: PokemonResult[];
 }
 
+export interface ISinglePokemonAPI {
+  abilities: [];
+  base_experience: number;
+  forms: [];
+  game_indices: [];
+  height: number;
+  held_items: [];
+  id: number;
+  is_default: boolean;
+  location_area_encounters: string;
+  moves: [];
+  name: string;
+  order: number;
+  past_types: [];
+  species: {
+    name: string;
+    url: string;
+  };
+  sprites: {
+    other: {
+      'official-artwork': {
+        front_default: string;
+      };
+    };
+  };
+  stats: Array<{
+    base_stat: number;
+    effort: number;
+    stat: {
+      name: string;
+      url: string;
+    };
+  }>;
+  weight: number;
+}
+
 export interface IUsePokemonsResponse {
   data: IPokemonsAPI | undefined;
   isError: boolean;
   isLoading: boolean;
 }
 
 export interface IUseSinglePokemonResponse {
-  data: any;
+  data: ISinglePokemonParsed | undefined;
   isError: boolean;
   isLoading: boolean;
 }

test/Home/HomeCard.spec.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import HomeCard from '../../src/components/home/HomeCard';
+import { useSinglePokemon } from '../../src/components/hooks/useSinglePokemon';
+import * as hooks from '../../src/components/hooks/useSinglePokemon';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockedData = {
+  id: 1,
+  name: 'Bulbasaur',
+  imageSrc:
+    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png',
+  height: 7,
+  weight: 69,
+  stats: {
+    hp: 45,
+    attack: 49,
+    defense: 49,
+    specialAttack: 65,
+    specialDefense: 65,
+    speed: 45,
+    experience: 64
+  }
+};
+
+const homeCardProps = {
+  pokemonId: '1'
+};
+
+describe('<HomeTable />', () => {
+  it('fetches pokemon 1', async () => {
+    jest.spyOn(hooks, 'useSinglePokemon').mockImplementation(() => ({
+      data: mockedData,
+      isError: false,
+      isLoading: false
+    }));
+    await render(<HomeCard {...homeCardProps} />);
+    expect(useSinglePokemon).toHaveBeenCalledTimes(1);
+    expect(useSinglePokemon).toHaveBeenCalledWith(homeCardProps.pokemonId);
+  });
+
+  it('shows loading card', async () => {
+    jest.spyOn(hooks, 'useSinglePokemon').mockImplementation(() => ({
+      data: undefined,
+      isError: false,
+      isLoading: true
+    }));
+    const { container } = await render(<HomeCard {...homeCardProps} />);
+    expect(container.firstChild).toHaveClass('card-loading');
+  });
+
+  it('shows error', async () => {
+    jest.spyOn(hooks, 'useSinglePokemon').mockImplementation(() => ({
+      data: undefined,
+      isError: true,
+      isLoading: false
+    }));
+    const { getByText } = await render(<HomeCard {...homeCardProps} />);
+    expect(getByText('Error!')).toBeInTheDocument();
+  });
+});

test/HomeTable.spec.tsx → test/Home/HomeTable.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import HomeTable from '../src/components/home/HomeTable';
-import { usePokemons } from '../src/components/hooks/usePokemons';
-import * as hooks from '../src/components/hooks/usePokemons';
+import HomeTable from '../../src/components/home/HomeTable';
+import { usePokemons } from '../../src/components/hooks/usePokemons';
+import * as hooks from '../../src/components/hooks/usePokemons';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';