Skip to content

Commit

Permalink
Create MainSlider and List tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Sans-arch committed Nov 15, 2023
1 parent 6afd919 commit e69ffb9
Show file tree
Hide file tree
Showing 5 changed files with 266 additions and 91 deletions.
6 changes: 3 additions & 3 deletions src/components/List/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@ export default function List({ id, description, gamesList }: ListProps) {
}, []);

return (
<Container>
<ListDescription onClick={deleteList}>
<Container data-testid="list-container">
<ListDescription>
<h3>{description}</h3>
<span>
<span onClick={deleteList} data-testid="delete-list-button">
<MdDeleteForever id="delete-icon" />
</span>
</ListDescription>
Expand Down
166 changes: 82 additions & 84 deletions src/components/MainSlider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,100 +29,98 @@ export function MainSlider() {
}

return (
<>
<Container>
<Navbar>
<Logo>
<img src={gameHubLogo} alt="Logotipo" width={100} height={100} />
</Logo>
<Container data-testid="main-slider-container">
<Navbar>
<Logo>
<img src={gameHubLogo} alt="Logotipo" width={100} height={100} />
</Logo>

<SearchBar />
<SearchBar />

<SignIn onClick={toggleDrawer(true)}>
<LuCircleEqual />
</SignIn>
</Navbar>
<SignIn onClick={toggleDrawer(true)}>
<LuCircleEqual />
</SignIn>
</Navbar>

<MainGame>
<h1>Cyberpunk 2077: Phantom Liberty</h1>
<p>
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.
</p>
</MainGame>
<MainGame>
<h1>Cyberpunk 2077: Phantom Liberty</h1>
<p>
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.
</p>
</MainGame>

<Drawer
sx={{ outline: 'none' }}
id="drawer-sidebar"
anchor={'right'}
open={isDrawerOpened}
onClose={toggleDrawer(false)}
<Drawer
sx={{ outline: 'none' }}
id="drawer-sidebar"
anchor={'right'}
open={isDrawerOpened}
onClose={toggleDrawer(false)}
>
<Box
sx={{ width: 250, height: '100%', backgroundColor: '#1c1e21', color: '#f5f5f5' }}
role="listbox"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
>
<Box
sx={{ width: 250, height: '100%', backgroundColor: '#1c1e21', color: '#f5f5f5' }}
role="listbox"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
>
{signed && user && (
<p
style={{
textAlign: 'center',
fontSize: '1.3rem',
marginTop: 20,
}}
>
Seja-bem vindo {user.name}
</p>
{signed && user && (
<p
style={{
textAlign: 'center',
fontSize: '1.3rem',
marginTop: 20,
}}
>
Seja-bem vindo {user.name}
</p>
)}

<List>
{signed && (
<ListItem disablePadding disableGutters sx={{ outline: 'none' }}>
<ListItemButton onClick={signOut}>
<ListItemIcon>{<MailIcon color="warning" />}</ListItemIcon>
<ListItemText primary={'Logout'} />
</ListItemButton>
</ListItem>
)}

<List>
{signed && (
<ListItem disablePadding disableGutters sx={{ outline: 'none' }}>
<ListItemButton onClick={signOut}>
<ListItemIcon>{<MailIcon color="warning" />}</ListItemIcon>
<ListItemText primary={'Logout'} />
{!signed && (
<Link to="/login" style={{ textDecoration: 'none', color: '#f5f5f5' }}>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon sx={{ color: '#f5f5f5', fontSize: '1.55rem' }}>{<BiSolidLogIn />}</ListItemIcon>
<ListItemText primary={'Fazer Login'} />
</ListItemButton>
</ListItem>
)}

{!signed && (
<Link to="/login" style={{ textDecoration: 'none', color: '#f5f5f5' }}>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon sx={{ color: '#f5f5f5', fontSize: '1.55rem' }}>{<BiSolidLogIn />}</ListItemIcon>
<ListItemText primary={'Fazer Login'} />
</ListItemButton>
</ListItem>
</Link>
)}
</Link>
)}

{!signed && (
<Link to="/register" style={{ textDecoration: 'none', color: '#f5f5f5' }}>
<ListItem disablePadding disableGutters sx={{ outline: 'none' }}>
<ListItemButton>
<ListItemIcon sx={{ color: '#f5f5f5', fontSize: '1.55rem' }}>{<AiOutlineUserAdd />}</ListItemIcon>
<ListItemText primary={'Cadastrar-se'} />
</ListItemButton>
</ListItem>
</Link>
)}
{!signed && (
<Link to="/register" style={{ textDecoration: 'none', color: '#f5f5f5' }}>
<ListItem disablePadding disableGutters sx={{ outline: 'none' }}>
<ListItemButton>
<ListItemIcon sx={{ color: '#f5f5f5', fontSize: '1.55rem' }}>{<AiOutlineUserAdd />}</ListItemIcon>
<ListItemText primary={'Cadastrar-se'} />
</ListItemButton>
</ListItem>
</Link>
)}

{signed && (
<Link to="/lists" style={{ textDecoration: 'none', color: '#f5f5f5' }}>
<ListItem disablePadding disableGutters sx={{ outline: 'none' }}>
<ListItemButton>
<ListItemIcon>{<MailIcon color="info" />}</ListItemIcon>
<ListItemText primary={'Minhas listas'} />
</ListItemButton>
</ListItem>
</Link>
)}
</List>
</Box>
</Drawer>
</Container>
</>
{signed && (
<Link to="/lists" style={{ textDecoration: 'none', color: '#f5f5f5' }}>
<ListItem disablePadding disableGutters sx={{ outline: 'none' }}>
<ListItemButton>
<ListItemIcon>{<MailIcon color="info" />}</ListItemIcon>
<ListItemText primary={'Minhas listas'} />
</ListItemButton>
</ListItem>
</Link>
)}
</List>
</Box>
</Drawer>
</Container>
);
}
64 changes: 60 additions & 4 deletions src/mocks/handlers.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import { http, HttpResponse } from 'msw';



const getMostPopularGames = http.get('http://localhost:3003/api/games/most-popular', ({ request }) => {

Check failure on line 3 in src/mocks/handlers.ts

View workflow job for this annotation

GitHub Actions / build-app-react

'request' is declared but its value is never read.
// console.log('Request INTERCEPTADA pelo MWS: http://localhost:3003/api/games/most-popular');
const mockedGames = [{
"id": 1020,
"cover": {
Expand Down Expand Up @@ -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 }) => {

Check failure on line 35 in src/mocks/handlers.ts

View workflow job for this annotation

GitHub Actions / build-app-react

'request' is declared but its value is never read.
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 }) => {

Check failure on line 89 in src/mocks/handlers.ts

View workflow job for this annotation

GitHub Actions / build-app-react

'request' is declared but its value is never read.
return new HttpResponse(null, { status: 200 })
});

export const handlers = [
getMostPopularGames
getMostPopularGames,
getGameById,
deleteListById
];
107 changes: 107 additions & 0 deletions src/tests/components/List.test.tsx
Original file line number Diff line number Diff line change
@@ -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(<List id={listId} description={description} gamesList={gamesList} />);

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(<List id={listId} description={description} gamesList={gamesList} />);

const deleteListButton = screen.getByTestId('delete-list-button');

fireEvent.click(deleteListButton);

expect(deleteListButton).toBeInTheDocument();
});
});
14 changes: 14 additions & 0 deletions src/tests/components/MainSlider.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { describe, it, expect, vi } from 'vitest';

Check failure on line 1 in src/tests/components/MainSlider.test.tsx

View workflow job for this annotation

GitHub Actions / build-app-react

'it' is declared but its value is never read.

Check failure on line 1 in src/tests/components/MainSlider.test.tsx

View workflow job for this annotation

GitHub Actions / build-app-react

'vi' is declared but its value is never read.
import '@testing-library/jest-dom';
import { fireEvent, render, screen } from '@testing-library/react';

Check failure on line 3 in src/tests/components/MainSlider.test.tsx

View workflow job for this annotation

GitHub Actions / build-app-react

'fireEvent' is declared but its value is never read.
import { MainSlider } from '../../components/MainSlider';

describe('MainSlider test suite', () => {
test('should render MainSlider component', async () => {
render(<MainSlider />);

const mainSliderContainer = screen.getByTestId('main-slider-container');

expect(mainSliderContainer).toBeInTheDocument();
});
});

0 comments on commit e69ffb9

Please sign in to comment.