release/0.1.0 - usePokeApiQuery

[BenoitSafari]

usePokeApiQuery

Creer un hook custom permettant de consomer l'API Rest https://pokeapi.co/

Criteres d'acceptation

• [ ] Les tests unitaires fournis retournent un succes
• [ ] Les fonctions/classes/modules créées sont couvertes par des tests unitaires
• [ ] Les librairies jsdom et @testing-library/react sont installées
• [ ] usePokeApiQuery est construit sur une classe ou des fonctions permettant de gérer un client http de manière réutilisable
  • Gestion des reponses (status, json data, erreurs...)
  • Gestion de la configuration du client (Headers, baseUrl...)
  • Se baser sur l'API Fetch ou Axios selon preferences

Test unitaires

import { renderHook, waitFor } from '@testing-library/react';
import { describe, expect, test } from 'vitest';
import usePokeApiQuery from './usePokeApiQuery';

describe('usePokeApiQuery()', () => {
    test('Sets data on successful API call', async () => {
        const { result } = renderHook(() => usePokeApiQuery('/pokemon/pikachu'));
        // @ts-expect-error
        await waitFor(() => expect(result.current.data?.name).toBe('pikachu'));
    });

    test('Sets loading to false after API call', async () => {
        const { result } = renderHook(() => usePokeApiQuery('/pokemon/pikachu'));
        await waitFor(() => expect(result.current.loading).toBe(false));
    });

    test('Sets loading to true during API call', async () => {
        const { result } = renderHook(() => usePokeApiQuery('/pokemon/pikachu'));
        expect(result.current.loading).toBe(true);
    });

    test('Sets error on failed API call', async () => {
        const { result } = renderHook(() => usePokeApiQuery('/pokemon/gargamel'));
        await waitFor(() => expect(result.current.hasError).toBe(true));
        await waitFor(() => expect(result.current.status).toBe(404));
    });
});