From e69ffb995670f9182ddd36b4e4304e086ef1340a Mon Sep 17 00:00:00 2001 From: Santiago Fleitas Date: Wed, 15 Nov 2023 19:41:49 -0300 Subject: [PATCH] Create MainSlider and List tests --- src/components/List/index.tsx | 6 +- src/components/MainSlider/index.tsx | 166 +++++++++++------------ src/mocks/handlers.ts | 64 ++++++++- src/tests/components/List.test.tsx | 107 +++++++++++++++ src/tests/components/MainSlider.test.tsx | 14 ++ 5 files changed, 266 insertions(+), 91 deletions(-) create mode 100644 src/tests/components/List.test.tsx create mode 100644 src/tests/components/MainSlider.test.tsx diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx index 3d08e8f..20ff0b9 100644 --- a/src/components/List/index.tsx +++ b/src/components/List/index.tsx @@ -78,10 +78,10 @@ export default function List({ id, description, gamesList }: ListProps) { }, []); return ( - - + +

{description}

- + diff --git a/src/components/MainSlider/index.tsx b/src/components/MainSlider/index.tsx index e67aa0a..eba7cb4 100644 --- a/src/components/MainSlider/index.tsx +++ b/src/components/MainSlider/index.tsx @@ -29,100 +29,98 @@ export function MainSlider() { } return ( - <> - - - - Logotipo - + + + + Logotipo + - + - - - - + + + + - -

Cyberpunk 2077: Phantom Liberty

-

- Phantom Liberty is a new spy-thriller expansion for the open-world action-adventure RPG Cyberpunk 2077. As - cyber-enhanced mercenary V, join secret agent Solomon Reed to unravel a web of shattered loyalties and - sinister political machinations. -

- + +

Cyberpunk 2077: Phantom Liberty

+

+ Phantom Liberty is a new spy-thriller expansion for the open-world action-adventure RPG Cyberpunk 2077. As + cyber-enhanced mercenary V, join secret agent Solomon Reed to unravel a web of shattered loyalties and + sinister political machinations. +

+ - + - - {signed && user && ( -

- Seja-bem vindo {user.name} -

+ {signed && user && ( +

+ Seja-bem vindo {user.name} +

+ )} + + + {signed && ( + + + {} + + + )} - - {signed && ( - - - {} - + {!signed && ( + + + + {} + - )} - - {!signed && ( - - - - {} - - - - - )} + + )} - {!signed && ( - - - - {} - - - - - )} + {!signed && ( + + + + {} + + + + + )} - {signed && ( - - - - {} - - - - - )} - - - - - + {signed && ( + + + + {} + + + + + )} + + + + ); } diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 65bd3fd..c32650b 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -1,9 +1,6 @@ import { http, HttpResponse } from 'msw'; - - const getMostPopularGames = http.get('http://localhost:3003/api/games/most-popular', ({ request }) => { - // console.log('Request INTERCEPTADA pelo MWS: http://localhost:3003/api/games/most-popular'); const mockedGames = [{ "id": 1020, "cover": { @@ -35,7 +32,66 @@ const getMostPopularGames = http.get('http://localhost:3003/api/games/most-popul return HttpResponse.json(mockedGames) }); +const getGameById = http.get('http://localhost:3003/api/games/get-by-id', ({ request }) => { + return HttpResponse.json([ + [ + { + "id": 72, + "cover": { + "id": 82660, + "game": 72, + "height": 1948, + "url": "//images.igdb.com/igdb/image/upload/t_thumb/co1rs4.jpg", + "width": 1461 + }, + "name": "Portal 2", + "rating": 91.76163294183355, + "slug": "portal-2", + "summary": "Sequel to the acclaimed Portal (2007), Portal 2 pits the protagonist of the original game, Chell, and her new robot friend, Wheatley, against more puzzles conceived by GLaDOS, an A.I. with the sole purpose of testing the Portal Gun's mechanics and taking revenge on Chell for the events of Portal. As a result of several interactions and revelations, Chell once again pushes to escape Aperture Science Labs." + } + ], + [ + { + "id": 1942, + "cover": { + "id": 89386, + "game": 1942, + "height": 1559, + "url": "//images.igdb.com/igdb/image/upload/t_thumb/co1wyy.jpg", + "width": 1170 + }, + "name": "The Witcher 3: Wild Hunt", + "rating": 94.36538432301626, + "slug": "the-witcher-3-wild-hunt", + "summary": "RPG and sequel to The Witcher 2 (2011), The Witcher 3 follows witcher Geralt of Rivia as he seeks out his former lover and his young subject while intermingling with the political workings of the wartorn Northern Kingdoms. Geralt has to fight monsters and deal with people of all sorts in order to solve complex problems and settle contentious disputes, each ranging from the personal to the world-changing." + } + ], + [ + { + "id": 1020, + "cover": { + "id": 120937, + "game": 1020, + "height": 1580, + "url": "//images.igdb.com/igdb/image/upload/t_thumb/co2lbd.jpg", + "width": 1185 + }, + "name": "Grand Theft Auto V", + "rating": 89.88782798407868, + "slug": "grand-theft-auto-v", + "summary": "Grand Theft Auto V is a vast open world game set in Los Santos, a sprawling sun-soaked metropolis struggling to stay afloat in an era of economic uncertainty and cheap reality TV. The game blends storytelling and gameplay in new ways as players repeatedly jump in and out of the lives of the game’s three lead characters, playing all sides of the game’s interwoven story." + } + ] + ]); +}); + +// DELETE http://localhost:3003/api/lists/1 +const deleteListById = http.delete('http://localhost:3003/api/lists/:id', ({ request }) => { + return new HttpResponse(null, { status: 200 }) +}); export const handlers = [ - getMostPopularGames + getMostPopularGames, + getGameById, + deleteListById ]; \ No newline at end of file diff --git a/src/tests/components/List.test.tsx b/src/tests/components/List.test.tsx new file mode 100644 index 0000000..2793862 --- /dev/null +++ b/src/tests/components/List.test.tsx @@ -0,0 +1,107 @@ +import { describe, it, expect, vi } from 'vitest'; +import '@testing-library/jest-dom'; +import { fireEvent, render, screen } from '@testing-library/react'; +import List from '../../components/List'; + +describe('List test suite', () => { + beforeEach(() => { + const location: Location = window.location; + + window.location = { + ...location, + reload: vi.fn(), + }; + }); + + afterEach(() => { + window.location = location; + }); + + it('should render List component', () => { + const listId = 1; + const description = 'Lista de jogos 01'; + const gamesList = [ + { + id: 1, + gameid: 2, + listid: 1, + profileid: 1, + game: { + id: 2, + id_igdb: '72', + }, + }, + { + id: 2, + gameid: 3, + listid: 1, + profileid: 1, + game: { + id: 3, + id_igdb: '1942', + }, + }, + { + id: 3, + gameid: 1, + listid: 1, + profileid: 1, + game: { + id: 1, + id_igdb: '1020', + }, + }, + ]; + + render(); + + const listContainer = screen.getByTestId('list-container'); + + expect(listContainer).toBeInTheDocument(); + }); + + it('should delete List when delete button is clicked', () => { + const listId = 1; + const description = 'Lista de jogos 01'; + const gamesList = [ + { + id: 1, + gameid: 2, + listid: 1, + profileid: 1, + game: { + id: 2, + id_igdb: '72', + }, + }, + { + id: 2, + gameid: 3, + listid: 1, + profileid: 1, + game: { + id: 3, + id_igdb: '1942', + }, + }, + { + id: 3, + gameid: 1, + listid: 1, + profileid: 1, + game: { + id: 1, + id_igdb: '1020', + }, + }, + ]; + + render(); + + const deleteListButton = screen.getByTestId('delete-list-button'); + + fireEvent.click(deleteListButton); + + expect(deleteListButton).toBeInTheDocument(); + }); +}); diff --git a/src/tests/components/MainSlider.test.tsx b/src/tests/components/MainSlider.test.tsx new file mode 100644 index 0000000..83eaed2 --- /dev/null +++ b/src/tests/components/MainSlider.test.tsx @@ -0,0 +1,14 @@ +import { describe, it, expect, vi } from 'vitest'; +import '@testing-library/jest-dom'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { MainSlider } from '../../components/MainSlider'; + +describe('MainSlider test suite', () => { + test('should render MainSlider component', async () => { + render(); + + const mainSliderContainer = screen.getByTestId('main-slider-container'); + + expect(mainSliderContainer).toBeInTheDocument(); + }); +});