Add presenter role for game flow control
This commit is contained in:
parent
99977bc8e6
commit
9ef8f7343d
10 changed files with 1412 additions and 17 deletions
|
|
@ -187,7 +187,10 @@ describe('Lobby', () => {
|
|||
|
||||
describe('client view', () => {
|
||||
it('shows waiting message for client', () => {
|
||||
render(<Lobby {...defaultProps} role="CLIENT" />);
|
||||
const players = [
|
||||
{ id: 'player-1', name: 'My Name', score: 0, avatarSeed: 0.5 },
|
||||
];
|
||||
render(<Lobby {...defaultProps} role="CLIENT" players={players} currentPlayerId="player-1" />);
|
||||
|
||||
expect(screen.getByText('Waiting for the host to start...')).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -264,4 +267,278 @@ describe('Lobby', () => {
|
|||
expect(screen.queryByText('Waiting for players to join...')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('presenter feature - host view', () => {
|
||||
const playersWithPresenter = [
|
||||
{ id: 'player-1', name: 'Alice', score: 0, avatarSeed: 0.1 },
|
||||
{ id: 'player-2', name: 'Bob', score: 0, avatarSeed: 0.2 },
|
||||
];
|
||||
|
||||
it('shows presenter selection hint when host does not participate', () => {
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={playersWithPresenter}
|
||||
hostParticipates={false}
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Click a player to make them presenter/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show presenter selection hint when host participates', () => {
|
||||
const players = [
|
||||
{ id: 'host', name: 'Host Player', score: 0, avatarSeed: 0.99 },
|
||||
...playersWithPresenter,
|
||||
];
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={players}
|
||||
hostParticipates={true}
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByText(/Click a player to make them presenter/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows PRESENTER badge on the presenter player', () => {
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={playersWithPresenter}
|
||||
hostParticipates={false}
|
||||
presenterId="player-1"
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('PRESENTER')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onSetPresenter when clicking a player', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSetPresenter = vi.fn();
|
||||
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={playersWithPresenter}
|
||||
hostParticipates={false}
|
||||
onSetPresenter={onSetPresenter}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Bob'));
|
||||
|
||||
expect(onSetPresenter).toHaveBeenCalledWith('player-2');
|
||||
});
|
||||
|
||||
it('does not call onSetPresenter when clicking player if host participates', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSetPresenter = vi.fn();
|
||||
const players = [
|
||||
{ id: 'host', name: 'Host Player', score: 0, avatarSeed: 0.99 },
|
||||
...playersWithPresenter,
|
||||
];
|
||||
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={players}
|
||||
hostParticipates={true}
|
||||
onSetPresenter={onSetPresenter}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Alice'));
|
||||
|
||||
expect(onSetPresenter).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does not show presenter hint when no players have joined', () => {
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={[]}
|
||||
hostParticipates={false}
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByText(/Click a player to make them presenter/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies visual highlight to presenter player', () => {
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={playersWithPresenter}
|
||||
hostParticipates={false}
|
||||
presenterId="player-1"
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
// The presenter badge exists, confirming visual distinction
|
||||
const presenterBadge = screen.getByText('PRESENTER');
|
||||
expect(presenterBadge).toHaveClass('bg-yellow-400');
|
||||
});
|
||||
});
|
||||
|
||||
describe('presenter feature - client view', () => {
|
||||
it('shows presenter crown and badge when current player is presenter', () => {
|
||||
const players = [
|
||||
{ id: 'player-1', name: 'My Name', score: 0, avatarSeed: 0.5 },
|
||||
];
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
players={players}
|
||||
currentPlayerId="player-1"
|
||||
presenterId="player-1"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('You are the Presenter')).toBeInTheDocument();
|
||||
expect(screen.getByText('You can advance screens during the game')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows waiting message when not presenter', () => {
|
||||
const players = [
|
||||
{ id: 'player-1', name: 'My Name', score: 0, avatarSeed: 0.5 },
|
||||
{ id: 'player-2', name: 'Other', score: 0, avatarSeed: 0.6 },
|
||||
];
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
players={players}
|
||||
currentPlayerId="player-1"
|
||||
presenterId="player-2"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByText('You are the Presenter')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('Waiting for the host to start...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows waiting message when no presenter assigned', () => {
|
||||
const players = [
|
||||
{ id: 'player-1', name: 'My Name', score: 0, avatarSeed: 0.5 },
|
||||
];
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
players={players}
|
||||
currentPlayerId="player-1"
|
||||
presenterId={null}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByText('You are the Presenter')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('Waiting for the host to start...')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('presenter feature - edge cases', () => {
|
||||
it('handles undefined presenterId gracefully', () => {
|
||||
const players = [
|
||||
{ id: 'player-1', name: 'Alice', score: 0, avatarSeed: 0.1 },
|
||||
];
|
||||
|
||||
// Should not throw
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={players}
|
||||
hostParticipates={false}
|
||||
presenterId={undefined}
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByText('PRESENTER')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles onSetPresenter being undefined', async () => {
|
||||
const user = userEvent.setup();
|
||||
const players = [
|
||||
{ id: 'player-1', name: 'Alice', score: 0, avatarSeed: 0.1 },
|
||||
];
|
||||
|
||||
// Should not throw when clicking
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={players}
|
||||
hostParticipates={false}
|
||||
/>
|
||||
);
|
||||
|
||||
// Click should not cause error
|
||||
await user.click(screen.getByText('Alice'));
|
||||
// No assertion needed - just testing it doesn't crash
|
||||
});
|
||||
|
||||
it('presenter badge only appears once even with multiple players', () => {
|
||||
const players = [
|
||||
{ id: 'player-1', name: 'Alice', score: 0, avatarSeed: 0.1 },
|
||||
{ id: 'player-2', name: 'Bob', score: 0, avatarSeed: 0.2 },
|
||||
{ id: 'player-3', name: 'Charlie', score: 0, avatarSeed: 0.3 },
|
||||
];
|
||||
|
||||
render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={players}
|
||||
hostParticipates={false}
|
||||
presenterId="player-2"
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const presenterBadges = screen.getAllByText('PRESENTER');
|
||||
expect(presenterBadges).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('updates presenter display when presenterId changes', () => {
|
||||
const players = [
|
||||
{ id: 'player-1', name: 'Alice', score: 0, avatarSeed: 0.1 },
|
||||
{ id: 'player-2', name: 'Bob', score: 0, avatarSeed: 0.2 },
|
||||
];
|
||||
|
||||
const { rerender } = render(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={players}
|
||||
hostParticipates={false}
|
||||
presenterId="player-1"
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
// Initially Alice is presenter
|
||||
expect(screen.getByText('PRESENTER')).toBeInTheDocument();
|
||||
|
||||
// Change presenter to Bob
|
||||
rerender(
|
||||
<Lobby
|
||||
{...defaultProps}
|
||||
players={players}
|
||||
hostParticipates={false}
|
||||
presenterId="player-2"
|
||||
onSetPresenter={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
// Still exactly one presenter badge
|
||||
const presenterBadges = screen.getAllByText('PRESENTER');
|
||||
expect(presenterBadges).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
283
tests/components/RevealScreen.test.tsx
Normal file
283
tests/components/RevealScreen.test.tsx
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { RevealScreen } from '../../components/RevealScreen';
|
||||
|
||||
vi.mock('framer-motion', () => ({
|
||||
motion: {
|
||||
div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <div {...props}>{children}</div>,
|
||||
button: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <button {...props}>{children}</button>,
|
||||
p: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <p {...props}>{children}</p>,
|
||||
},
|
||||
AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
|
||||
useSpring: () => ({ set: vi.fn(), on: () => vi.fn() }),
|
||||
useTransform: () => ({ on: () => vi.fn() }),
|
||||
}));
|
||||
|
||||
vi.mock('canvas-confetti', () => ({
|
||||
default: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('lucide-react', async () => {
|
||||
const React = await import('react');
|
||||
const createMockIcon = (name: string) => {
|
||||
return function MockIcon(props: { size?: number; fill?: string; className?: string; strokeWidth?: number }) {
|
||||
return React.createElement('svg', {
|
||||
'data-testid': `icon-${name}`,
|
||||
width: props.size || 24,
|
||||
height: props.size || 24,
|
||||
className: props.className
|
||||
});
|
||||
};
|
||||
};
|
||||
return {
|
||||
Check: createMockIcon('check'),
|
||||
X: createMockIcon('x'),
|
||||
Flame: createMockIcon('flame'),
|
||||
ChevronRight: createMockIcon('chevron-right'),
|
||||
Triangle: createMockIcon('triangle'),
|
||||
Diamond: createMockIcon('diamond'),
|
||||
Circle: createMockIcon('circle'),
|
||||
Square: createMockIcon('square'),
|
||||
};
|
||||
});
|
||||
|
||||
describe('RevealScreen', () => {
|
||||
const correctOption = {
|
||||
text: 'Correct Answer',
|
||||
isCorrect: true,
|
||||
shape: 'circle' as const,
|
||||
color: 'green' as const,
|
||||
reason: 'This is why it is correct',
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
isCorrect: true,
|
||||
pointsEarned: 100,
|
||||
newScore: 500,
|
||||
streak: 3,
|
||||
correctOption,
|
||||
selectedOption: correctOption,
|
||||
role: 'CLIENT' as const,
|
||||
onNext: vi.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('host view', () => {
|
||||
it('shows Continue to Scoreboard button for host', () => {
|
||||
render(<RevealScreen {...defaultProps} role="HOST" onNext={vi.fn()} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Continue to Scoreboard/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onNext when host clicks Continue', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onNext = vi.fn();
|
||||
|
||||
render(<RevealScreen {...defaultProps} role="HOST" onNext={onNext} />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Continue to Scoreboard/i }));
|
||||
|
||||
expect(onNext).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does not show button when onNext is undefined for host', () => {
|
||||
render(<RevealScreen {...defaultProps} role="HOST" onNext={undefined} />);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /Continue to Scoreboard/i })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('client view - non-presenter', () => {
|
||||
it('does not show advance button for regular client', () => {
|
||||
render(<RevealScreen {...defaultProps} role="CLIENT" />);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /Continue to Scoreboard/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows correct/incorrect feedback', () => {
|
||||
render(<RevealScreen {...defaultProps} role="CLIENT" isCorrect={true} />);
|
||||
|
||||
expect(screen.getByText('Correct!')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows incorrect feedback when wrong', () => {
|
||||
const wrongOption = { ...correctOption, isCorrect: false };
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isCorrect={false}
|
||||
selectedOption={wrongOption}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Incorrect')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('presenter controls', () => {
|
||||
it('shows Continue button for presenter client', () => {
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Continue to Scoreboard/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onPresenterAdvance when presenter clicks Continue', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onPresenterAdvance = vi.fn();
|
||||
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={onPresenterAdvance}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Continue to Scoreboard/i }));
|
||||
|
||||
expect(onPresenterAdvance).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does not show button when isPresenter is true but onPresenterAdvance is undefined', () => {
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isPresenter={true}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /Continue to Scoreboard/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('presenter button is fixed at bottom of screen', () => {
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /Continue to Scoreboard/i });
|
||||
expect(button).toHaveClass('fixed');
|
||||
});
|
||||
});
|
||||
|
||||
describe('presenter edge cases', () => {
|
||||
it('handles isPresenter false gracefully', () => {
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isPresenter={false}
|
||||
onPresenterAdvance={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /Continue to Scoreboard/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles both isPresenter and onPresenterAdvance being undefined', () => {
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /Continue to Scoreboard/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('presenter sees button on incorrect answer screen too', () => {
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isCorrect={false}
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Continue to Scoreboard/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('adds padding to incorrect screen when presenter', () => {
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isCorrect={false}
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const incorrectContainer = document.querySelector('.absolute.bottom-0');
|
||||
expect(incorrectContainer).toHaveClass('pb-20');
|
||||
});
|
||||
|
||||
it('does not add padding when not presenter on incorrect screen', () => {
|
||||
render(
|
||||
<RevealScreen
|
||||
{...defaultProps}
|
||||
role="CLIENT"
|
||||
isCorrect={false}
|
||||
isPresenter={false}
|
||||
/>
|
||||
);
|
||||
|
||||
const incorrectContainer = document.querySelector('.absolute.bottom-0');
|
||||
expect(incorrectContainer).not.toHaveClass('pb-20');
|
||||
});
|
||||
});
|
||||
|
||||
describe('display elements', () => {
|
||||
it('shows points earned on correct answer', () => {
|
||||
render(<RevealScreen {...defaultProps} role="CLIENT" isCorrect={true} pointsEarned={150} />);
|
||||
|
||||
expect(screen.getByText('+150')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows streak indicator when streak > 1', () => {
|
||||
render(<RevealScreen {...defaultProps} role="CLIENT" isCorrect={true} streak={5} />);
|
||||
|
||||
expect(screen.getByText(/Answer Streak: 5/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show streak indicator when streak is 1', () => {
|
||||
render(<RevealScreen {...defaultProps} role="CLIENT" isCorrect={true} streak={1} />);
|
||||
|
||||
expect(screen.queryByText(/Answer Streak/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows correct answer on host view', () => {
|
||||
render(<RevealScreen {...defaultProps} role="HOST" />);
|
||||
|
||||
expect(screen.getByText('The correct answer is')).toBeInTheDocument();
|
||||
expect(screen.getByText(correctOption.text)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows reason on host view when available', () => {
|
||||
render(<RevealScreen {...defaultProps} role="HOST" />);
|
||||
|
||||
expect(screen.getByText(correctOption.reason!)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
242
tests/components/Scoreboard.test.tsx
Normal file
242
tests/components/Scoreboard.test.tsx
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { Scoreboard } from '../../components/Scoreboard';
|
||||
import { Player } from '../../types';
|
||||
|
||||
vi.mock('framer-motion', () => ({
|
||||
motion: {
|
||||
div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <div {...props}>{children}</div>,
|
||||
},
|
||||
AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
|
||||
useSpring: () => ({ set: vi.fn(), on: () => vi.fn() }),
|
||||
useTransform: () => ({ on: () => vi.fn() }),
|
||||
LayoutGroup: ({ children }: React.PropsWithChildren) => <>{children}</>,
|
||||
}));
|
||||
|
||||
const createPlayer = (overrides: Partial<Player> = {}): Player => ({
|
||||
id: 'player-1',
|
||||
name: 'Test Player',
|
||||
score: 100,
|
||||
previousScore: 50,
|
||||
streak: 2,
|
||||
lastAnswerCorrect: true,
|
||||
selectedShape: 'circle',
|
||||
pointsBreakdown: {
|
||||
basePoints: 80,
|
||||
streakBonus: 10,
|
||||
comebackBonus: 0,
|
||||
firstCorrectBonus: 0,
|
||||
penalty: 0,
|
||||
total: 90,
|
||||
},
|
||||
isBot: false,
|
||||
avatarSeed: 0.5,
|
||||
color: '#ff0000',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
describe('Scoreboard', () => {
|
||||
const defaultProps = {
|
||||
players: [
|
||||
createPlayer({ id: 'player-1', name: 'Alice', score: 200 }),
|
||||
createPlayer({ id: 'player-2', name: 'Bob', score: 150 }),
|
||||
],
|
||||
onNext: vi.fn(),
|
||||
isHost: true,
|
||||
currentPlayerId: 'player-1',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('host controls', () => {
|
||||
it('shows Next button for host', () => {
|
||||
render(<Scoreboard {...defaultProps} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Next/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onNext when host clicks Next', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Scoreboard {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Next/i }));
|
||||
|
||||
expect(defaultProps.onNext).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('shows waiting message for non-host non-presenter', () => {
|
||||
render(<Scoreboard {...defaultProps} isHost={false} currentPlayerId="player-2" />);
|
||||
|
||||
expect(screen.getByText('Waiting for host...')).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: /Next/i })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('presenter controls', () => {
|
||||
it('shows Next button for presenter (non-host)', () => {
|
||||
render(
|
||||
<Scoreboard
|
||||
{...defaultProps}
|
||||
isHost={false}
|
||||
currentPlayerId="player-2"
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Next/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onPresenterAdvance when presenter clicks Next', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onPresenterAdvance = vi.fn();
|
||||
|
||||
render(
|
||||
<Scoreboard
|
||||
{...defaultProps}
|
||||
isHost={false}
|
||||
currentPlayerId="player-2"
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={onPresenterAdvance}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Next/i }));
|
||||
|
||||
expect(onPresenterAdvance).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does not call onNext when presenter clicks (uses onPresenterAdvance)', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onNext = vi.fn();
|
||||
const onPresenterAdvance = vi.fn();
|
||||
|
||||
render(
|
||||
<Scoreboard
|
||||
{...defaultProps}
|
||||
onNext={onNext}
|
||||
isHost={false}
|
||||
currentPlayerId="player-2"
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={onPresenterAdvance}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Next/i }));
|
||||
|
||||
expect(onPresenterAdvance).toHaveBeenCalled();
|
||||
expect(onNext).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('host uses onNext, not onPresenterAdvance', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onNext = vi.fn();
|
||||
const onPresenterAdvance = vi.fn();
|
||||
|
||||
render(
|
||||
<Scoreboard
|
||||
{...defaultProps}
|
||||
onNext={onNext}
|
||||
isHost={true}
|
||||
isPresenter={false}
|
||||
onPresenterAdvance={onPresenterAdvance}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Next/i }));
|
||||
|
||||
expect(onNext).toHaveBeenCalled();
|
||||
expect(onPresenterAdvance).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('presenter edge cases', () => {
|
||||
it('shows waiting message when isPresenter is false', () => {
|
||||
render(
|
||||
<Scoreboard
|
||||
{...defaultProps}
|
||||
isHost={false}
|
||||
currentPlayerId="player-2"
|
||||
isPresenter={false}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Waiting for host...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows waiting message when isPresenter is undefined', () => {
|
||||
render(
|
||||
<Scoreboard
|
||||
{...defaultProps}
|
||||
isHost={false}
|
||||
currentPlayerId="player-2"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Waiting for host...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles missing onPresenterAdvance gracefully', async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<Scoreboard
|
||||
{...defaultProps}
|
||||
isHost={false}
|
||||
currentPlayerId="player-2"
|
||||
isPresenter={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /Next/i });
|
||||
await user.click(button);
|
||||
});
|
||||
|
||||
it('both host and presenter see button, but only host uses onNext', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onNext = vi.fn();
|
||||
const onPresenterAdvance = vi.fn();
|
||||
|
||||
render(
|
||||
<Scoreboard
|
||||
{...defaultProps}
|
||||
onNext={onNext}
|
||||
isHost={true}
|
||||
isPresenter={true}
|
||||
onPresenterAdvance={onPresenterAdvance}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Next/i }));
|
||||
|
||||
expect(onNext).toHaveBeenCalled();
|
||||
expect(onPresenterAdvance).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('display', () => {
|
||||
it('shows Scoreboard title', () => {
|
||||
render(<Scoreboard {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Scoreboard')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows player names', () => {
|
||||
render(<Scoreboard {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Alice (You)')).toBeInTheDocument();
|
||||
expect(screen.getByText('Bob')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('marks current player with (You) suffix', () => {
|
||||
render(<Scoreboard {...defaultProps} currentPlayerId="player-2" />);
|
||||
|
||||
expect(screen.getByText('Bob (You)')).toBeInTheDocument();
|
||||
expect(screen.getByText('Alice')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue