jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move tabs

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-19 14:04:10 -07:00
commit 3122748bae
No known key found for this signature in database
GPG key ID: DDF6AF5B21B407D4
3 changed files with 118 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/components/QuizEditorAsyncConfig.test.tsx
View file

@ -280,7 +280,7 @@ describe('QuizEditor - Async Default Config Loading', () => {
defaultConfig: DEFAULT_GAME_CONFIG,
});
await user.click(screen.getByText('Game Settings'));
await user.click(screen.getByRole('button', { name: /Settings/i }));
await user.click(screen.getByText('Host Participates'));
rerender(

51
tests/components/QuizEditorConfig.test.tsx
View file

@ -48,11 +48,22 @@ describe('QuizEditor - Game Config Integration', () => {
vi.clearAllMocks();
});
const findTab = (name: 'Questions' | 'Settings') => {
const tabButtons = screen.getAllByRole('button');
return tabButtons.find(btn => {
const text = btn.textContent || '';
if (name === 'Questions') {
return text.includes('Questions') && !text.includes('Add');
}
return text.includes('Settings');
})!;
};
describe('config initialization', () => {
it('uses DEFAULT_GAME_CONFIG when quiz has no config', () => {
render(<QuizEditor {...defaultProps} />);
expect(screen.getByText('Game Settings')).toBeInTheDocument();
expect(findTab('Settings')).toBeInTheDocument();
});
it('uses quiz config when provided', async () => {
@ -67,7 +78,7 @@ describe('QuizEditor - Game Config Integration', () => {
render(<QuizEditor {...defaultProps} quiz={quizWithConfig} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
const getCheckbox = (labelText: string) => {
const label = screen.getByText(labelText);
@ -88,7 +99,7 @@ describe('QuizEditor - Game Config Integration', () => {
render(<QuizEditor {...defaultProps} defaultConfig={customDefault} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
const getCheckbox = (labelText: string) => {
const label = screen.getByText(labelText);
@ -116,7 +127,7 @@ describe('QuizEditor - Game Config Integration', () => {
render(<QuizEditor {...defaultProps} quiz={quizWithConfig} defaultConfig={customDefault} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
const getCheckbox = (labelText: string) => {
const label = screen.getByText(labelText);
@ -130,31 +141,32 @@ describe('QuizEditor - Game Config Integration', () => {
});
describe('config panel interactions', () => {
it('renders collapsed Game Settings by default (compact mode)', () => {
it('shows Questions tab by default', () => {
render(<QuizEditor {...defaultProps} />);
expect(screen.getByText('Game Settings')).toBeInTheDocument();
expect(findTab('Questions')).toBeInTheDocument();
expect(findTab('Settings')).toBeInTheDocument();
expect(screen.queryByText('Shuffle Questions')).not.toBeInTheDocument();
});
it('expands config panel when Game Settings is clicked', async () => {
it('shows config panel when Settings tab is clicked', async () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
expect(screen.getByText('Shuffle Questions')).toBeInTheDocument();
expect(screen.getByText('Host Participates')).toBeInTheDocument();
});
it('collapses config panel when Game Settings is clicked again', async () => {
it('switches back to Questions tab when clicked', async () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
expect(screen.getByText('Shuffle Questions')).toBeInTheDocument();
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Questions'));
expect(screen.queryByText('Shuffle Questions')).not.toBeInTheDocument();
});
@ -162,7 +174,7 @@ describe('QuizEditor - Game Config Integration', () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
await user.click(screen.getByText('Shuffle Questions'));
expect(mockOnConfigChange).toHaveBeenCalledWith({
@ -175,7 +187,7 @@ describe('QuizEditor - Game Config Integration', () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
await user.click(screen.getByText('Shuffle Questions'));
await user.click(screen.getByText('Shuffle Answers'));
@ -203,7 +215,7 @@ describe('QuizEditor - Game Config Integration', () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
await user.click(screen.getByText('Shuffle Questions'));
await user.click(screen.getByText(/Start Game/));
@ -278,7 +290,7 @@ describe('QuizEditor - Game Config Integration', () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
await user.click(screen.getByText('Shuffle Questions'));
await user.click(screen.getByText('Test Quiz'));
@ -303,9 +315,10 @@ describe('QuizEditor - Game Config Integration', () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
await user.click(screen.getByText('Host Participates'));
await user.click(findTab('Questions'));
await user.click(screen.getByText('Add Question'));
expect(mockOnConfigChange).toHaveBeenCalledWith(
@ -359,7 +372,7 @@ describe('QuizEditor - Game Config Integration', () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} onConfigChange={undefined} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
await user.click(screen.getByText('Shuffle Questions'));
await user.click(screen.getByText(/Start Game/));
@ -397,7 +410,7 @@ describe('QuizEditor - Game Config Integration', () => {
const user = userEvent.setup();
render(<QuizEditor {...defaultProps} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
await user.click(screen.getByText('Shuffle Questions'));
expect(mockOnConfigChange).toHaveBeenCalledTimes(1);
@ -411,7 +424,7 @@ describe('QuizEditor - Game Config Integration', () => {
render(<QuizEditor {...defaultProps} quiz={quizWithStreak} />);
await user.click(screen.getByText('Game Settings'));
await user.click(findTab('Settings'));
const thresholdInput = screen.getByDisplayValue('3');
await user.clear(thresholdInput);