Angular Version 14: Getting 'pokemons' array of a trainer - json

Question

Good morning!
These days i've been working on a pokemon-based project.
My issue to solve right now is to solve the function located at service which gets the pokemons array of a trainer (function below):
getPokemonsOfATrainer(nombreEntrenador: string){
return this.http.get<Trainer>(`${this.apiUrl1}?fullName=${nombreEntrenador}`).pipe(
map( (entrenador: Trainer) => {
return entrenador.pokemons;
})
);
}
My mocked JSON (example of 1 trainer), it's in the following format:
{
"entrenadores": [
{
"fullName": "Alecs",
"pokemons" : [
{
"name":"Venusaur",
"nature": "Calm",
"attacks": [
{
"name":"Leech Seed",
"type":"Grass",
"style":"Attack"
},
{
"name":"Sleep Powder",
"type":"Grass",
"style":"Support"
},
{
"name":"Grass Knot",
"type":"Grass",
"style":"Attack"
},
{
"name":"Sludge Bomb",
"type":"Poison",
"style":"Attack"
}
]
},
{
"name": "Skarmory",
"nature": "Impish",
"attacks": [
{
"name": "Slash",
"type": "Normal",
"style": "Attack"
},
{
"name": "Spikes",
"type": "Bug",
"style": "Support"
},
{
"name": "Brave Bird",
"type": "Flying",
"style": "Attack"
},
{
"name": "Rock Slide",
"type": "Rock",
"style": "Attack"
}
]
},
{
"name": "Registeel",
"nature": "Careful",
"attacks": [
{
"name": "Focus Blast",
"type": "Fighting",
"style": "Attack"
},
{
"name": "Hyper Beam",
"type": "Normal",
"style": "Attack"
},
{
"name": "Shadow Claw",
"type": "Dark",
"style": "Attack"
},
{
"name": "Rock Smash",
"type": "Rock",
"style": "Attack"
}
]
},
{
"name": "Uxie",
"nature": "Impish",
"attacks": [
{
"name": "Future Sight",
"type": "Psychic",
"style": "Support"
},
{
"name": "Memento",
"type": "Normal",
"style": "Support"
},
{
"name": "Dazzling Gleam",
"type": "Psychic",
"style": "Support"
},
{
"name": "Drain Punch",
"type": "Fighting",
"style": "Attack"
}
]
},
{
"name": "Gallade",
"nature": "Adamant",
"attacks": [
{
"name": "Hypnosis",
"type": "Psychic",
"style": "Support"
},
{
"name": "Night Slash",
"type": "Ghost",
"style": "Attack"
},
{
"name": "Brick Break",
"type": "Fighting",
"style": "Attack"
},
{
"name": "Close Combat",
"type": "fighting",
"style": "Support"
}
]
}
]
}
]
}
Would exist a proper way to get the pokemons of a trainer?
Thanks in advance!

Answer 1

You should use HttpClientTestingModule and follow the standard way how to stub the response of http requests. For example, this one: https://ng-mocks.sudo.eu/guides/http-request
Your test can look like:
describe('suite', () => {
beforeEach(() => TestBed.configureTestingModule({
imports: [HttpClientTestingModule], // <- add
providers: [PokemonService],
}).compileComponents());
it('test', () => {
// getting the service and httpMock
const service = TestBed.inject(PokemonService);
const httpMock = TestBed.inject(HttpTestingController);
// subscribing to the result of the http request
let actual: any;
service.getPokemonsOfATrainer('trainer')
.subscribe(value => actual = value);
// stubbing the http request
const req = httpMock.expectOne('<PUT_HERE_API_URL>?fullName=Alecs');
expect(req.request.method).toEqual('GET');
req.flush(mockedJson.entrenadores);
httpMock.verify();
// asserting that we got what expected
expect(actual).toEqual(mockedJson.entrenadores.pokemons);
});
});