Nantes Université

Skip to content
Extraits de code Groupes Projets
Valider f6b10c8c rédigé par Malo Grall's avatar Malo Grall
Parcourir les fichiers

Added instanciated client + Mock client

parent 8a61d640
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Pipeline #56293 réussi
import React from 'react'
import Home from './Home/Home'
import Client from './utils/Client'
function App () {
const client = new Client()
return (
<Home client={client} />
)
}
export default App
import React from 'react' import React from 'react'
import { render, screen } from '@testing-library/react' import { render, screen } from '@testing-library/react'
import Home from './Home' import Home from './Home'
import Client from '../utils/Client'
// Create mock for Client
jest.mock('../utils/Client')
test('renders learn react link', () => { test('renders learn react link', () => {
render(<Home />) const client = new Client()
render(<Home client={client} />)
const linkElement = screen.getByText(/learn react/i) const linkElement = screen.getByText(/learn react/i)
expect(linkElement).toBeInTheDocument() expect(linkElement).toBeInTheDocument()
}) })
...@@ -2,8 +2,12 @@ import React from 'react' ...@@ -2,8 +2,12 @@ import React from 'react'
import { Container } from 'react-bootstrap' import { Container } from 'react-bootstrap'
import { GameState } from '../utils/types' import { GameState } from '../utils/types'
import GameLobby from '../components/GameLobby' import GameLobby from '../components/GameLobby'
import IClient from '../utils/IClient'
const Home = () => { interface Props {
client: IClient
}
const Home: React.FC<Props> = ({ client }) => {
return ( return (
<Container className='flex-column align-items-center' style={{ height: '100%' }}> <Container className='flex-column align-items-center' style={{ height: '100%' }}>
<div className='d-flex justify-content-center' style={{ width: '100%', height: '33%' }}> <div className='d-flex justify-content-center' style={{ width: '100%', height: '33%' }}>
...@@ -14,6 +18,7 @@ const Home = () => { ...@@ -14,6 +18,7 @@ const Home = () => {
<GameLobby <GameLobby
status={GameState.WAITING} status={GameState.WAITING}
nbPlayers={0} nbPlayers={0}
client={client}
/> />
</div> </div>
</Container> </Container>
......
...@@ -11,13 +11,13 @@ export default { ...@@ -11,13 +11,13 @@ export default {
status: { status: {
options: [GameState.WAITING, GameState.FULL, GameState.STARTED] options: [GameState.WAITING, GameState.FULL, GameState.STARTED]
} }
},
args: {
status: GameState.FULL,
nbPlayers: 0
} }
} as ComponentMeta<typeof GameLobby> } as ComponentMeta<typeof GameLobby>
const Template: ComponentStory<typeof GameLobby> = (args) => <GameLobby {...args} /> const Template: ComponentStory<typeof GameLobby> = (args) => <GameLobby {...args} />
export const Default = Template.bind({}) export const Default = Template.bind({})
Default.args = {
status: GameState.FULL,
nbPlayers: 10
}
import React, { useState } from 'react' import React, { useState } from 'react'
import { Badge, Button, Card } from 'react-bootstrap' import { Badge, Button, Card, Form } from 'react-bootstrap'
import IClient from '../utils/IClient'
import { GameState } from '../utils/types' import { GameState } from '../utils/types'
interface Props { interface Props {
status: GameState status: GameState
nbPlayers: number nbPlayers: number
client: IClient
} }
const GameLobby: React.FC<Props> = ({ status, nbPlayers }) => { const GameLobby: React.FC<Props> = ({ status, nbPlayers, client }) => {
const [joinForm, setJoinForm] = useState(false) const [joinForm, setJoinForm] = useState(false)
const [username, setUsername] = useState('')
// Join a game
const submitJoinForm = () => {
client.joinGame(username)
}
return ( return (
<Card className='col-md-4'> <Card className='col-md-4'>
<Card.Title className='d-flex justify-content-between px-2 pt-1'><div>7 Wonders Game</div><Badge>{status}</Badge></Card.Title> <Card.Title className='d-flex justify-content-between px-2 pt-1'><div>7 Wonders Game</div><Badge>{status}</Badge></Card.Title>
<Card.Body> <Card.Body>
<div><strong>{nbPlayers}</strong> players</div>
{ {
joinForm joinForm
? ( ? (
<div> <Form>
<Form.Group className="mb-3" controlId="username">
</div> <Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</Form.Group>
<div className='mt-2 d-flex justify-content-end'>
<Button variant="outline-primary" className='me-2' onClick={() => setJoinForm(false)}>Cancel</Button>
<Button variant="primary" onClick={submitJoinForm}>Join</Button>
</div>
</Form>
) )
: ( : (
<div className='mt-2 d-flex justify-content-end'> <div>
<Button variant="primary" onClick={() => setJoinForm(true)}>Join</Button> <div><strong>{nbPlayers}</strong> players</div>
<div className='mt-2 d-flex justify-content-end'>
<Button variant="primary" onClick={() => setJoinForm(true)}>Join</Button>
</div>
</div> </div>
) )
} }
......
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/css/bootstrap.min.css'
import Home from './Home/Home'
import reportWebVitals from './reportWebVitals' import reportWebVitals from './reportWebVitals'
import App from './App'
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<Home /> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
) )
......
import { Client } from './Client' import Client from './Client'
describe('class Client', () => { describe('class Client', () => {
describe('construct', () => { describe('construct', () => {
......
import { IClient } from './IClient' import IClient from './IClient'
import { Action, Card, GameState } from './types' import { Action, Card, GameState } from './types'
export class Client implements IClient { export default class Client implements IClient {
refreshGameState (): [GameState, number] { refreshGameState (): [GameState, number] {
// TODO // TODO
return [GameState.WAITING, 0] return [GameState.WAITING, 0]
......
import { ClientMiddleware } from './ClientMiddleware' import ClientMiddleware from './ClientMiddleware'
describe('class Client', () => { describe('class Client', () => {
describe('construct', () => { describe('construct', () => {
......
import { IClient } from './IClient' import IClient from './IClient'
import { IClientMiddleware } from './IClientMiddleware' import IClientMiddleware from './IClientMiddleware'
import { GameState, Action, Card } from './types' import { GameState, Action, Card } from './types'
export class ClientMiddleware implements IClientMiddleware { export default class ClientMiddleware implements IClientMiddleware {
constructor (client: IClient) { constructor (client: IClient) {
} }
......
import { Action, Card, GameState, Resource } from './types' import { Action, Card, GameState, Resource } from './types'
export interface IClient { export default interface IClient {
/** /**
* Refresh local lobby * Refresh local lobby
* @returns Status of the Game, and number of connected players * @returns Status of the Game, and number of connected players
......
import { Action, Card, GameState, Resource } from './types' import { Action, Card, GameState, Resource } from './types'
export interface IClientMiddleware { export default interface IClientMiddleware {
joinGame(userName: string): void joinGame(userName: string): void
getGameState (): [GameState, number] getGameState (): [GameState, number]
......
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter