pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'chore/cleanup-frontpage' into 'main'

Browse Source 
chore: cleaned up front page

See merge request ics/sp/2025/n25b/pepperplus-ui!56
This commit was merged in pull request #56.
This commit is contained in:
Kasper Marinus
2026-01-30 20:04:35 +00:00
parent 268199a825 f626a6571a
commit 4dcbe78abf
11 changed files with 181 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
test/pages/connectedRobots/ConnectedRobots.test.tsx
View File

@@ -1,107 +0,0 @@
// This program has been developed by students from the bachelor Computer Science at Utrecht
// University within the Software Project course.
// © Copyright Utrecht University (Department of Information and Computing Sciences)
import { render, screen, act, cleanup, waitFor } from '@testing-library/react';
import ConnectedRobots from '../../../src/pages/ConnectedRobots/ConnectedRobots';
// Mock event source
const mockInstances: MockEventSource[] = [];
class MockEventSource {
url: string;
onmessage: ((event: MessageEvent) => void) | null = null;
closed = false;
constructor(url: string) {
this.url = url;
mockInstances.push(this);
}
sendMessage(data: string) {
// Trigger whatever the component listens to
this.onmessage?.({ data } as MessageEvent);
}
close() {
this.closed = true;
}
}
// mock event source generation with fake function that returns our fake mock source
beforeAll(() => {
// Cast globalThis to a type exposing EventSource and assign a mocked constructor.
(globalThis as unknown as { EventSource?: typeof EventSource }).EventSource =
jest.fn((url: string) => new MockEventSource(url)) as unknown as typeof EventSource;
});
// clean after tests
afterEach(() => {
cleanup();
jest.restoreAllMocks();
mockInstances.length = 0;
});
describe('ConnectedRobots', () => {
test('renders initial state correctly', () => {
render(<ConnectedRobots />);
// Check initial texts (before connection)
expect(screen.getByText('Is robot currently connected?')).toBeInTheDocument();
expect(screen.getByText(/Robot is currently:\s*checking/i)).toBeInTheDocument();
expect(
screen.getByText(/If checking continues, make sure CB is properly loaded/i)
).toBeInTheDocument();
});
test('updates to connected when message data is true', async () => {
render(<ConnectedRobots />);
const eventSource = mockInstances[0];
expect(eventSource).toBeDefined();
// Check state after getting 'true' message
await act(async () => {
eventSource.sendMessage('true');
});
await waitFor(() => {
expect(screen.getByText(/connected! 🟢/i)).toBeInTheDocument();
});
});
test('updates to not connected when message data is false', async () => {
render(<ConnectedRobots />);
const eventSource = mockInstances[0];
// Check statew after getting 'false' message
await act(async () => {
eventSource.sendMessage('false');
});
await waitFor(() => {
expect(screen.getByText(/not connected.*🔴/i)).toBeInTheDocument();
});
});
test('handles invalid JSON gracefully', async () => {
const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
render(<ConnectedRobots />);
const eventSource = mockInstances[0];
await act(async () => {
eventSource.sendMessage('not-json');
});
expect(logSpy).toHaveBeenCalledWith(
'Ping message not in correct format:',
'not-json'
);
});
test('closes EventSource on unmount', () => {
render(<ConnectedRobots />);
const eventSource = mockInstances[0];
const closeSpy = jest.spyOn(eventSource, 'close');
cleanup();
expect(closeSpy).toHaveBeenCalled();
expect(eventSource.closed).toBe(true);
});
});

171
test/pages/robot/Robot.test.tsx
View File

@@ -1,171 +0,0 @@
// This program has been developed by students from the bachelor Computer Science at Utrecht
// University within the Software Project course.
// © Copyright Utrecht University (Department of Information and Computing Sciences)
import { render, screen, act, cleanup, fireEvent } from '@testing-library/react';
import Robot from '../../../src/pages/Robot/Robot';
import { API_BASE_URL } from '../../../src/config/api.ts';
// Mock EventSource
const mockInstances: MockEventSource[] = [];
class MockEventSource {
url: string;
onmessage: ((event: MessageEvent) => void) | null = null;
closed = false;
constructor(url: string) {
this.url = url;
mockInstances.push(this);
}
sendMessage(data: string) {
this.onmessage?.({ data } as MessageEvent);
}
close() {
this.closed = true;
}
}
// Mock global EventSource
beforeAll(() => {
(globalThis as any).EventSource = jest.fn((url: string) => new MockEventSource(url));
});
// Mock fetch
beforeEach(() => {
globalThis.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ reply: 'ok' }),
})
) as jest.Mock;
});
// Cleanup
afterEach(() => {
cleanup();
jest.restoreAllMocks();
mockInstances.length = 0;
});
describe('Robot', () => {
test('renders initial state', () => {
render(<Robot />);
expect(screen.getByText('Robot interaction')).toBeInTheDocument();
expect(screen.getByText('Force robot speech')).toBeInTheDocument();
expect(screen.getByText('Listening 🔴')).toBeInTheDocument();
expect(screen.getByPlaceholderText('Enter a message')).toBeInTheDocument();
});
test('sends message via button', async () => {
render(<Robot />);
const input = screen.getByPlaceholderText('Enter a message');
const button = screen.getByText('Speak');
fireEvent.change(input, { target: { value: 'Hello' } });
await act(async () => fireEvent.click(button));
expect(globalThis.fetch).toHaveBeenCalledWith(
`${API_BASE_URL}/message`,
expect.objectContaining({
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: 'Hello' }),
})
);
});
test('sends message via Enter key', async () => {
render(<Robot />);
const input = screen.getByPlaceholderText('Enter a message');
fireEvent.change(input, { target: { value: 'Hi Enter' } });
await act(async () =>
fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 })
);
expect(globalThis.fetch).toHaveBeenCalledWith(
`${API_BASE_URL}/message`,
expect.objectContaining({
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: 'Hi Enter' }),
})
);
expect((input as HTMLInputElement).value).toBe('');
});
test('handles fetch errors', async () => {
globalThis.fetch = jest.fn(() => Promise.reject('Network error')) as jest.Mock;
const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Robot />);
const input = screen.getByPlaceholderText('Enter a message');
const button = screen.getByText('Speak');
fireEvent.change(input, { target: { value: 'Error test' } });
await act(async () => fireEvent.click(button));
expect(consoleSpy).toHaveBeenCalledWith(
'Error sending message: ',
'Network error'
);
});
test('updates conversation on SSE', async () => {
render(<Robot />);
const eventSource = mockInstances[0];
await act(async () => {
eventSource.sendMessage(JSON.stringify({ voice_active: true }));
eventSource.sendMessage(JSON.stringify({ speech: 'User says hi' }));
eventSource.sendMessage(JSON.stringify({ llm_response: 'Assistant replies' }));
});
expect(screen.getByText('Listening 🟢')).toBeInTheDocument();
expect(screen.getByText('User says hi')).toBeInTheDocument();
expect(screen.getByText('Assistant replies')).toBeInTheDocument();
});
test('handles invalid SSE JSON', async () => {
const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
render(<Robot />);
const eventSource = mockInstances[0];
await act(async () => eventSource.sendMessage('bad-json'));
expect(logSpy).toHaveBeenCalledWith('Unparsable SSE message:', 'bad-json');
});
test('resets conversation with Reset button', async () => {
render(<Robot />);
const eventSource = mockInstances[0];
await act(async () =>
eventSource.sendMessage(JSON.stringify({ speech: 'Hello' }))
);
expect(screen.getByText('Hello')).toBeInTheDocument();
fireEvent.click(screen.getByText('Reset'));
expect(screen.queryByText('Hello')).not.toBeInTheDocument();
});
test('toggles conversationIndex with Stop/Start button', () => {
render(<Robot />);
const stopButton = screen.getByText('Stop');
fireEvent.click(stopButton);
expect(screen.getByText('Start')).toBeInTheDocument();
fireEvent.click(screen.getByText('Start'));
expect(screen.getByText('Stop')).toBeInTheDocument();
});
test('closes EventSource on unmount', () => {
const { unmount } = render(<Robot />);
const eventSource = mockInstances[0];
const closeSpy = jest.spyOn(eventSource, 'close');
unmount();
expect(closeSpy).toHaveBeenCalled();
expect(eventSource.closed).toBe(true);
});
});