diff --git a/package.json b/package.json index 0392c77..d332249 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "ledesma-app", "homepage": "https://faculedesma.github.io/ledesma-app", "private": true, - "version": "1.0.0", + "version": "1.0.2", "type": "module", "scripts": { "dev": "vite", diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index 2280db9..2fcab8e 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import HomeTable from './HomeTable'; import HomeCard from './HomeCard'; import './home.scss'; @@ -6,7 +6,12 @@ import './home.scss'; const Home: React.FC = (): JSX.Element => { const [selectedPokemonId, setSelectedPokemonId] = useState(''); - const handleSelectPokemonId = (id: string): void => setSelectedPokemonId(id); + const handleSelectPokemonId = useMemo( + () => + (id: string): void => + setSelectedPokemonId(id), + [] + ); return (
diff --git a/src/components/home/HomeCard.tsx b/src/components/home/HomeCard.tsx index c2c80ff..a3bef93 100644 --- a/src/components/home/HomeCard.tsx +++ b/src/components/home/HomeCard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import Card from '@components/card/Card'; import { useSinglePokemon } from '@components/hooks/useSinglePokemon'; @@ -32,7 +32,8 @@ const HomeCard: React.FC = ({ pokemonId }): JSX.Element => { } if (isError) { - return
Error!
; + console.error('Failed to load pokemon'); + return ; } return ( @@ -42,4 +43,4 @@ const HomeCard: React.FC = ({ pokemonId }): JSX.Element => { ); }; -export default HomeCard; +export default memo(HomeCard); diff --git a/src/components/home/HomeTable.tsx b/src/components/home/HomeTable.tsx index 8819ba8..2be7e57 100644 --- a/src/components/home/HomeTable.tsx +++ b/src/components/home/HomeTable.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { memo, useState } from 'react'; import { Table, TableRow, @@ -37,7 +37,12 @@ const HomeTable: React.FC = ({ } if (isError) { - return
Error!
; + console.error('Failed to load pokemons'); + return ( +
+ +
+ ); } const handleSelectRow = (id: string): void => setPokemonId(id); @@ -96,4 +101,4 @@ const HomeTable: React.FC = ({ ); }; -export default HomeTable; +export default memo(HomeTable); diff --git a/test/Home/HomeCard.spec.tsx b/test/Home/HomeCard.spec.tsx index e300bf9..baa1450 100644 --- a/test/Home/HomeCard.spec.tsx +++ b/test/Home/HomeCard.spec.tsx @@ -27,7 +27,7 @@ const homeCardProps = { pokemonId: '1' }; -describe('', () => { +describe('', () => { it('fetches pokemon 1', async () => { jest.spyOn(hooks, 'useSinglePokemon').mockImplementation(() => ({ data: mockedData, @@ -55,7 +55,9 @@ describe('', () => { isError: true, isLoading: false })); - const { getByText } = await render(); - expect(getByText('Error!')).toBeInTheDocument(); + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const { container } = await render(); + expect(container.firstChild).toHaveClass('card-loading'); + expect(errorSpy).toHaveBeenCalledTimes(1); }); }); diff --git a/test/Home/HomeTable.spec.tsx b/test/Home/HomeTable.spec.tsx index 7a57045..2b1c575 100644 --- a/test/Home/HomeTable.spec.tsx +++ b/test/Home/HomeTable.spec.tsx @@ -55,7 +55,9 @@ describe('', () => { isError: true, isLoading: false })); - const { getByText } = await render(); - expect(getByText('Error!')).toBeInTheDocument(); + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const { container } = await render(); + expect(container.firstChild?.firstChild).toHaveClass('table-skeleton'); + expect(errorSpy).toHaveBeenCalledTimes(1); }); });