Fixed filterPokemonByType problem by creating separate function and write unit tests
parent
fd21848a85
commit
92f7111943
|
@ -4,6 +4,18 @@ import Filters from './Filters';
|
||||||
import Loading from 'components/Loading';
|
import Loading from 'components/Loading';
|
||||||
|
|
||||||
import { useAppSelector } from 'app/hooks';
|
import { useAppSelector } from 'app/hooks';
|
||||||
|
import { PokemonResponseData } from './types/api';
|
||||||
|
|
||||||
|
export const filterPokemonByType = (
|
||||||
|
pokemonList: PokemonResponseData[],
|
||||||
|
selectedType: string,
|
||||||
|
) => {
|
||||||
|
return pokemonList.filter(
|
||||||
|
pokemon =>
|
||||||
|
selectedType === 'All Types' ||
|
||||||
|
pokemon.types.some(type => type.type.name === selectedType),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const Pokedex = () => {
|
const Pokedex = () => {
|
||||||
const isLoadingPokemons = useAppSelector(
|
const isLoadingPokemons = useAppSelector(
|
||||||
|
@ -14,10 +26,7 @@ const Pokedex = () => {
|
||||||
|
|
||||||
const pokemonList = useAppSelector(state => state.pokedex.pokemonList);
|
const pokemonList = useAppSelector(state => state.pokedex.pokemonList);
|
||||||
|
|
||||||
const filteredPokemonList = pokemonList.filter(pokemon => {
|
const filteredPokemonList = filterPokemonByType(pokemonList, selectedType);
|
||||||
selectedType === 'All Types' ||
|
|
||||||
pokemon.types.some(type => type.type.name === selectedType);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { filterPokemonByType } from 'features/Pokedex/Pokedex';
|
||||||
|
import { PokemonResponseData } from 'features/Pokedex/types/api';
|
||||||
|
import pokemon1 from 'features/Pokedex/__test__/pokemon1.json';
|
||||||
|
import pokemon2 from 'features/Pokedex/__test__/pokemon2.json';
|
||||||
|
import { AppDispatch, AppStore } from 'app/store';
|
||||||
|
import { configureStore, Store } from '@reduxjs/toolkit';
|
||||||
|
import { pokedexSlice } from 'features/Pokedex/pokedexSlice';
|
||||||
|
import { pokedexApi } from 'features/Pokedex/pokedexApi';
|
||||||
|
import { listenerMiddleware } from 'app/listenerMiddleware';
|
||||||
|
|
||||||
|
let store: AppStore;
|
||||||
|
let dispatch: AppDispatch;
|
||||||
|
describe('filterPokemonByType works correctly', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
store = configureStore({
|
||||||
|
reducer: {
|
||||||
|
pokedex: pokedexSlice.reducer,
|
||||||
|
[pokedexApi.reducerPath]: pokedexApi.reducer,
|
||||||
|
},
|
||||||
|
middleware: getDefaultMiddleware =>
|
||||||
|
getDefaultMiddleware().concat(
|
||||||
|
pokedexApi.middleware,
|
||||||
|
listenerMiddleware.middleware,
|
||||||
|
),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const pokemonList: PokemonResponseData[] = [pokemon1, pokemon2];
|
||||||
|
|
||||||
|
it('should return all Pokemon if the selected type is "All Types"', () => {
|
||||||
|
const selectedType = 'All Types';
|
||||||
|
const filteredList = filterPokemonByType(pokemonList, selectedType);
|
||||||
|
expect(filteredList).toEqual(pokemonList);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return only Pokemon of the selected type', () => {
|
||||||
|
const selectedType = 'fire';
|
||||||
|
const filteredList = filterPokemonByType(pokemonList, selectedType);
|
||||||
|
const allPokemonAreOfTypeFire = filteredList.every(pokemon =>
|
||||||
|
pokemon.types.some(type => type.type.name === selectedType),
|
||||||
|
);
|
||||||
|
expect(allPokemonAreOfTypeFire).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue